chore: update component version metadata (#2114)

Author: booc0mtaco

.storybook/preview.tsx

@@ -25,35 +25,35 @@ export const decorators = [
   ),
 ];
 
-function createInitialReleaseConfig(usingLabel: string) {
+function createComponentVersion(usingLabel: string) {
   return {
-    [`intro-${usingLabel}`]: {
+    [`api-${usingLabel}`]: {
       styles: {
         backgroundColor: '#ffffff',
         borderColor: '#000000',
         color: '#000000',
       },
-      title: `Introduced: ${usingLabel}`,
+      title: `Component API Version: ${usingLabel}`,
       tooltip: {
-        title: `Introduced in v${usingLabel}`,
-        desc: `This component was introduced in EDS Design version ${usingLabel}`,
+        title: `Code / API v${usingLabel}`,
+        desc: `This component's API version is at ${usingLabel}`,
       },
     },
   };
 }
 
-function createCurrentReleaseConfig(usingLabel: string) {
+function createThemeVersion(usingLabel: string) {
   return {
-    [`current-${usingLabel}`]: {
+    [`theme-${usingLabel}`]: {
       styles: {
         backgroundColor: '#ffffff',
         borderColor: '#000000',
         color: '#000000',
       },
-      title: `Current: ${usingLabel}`,
+      title: `Theme Version: ${usingLabel}`,
       tooltip: {
-        title: `Current version v${usingLabel}`,
-        desc: `This component corresponds to EDS Design version ${usingLabel}`,
+        title: `Current Theme version v${usingLabel}`,
+        desc: `This component's theme corresponds to Edu Design System Version is at ${usingLabel}`,
       },
     },
   };
@@ -79,15 +79,13 @@ export const parameters: Preview['parameters'] = {
     ],
   },
   badgesConfig: {
-    ...createInitialReleaseConfig('2.0'),
-    ...createInitialReleaseConfig('1.3'),
-    ...createInitialReleaseConfig('1.2'),
-    ...createInitialReleaseConfig('1.1'),
-    ...createInitialReleaseConfig('1.0'),
-    ...createCurrentReleaseConfig('1.0'),
-    ...createCurrentReleaseConfig('1.3'),
-    ...createCurrentReleaseConfig('2.0'),
-    ...createCurrentReleaseConfig('2.1'),
+    ...createComponentVersion('2.0'),
+    ...createComponentVersion('1.3'),
+    ...createComponentVersion('1.2'),
+    ...createComponentVersion('1.1'),
+    ...createComponentVersion('1.0'),
+    ...createThemeVersion('1.0'),
+    ...createThemeVersion('2.0'),
     implementationExample: {
       styles: {
         backgroundColor: '#ffffff',

src/components/Accordion/Accordion.stories.tsx

@@ -12,7 +12,7 @@ export default {
   // TODO: add subcomponents like Badge has
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.2', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
     controls: { sort: 'requiredFirst' },
   },
   args: {

src/components/AppNotification/AppNotification.stories.tsx

@@ -14,7 +14,7 @@ export default {
   component: AppNotification,
   parameters: {
     layout: 'centered',
-    badges: ['intro-2.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
   args: {
     title: 'This is an AppNotification title',

src/components/Avatar/Avatar.stories.ts

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

src/components/Badge/Badge.stories.tsx

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

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -21,7 +21,7 @@ export default {
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-1.3'],
+    badges: ['api-1.3', 'theme-1.0'],
   },
   argTypes: {
     children: {

src/components/Button/Button.stories.tsx

@@ -21,7 +21,7 @@ export default {
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
 } as Meta<ButtonProps>;
 

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -24,7 +24,7 @@ export default {
     },
   },
   parameters: {
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
 } as Meta<typeof ButtonGroup>;

src/components/Card/Card.stories.tsx

@@ -14,7 +14,7 @@ export default {
   component: Card,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
   args: {
@@ -378,7 +378,7 @@ export const WhileDragging: Story = {
  */
 export const CancelMembership: Story = {
   parameters: {
-    badges: ['intro-1.0', 'current-2.0', 'implementationExample'],
+    badges: ['api-1.0', 'theme-2.0', 'implementationExample'],
   },
   args: {
     children: (

src/components/Checkbox/Checkbox.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Checkbox> = {
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
 
   decorators: [(Story) => <div className="p-8">{Story()}</div>],

src/components/DataTable/DataTable.stories.tsx

@@ -32,7 +32,7 @@ export default {
     'DataTable.DataCell': DataTableDataCell,
   },
   parameters: {
-    badges: [BADGE.BETA, 'intro-1.0', 'current-1.0'],
+    badges: [BADGE.BETA, 'api-1.0', 'theme-2.0'],
     chromatic: {
       viewports: [
         chromaticViewports.ipadMini,

src/components/FieldLabel/FieldLabel.stories.ts

@@ -10,7 +10,7 @@ export default {
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-2.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
 } as Meta<typeof FieldLabel>;
 

src/components/FieldNote/FieldNote.stories.tsx

@@ -10,7 +10,7 @@ export default {
   component: FieldNote,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
 } as Meta<typeof FieldNote>;
 

src/components/Fieldset/Fieldset.stories.tsx

@@ -9,7 +9,7 @@ export default {
   component: Fieldset,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
   // TODO: fix up the sub-component documentation for Fieldset.Legend
   subcomponents: {
@@ -122,7 +122,7 @@ export const FieldsetLegendWithSubtitle: StoryObj<LegendArgs> = {
  * ```
  */
 export const WithCheckboxes: StoryObj<Args> = {
-  parameters: { badges: ['intro-1.3', 'current-2.0', 'implementationExample'] },
+  parameters: { badges: ['api-1.3', 'theme-2.0', 'implementationExample'] },
   args: {
     fieldNote: 'Attached field note to field set',
     children: (
@@ -157,7 +157,7 @@ export const WithCheckboxes: StoryObj<Args> = {
 };
 
 export const WithDisabledCheckboxes: StoryObj<Args> = {
-  parameters: { badges: ['intro-1.3', 'current-2.0', 'implementationExample'] },
+  parameters: { badges: ['api-1.3', 'theme-2.0', 'implementationExample'] },
   args: {
     fieldNote: 'Attached field note to field set',
     isDisabled: true,
@@ -166,7 +166,7 @@ export const WithDisabledCheckboxes: StoryObj<Args> = {
 };
 
 export const WithErrorCheckboxes: StoryObj<Args> = {
-  parameters: { badges: ['intro-1.3', 'current-2.0', 'implementationExample'] },
+  parameters: { badges: ['api-1.3', 'theme-2.0', 'implementationExample'] },
   args: {
     fieldNote: 'Attached field note to field set',
     status: 'critical',
@@ -175,7 +175,7 @@ export const WithErrorCheckboxes: StoryObj<Args> = {
 };
 
 export const WithRadioButton: StoryObj<Args> = {
-  parameters: { badges: ['intro-1.3', 'current-2.0', 'implementationExample'] },
+  parameters: { badges: ['api-1.3', 'theme-2.0', 'implementationExample'] },
   args: {
     fieldNote: 'Attached field note to field set',
     children: (
@@ -210,7 +210,7 @@ export const WithRadioButton: StoryObj<Args> = {
 };
 
 export const WithDisabledRadioButton: StoryObj<Args> = {
-  parameters: { badges: ['intro-1.3', 'current-2.0', 'implementationExample'] },
+  parameters: { badges: ['api-1.3', 'theme-2.0', 'implementationExample'] },
   args: {
     fieldNote: 'Attached field note to field set',
     isDisabled: true,
@@ -219,7 +219,7 @@ export const WithDisabledRadioButton: StoryObj<Args> = {
 };
 
 export const WithErrorRadioButton: StoryObj<Args> = {
-  parameters: { badges: ['intro-1.3', 'current-2.0', 'implementationExample'] },
+  parameters: { badges: ['api-1.3', 'theme-2.0', 'implementationExample'] },
   args: {
     fieldNote: 'Attached field note to field set',
     status: 'critical',

src/components/Heading/Heading.stories.tsx

@@ -8,7 +8,7 @@ export default {
   component: Heading,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-1.3', 'theme-1.0'],
   },
 } as Meta<Args>;
 

src/components/HorizontalStepper/HorizontalStepper.stories.tsx

@@ -14,7 +14,7 @@ export default {
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-1.3'],
+    badges: ['api-1.3', 'theme-1.0'],
   },
 
   decorators: [(Story) => <div className="m-4">{Story()}</div>],

src/components/Hr/Hr.stories.ts

@@ -7,7 +7,7 @@ export default {
   component: Hr,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-1.3'],
+    badges: ['api-1.3', 'theme-1.0'],
   },
   args: {
     className: 'w-96',

src/components/Icon/Icon.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof Icon> = {
   component: Icon,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
   argTypes: {
     name: {

src/components/InlineNotification/InlineNotification.stories.tsx

@@ -8,7 +8,7 @@ export default {
   component: InlineNotification,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
   args: {
     title: 'Inline notifications lorem ipsum text',

src/components/InputChip/InputChip.stories.ts

@@ -7,7 +7,7 @@ export default {
   title: 'Components/InputChip',
   component: InputChip,
   parameters: {
-    badges: ['intro-1.0', 'current-1.0'],
+    badges: ['api-1.0', 'theme-2.0'],
   },
   argTypes: {
     onClick: {

src/components/InputField/InputField.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<typeof InputField> = {
   component: InputField,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
     backgrounds: {
       default: 'background-utility-inverse-high-emphasis',
     },
@@ -345,7 +345,7 @@ export const WithBothMaxAndRecommendedLength: Story = {
  */
 export const TabularInput: Story = {
   parameters: {
-    badges: ['intro-1.1', 'implementationExample'],
+    badges: ['api-2.0', 'implementationExample'],
   },
   render: (args) => (
     <Table>

src/components/Label/Label.stories.tsx

@@ -9,7 +9,7 @@ export default {
   component: Label,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-1.3'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
 } as Meta<Args>;
 

src/components/Link/Link.stories.tsx

@@ -7,7 +7,7 @@ export default {
   component: Link,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
   args: {
     children: 'Link',

src/components/LoadingIndicator/LoadingIndicator.stories.ts

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

src/components/Menu/Menu.stories.tsx

@@ -16,7 +16,7 @@ export default {
   component: Menu,
   // TODO: Add sub-components section
   parameters: {
-    badges: ['intro-1.2', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
     layout: 'centered',
   },
   argTypes: {
@@ -224,7 +224,7 @@ export const WithCustomSecondaryButton: Story = {
  */
 export const MenuWithAvatarButton: Story = {
   parameters: {
-    badges: ['intro-1.3', 'implementationExample'],
+    badges: ['api-2.0', 'implementationExample'],
   },
   args: {
     children: (
@@ -289,7 +289,7 @@ export const MenuWithIconButton: StoryObj<MenuProps & { iconName: IconName }> =
       iconName: 'dots-vertical',
     },
     parameters: {
-      badges: ['intro-1.2', 'implementationExample'],
+      badges: ['api-2.0', 'implementationExample'],
     },
     render: ({ iconName }) => (
       <Menu>

src/components/Modal/Modal.stories.tsx

@@ -15,7 +15,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: ['intro-1.0', 'current-2.1'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
   tags: ['autodocs'],
   decorators: [(Story) => <div className="p-8">{Story()}</div>],