narmi / design_system

⚡ Narmi Design System and UI Library
https://narmi.github.io/design_system
Other
34 stars 6 forks source link

feat(PageHeader): add PageHeader component #1356

Closed akdetrick closed 1 week ago

akdetrick commented 2 months ago

Closes NDS-520

Adds PageHeader component. See storybook preview commented below for design review and docs.

akdetrick commented 2 months ago

Design notes

Example breadcrumbs

"Checking > Account Name could be really long and we would prefer truncation"

akdetrick commented 2 months ago

Proposed interface change

Per design feedback, we will need to individually control truncation behavior of breadcrumbs. This interface would also prevent the duck typing we're doing with the array-like interface

<PageHeader kind="compact">
   <PageHeader.BackLink label="string" onClick={() => {}} />
   <PageHeader.Breadcrumbs>
      <PageHeader.Crumb label="Breadcrumb link" onClick={() => {}} />
      <PageHeader.Crumb label="Long account name that we need to truncate" truncate />
      <PageHeader.Crumb label="Current page" />
   </PageHeader.Breadcrumbs>
   <PageHeader.Menu>
      <MenuButton>...</MenuButton>
   </PageHeader.Menu>
   <PageHeader.Actions>
      <Button kind="secondary" label="action 1" />
      <Button kind="primary" label="action 2" />
   </PageHeader.Actions>
</PageHeader>
github-actions[bot] commented 1 month ago

📘 Storybook Preview Available 👀

View the Storybook build from this PR in your browser: https://60620d422ffdf100216415b2-qjijvinnlu.chromatic.com/

(This action will publish a new comment and url if this PR is modified)

github-actions[bot] commented 3 weeks ago

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 14 days