UNPKG

@postenbring/hedwig-react

Version:

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

1 lines 10.5 kB
{"version":3,"sources":["../src/navbar/navbar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n NavbarExpandableMenu,\n NavbarExpandableMenuContent,\n NavbarExpandableMenuTrigger,\n} from \"./navbar-expandable-menu\";\n\ninterface NavbarLogoProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * A fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogo = forwardRef<HTMLDivElement, NavbarLogoProps>(\n ({ children, className, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component className={clsx(`hds-navbar__logo`, className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nNavbarLogo.displayName = \"Navbar.Logo\";\n\ninterface NavbarLogoAndServiceText extends HTMLAttributes<HTMLDivElement> {\n /**\n * The text display next to the logo\n */\n children: React.ReactNode;\n\n /**\n * The text variant\n *\n * Use `service` for internal applications\n *\n * Use `flagship` for public facing applications\n */\n variant: \"service\" | \"flagship\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * Internal service or flagship text next to either the Posten or Bring logo\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogoAndServiceText = forwardRef<HTMLDivElement, NavbarLogoAndServiceText>(\n ({ children, asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n ref={ref}\n className={clsx(\n \"hds-navbar__logo-and-service-text\",\n `hds-navbar__logo-and-service-text--${variant}`,\n className as undefined,\n )}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nNavbarLogoAndServiceText.displayName = \"Navbar.NavbarLogoAndText\";\n\ninterface NavbarItemIconProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n}\n/**\n * Icon to be used inside a `Navbar.Item`, `Navbar.ButtonItem`, or `Navbar.LinkItem`\n */\nexport const NavbarItemIcon = forwardRef<HTMLDivElement, NavbarItemIconProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <Slot className={clsx(\"hds-navbar__item-icon\", className as undefined)} ref={ref} {...rest}>\n {children}\n </Slot>\n );\n },\n);\nNavbarItemIcon.displayName = \"Navbar.ItemIcon\";\n\ninterface NavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * Generic Navbar item\n *\n * Use `Navbar.ButtonItem` or `Navbar.LinkItem` for links and buttons\n */\nexport const NavbarItem = forwardRef<HTMLDivElement, NavbarItemProps>(\n ({ asChild, children, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nNavbarItem.displayName = \"Navbar.Item\";\n\ninterface NavbarButtonItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const NavbarButtonItem = forwardRef<HTMLButtonElement, NavbarButtonItemProps>(\n ({ asChild, children, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"button\";\n return (\n <Component\n className={clsx(\"hds-navbar__item\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nNavbarButtonItem.displayName = \"Navbar.ButtonItem\";\n\ninterface NavbarLinkItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport const NavbarLinkItem = forwardRef<HTMLAnchorElement, NavbarLinkItemProps>(\n ({ asChild, children, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"a\";\n return (\n <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nNavbarLinkItem.displayName = \"Navbar.LinkItem\";\n\ninterface NavbarNavigationProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const NavbarNavigation = forwardRef<HTMLDivElement, NavbarNavigationProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-navbar__navigation\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nNavbarNavigation.displayName = \"Navbar.Navigation\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n /**\n * Navbar variant\n *\n * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px\n *\n * For internal services or flagship services use the `service` should be used\n *\n * @default \"default\"\n */\n variant?: \"default\" | \"service\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLDivElement, NavbarProps>(\n ({ asChild, children, className, variant, ...rest }, ref) => {\n const Component = asChild ? Slot : \"header\";\n return (\n <Component\n className={clsx(\"hds-navbar\", variant && `hds-navbar--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n) as NavbarType;\nNavbar.displayName = \"Navbar\";\n\ntype NavbarType = ReturnType<typeof forwardRef<HTMLDivElement, NavbarProps>> & {\n Logo: typeof NavbarLogo;\n LogoAndServiceText: typeof NavbarLogoAndServiceText;\n ExpandableMenu: typeof NavbarExpandableMenu;\n ExpandableMenuTrigger: typeof NavbarExpandableMenuTrigger;\n ExpandableMenuContent: typeof NavbarExpandableMenuContent;\n Item: typeof NavbarItem;\n ButtonItem: typeof NavbarButtonItem;\n LinkItem: typeof NavbarLinkItem;\n ItemIcon: typeof NavbarItemIcon;\n Navigation: typeof NavbarNavigation;\n};\n\nNavbar.Logo = NavbarLogo;\nNavbar.LogoAndServiceText = NavbarLogoAndServiceText;\nNavbar.ExpandableMenu = NavbarExpandableMenu;\nNavbar.ExpandableMenuTrigger = NavbarExpandableMenuTrigger;\nNavbar.ExpandableMenuContent = NavbarExpandableMenuContent;\nNavbar.Item = NavbarItem;\nNavbar.ButtonItem = NavbarButtonItem;\nNavbar.LinkItem = NavbarLinkItem;\nNavbar.ItemIcon = NavbarItemIcon;\nNavbar.Navigation = NavbarNavigation;\n"],"mappings":"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","names":[]}