From 5ed4cc9cd68e285fc7673917954e22d39ef1b0fd Mon Sep 17 00:00:00 2001 From: Anthony HOANG Date: Tue, 26 Sep 2023 15:54:30 +0200 Subject: [PATCH 1/3] feat(navbar): add group-list sub-component + minor design fixes --- .../organisms/Navbar/Navbar.stories.tsx | 136 ++++-------------- .../organisms/Navbar/Navbar.theme.tsx | 6 +- .../organisms/Navbar/NavbarGroup.tsx | 26 ++-- .../organisms/Navbar/NavbarGroupList.tsx | 62 ++++++++ .../organisms/Navbar/NavbarLink.tsx | 12 +- src/lib/components/organisms/Navbar/index.tsx | 5 +- 6 files changed, 122 insertions(+), 125 deletions(-) create mode 100644 src/lib/components/organisms/Navbar/NavbarGroupList.tsx diff --git a/src/lib/components/organisms/Navbar/Navbar.stories.tsx b/src/lib/components/organisms/Navbar/Navbar.stories.tsx index c9e4a10..fc4c93f 100644 --- a/src/lib/components/organisms/Navbar/Navbar.stories.tsx +++ b/src/lib/components/organisms/Navbar/Navbar.stories.tsx @@ -6,6 +6,7 @@ import { Button } from '../../atoms/Button'; import { Hero } from '../../molecules'; import { Dropdown } from '../../molecules/Dropdown'; import type { NavbarComponentProps } from './Navbar'; +import { NavbarGroupList, type NavbarGroupListProps } from './NavbarGroupList'; export default { title: 'Components/organisms/Navbar', @@ -15,6 +16,30 @@ export default { } } as Meta; +const GROUP_1: NavbarGroupListProps = { + groupName: { + label: 'Services', + href: '/' + }, + items: [ + { + label: 'Construction', + href: '/' + }, + { + label: 'Food', + href: '/' + }, + { + label: 'Animals', + href: '/' + }, + { + label: 'House', + href: '/' + } + ] +}; const Template: Story = (args) => ; export const DefaultNavbar = Template.bind({}); @@ -98,122 +123,21 @@ WithNavbarDropdown.args = { -
- - Services - -
-
- About - Services - Pricing - Contact -
-
- About - Services - Pricing - Contact -
-
- About - Services - Pricing - Contact -
-
- About - Services - Pricing - Contact -
-
-
+ -
- - Services - -
-
- About - Services - Pricing - Contact -
-
- About - Services - Pricing - Contact -
-
- About - Services - Pricing - Contact -
-
- About - Services - Pricing - Contact -
-
-
+ -
- - Services - -
-
- About - Services - Pricing - Contact - About - Services - Pricing - Contact - About - Services - Pricing - Contact - About - Services - Pricing - Contact -
-
- About - Services - Pricing - Contact -
-
- About - Services - Pricing - Contact -
-
- About - Services - Pricing - Contact -
-
-
+ + About Services Pricing Contact -
+
diff --git a/src/lib/components/organisms/Navbar/Navbar.theme.tsx b/src/lib/components/organisms/Navbar/Navbar.theme.tsx index 5312843..dac8366 100644 --- a/src/lib/components/organisms/Navbar/Navbar.theme.tsx +++ b/src/lib/components/organisms/Navbar/Navbar.theme.tsx @@ -32,17 +32,17 @@ export type NavBarTheme = { }; export const NAV_BAR_THEME: NavBarTheme = { - base: 'border-gray-200 z-[1000] flex min-h-[65px]', + base: 'border-gray-200 flex min-h-[65px] z-10', innerBase: 'mx-auto flex items-center justify-between gap-5', brand: 'flex items-center', fixedTransparentStyle: '', background: 'bg-primary-500', collapse: { base: 'w-full md:block h-full', - list: 'mt-4 flex flex-col md:mt-0 md:flex-row items-center w-full justify-end md:gap-10 gap-0 h-full' + list: 'mt-4 flex flex-col md:mt-0 md:flex-row items-center w-full md:justify-end md:gap-10 gap-0 h-full' }, link: { - base: 'block pr-4 pl-3 md:p-0 py-6 mx-auto', + base: 'block pr-4 pl-3 md:p-0 md:py-0 py-2 mx-auto', active: 'bg-primary-700 text-white md:bg-transparent md:text-primary-700', disabled: 'text-gray-400 hover:cursor-not-allowed', underline: 'h-[2px] rounded-lg bg-secondary-200 transition-all duration-500' diff --git a/src/lib/components/organisms/Navbar/NavbarGroup.tsx b/src/lib/components/organisms/Navbar/NavbarGroup.tsx index e38e9eb..7cc6f5b 100644 --- a/src/lib/components/organisms/Navbar/NavbarGroup.tsx +++ b/src/lib/components/organisms/Navbar/NavbarGroup.tsx @@ -46,7 +46,7 @@ export const NavbarGroup: FC = ({ setLeaveTimeout( setTimeout(() => { setIsOpen(false); - }, 50) + }, 100) ); }; @@ -58,26 +58,32 @@ export const NavbarGroup: FC = ({ }; return ( -
-
  • +
    -
    + {label} {arrowIcon && ( - + + + )} -
    +
    -
    • -
    +
    +
    +
    {children}
    -
    + ); }; diff --git a/src/lib/components/organisms/Navbar/NavbarGroupList.tsx b/src/lib/components/organisms/Navbar/NavbarGroupList.tsx new file mode 100644 index 0000000..81eaf5e --- /dev/null +++ b/src/lib/components/organisms/Navbar/NavbarGroupList.tsx @@ -0,0 +1,62 @@ +import cs from 'classnames'; +import type { FC } from 'react'; +import { Link } from 'react-router-dom'; +import { Navbar } from '.'; + +export type NavbarGroupTitle = { + label: string; + href?: string; +}; + +export type NavbarGroupListItem = { + label: string; + href: string; +}; + +export interface NavbarGroupListProps { + groupName: NavbarGroupTitle; + items?: NavbarGroupListItem[]; + withSidebar?: boolean; + withUnderlineEffect?: boolean; +} + +export const NavbarGroupList: FC = ({ + groupName, + items, + withSidebar = false, + withUnderlineEffect = false +}) => { + if (items && items.length > 0) { + return ( +
    + {withSidebar && ( +
    +
    + {groupName.href ? ( + + {groupName.label} + + ) : ( + {groupName.label} + )} +
    +
    + )} +
    + {items.map((item, index) => ( + + + {item.label} + + + ))} +
    +
    + ); + } else return <>; +}; diff --git a/src/lib/components/organisms/Navbar/NavbarLink.tsx b/src/lib/components/organisms/Navbar/NavbarLink.tsx index fb4b398..59ae260 100644 --- a/src/lib/components/organisms/Navbar/NavbarLink.tsx +++ b/src/lib/components/organisms/Navbar/NavbarLink.tsx @@ -40,17 +40,19 @@ export const NavbarLink: FC = ({ const LinkComponent = as || 'a'; return ( -
  • +
  • - {children} - {withUnderlineEffect && ( - - )} + + {children} + {withUnderlineEffect && ( + + )} +
    • ); diff --git a/src/lib/components/organisms/Navbar/index.tsx b/src/lib/components/organisms/Navbar/index.tsx index cd05558..48f6cd7 100644 --- a/src/lib/components/organisms/Navbar/index.tsx +++ b/src/lib/components/organisms/Navbar/index.tsx @@ -2,6 +2,7 @@ import { Navbar as NavbarComponent } from './Navbar'; import { NavbarBrand } from './NavbarBrand'; import { NavbarCollapse } from './NavbarCollapse'; import { NavbarGroup } from './NavbarGroup'; +import { NavbarGroupList } from './NavbarGroupList'; import { NavbarLink } from './NavbarLink'; import { NavbarToggle } from './NavbarToggle'; @@ -11,11 +12,13 @@ NavbarCollapse.displayName = 'Navbar.Collapse'; NavbarLink.displayName = 'Navbar.Link'; NavbarToggle.displayName = 'Navbar.Toggle'; NavbarGroup.displayName = 'Navbar.Group'; +NavbarGroupList.displayName = 'Navbar.Group.List'; export const Navbar = Object.assign(NavbarComponent, { Brand: NavbarBrand, Collapse: NavbarCollapse, Link: NavbarLink, Toggle: NavbarToggle, - Group: NavbarGroup + Group: NavbarGroup, + GroupList: NavbarGroupList }); From 1e10da81f6d914258287bfad020b0264d3a48674 Mon Sep 17 00:00:00 2001 From: Anthony HOANG Date: Tue, 26 Sep 2023 17:06:20 +0200 Subject: [PATCH 2/3] feat(navbar): cr fix --- .../organisms/Navbar/Navbar.stories.tsx | 64 +++++++++++-------- .../organisms/Navbar/NavbarExpansion.tsx | 48 ++++++++++++++ .../organisms/Navbar/NavbarGroupList.tsx | 62 ------------------ src/lib/components/organisms/Navbar/index.tsx | 6 +- 4 files changed, 88 insertions(+), 92 deletions(-) create mode 100644 src/lib/components/organisms/Navbar/NavbarExpansion.tsx delete mode 100644 src/lib/components/organisms/Navbar/NavbarGroupList.tsx diff --git a/src/lib/components/organisms/Navbar/Navbar.stories.tsx b/src/lib/components/organisms/Navbar/Navbar.stories.tsx index fc4c93f..5837dae 100644 --- a/src/lib/components/organisms/Navbar/Navbar.stories.tsx +++ b/src/lib/components/organisms/Navbar/Navbar.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, Story } from '@storybook/react/types-6-0'; +import { Link } from 'react-router-dom'; import { Navbar } from '.'; import { ProgressBar } from '../../atoms'; import { Avatar } from '../../atoms/Avatar'; @@ -6,7 +7,6 @@ import { Button } from '../../atoms/Button'; import { Hero } from '../../molecules'; import { Dropdown } from '../../molecules/Dropdown'; import type { NavbarComponentProps } from './Navbar'; -import { NavbarGroupList, type NavbarGroupListProps } from './NavbarGroupList'; export default { title: 'Components/organisms/Navbar', @@ -16,30 +16,39 @@ export default { } } as Meta; -const GROUP_1: NavbarGroupListProps = { - groupName: { - label: 'Services', +const EXPANSION_ITEMS = [ + { + label: 'Construction', href: '/' }, - items: [ - { - label: 'Construction', - href: '/' - }, - { - label: 'Food', - href: '/' - }, - { - label: 'Animals', - href: '/' - }, - { - label: 'House', - href: '/' - } - ] + { + label: 'Food', + href: '/' + }, + { + label: 'Animals', + href: '/' + }, + { + label: 'House', + href: '/' + } +]; + +const buildExpansionAsChildren = (items: { label: string; href: string }[], withUnderlineEffect?: boolean) => { + return ( + <> + {items.map((item, index) => ( + + + {item.label} + + + ))} + + ); }; + const Template: Story = (args) => ; export const DefaultNavbar = Template.bind({}); @@ -123,15 +132,16 @@ WithNavbarDropdown.args = { - + + {buildExpansionAsChildren(EXPANSION_ITEMS)} + - + {buildExpansionAsChildren(EXPANSION_ITEMS, true)} - - + + {buildExpansionAsChildren(EXPANSION_ITEMS)} - About Services Pricing diff --git a/src/lib/components/organisms/Navbar/NavbarExpansion.tsx b/src/lib/components/organisms/Navbar/NavbarExpansion.tsx new file mode 100644 index 0000000..be9fcff --- /dev/null +++ b/src/lib/components/organisms/Navbar/NavbarExpansion.tsx @@ -0,0 +1,48 @@ +import cs from 'classnames'; +import type { FC } from 'react'; +import { Navbar } from '.'; + +export type NavbarExpansionItem = { + label: string; + href: string; +}; + +export interface NavbarExpansionProps { + groupName?: string; + groupLink?: string; + withUnderlineEffect?: boolean; + children?: React.ReactNode; +} + +export const NavbarExpansion: FC = ({ + groupName, + groupLink, + withUnderlineEffect = false, + children +}) => { + return ( +
    + {groupName && ( +
    +
    + {groupLink ? ( + + {groupName} + + ) : ( + {groupName} + )} +
    +
    + )} +
    + {children} +
    +
    + ); +}; diff --git a/src/lib/components/organisms/Navbar/NavbarGroupList.tsx b/src/lib/components/organisms/Navbar/NavbarGroupList.tsx deleted file mode 100644 index 81eaf5e..0000000 --- a/src/lib/components/organisms/Navbar/NavbarGroupList.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import cs from 'classnames'; -import type { FC } from 'react'; -import { Link } from 'react-router-dom'; -import { Navbar } from '.'; - -export type NavbarGroupTitle = { - label: string; - href?: string; -}; - -export type NavbarGroupListItem = { - label: string; - href: string; -}; - -export interface NavbarGroupListProps { - groupName: NavbarGroupTitle; - items?: NavbarGroupListItem[]; - withSidebar?: boolean; - withUnderlineEffect?: boolean; -} - -export const NavbarGroupList: FC = ({ - groupName, - items, - withSidebar = false, - withUnderlineEffect = false -}) => { - if (items && items.length > 0) { - return ( -
    - {withSidebar && ( -
    -
    - {groupName.href ? ( - - {groupName.label} - - ) : ( - {groupName.label} - )} -
    -
    - )} -
    - {items.map((item, index) => ( - - - {item.label} - - - ))} -
    -
    - ); - } else return <>; -}; diff --git a/src/lib/components/organisms/Navbar/index.tsx b/src/lib/components/organisms/Navbar/index.tsx index 48f6cd7..bf8cdf5 100644 --- a/src/lib/components/organisms/Navbar/index.tsx +++ b/src/lib/components/organisms/Navbar/index.tsx @@ -1,8 +1,8 @@ import { Navbar as NavbarComponent } from './Navbar'; import { NavbarBrand } from './NavbarBrand'; import { NavbarCollapse } from './NavbarCollapse'; +import { NavbarExpansion } from './NavbarExpansion'; import { NavbarGroup } from './NavbarGroup'; -import { NavbarGroupList } from './NavbarGroupList'; import { NavbarLink } from './NavbarLink'; import { NavbarToggle } from './NavbarToggle'; @@ -12,7 +12,7 @@ NavbarCollapse.displayName = 'Navbar.Collapse'; NavbarLink.displayName = 'Navbar.Link'; NavbarToggle.displayName = 'Navbar.Toggle'; NavbarGroup.displayName = 'Navbar.Group'; -NavbarGroupList.displayName = 'Navbar.Group.List'; +NavbarExpansion.displayName = 'Navbar.Expansion'; export const Navbar = Object.assign(NavbarComponent, { Brand: NavbarBrand, @@ -20,5 +20,5 @@ export const Navbar = Object.assign(NavbarComponent, { Link: NavbarLink, Toggle: NavbarToggle, Group: NavbarGroup, - GroupList: NavbarGroupList + Expansion: NavbarExpansion }); From 9286806656e80cba163b62c371d2985adbbed06e Mon Sep 17 00:00:00 2001 From: Anthony HOANG Date: Tue, 26 Sep 2023 17:10:35 +0200 Subject: [PATCH 3/3] feat(navbar): cr fix --- src/lib/components/organisms/Navbar/Navbar.theme.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/organisms/Navbar/Navbar.theme.tsx b/src/lib/components/organisms/Navbar/Navbar.theme.tsx index dac8366..7186aec 100644 --- a/src/lib/components/organisms/Navbar/Navbar.theme.tsx +++ b/src/lib/components/organisms/Navbar/Navbar.theme.tsx @@ -58,7 +58,7 @@ export const NAV_BAR_THEME: NavBarTheme = { opened: '-rotate-180 md:rotate-180' }, container: { - base: 'md:px-5 md:py-2.5 md:fixed w-full md:rounded-t-none rounded-t-md rounded-b-md bg-slate-100 md:items-start items-center flex flex-col left-0 transition duration-300 ease-in-out overflow-hidden top-0 -z-10', + base: 'md:px-5 md:py-2.5 md:fixed w-full md:rounded-t-none rounded-t-md rounded-b-md bg-slate-100 md:items-start items-center flex flex-col left-0 transition duration-300 ease-in-out overflow-hidden top-0 md:-z-10', opened: 'md:-translate-y-full md:scale-y-0 opacity-0 md:h-fit h-0' } }