docs: add version tracking to storybook components

.storybook/preview.tsx

@@ -24,18 +24,35 @@ export const decorators = [
   ),
 ];
 
-function createPaperReleaseConfig(usingLabel: string) {
+function createInitialReleaseConfig(usingLabel: string) {
   return {
-    [usingLabel]: {
+    [`intro-${usingLabel}`]: {
       styles: {
         backgroundColor: '#ffffff',
         borderColor: '#000000',
         color: '#000000',
       },
-      title: `${usingLabel}+`,
+      title: `Introduced: ${usingLabel}`,
       tooltip: {
-        title: `Introduced in /paper ${usingLabel}`,
-        desc: `This component was introduced in /paper ${usingLabel}`,
+        title: `Introduced in v${usingLabel}`,
+        desc: `This component was introduced in EDS Design version ${usingLabel}`,
+      },
+    },
+  };
+}
+
+function createCurrentReleaseConfig(usingLabel: string) {
+  return {
+    [`current-${usingLabel}`]: {
+      styles: {
+        backgroundColor: '#ffffff',
+        borderColor: '#000000',
+        color: '#000000',
+      },
+      title: `Current: ${usingLabel}`,
+      tooltip: {
+        title: `Current version v${usingLabel}`,
+        desc: `This component corresponds to EDS Design version ${usingLabel}`,
       },
     },
   };
@@ -62,10 +79,11 @@ export const parameters = {
     ],
   },
   badgesConfig: {
-    ...createPaperReleaseConfig('1.3'),
-    ...createPaperReleaseConfig('1.2'),
-    ...createPaperReleaseConfig('1.1'),
-    ...createPaperReleaseConfig('1.0'),
+    ...createInitialReleaseConfig('1.3'),
+    ...createInitialReleaseConfig('1.2'),
+    ...createInitialReleaseConfig('1.1'),
+    ...createInitialReleaseConfig('1.0'),
+    ...createCurrentReleaseConfig('2.0'),
     implementationExample: {
       styles: {
         backgroundColor: '#ffffff',

src/components/Accordion/Accordion.stories.tsx

@@ -13,7 +13,7 @@ export default {
   title: 'Components/Accordion',
   component: Accordion,
   parameters: {
-    badges: ['1.2'],
+    badges: ['intro-1.2'],
   },
   args: {
     headingAs: 'h2',
@@ -309,7 +309,7 @@ export const WithLargeHeader: Story = {
  */
 export const UsingComplexHeaders: Story = {
   parameters: {
-    badges: ['1.2', 'implementationExample'],
+    badges: ['intro-1.2', 'implementationExample'],
   },
   args: {
     children: (
@@ -364,7 +364,7 @@ export const UsingComplexHeaders: Story = {
  */
 export const UsingNumberIconInHeaders: Story = {
   parameters: {
-    badges: ['1.2', 'implementationExample'],
+    badges: ['intro-1.2', 'implementationExample'],
   },
   args: {
     children: (

src/components/Avatar/Avatar.stories.ts

@@ -7,7 +7,7 @@ export default {
   title: 'Components/Avatar',
   component: Avatar,
   parameters: {
-    badges: ['1.3'],
+    badges: ['intro-1.3'],
     layout: 'centered',
   },
 } as Meta<Args>;

src/components/Badge/Badge.stories.tsx

@@ -13,7 +13,7 @@ export default {
   },
   parameters: {
     layout: 'centered',
-    badges: ['1.2'],
+    badges: ['intro-1.2'],
   },
   argTypes: {
     children: {

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -26,7 +26,7 @@ export default {
     },
   },
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
   decorators: [(Story) => <div style={{ margin: '0.5rem' }}>{Story()}</div>],
 } as Meta<Args>;

src/components/Button/Button.stories.tsx

@@ -43,7 +43,7 @@ export default {
     },
   },
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
 } as Meta<Args>;
 

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -24,7 +24,7 @@ export default {
     },
   },
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
 } as Meta<Args>;
 

src/components/Card/Card.stories.tsx

@@ -17,7 +17,7 @@ export default {
     CardFooter: Card.Footer,
   },
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
   args: {
@@ -91,7 +91,7 @@ export const LoadingProfileCard: StoryObj<Args> = {
     isLoading: true,
   },
   parameters: {
-    badges: ['1.3', 'implementationExample'],
+    badges: ['intro-1.3', 'implementationExample'],
   },
   render: ({ isLoading, ...cardProps }) => {
     return (

src/components/Checkbox/Checkbox.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof Checkbox> = {
     label: 'Checkbox',
   },
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
 
   decorators: [(Story) => <div className="m-1">{Story()}</div>],

src/components/ClickableStyle/ClickableStyle.stories.tsx

@@ -15,7 +15,7 @@ export default {
     children: 'example text',
   },
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
     layout: 'centered',
     controls: { expand: true },
   },

src/components/FieldNote/FieldNote.stories.tsx

@@ -9,7 +9,7 @@ export default {
   title: 'Components/FieldNote',
   component: FieldNote,
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
 } as Meta<Args>;
 

src/components/Fieldset/Fieldset.stories.tsx

@@ -8,7 +8,7 @@ export default {
   title: 'Components/Fieldset',
   component: Fieldset,
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
   subcomponents: {
     FieldsetLegend: Fieldset.Legend,

src/components/Grid/Grid.stories.tsx

@@ -38,7 +38,7 @@ export default {
     },
   },
   parameters: {
-    badges: ['1.0', BADGE.DEPRECATED],
+    badges: ['intro-1.0', BADGE.DEPRECATED],
   },
   component: Grid,
   subcomponents: { GridItem: Grid.Item },

src/components/Heading/Heading.stories.tsx

@@ -7,7 +7,7 @@ export default {
   title: 'Components/Heading',
   component: Heading,
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
 } as Meta<Args>;
 

src/components/HorizontalStepper/HorizontalStepper.stories.tsx

@@ -14,7 +14,7 @@ export default {
     steps: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
   },
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
 
   decorators: [

src/components/Hr/Hr.stories.ts

@@ -7,7 +7,7 @@ export default {
   title: 'Components/Hr',
   component: Hr,
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
 } as Meta<Args>;
 

src/components/Icon/Icon.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Icon> = {
   title: 'Components/Icon',
   component: Icon,
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
   argTypes: {
     name: {

src/components/InlineNotification/InlineNotification.stories.tsx

@@ -6,7 +6,7 @@ export default {
   title: 'Components/InlineNotification',
   component: InlineNotification,
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
   args: {
     text: 'Inline notifications lorem ipsum text',

src/components/InputField/InputField.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof InputField> = {
   title: 'Components/InputField',
   component: InputField,
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
     backgrounds: {
       default: 'eds-color-neutral-white',
     },
@@ -151,7 +151,7 @@ export const WithBothMaxAndRecommendedLength: Story = {
  */
 export const TabularInput: Story = {
   parameters: {
-    badges: ['1.1', 'implementationExample'],
+    badges: ['intro-1.1', 'implementationExample'],
   },
   render: (args) => (
     <Table>

src/components/InputLabel/InputLabel.stories.ts

@@ -10,7 +10,7 @@ export default {
     children: 'Label',
   },
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
 } as Meta<Args>;
 

src/components/Label/Label.stories.tsx

@@ -8,7 +8,7 @@ export default {
   title: 'Components/Label',
   component: Label,
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
 } as Meta<Args>;
 

src/components/Link/Link.stories.tsx

@@ -8,7 +8,7 @@ export default {
   title: 'Components/Link',
   component: Link,
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
   args: {
     children: 'Link',

src/components/LoadingIndicator/LoadingIndicator.stories.ts

@@ -8,7 +8,7 @@ export default {
   component: LoadingIndicator,
   parameters: {
     layout: 'centered',
-    badges: ['1.2'],
+    badges: ['intro-1.2'],
   },
 } as Meta<Args>;
 

src/components/Menu/Menu.stories.tsx

@@ -18,7 +18,7 @@ export default {
     'Menu.Item': Menu.Item,
   },
   parameters: {
-    badges: ['1.2'],
+    badges: ['intro-1.2'],
     layout: 'centered',
   },
   argTypes: {
@@ -166,7 +166,7 @@ export const WithCustomButton: StoryObj<MenuProps> = {
 
 export const MenuWithAvatarButton: StoryObj<MenuProps> = {
   parameters: {
-    badges: ['1.3', 'implementationExample'],
+    badges: ['intro-1.3', 'implementationExample'],
   },
   args: {
     children: (
@@ -225,7 +225,7 @@ export const MenuWithIconButton: StoryObj<MenuProps & { iconName: IconName }> =
       iconName: 'dots-vertical',
     },
     parameters: {
-      badges: ['1.2', 'implementationExample'],
+      badges: ['intro-1.2', 'implementationExample'],
     },
     render: ({ iconName }) => (
       <Menu>

src/components/Modal/Modal.stories.tsx

@@ -14,7 +14,7 @@ export default {
     // The modal is initially closed for most of these stories,
     // which renders testing it for visual regressions unhelpful.
     chromatic: { disableSnapshot: true },
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
   tags: ['autodocs'],
   argTypes: {

src/components/NumberIcon/NumberIcon.stories.tsx

@@ -7,7 +7,7 @@ export default {
   title: 'Components/NumberIcon',
   component: NumberIcon,
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
   args: {
     'aria-label': 'Step 1',
@@ -96,7 +96,7 @@ export const DifferentNumbers: Story = {
  */
 export const NumberIconList: Story = {
   parameters: {
-    badges: ['1.0', 'implementationExample'],
+    badges: ['intro-1.0', 'implementationExample'],
   },
   render: () => (
     <div className="flex flex-wrap gap-1">

src/components/PageLevelBanner/PageLevelBanner.stories.tsx

@@ -8,7 +8,7 @@ export default {
   title: 'Components/PageLevelBanner',
   component: PageLevelBanner,
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
   args: {
     title:

src/components/Popover/Popover.stories.tsx

@@ -12,7 +12,7 @@ export default {
   component: Popover,
   parameters: {
     layout: 'centered',
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
     chromatic: {
       // These stories are very flaky, though we're not sure why.
       // We tried delaying the snapshot just in case there's a timing issue at play here, which was not successful.

src/components/PopoverContainer/PopoverContainer.stories.tsx

@@ -8,7 +8,7 @@ export default {
   title: 'Components/PopoverContainer',
   component: PopoverContainer,
   parameters: {
-    badges: ['1.2'],
+    badges: ['intro-1.2'],
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
 } as Meta<Args>;

src/components/PopoverListItem/PopoverListItem.stories.tsx

@@ -7,7 +7,7 @@ export default {
   title: 'Components/PopoverListItem',
   component: PopoverListItem,
   parameters: {
-    badges: ['1.2'],
+    badges: ['intro-1.2'],
   },
 } as Meta<Args>;
 

src/components/ProgressBar/ProgressBar.stories.tsx

@@ -11,7 +11,7 @@ export default {
     maxValue: 100,
   },
   parameters: {
-    badges: ['1.2'],
+    badges: ['intro-1.2'],
     backgrounds: {
       default: 'eds-color-neutral-white',
     },

src/components/Radio/Radio.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Radio> = {
     checked: false,
   },
   parameters: {
-    badges: ['1.0'],
+    badges: ['intro-1.0'],
   },
   decorators: [(Story) => <div style={{ margin: '0.25rem' }}>{Story()}</div>],
 };