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: Display component's status badge in story #1230

Closed
wants to merge 11 commits into from
Closed

feat: Display component's status badge in story #1230

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b66bb47
build(pkgs): :package: add status addon
RubenSibon May 15, 2024
1271758
feat(status): :bookmark: add status to header
RubenSibon May 15, 2024
1338656
feat(status): :bookmark: add status to Icon and its Gallery (attempt)
RubenSibon May 15, 2024
d1783a9
Merge branch 'develop' of github.com:Amsterdam/design-system into fea…
RubenSibon May 17, 2024
6d53950
feat(status): :bookmark: add status to megamenu
RubenSibon May 17, 2024
90b8820
feat(status): :bookmark: add status to pagemenu
RubenSibon May 17, 2024
182f743
feat(status): :bookmark: add status to toptasklink
RubenSibon May 17, 2024
315316f
feat(status): :lipstick: override beta status style
RubenSibon May 17, 2024
0816ed9
feat(status): :alembic: use Badge for status in docs
RubenSibon May 17, 2024
17c8067
feat(status): :alembic: try Badge for status
RubenSibon May 17, 2024
8255d01
Merge branch 'feat/DES-680-component-status' of github.com:Amsterdam/…
RubenSibon May 17, 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
1,139 changes: 1,073 additions & 66 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions storybook/config/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const config: StorybookConfig = {
},
},
},
'@etchteam/storybook-addon-status',
],
framework: {
name: '@storybook/react-vite',
Expand Down
8 changes: 8 additions & 0 deletions storybook/config/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,14 @@ export const parameters = {
],
},
},
status: {
statuses: {
beta: {
background: '#FF9100',
color: '#FFFFFF',
},
},
},
viewport: {
viewports,
},
Expand Down
1 change: 1 addition & 0 deletions storybook/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@amsterdam/design-system-react-icons": "workspace:*",
"@amsterdam/design-system-tokens": "workspace:*",
"@babel/core": "7.24.5",
"@etchteam/storybook-addon-status": "4.2.4",
"@mdx-js/react": "3.0.1",
"@storybook/addon-a11y": "8.0.10",
"@storybook/addon-actions": "8.0.10",
Expand Down
5 changes: 5 additions & 0 deletions storybook/src/components/Header/Header.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ import { Meta, StoryObj } from '@storybook/react'
const meta = {
title: 'Components/Containers/Header',
component: Header,
parameters: {
status: {
type: 'beta',
},
},
} satisfies Meta<typeof Header>

export default meta
Expand Down
5 changes: 5 additions & 0 deletions storybook/src/components/Icon/Icon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ const meta = {
mapping: Icons,
},
},
parameters: {
status: {
type: 'beta',
},
},
} satisfies Meta<typeof Icon>

export default meta
Expand Down
3 changes: 3 additions & 0 deletions storybook/src/components/MegaMenu/MegaMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ const meta = {
component: MegaMenu,
parameters: {
layout: 'fullscreen',
status: {
type: 'beta',
},
},
decorators: [
(Story) => (
Expand Down
5 changes: 5 additions & 0 deletions storybook/src/components/PageMenu/PageMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ const meta = {
alignEnd: false,
wrap: undefined,
},
parameters: {
status: {
type: 'beta',
},
},
} satisfies Meta<typeof PageMenu>

export default meta
Expand Down
5 changes: 5 additions & 0 deletions storybook/src/components/TopTaskLink/TopTaskLink.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ import { Meta, StoryObj } from '@storybook/react'
const meta = {
title: 'Components/Navigation/Top Task Link',
component: TopTaskLink,
parameters: {
status: {
type: 'beta',
},
},
} satisfies Meta<typeof TopTaskLink>

export default meta
Expand Down
6 changes: 4 additions & 2 deletions storybook/src/docs/icon-gallery.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Meta } from "@storybook/blocks";
import { Meta } from "@storybook/addon-docs/blocks";
import { AmsterdamIconGallery } from "./components/AmsterdamIconGallery";

<Meta title="Docs/Assets/Icons" />
{/* Below "parameters" prop does not seem to work; see docs: https://github.com/etchteam/storybook-addon-status?tab=readme-ov-file#story-usage */}

Copy link
Contributor

Choose a reason for hiding this comment

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

If this plugin doesn't work here, and we don't want to show the statusses in the TOC anyway, isn't it easier to just make a custom element and place it in the MDX? The currect badges aren't very easy to see imo

Copy link
Contributor Author

@RubenSibon RubenSibon May 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I updated it to show how it looks with our own Badge component to show the status, but as you can see we then need to deal with the margin above the heading EDIT: no longer true; see next comment.

The Badge addon has way more style properties which is nice, but I also could not get it to work with the docs. Maybe there is a solution, but I can't figure one out.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm experimenting with our Badge component again. It's now added below the story's heading and absolutely positioned above it. I did that for the Icon Gallery and the Header. What do you think?

Also @VincentSmedinga

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, I think it’s fair to say that the conclusion of this experiment is that we can best implement our own status badge. We want it to appear a bit differently than what they provide anyway, and the quality isn’t up to par. Thanks, still :)

<Meta title="Docs/Assets/Icons" parameters={{ status: { type: "beta" } }} />

# Icons

Expand Down
Loading