diff --git a/packages/wethegit-components-cli/package.json b/packages/wethegit-components-cli/package.json index e6d0f82d..92278a74 100644 --- a/packages/wethegit-components-cli/package.json +++ b/packages/wethegit-components-cli/package.json @@ -14,7 +14,7 @@ }, "scripts": { "build": "tsup", - "clean": "rm -rf .turbo node_modules dist", + "clean": "rm -rf node_modules dist", "dev": "tsup --watch", "lint": "eslint src/", "typecheck": "tsc --noEmit" diff --git a/packages/wethegit-components/package.json b/packages/wethegit-components/package.json index 0d5db98f..21ea4012 100644 --- a/packages/wethegit-components/package.json +++ b/packages/wethegit-components/package.json @@ -19,7 +19,7 @@ }, "scripts": { "build": "storybook build --docs", - "clean": "rm -rf .turbo node_modules dist storybook-static", + "clean": "rm -rf node_modules dist storybook-static", "dev": "storybook dev -p 6006", "lint": "eslint src/", "stylelint": "stylelint **/*.{css,scss}", @@ -27,8 +27,8 @@ "typecheck": "tsc --noEmit" }, "peerDependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.2", + "react-dom": "^18.0.2", "typescript": "5.1.6" }, "devDependencies": { @@ -42,14 +42,14 @@ "@storybook/react": "^7.5.3", "@storybook/react-vite": "^7.5.3", "@storybook/theming": "^7.5.3", - "@types/react": "^17.0.39", - "@types/react-dom": "^17.0.11", + "@types/react": "^18.2.37", + "@types/react-dom": "^18.2.15", "@vitejs/plugin-react": "^1.3.2", "eslint": "^8.15.0", "eslint-config-custom": "*", "eslint-plugin-storybook": "^0.6.15", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.2", + "react-dom": "^18.0.2", "sass": "^1.69.5", "serve": "^13.0.4", "storybook": "^7.5.3", diff --git a/packages/wethegit-components/src/components/navigation/components/overlay/overlay.module.scss b/packages/wethegit-components/src/components/navigation/components/overlay/overlay.module.scss index 73f5e3d5..204bb33a 100644 --- a/packages/wethegit-components/src/components/navigation/components/overlay/overlay.module.scss +++ b/packages/wethegit-components/src/components/navigation/components/overlay/overlay.module.scss @@ -15,9 +15,3 @@ opacity: 0.95; pointer-events: auto; } - -@media #{$medium-up} { - .overlay { - display: none; - } -} diff --git a/packages/wethegit-components/src/components/navigation/components/toggler/toggler.module.scss b/packages/wethegit-components/src/components/navigation/components/toggler/toggler.module.scss index 239a0b5a..1462b514 100644 --- a/packages/wethegit-components/src/components/navigation/components/toggler/toggler.module.scss +++ b/packages/wethegit-components/src/components/navigation/components/toggler/toggler.module.scss @@ -62,11 +62,3 @@ } } } - -// Feel free to change the breakpoint where the nav goes from hamburger to full -// Also change the breakpoint in the Navigation and NavList components -@media #{$medium-up} { - .toggler { - display: none; - } -} diff --git a/packages/wethegit-components/src/components/navigation/components/toggler/toggler.tsx b/packages/wethegit-components/src/components/navigation/components/toggler/toggler.tsx index 358f4b5e..5408a64d 100644 --- a/packages/wethegit-components/src/components/navigation/components/toggler/toggler.tsx +++ b/packages/wethegit-components/src/components/navigation/components/toggler/toggler.tsx @@ -20,7 +20,7 @@ export const Toggler = fixedForwardRef(function {...props} > - {open ? "Close" : "Open"} + {open ? "Close menu" : "Open menu"} ) }) diff --git a/packages/wethegit-components/src/components/navigation/navigation.module.scss b/packages/wethegit-components/src/components/navigation/navigation.module.scss index cd31f3e1..97fb3d2e 100644 --- a/packages/wethegit-components/src/components/navigation/navigation.module.scss +++ b/packages/wethegit-components/src/components/navigation/navigation.module.scss @@ -16,7 +16,7 @@ } // Feel free to change the breakpoint where the nav goes from hamburger to full -// Also change the breakpoint in the Toggler and NavList components +// Also change the breakpoint in the NavList component @media #{$medium-up} { .navBar { left: 0; @@ -34,4 +34,9 @@ position: relative; } } + + .overlay, + .toggler { + display: none; + } } diff --git a/packages/wethegit-components/src/components/navigation/navigation.stories.tsx b/packages/wethegit-components/src/components/navigation/navigation.stories.tsx index cb41800c..10b064ca 100644 --- a/packages/wethegit-components/src/components/navigation/navigation.stories.tsx +++ b/packages/wethegit-components/src/components/navigation/navigation.stories.tsx @@ -2,9 +2,24 @@ import type { Meta, StoryObj } from "@storybook/react" import { Navigation } from "." +const LINKS = { + home: { + label: "Home", + path: "/", + }, + about: { + label: "About", + path: "/about", + }, +} + const meta: Meta = { title: "components/navigation", component: Navigation, + args: { + links: LINKS, + "aria-label": "Main navigation", + }, decorators: [ (Story) => (
(null) const menuToggler = useRef(null) + const id = useId() const toggle = () => { setOpen(!open) @@ -52,15 +56,16 @@ export function Navigation({ currentPage }: NavigationProps) { - + -