Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: #153 v5 top bar update docs #240

Merged
merged 8 commits into from
Dec 13, 2024
Merged

feat: #153 v5 top bar update docs #240

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c53f203
fix: update default top-bar popover y offset
nurm717123 Dec 6, 2024
d19517e
chore: update top-bar mdx docs
nurm717123 Dec 6, 2024
6c2b6ea
Merge branch 'main' of https://github.com/reapit/elements into 135-v5…
nurm717123 Dec 6, 2024
5f88b99
fix typo
nurm717123 Dec 6, 2024
300eab6
chore: add todo to delete design guidelines svg
nurm717123 Dec 6, 2024
1a99695
Merge branch 'main' of https://github.com/reapit/elements into 135-v5…
nurm717123 Dec 12, 2024
9c0db73
feat: update docs to include diferent viewport
nurm717123 Dec 12, 2024
b0fb9bf
fix typo
nurm717123 Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/top-bar/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,5 +74,5 @@ export const ElTopBarMobileNav = styled.div`
export const elTopBarMenuPopover = css`
// To adjust the menu popover's Y offset so it appears below the top bar instead of directly below the button.
// The "important" rule is used to override the Menu's auto-anchor yOffset.
top: 44px !important;
top: var(--spacing-10) !important;
`
15 changes: 8 additions & 7 deletions src/components/top-bar/top-bar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
import { Canvas, Controls, Meta } from '@storybook/blocks'
import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
import * as TopBarStories from './top-bar.stories'
import { GuidelinesImage } from '../../storybook/figma'

<Meta of={TopBarStories} />

<GuidelinesImage name="TopBar" />
# Top bar

## Styles Only Usage
Top bar component is part of the element's navigation, It is composed of several components to easily create a top navigation structure.

To display `TopBar` with vanilla usage, you will need to compose your component using `.el-top-bar, .el-top-bar-main-nav, .el-top-bar-search, .el-top-bar-secondary-nav, and .el-top-bar-profile` classes as the example below.
## Default

<Canvas of={TopBarStories.StylesOnlyUsage} />
To display `TopBar` with vanilla usage, you will need to compose your component using `.el-top-bar, .el-top-bar-main-nav, .el-top-bar-search, .el-top-bar-secondary-nav, and .el-top-bar-profile` classes or respective component for each class for React usage as the example below.

<RenderHtmlMarkup of={TopBarStories.StylesOnlyUsage} />
<Canvas of={TopBarStories.Default} />

<RenderHtmlMarkup of={TopBarStories.Default} />

## React Usage

In React version, you will need to use `TopBar` compound component to compose the `TopBar` as shown below.
In the React usage, you can utilize `CSSContainerQuery` component to conditionally render the Main navigation section based on the viewport size, as demonstrated below (on wider screens all buttons should visible).

<Canvas of={TopBarStories.ReactUsage} />

Expand Down
165 changes: 72 additions & 93 deletions src/components/top-bar/top-bar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,123 +1,91 @@
import { figmaDesignUrls } from '#src/storybook/figma/index'
import type { Meta, StoryObj } from '@storybook/react'
import { ElAvatar } from '../avatar'
import { AvatarButton, ElAvatarButton } from '../avatar-button'
import { AvatarButton } from '../avatar-button'
import { elIcon } from '../button'
import { CSSContainerQuery } from '../container-query/container-query'
import { Icon } from '../icon'
import { ElMenu, ElMenuItemAnchor, ElMenuItemButton, ElMenuList, ElMenuPopover, Menu } from '../menu'
import { ElNavDropdownButton, NavDropdownButton } from '../nav-dropdown-button'
import { ElButtonNavIconItem, NavIconItem } from '../nav-icon-item'
import { ElNavItemAnchor, ElNavItemLabelContainer, NavItem } from '../nav-item'
import { Menu } from '../menu'
import { NavDropdownButton } from '../nav-dropdown-button'
import { NavIconItem } from '../nav-icon-item'
import { NavItem } from '../nav-item'
import { NavSearchButton } from '../nav-search-button/nav-search-button'
import {
ElNavSearchButton,
ElNavSearchButtonContainer,
ElNavSearchButtonIcon,
ElNavSearchButtonPlaceholder,
ElNavSearchButtonShortcutText,
} from '../nav-search-button/styles'
import { ReapitLogo } from '../reapit-logo'
import reapitLogoIconUrl from '../reapit-logo/icons/brand-reapit.svg'
import MenuIcon from './icons/menu-icon.svg?react'
import {
ElTopBar,
ElTopBarLogo,
ElTopBarMainNav,
ElTopBarMobileNav,
ElTopBarProfile,
ElTopBarSearch,
ElTopBarSecondaryNav,
elTopBarMenuPopover,
} from './styles'
import { elTopBarMenuPopover } from './styles'
import { TopBar } from './top-bar'

export default {
title: 'Components/Top bar',
component: TopBar,
} as Meta<typeof TopBar>

export const StylesOnlyUsage: StoryObj<typeof TopBar> = {
export const Default: StoryObj<typeof TopBar> = {
render: () => {
return (
<nav>
<ElTopBar>
<ElTopBarLogo href="/">
<img src={reapitLogoIconUrl} />
</ElTopBarLogo>
<ElTopBarMainNav>
<ElNavItemAnchor href="#">
<ElNavItemLabelContainer>Button 1</ElNavItemLabelContainer>
</ElNavItemAnchor>
<ElNavItemAnchor href="#">
<ElNavItemLabelContainer>Button 2</ElNavItemLabelContainer>
</ElNavItemAnchor>
<ElMenu>
<ElNavDropdownButton aria-haspopup="true" aria-expanded="true" role="button" type="button">
More
<Icon icon={'chevronUp'} intent="default" fontSize="1rem" />
</ElNavDropdownButton>
<ElMenuPopover className={elTopBarMenuPopover}>
<ElMenuList>
<ElMenuItemButton role="menuitem">Button 3</ElMenuItemButton>
<ElMenuItemButton role="menuitem">Button 4</ElMenuItemButton>
<ElMenuItemAnchor href="/#" role="menuitem">
Button 5
</ElMenuItemAnchor>
</ElMenuList>
</ElMenuPopover>
</ElMenu>
</ElTopBarMainNav>

<ElTopBarSearch>
<ElNavSearchButtonContainer>
<ElButtonNavIconItem>
<Icon icon="search" />
</ElButtonNavIconItem>
<ElNavSearchButton>
<ElNavSearchButtonIcon aria-hidden="true" />
<ElNavSearchButtonPlaceholder>Search</ElNavSearchButtonPlaceholder>
<ElNavSearchButtonShortcutText>Ctrl + K</ElNavSearchButtonShortcutText>
</ElNavSearchButton>
</ElNavSearchButtonContainer>
</ElTopBarSearch>

<ElTopBarSecondaryNav>
<ElButtonNavIconItem>
<Icon icon="star" aria-label="secondary nav item example" />
</ElButtonNavIconItem>
<ElButtonNavIconItem>
<Icon icon="star" aria-label="secondary nav item example" />
</ElButtonNavIconItem>
<ElButtonNavIconItem>
<Icon icon="star" aria-label="secondary nav item example" />
</ElButtonNavIconItem>
</ElTopBarSecondaryNav>
<TopBar>
<TopBar.Logo href="/">
<ReapitLogo />
</TopBar.Logo>
<TopBar.MainNav>
<NavItem href="/">Button 1</NavItem>
<NavItem href="/">Button 2</NavItem>
<Menu>
<Menu.Trigger>
{({ getTriggerProps, isOpen }) => (
<NavDropdownButton {...getTriggerProps()} isOpen={isOpen}>
More
</NavDropdownButton>
)}
</Menu.Trigger>
<Menu.Popover className={elTopBarMenuPopover}>
<Menu.List>
<Menu.Item href="/">Button 3</Menu.Item>
<Menu.Item href="/">Button 4</Menu.Item>
<Menu.Item href="/">Button 5</Menu.Item>
</Menu.List>
</Menu.Popover>
</Menu>
</TopBar.MainNav>
<TopBar.Search>
<NavSearchButton />
</TopBar.Search>

<ElTopBarMobileNav>
<ElButtonNavIconItem>
<MenuIcon className={elIcon} />
</ElButtonNavIconItem>
</ElTopBarMobileNav>
<TopBar.SecondaryNav>
<NavIconItem aria-label="secondary nav item example" icon={<Icon icon="star" />} />
<NavIconItem aria-label="secondary nav item example" icon={<Icon icon="star" />} />
<NavIconItem aria-label="secondary nav item example" icon={<Icon icon="star" />} />
</TopBar.SecondaryNav>
<TopBar.MobileNav>
<NavIconItem aria-label="mobile secondary nav trigger" icon={<MenuIcon className={elIcon} />} />
</TopBar.MobileNav>

<ElTopBarProfile>
<ElAvatarButton aria-label="user navigation menu">
<ElAvatar data-size="small" data-shape="circle" data-colour="purple">
AD
</ElAvatar>
</ElAvatarButton>
</ElTopBarProfile>
</ElTopBar>
</nav>
<TopBar.Profile>
<Menu data-alignment="right">
<Menu.Trigger>
{({ getTriggerProps, isOpen }) => <AvatarButton {...getTriggerProps()} isOpen={isOpen} label="AD" />}
</Menu.Trigger>
<Menu.Popover className={elTopBarMenuPopover}>
<Menu.List>
<Menu.Item href="/">User menu 1</Menu.Item>
<Menu.Item href="/">User menu 2</Menu.Item>
<Menu.Item href="/">User menu 3</Menu.Item>
</Menu.List>
</Menu.Popover>
</Menu>
</TopBar.Profile>
</TopBar>
)
},

parameters: {
design: {
type: 'figma',
url: figmaDesignUrls.appBar,
allowFullscreen: true,
},
},
}

export const ReactUsage: StoryObj<typeof TopBar> = {
render: () => {
return (
Expand Down Expand Up @@ -166,7 +134,18 @@ export const ReactUsage: StoryObj<typeof TopBar> = {
</TopBar.MobileNav>

<TopBar.Profile>
<AvatarButton label="AD" />
<Menu data-alignment="right">
<Menu.Trigger>
{({ getTriggerProps, isOpen }) => <AvatarButton {...getTriggerProps()} isOpen={isOpen} label="AD" />}
</Menu.Trigger>
<Menu.Popover className={elTopBarMenuPopover}>
<Menu.List>
<Menu.Item href="/">User menu 1</Menu.Item>
<Menu.Item href="/">User menu 2</Menu.Item>
<Menu.Item href="/">User menu 3</Menu.Item>
</Menu.List>
</Menu.Popover>
</Menu>
</TopBar.Profile>
</TopBar>
)
Expand Down
2 changes: 0 additions & 2 deletions src/storybook/figma/guidelines-images/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import Accordion from './accordion.svg'
import ButtonGroup from './button-group.svg'
import TopBar from './top-bar.svg'

export { Accordion }
export { TopBar }
export { ButtonGroup }
442 changes: 0 additions & 442 deletions src/storybook/figma/guidelines-images/top-bar.svg
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/storybook/figma/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const GuidelinesImage: FC<GuidelinesImageProps> = ({ name }) => (

export const figmaDesignUrls = {
appBar:
'https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=428-7209&node-type=frame&t=RHaBJeesRCccFe53-0',
'https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=16-4840&m=dev',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TopBar related component now use this docs as main source

accordion: 'https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=141-4180&t=k8kHuB2wp3KZoKMw-4',
buttonGroup: 'https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=428-7408&t=8GcgX59FmafMRAda-4',
}
Loading