docs: update storybook categories and adjust stories for components

parasutcom · Aug 9, 2024 · 1ec892e · 1ec892e
1 parent 4a3bf95
commit 1ec892e
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 118 deletions.
diff --git a/src/components/aggregate/fds-aggregate.stories.ts b/src/components/aggregate/fds-aggregate.stories.ts
@@ -38,7 +38,7 @@ export default {
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export const Default = (args: any) => html`
+export const Base = (args: any) => html`
   <fds-aggregate>
     <p slot="meta">${args.meta}</p>
     <p slot="tally">${args.tally}</p>

diff --git a/src/components/badge/fds-badge.stories.ts b/src/components/badge/fds-badge.stories.ts
@@ -54,7 +54,7 @@ export default {
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export const Default = (args: any) => html`
+export const Base = (args: any) => html`
   <fds-badge
     letter=${ifDefined(args.letter)}
     image=${ifDefined(args.image)}
@@ -70,33 +70,21 @@ export const Letter = {
     <div style="display: flex; align-items: center; gap: 1rem">
       <fds-badge letter="F"></fds-badge>
       <fds-badge letter="DS"></fds-badge>
+      <fds-badge letter="FDS"></fds-badge>
     </div>
   `,
 };
 
 export const Image = {
   render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 1rem">
-      <div style="display: flex; align-items: center; gap: 1rem">
-        <fds-badge
-          image="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?q=80&amp;w=3064&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-        ></fds-badge>
-        <fds-badge
-          image="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?q=80&amp;w=3064&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          size="large"
-        ></fds-badge>
-      </div>
-      <div style="display: flex; align-items: center; gap: 1rem">
-        <fds-badge
-          image="https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&amp;w=2333&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          shape="circle"
-        ></fds-badge>
-        <fds-badge
-          image="https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&amp;w=2333&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          shape="circle"
-          size="large"
-        ></fds-badge>
-      </div>
+    <div style="display: flex; align-items: center; gap: 1rem">
+      <fds-badge
+        image="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?q=80&amp;w=3064&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      ></fds-badge>
+      <fds-badge
+        image="https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&amp;w=2333&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        shape="circle"
+      ></fds-badge>
     </div>
   `,
 };
@@ -105,7 +93,6 @@ export const Icon = {
   render: () => html`
     <div style="display: flex; align-items: center; gap: 1rem">
       <fds-badge icon="bank"></fds-badge>
-      <fds-badge icon="bank" size="large"></fds-badge>
     </div>
   `,
 };

diff --git a/src/components/badge/fds-badge.ts b/src/components/badge/fds-badge.ts
@@ -38,7 +38,7 @@ export class FdsBadge extends LitElement {
     const iconSize = this.size === 'large' ? 'x-large' : 'large';
     return this.icon
       ? html`<fds-icon
-          prefix="far"
+          icon-style="far"
           name="${this.icon}"
           size="${iconSize}"
           aria-hidden="true"

diff --git a/src/components/button/fds-button.stories.ts b/src/components/button/fds-button.stories.ts
@@ -81,12 +81,12 @@ export default {
   args: {
     variant: 'primary',
     size: 'medium',
-    label: 'Button',
+    label: 'Button label',
   },
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export const Default = (args: any) => html`
+export const Base = (args: any) => html`
   <fds-button
     variant=${ifDefined(args.variant)}
     size=${ifDefined(args.size)}
@@ -116,21 +116,21 @@ export const Variants = {
   `,
 };
 
-export const Size = {
+export const Sizes = {
   render: () => html`
     <div style="display: flex; align-items: center; gap: 1rem">
-      <fds-button variant="primary" size="large">Large button</fds-button>
-      <fds-button variant="primary" size="medium">Medium button</fds-button>
       <fds-button variant="primary" size="small">Small button</fds-button>
+      <fds-button variant="primary" size="medium">Medium button</fds-button>
+      <fds-button variant="primary" size="large">Large button</fds-button>
     </div>
   `,
 };
 
-export const FullWidth = {
+export const Busy = {
   render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 1rem">
-      <fds-button variant="primary" full-width>Full width button</fds-button>
-      <fds-button variant="outline" full-width>Full width button</fds-button>
+    <div style="display: flex; gap: 1rem">
+      <fds-button variant="primary" busy>Busy button</fds-button>
+      <fds-button variant="outline" busy>Busy button</fds-button>
     </div>
   `,
 };
@@ -144,20 +144,28 @@ export const Disabled = {
   `,
 };
 
-export const Busy = {
+export const FullWidth = {
   render: () => html`
-    <div style="display: flex; gap: 1rem">
-      <fds-button variant="primary" busy>Busy button</fds-button>
-      <fds-button variant="outline" busy>Busy button</fds-button>
+    <div style="display: flex; flex-direction: column; gap: 1rem">
+      <fds-button variant="primary" full-width>Full width button</fds-button>
+      <fds-button variant="outline" full-width>Full width button</fds-button>
     </div>
   `,
 };
 
+export const LinkButton = {
+  render: () => html`
+    <fds-button variant="primary" href="https://www.framedesignsystem.com" target="_blank"
+      >Link button</fds-button
+    >
+  `,
+};
+
 export const WithIcon = {
   render: () => html`
     <div style="display: flex; gap: 1rem">
-      <fds-button variant="primary" icon="filter">Icon left</fds-button>
-      <fds-button variant="primary" icon="plus" icon-placement="right">Icon right</fds-button>
+      <fds-button variant="primary" icon="filter">Button label</fds-button>
+      <fds-button variant="primary" icon="plus" icon-placement="right">Button label</fds-button>
     </div>
   `,
 };
@@ -166,7 +174,11 @@ export const IconOnly = {
   render: () => html`
     <div style="display: flex; gap: 1rem">
       <fds-button variant="primary" icon="plus"></fds-button>
+      <fds-button variant="secondary" icon="plus"></fds-button>
       <fds-button variant="outline" icon="plus"></fds-button>
+      <fds-button variant="ghost" icon="plus"></fds-button>
+      <fds-button variant="destructive" icon="plus"></fds-button>
+      <fds-button variant="destructive-outline" icon="plus"></fds-button>
     </div>
   `,
 };
diff --git a/src/components/button/fds-button.ts b/src/components/button/fds-button.ts
@@ -65,7 +65,7 @@ export class FdsButton extends LitElement {
   }
 
   private renderIcon() {
-    return this.icon ? html`<fds-icon prefix="far" name=${this.icon}></fds-icon>` : '';
+    return this.icon ? html`<fds-icon icon-style="far" name=${this.icon}></fds-icon>` : '';
   }
 
   private renderLabel() {

diff --git a/src/components/icon/fds-icon.stories.ts b/src/components/icon/fds-icon.stories.ts
@@ -21,7 +21,7 @@ export default {
         type: 'select',
       },
     },
-    prefix: {
+    iconStyle: {
       options: ['fas', 'far', 'fad'],
       control: {
         type: 'inline-radio',
@@ -35,27 +35,37 @@ export default {
     },
   },
   args: {
-    prefix: 'fas',
-    name: 'home',
+    iconStyle: 'fas',
+    name: 'bank',
     size: 'medium',
   },
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export const Default = (args: any) => html`
-  <fds-icon name=${args.name} prefix=${args.prefix} size=${args.size}></fds-icon>
+export const Base = (args: any) => html`
+  <fds-icon name=${args.name} icon-style=${args.iconStyle} size=${args.size}></fds-icon>
 `;
 
-export const Size = {
+export const Styles = {
   render: () => html`
     <div style="display: flex; align-items: center; gap: 1rem">
-      <fds-icon prefix="fas" name="home" size="x-small"></fds-icon>
-      <fds-icon prefix="fas" name="home" size="small"></fds-icon>
-      <fds-icon prefix="fas" name="home" size="medium"></fds-icon>
-      <fds-icon prefix="fas" name="home" size="large"></fds-icon>
-      <fds-icon prefix="fas" name="home" size="x-large"></fds-icon>
-      <fds-icon prefix="fas" name="home" size="2x-large"></fds-icon>
-      <fds-icon prefix="fas" name="home" size="3x-large"></fds-icon>
+      <fds-icon icon-style="fas" name="bank"></fds-icon>
+      <fds-icon icon-style="far" name="bank"></fds-icon>
+      <fds-icon icon-style="fad" name="bank"></fds-icon>
+    </div>
+  `,
+};
+
+export const Sizes = {
+  render: () => html`
+    <div style="display: flex; align-items: center; gap: 1rem">
+      <fds-icon icon-style="fas" name="bank" size="x-small"></fds-icon>
+      <fds-icon icon-style="fas" name="bank" size="small"></fds-icon>
+      <fds-icon icon-style="fas" name="bank" size="medium"></fds-icon>
+      <fds-icon icon-style="fas" name="bank" size="large"></fds-icon>
+      <fds-icon icon-style="fas" name="bank" size="x-large"></fds-icon>
+      <fds-icon icon-style="fas" name="bank" size="2x-large"></fds-icon>
+      <fds-icon icon-style="fas" name="bank" size="3x-large"></fds-icon>
     </div>
   `,
 };
@@ -68,7 +78,7 @@ export const IconList = {
       ${icons.map(
         icon => html`
           <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem">
-            <fds-icon prefix="far" name="${icon}"></fds-icon>
+            <fds-icon icon-style="fas" name="${icon}"></fds-icon>
             <div style="font-family: sans-serif;">${icon}</div>
           </div>
         `

diff --git a/src/components/icon/fds-icon.ts b/src/components/icon/fds-icon.ts
@@ -26,8 +26,8 @@ export class FdsIcon extends LitElement {
     return [unsafeCSS(style)];
   }
 
-  @property({ type: String, reflect: true })
-  prefix: IconStyles = 'fas';
+  @property({ type: String, reflect: true, attribute: 'icon-style' })
+  iconStyle: IconStyles = 'fas';
 
   @property({ type: String, reflect: true })
   name: string = '';
@@ -37,7 +37,7 @@ export class FdsIcon extends LitElement {
 
   private _getIcon(): string {
     const iconDefinition = findIconDefinition({
-      prefix: this.prefix,
+      prefix: this.iconStyle,
       iconName: this.name as IconName,
     });
     return iconDefinition ? icon(iconDefinition).html.join('') : '';

diff --git a/src/components/progress-bar/fds-progress-bar.stories.ts b/src/components/progress-bar/fds-progress-bar.stories.ts
@@ -36,15 +36,13 @@ export default {
     },
   },
   args: {
-    label: 'Process label',
-    valueLabel: '%40',
     value: 40,
     size: 'medium',
   },
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export const Default = (args: any) => html`
+export const Base = (args: any) => html`
   <fds-progress-bar
     value=${ifDefined(args.value)}
     label=${ifDefined(args.label)}
@@ -54,7 +52,7 @@ export const Default = (args: any) => html`
   </fds-progress-bar>
 `;
 
-export const Plain = {
+export const Sizes = {
   render: () => html`
     <div style="display: flex; flex-direction: column; gap: 2rem">
       <fds-progress-bar value="40" size="small"></fds-progress-bar>
@@ -64,35 +62,10 @@ export const Plain = {
   `,
 };
 
-export const WithoutValueLabel = {
-  render: () => html` <fds-progress-bar value="40" label="Process label"></fds-progress-bar> `,
+export const WithLabel = {
+  render: () => html` <fds-progress-bar value="40" label="Progress label"></fds-progress-bar> `,
 };
 
-export const WithoutLabel = {
+export const WithValueLabel = {
   render: () => html` <fds-progress-bar value="40" value-label="%40"></fds-progress-bar> `,
 };
-
-export const Size = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 2rem">
-      <fds-progress-bar
-        value="40"
-        size="small"
-        label="Process label"
-        value-label="%40"
-      ></fds-progress-bar>
-      <fds-progress-bar
-        value="40"
-        size="medium"
-        label="Process label"
-        value-label="%40"
-      ></fds-progress-bar>
-      <fds-progress-bar
-        value="40"
-        size="large"
-        label="Process label"
-        value-label="%40"
-      ></fds-progress-bar>
-    </div>
-  `,
-};
diff --git a/src/components/spinner/fds-spinner.stories.ts b/src/components/spinner/fds-spinner.stories.ts
@@ -33,7 +33,7 @@ export default {
         type: 'text',
       },
     },
-    LabelPlacement: {
+    labelPlacement: {
       options: ['horizontal', 'vertical'],
       control: {
         type: 'inline-radio',
@@ -52,7 +52,7 @@ export const Base = (args: any) => html`
     variant=${ifDefined(args.variant)}
     size=${ifDefined(args.size)}
     label=${ifDefined(args.label)}
-    label-placement=${ifDefined(args.LabelPlacement)}
+    label-placement=${ifDefined(args.labelPlacement)}
   ></fds-spinner>
 `;
 
@@ -65,17 +65,11 @@ export const Variants = {
   `,
 };
 
-export const Size = {
+export const Sizes = {
   render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 1rem">
-      <div style="display: flex; align-items: center; gap: 1rem">
-        <fds-spinner variant="primary" size="medium"></fds-spinner>
-        <fds-spinner variant="primary" size="small"></fds-spinner>
-      </div>
-      <div style="display: flex; align-items: center; gap: 1rem">
-        <fds-spinner variant="secondary" size="medium"></fds-spinner>
-        <fds-spinner variant="secondary" size="small"></fds-spinner>
-      </div>
+    <div style="display: flex; align-items: center; gap: 1rem">
+      <fds-spinner variant="primary" size="small"></fds-spinner>
+      <fds-spinner variant="primary" size="medium"></fds-spinner>
     </div>
   `,
 };

diff --git a/src/components/spinner/fds-spinner.ts b/src/components/spinner/fds-spinner.ts
@@ -24,7 +24,7 @@ export class FdsSpinner extends LitElement {
   label?: string = '';
 
   @property({ type: String, reflect: true, attribute: 'label-placement' })
-  LabelPlacement: LabelPlacement = 'horizontal';
+  labelPlacement: LabelPlacement = 'horizontal';
 
   render(): TemplateResult {
     const iconSize = this.size === 'medium' ? '3x-large' : 'medium';
@@ -33,7 +33,7 @@ export class FdsSpinner extends LitElement {
       role="progressbar"
       aria-label="${ifDefined(this.label ? this.label : 'Loading')}"
     >
-      <fds-icon prefix="far" name="spinner-third" size="${iconSize}"></fds-icon>
+      <fds-icon icon-style="far" name="spinner-third" size="${iconSize}"></fds-icon>
       ${this.label ? html`<div class="fds-spinner__label">${this.label}</div>` : ''}
     </div>`;
   }