chore(storybook): add correct badges to stories (#350)

# Contents Badges in Storybook voor de React componenten. Co-authored-by: Jaap-Hein Wester <[email protected]>
nl-design-system · Jan 2, 2025 · 2f40d5d · 2f40d5d
1 parent 8acadca
commit 2f40d5d
Show file tree

Hide file tree

Showing 22 changed files with 41 additions and 14 deletions.
diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx
@@ -1,4 +1,4 @@
-import { BADGE_LOCATION } from '@geometricpanda/storybook-addon-badges';
+import { BADGE, BADGE_LOCATION } from '@geometricpanda/storybook-addon-badges';
 import { LuxDocument } from '@lux-design-system/components-react';
 import { defineCustomElements } from '@lux-design-system/web-components-stencil/loader/index.js';
 import { withThemeByClassName } from '@storybook/addon-themes';
@@ -9,13 +9,18 @@ import './themes';
 import '../src/styles/theme.css';
 
 /* eslint-disable no-unused-vars */
-export enum BADGES {
+export enum LUXBADGE {
   WIP = 'wip',
   CANARY = 'canary',
   LATEST = 'latest',
 }
 /* eslint-enable */
 
+export const BADGES = {
+  ...BADGE,
+  ...LUXBADGE,
+};
+
 defineCustomElements();
 
 const preview: Preview = {

diff --git a/packages/storybook/src/react-components/alert/alert.stories.tsx b/packages/storybook/src/react-components/alert/alert.stories.tsx
@@ -2,6 +2,7 @@ import { LuxAlert, type LuxAlertProps, LuxHeading1, LuxParagraph } from '@lux-de
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { VisualTypes } from './visual/Types';
+import { BADGES } from '../../../config/preview';
 import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
@@ -11,6 +12,7 @@ const meta = {
   id: 'react-components-alert',
   component: LuxAlert,
   parameters: {
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-alert',
   },

diff --git a/packages/storybook/src/react-components/button/button.stories.tsx b/packages/storybook/src/react-components/button/button.stories.tsx
@@ -5,6 +5,7 @@ import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import tokensDefinition from '@utrecht/button-css/src/tokens.json';
 import { InteractiveStates, PropertyStates } from './visual/States';
 import { Appearances, Sizes } from './visual/Variants';
+import { BADGES } from '../../../config/preview';
 import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
@@ -15,6 +16,7 @@ const meta = {
   component: LuxButton,
   subcomponents: {},
   parameters: {
+    badges: [BADGES.BETA, BADGES.LATEST],
     tokens,
     tokensDefinition,
     tokensPrefix: 'utrecht-button',

diff --git a/packages/storybook/src/react-components/checkbox/checkbox.stories.tsx b/packages/storybook/src/react-components/checkbox/checkbox.stories.tsx
@@ -1,6 +1,7 @@
 import { LuxCheckbox } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
+import { BADGES } from '../../../config/preview';
 
 type Story = StoryObj<typeof meta>;
 
@@ -10,6 +11,7 @@ const meta = {
   component: LuxCheckbox,
   subcomponents: {},
   parameters: {
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-checkbox',
   },

diff --git a/packages/storybook/src/react-components/document/document.stories.tsx b/packages/storybook/src/react-components/document/document.stories.tsx
@@ -2,6 +2,7 @@ import { LuxDocument, LuxParagraph } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import tokensDefinition from './tokens.json';
+import { BADGES } from '../../../config/preview';
 import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
@@ -23,6 +24,7 @@ const meta = {
     },
   },
   parameters: {
+    badges: [BADGES.STABLE, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-document',
     tokensDefinition,

diff --git a/packages/storybook/src/react-components/form-field-checkbox/form-field-checkbox.stories.tsx b/packages/storybook/src/react-components/form-field-checkbox/form-field-checkbox.stories.tsx
@@ -11,7 +11,7 @@ const meta = {
   id: 'react-components-form-field-form-field-checkbox',
   component: LuxFormFieldCheckbox,
   parameters: {
-    badges: [BADGES.WIP, BADGES.CANARY],
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-form-field-checkbox',
   },

diff --git a/.../storybook/src/react-components/form-field-description/form-field-description.stories.tsx b/.../storybook/src/react-components/form-field-description/form-field-description.stories.tsx
@@ -8,7 +8,7 @@ const meta = {
   id: 'react-components-form-field-description',
   component: LuxFormFieldDescription,
   parameters: {
-    badges: [BADGES.WIP, BADGES.CANARY],
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'react-form-field-description',
     docs: {

diff --git a/...rybook/src/react-components/form-field-error-message/form-field-error-message.stories.tsx b/...rybook/src/react-components/form-field-error-message/form-field-error-message.stories.tsx
@@ -16,7 +16,7 @@ const meta = {
   id: 'react-components-form-field-error-message',
   component: WrappedLuxFormFieldErrorMessage,
   parameters: {
-    badges: [BADGES.WIP, BADGES.CANARY],
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'react-form-field-error-message',
   },

diff --git a/packages/storybook/src/react-components/form-field-label/form-field-label.stories.tsx b/packages/storybook/src/react-components/form-field-label/form-field-label.stories.tsx
@@ -16,7 +16,7 @@ const meta = {
   component: LuxFormFieldLabel,
   subcomponents: {},
   parameters: {
-    badges: [BADGES.WIP, BADGES.CANARY],
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'react-form-label',
   },

diff --git a/.../storybook/src/react-components/form-field-radio-group/form-field-radio-group.stories.tsx b/.../storybook/src/react-components/form-field-radio-group/form-field-radio-group.stories.tsx
@@ -9,7 +9,7 @@ const meta = {
   component: LuxFormFieldRadioGroup,
   subcomponents: {},
   parameters: {
-    badges: [BADGES.WIP, BADGES.CANARY],
+    badges: [BADGES.WIP, BADGES.LATEST],
   },
   args: {
     name: 'contact-default',

diff --git a/...torybook/src/react-components/form-field-radio-option/form-field-radio-option.stories.tsx b/...torybook/src/react-components/form-field-radio-option/form-field-radio-option.stories.tsx
@@ -11,7 +11,7 @@ const meta = {
   component: LuxFormFieldRadioOption,
   subcomponents: {},
   parameters: {
-    badges: [BADGES.WIP, BADGES.CANARY],
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-radio-button',
   },

diff --git a/packages/storybook/src/react-components/form-field-select/form-field-select.stories.tsx b/packages/storybook/src/react-components/form-field-select/form-field-select.stories.tsx
@@ -11,7 +11,7 @@ const meta = {
   id: 'react-components-form-field-form-field-select',
   component: LuxFormFieldSelect,
   parameters: {
-    badges: [BADGES.WIP, BADGES.CANARY],
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-form-field-select',
   },

diff --git a/packages/storybook/src/react-components/form-field-textbox/form-field-textbox.stories.tsx b/packages/storybook/src/react-components/form-field-textbox/form-field-textbox.stories.tsx
@@ -11,7 +11,7 @@ const meta = {
   id: 'react-components-form-field-form-field-textbox',
   component: LuxFormFieldTextbox,
   parameters: {
-    badges: [BADGES.WIP, BADGES.CANARY],
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-form-field-textbox',
   },

diff --git a/packages/storybook/src/react-components/form-field/form-field.stories.tsx b/packages/storybook/src/react-components/form-field/form-field.stories.tsx
@@ -15,7 +15,7 @@ const meta = {
   id: 'react-components-form-field',
   component: LuxFormField,
   parameters: {
-    badges: [BADGES.WIP, BADGES.CANARY],
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'react-form-field',
   },

diff --git a/packages/storybook/src/react-components/heading-group/heading-group.stories.tsx b/packages/storybook/src/react-components/heading-group/heading-group.stories.tsx
@@ -1,6 +1,7 @@
 import { LuxHeading, LuxHeading1, LuxHeadingGroup, LuxPreHeading } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
+import { BADGES } from '../../../config/preview';
 import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
@@ -11,6 +12,7 @@ const meta = {
   component: LuxHeadingGroup,
   subcomponents: {},
   parameters: {
+    badges: [BADGES.STABLE, BADGES.LATEST],
     tokens,
     tokensPrefix: 'react-heading-group',
   },

diff --git a/packages/storybook/src/react-components/heading/heading.stories.tsx b/packages/storybook/src/react-components/heading/heading.stories.tsx
@@ -11,6 +11,7 @@ import {
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import tokensDefinition from '@utrecht/heading-css/src/tokens.json';
+import { BADGES } from '../../../config/preview';
 import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
@@ -22,6 +23,7 @@ const meta = {
   id: 'react-components-heading',
   component: LuxHeading,
   parameters: {
+    badges: [BADGES.BETA, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-heading-1',
     tokensDefinition,

diff --git a/packages/storybook/src/react-components/link/link.stories.tsx b/packages/storybook/src/react-components/link/link.stories.tsx
@@ -2,6 +2,7 @@ import { LuxLink } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { VisualStates } from './visual/States';
+import { BADGES } from '../../../config/preview';
 import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
@@ -11,6 +12,7 @@ const meta = {
   id: 'react-components-link',
   component: LuxLink,
   parameters: {
+    badges: [BADGES.BETA, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-link',
   },

diff --git a/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx b/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx
@@ -2,6 +2,7 @@ import { LuxParagraph } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import tokensDefinition from '@utrecht/paragraph-css/src/tokens.json';
+import { BADGES } from '../../../config/preview';
 import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
@@ -29,6 +30,7 @@ const meta = {
     },
   },
   parameters: {
+    badges: [BADGES.STABLE, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-paragraph',
     tokensDefinition,

diff --git a/packages/storybook/src/react-components/pre-heading/pre-heading.stories.tsx b/packages/storybook/src/react-components/pre-heading/pre-heading.stories.tsx
@@ -1,6 +1,7 @@
 import { LuxPreHeading } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
+import { BADGES } from '../../../config/preview';
 import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
@@ -11,6 +12,7 @@ const meta = {
   component: LuxPreHeading,
   subcomponents: {},
   parameters: {
+    badges: [BADGES.STABLE, BADGES.LATEST],
     tokens,
     tokensPrefix: 'react-pre-heading',
   },

diff --git a/packages/storybook/src/react-components/section/section.stories.tsx b/packages/storybook/src/react-components/section/section.stories.tsx
@@ -9,6 +9,7 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { type HTMLAttributes, type PropsWithChildren } from 'react';
 import { VisualStates } from './visual/States';
+import { BADGES } from '../../../config/preview';
 import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 const LuxSection = (props: PropsWithChildren<LuxSectionProps> & HTMLAttributes<HTMLDivElement>) => (
@@ -22,6 +23,7 @@ const meta = {
   id: 'react-components-section',
   component: LuxSection,
   parameters: {
+    badges: [BADGES.BETA, BADGES.LATEST],
     tokens,
     tokensPrefix: 'react-section',
   },

diff --git a/packages/storybook/src/react-components/select/select.stories.tsx b/packages/storybook/src/react-components/select/select.stories.tsx
@@ -1,15 +1,17 @@
 import { LuxSelect, LuxSelectOption, type LuxSelectOptionProps } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
+import { BADGES } from '../../../config/preview';
 
 type Story = StoryObj<typeof meta>;
 
 const meta = {
-  title: 'React Components/Form Field/Select',
+  title: 'React Components/Select',
   id: 'react-components-select',
   component: LuxSelect,
   subcomponents: {},
   parameters: {
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-select',
   },

diff --git a/packages/storybook/src/react-components/textbox/textbox.stories.tsx b/packages/storybook/src/react-components/textbox/textbox.stories.tsx
@@ -13,11 +13,11 @@ const WrappedLuxTextbox = forwardRef<
 WrappedLuxTextbox.displayName = 'LuxTextbox';
 
 const meta = {
-  title: 'React Components/Form Field/Textbox',
+  title: 'React Components/Textbox',
   id: 'react-components-form-field-textbox',
   component: WrappedLuxTextbox,
   parameters: {
-    badges: [BADGES.WIP, BADGES.CANARY],
+    badges: [BADGES.WIP, BADGES.LATEST],
     tokens,
     tokensPrefix: 'utrecht-textbox',
   },