Feature/2517 tag - improve storybook hierarchy

chromatic/.storybook/stories/all.stories.ts

@@ -19,6 +19,7 @@ import { All as AllSelect } from '../../../packages/components/select/src/select
 import { All as AllSkeleton } from '../../../packages/components/skeleton/src/skeleton.stories';
 import { All as AllSpinner } from '../../../packages/components/spinner/src/spinner.stories';
 import { All as AllSwitch } from '../../../packages/components/switch/src/switch.stories';
+import { All as AllTag } from '../../../packages/components/tag/src/root.stories';
 import { All as AllTextArea } from '../../../packages/components/text-area/src/text-area.stories';
 import { All as AllTextField } from '../../../packages/components/text-field/src/text-field.stories';
 import { All as AllToggleButton } from '../../../packages/components/toggle-button/src/toggle-button.stories';
@@ -83,6 +84,7 @@ export const Select = { render: AllSelect.render };
 export const Skeleton = { render: AllSkeleton.render };
 export const Spinner = { render: AllSpinner.render };
 export const Switch = { render: AllSwitch.render };
+export const Tag = { render: AllTag.render };
 export const TextArea = { render: AllTextArea.render };
 export const TextField = { render: AllTextField.render };
 export const ToggleButton = { render: AllToggleButton.render };

packages/components/tag/src/root.stories.ts

@@ -0,0 +1,61 @@
+import { type Meta, type StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import '../register.js';
+
+type Story = StoryObj;
+
+export default {
+  title: 'Feedback & status/Tag',
+  tags: ['preview']
+} as Meta;
+
+export const All: Story = {
+  render: () => {
+    return html`
+      <style>
+        .wrapper {
+          align-items: center;
+          display: inline-grid;
+          grid-template-columns: auto 1fr 1fr 1fr 1fr;
+          gap: 1rem;
+          justify-items: center;
+        }
+      </style>
+      <div class="wrapper">
+        <span></span>
+        <span style="justify-self: center; grid-column: 2 / 4">md</span>
+        <span style="justify-self: center; grid-column: 4 / 6">lg</span>
+
+        <span></span>
+        <span>default</span>
+        <span>info</span>
+        <span>default</span>
+        <span>info</span>
+
+        <span>Default</span>
+        <sl-tag>Label</sl-tag>
+        <sl-tag variant="info">Label</sl-tag>
+        <sl-tag size="lg">Label</sl-tag>
+        <sl-tag size="lg" variant="info">Label</sl-tag>
+
+        <span>Overflow</span>
+        <sl-tag style="max-inline-size: 100px">Overflow label</sl-tag>
+        <sl-tag style="max-inline-size: 100px" variant="info">Overflow label</sl-tag>
+        <sl-tag size="lg" style="max-inline-size: 100px">Overflow label</sl-tag>
+        <sl-tag size="lg" style="max-inline-size: 100px" variant="info">Overflow label</sl-tag>
+
+        <span>Removable</span>
+        <sl-tag removable>Removable</sl-tag>
+        <sl-tag removable variant="info">Removable</sl-tag>
+        <sl-tag removable size="lg">Removable</sl-tag>
+        <sl-tag removable size="lg" variant="info">Removable</sl-tag>
+
+        <span>Disabled</span>
+        <sl-tag disabled>Disabled</sl-tag>
+        <sl-tag disabled variant="info">Disabled</sl-tag>
+        <sl-tag size="lg" disabled>Disabled</sl-tag>
+        <sl-tag size="lg" disabled variant="info">Disabled</sl-tag>
+      </div>
+    `;
+  }
+};

packages/components/tag/src/tag-list.stories.ts

@@ -13,7 +13,7 @@ type Props = Pick<TagList, 'size' | 'stacked' | 'variant'> & {
 type Story = StoryObj<Props>;
 
 export default {
-  title: 'Feedback & status/Tag list',
+  title: 'Feedback & status/Tag/Tag list',
   tags: ['preview'],
   args: {
     count: 50,

packages/components/tag/src/tag.stories.ts

@@ -11,7 +11,7 @@ type Props = Pick<Tag, 'disabled' | 'label' | 'removable' | 'size' | 'variant'>
 type Story = StoryObj<Props>;
 
 export default {
-  title: 'Feedback & status/Tag',
+  title: 'Feedback & status/Tag/Tag',
   tags: ['preview'],
   parameters: {
     a11y: {
@@ -79,54 +79,3 @@ export const Removable: Story = {
     removable: true
   }
 };
-
-export const All: Story = {
-  render: () => {
-    return html`
-      <style>
-        .wrapper {
-          align-items: center;
-          display: inline-grid;
-          grid-template-columns: auto 1fr 1fr 1fr 1fr;
-          gap: 1rem;
-          justify-items: center;
-        }
-      </style>
-      <div class="wrapper">
-        <span></span>
-        <span style="justify-self: center; grid-column: 2 / 4">md</span>
-        <span style="justify-self: center; grid-column: 4 / 6">lg</span>
-
-        <span></span>
-        <span>default</span>
-        <span>info</span>
-        <span>default</span>
-        <span>info</span>
-
-        <span>Default</span>
-        <sl-tag>Label</sl-tag>
-        <sl-tag variant="info">Label</sl-tag>
-        <sl-tag size="lg">Label</sl-tag>
-        <sl-tag size="lg" variant="info">Label</sl-tag>
-
-        <span>Overflow</span>
-        <sl-tag style="max-inline-size: 100px">Overflow label</sl-tag>
-        <sl-tag style="max-inline-size: 100px" variant="info">Overflow label</sl-tag>
-        <sl-tag size="lg" style="max-inline-size: 100px">Overflow label</sl-tag>
-        <sl-tag size="lg" style="max-inline-size: 100px" variant="info">Overflow label</sl-tag>
-
-        <span>Removable</span>
-        <sl-tag removable>Removable</sl-tag>
-        <sl-tag removable variant="info">Removable</sl-tag>
-        <sl-tag removable size="lg">Removable</sl-tag>
-        <sl-tag removable size="lg" variant="info">Removable</sl-tag>
-
-        <span>Disabled</span>
-        <sl-tag disabled>Disabled</sl-tag>
-        <sl-tag disabled variant="info">Disabled</sl-tag>
-        <sl-tag size="lg" disabled>Disabled</sl-tag>
-        <sl-tag size="lg" disabled variant="info">Disabled</sl-tag>
-      </div>
-    `;
-  }
-};