@scania/tegel 0.0.4 → 0.0.5

package/dist/collection/components/slider/slider.stories.js

@@ -3,141 +3,163 @@ import readme from './readme.md';
 export default {
   title: 'Components/Slider',
   argTypes: {
-    initialValue: {
-      name: 'Initial value',
-      description: 'Initial value for slider',
-      control: {
-        type: 'text',
-      },
-    },
     min: {
       name: 'Min. value',
-      description: 'Minimum value',
+      description: 'Sets the minimum value for the slider.',
       control: {
-        type: 'text',
+        type: 'number',
+      },
+      table: {
+        defaultValue: { summary: 0 },
       },
     },
     max: {
       name: 'Max. value',
-      description: 'Maximum value',
+      description: 'Sets the maximum value for the slider.',
       control: {
-        type: 'text',
+        type: 'number',
+      },
+      table: {
+        defaultValue: { summary: 100 },
+      },
+    },
+    initialValue: {
+      name: 'Initial value',
+      description: 'Sets the initial value for the slider.',
+      control: {
+        type: 'number',
+      },
+      table: {
+        defaultValue: { summary: 0 },
       },
     },
     showLabel: {
       name: 'Show label',
-      description: 'Show or hide label',
+      description: 'Toggles if the lable should be shown or hidden.',
       control: {
         type: 'boolean',
       },
     },
     labelText: {
       name: 'Label text',
-      description: 'Text for label',
+      description: 'Sets the text for the label.',
       control: {
         type: 'text',
       },
-      if: {
-        arg: 'showLabel',
-        truthy: true,
-      },
-    },
-    showTooltip: {
-      name: 'Show tooltip',
-      description: 'Show or hide tooltip',
-      control: {
-        type: 'boolean',
-      },
+      if: { arg: 'showLabel', eq: true },
     },
     showTicks: {
       name: 'Show ticks',
-      description: 'Show or hide ticks',
+      description: 'Toggles if ticks should be shown or hidden.',
       control: {
         type: 'boolean',
       },
     },
     numTicks: {
       name: 'Number of ticks',
-      description: 'Set the number of ticks to display',
+      description: 'Sets the number of ticks to be displayed.',
       control: {
-        type: 'text',
+        type: 'number',
+      },
+      if: { arg: 'showTicks', eq: true },
+      table: {
+        defaultValue: { summary: 0 },
+      },
+    },
+    showTickNumbers: {
+      name: 'Show tick numbers',
+      description: 'Toggles if tick numbers should be shown or hidden.',
+      control: {
+        type: 'boolean',
       },
-      if: {
-        arg: 'showTicks',
-        truthy: true,
+      if: { arg: 'showTicks', eq: true },
+      table: {
+        defaultValue: { summary: false },
       },
     },
     snapToTicks: {
       name: 'Snap to ticks',
-      description: 'Snap the scrubber to the closest tick when dragging',
+      description: 'Snaps the scrubber to the closest tick when dragging.',
       control: {
         type: 'boolean',
       },
-      if: {
-        arg: 'showTicks',
-        truthy: true,
+      if: { arg: 'showTicks', eq: true },
+      table: {
+        defaultValue: { summary: false },
       },
     },
-    showTickNumbers: {
-      name: 'Show tick numbers',
-      description: 'Show or hide tick numbers',
+    showTooltip: {
+      name: 'Show tooltip',
+      description: 'Toggles if the tooltip should be shown or hidden.',
       control: {
         type: 'boolean',
       },
-      if: {
-        arg: 'showTicks',
-        truthy: true,
+      table: {
+        defaultValue: { summary: false },
       },
     },
     showControls: {
       name: 'Show controls (not compatible with input field)',
-      description: 'Show or hide controls',
+      description: 'Toggles if controls should be shown or hidden.',
       control: {
         type: 'boolean',
       },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
     step: {
       name: 'Step value',
-      description: 'Value to increment/decrease when using controls',
+      description: 'Sets the value to increment/decrement with when using controls.',
       control: {
-        type: 'text',
+        type: 'number',
       },
-      if: {
-        arg: 'showControls',
-        truthy: true,
+      if: { arg: 'showControls', eq: true },
+      table: {
+        defaultValue: { summary: 1 },
       },
     },
     showInput: {
       name: 'Show value input field (not compatible with controls)',
-      description: 'Show or hide value input field',
+      description: 'Toggles if the values input field should be shown or hidden.',
       control: {
         type: 'boolean',
       },
-      if: {
-        arg: 'showControls',
-        truthy: false,
+      if: { arg: 'showControls', eq: false },
+      table: {
+        defaultValue: { summary: false },
       },
     },
-    disabled: {
-      name: 'Disabled',
-      description: 'Put control in disabled state',
+    scrubberSize: {
+      name: 'Scrubber size',
+      description: 'Switches between the large and small version of the scrubber.',
       control: {
-        type: 'boolean',
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'lg' },
       },
     },
     readonly: {
       name: 'Read Only',
-      description: 'Put control in read-only state',
+      description: 'Puts the control in a read-only state.',
       control: {
         type: 'boolean',
       },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
-    small: {
-      name: 'Small',
-      description: 'Use small variant',
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the slider.',
       control: {
         type: 'boolean',
       },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
   },
   parameters: {
@@ -156,25 +178,29 @@ export default {
     ],
   },
   args: {
+    min: '0',
+    max: '100',
     initialValue: '50',
     showLabel: false,
     labelText: 'Label',
-    showTooltip: true,
     showTicks: false,
     numTicks: '3',
     showTickNumbers: false,
+    snapToTicks: false,
+    showTooltip: true,
     showControls: false,
-    showInput: false,
-    min: '0',
-    max: '100',
     step: '1',
-    disabled: false,
-    small: false,
-    snapToTicks: false,
+    showInput: false,
+    scrubberSize: 'Large',
     readonly: false,
+    disabled: false,
   },
 };
-const Template = ({ initialValue, min, max, showLabel, labelText, showTooltip, showTicks, numTicks, showTickNumbers, snapToTicks, showControls, step, showInput, disabled, readonly, small, }) => formatHtmlPreview(`
+const sizeLookUp = {
+  'Large': 'lg',
+  'Small': 'sm',
+};
+const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, scrubberSize, readonly, disabled, }) => formatHtmlPreview(`
     <sdds-slider id="sdds-slider"
       min="${min}" 
       max="${max}" 
@@ -188,7 +214,7 @@ const Template = ({ initialValue, min, max, showLabel, labelText, showTooltip, s
       ${showControls ? 'controls' : ''} 
       ${showInput ? 'input' : ''} 
       ${disabled ? 'disabled' : ''} 
-      ${small ? 'size="sm"' : ''}
+      scrubber-size="${sizeLookUp[scrubberSize]}"
       ${readonly ? 'read-only' : ''} 
       >
 

package/dist/collection/components/slider/slider.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Slider',\n  argTypes: {\n    initialValue: {\n      name: 'Initial value',\n      description: 'Initial value for slider',\n      control: {\n        type: 'text',\n      },\n    },\n    min: {\n      name: 'Min. value',\n      description: 'Minimum value',\n      control: {\n        type: 'text',\n      },\n    },\n    max: {\n      name: 'Max. value',\n      description: 'Maximum value',\n      control: {\n        type: 'text',\n      },\n    },\n    showLabel: {\n      name: 'Show label',\n      description: 'Show or hide label',\n      control: {\n        type: 'boolean',\n      },\n    },\n    labelText: {\n      name: 'Label text',\n      description: 'Text for label',\n      control: {\n        type: 'text',\n      },\n      if: {\n        arg: 'showLabel',\n        truthy: true,\n      },\n    },\n    showTooltip: {\n      name: 'Show tooltip',\n      description: 'Show or hide tooltip',\n      control: {\n        type: 'boolean',\n      },\n    },\n    showTicks: {\n      name: 'Show ticks',\n      description: 'Show or hide ticks',\n      control: {\n        type: 'boolean',\n      },\n    },\n    numTicks: {\n      name: 'Number of ticks',\n      description: 'Set the number of ticks to display',\n      control: {\n        type: 'text',\n      },\n      if: {\n        arg: 'showTicks',\n        truthy: true,\n      },\n    },\n    snapToTicks: {\n      name: 'Snap to ticks',\n      description: 'Snap the scrubber to the closest tick when dragging',\n      control: {\n        type: 'boolean',\n      },\n      if: {\n        arg: 'showTicks',\n        truthy: true,\n      },\n    },\n    showTickNumbers: {\n      name: 'Show tick numbers',\n      description: 'Show or hide tick numbers',\n      control: {\n        type: 'boolean',\n      },\n      if: {\n        arg: 'showTicks',\n        truthy: true,\n      },\n    },\n    showControls: {\n      name: 'Show controls (not compatible with input field)',\n      description: 'Show or hide controls',\n      control: {\n        type: 'boolean',\n      },\n    },\n    step: {\n      name: 'Step value',\n      description: 'Value to increment/decrease when using controls',\n      control: {\n        type: 'text',\n      },\n      if: {\n        arg: 'showControls',\n        truthy: true,\n      },\n    },\n    showInput: {\n      name: 'Show value input field (not compatible with controls)',\n      description: 'Show or hide value input field',\n      control: {\n        type: 'boolean',\n      },\n      if: {\n        arg: 'showControls',\n        truthy: false,\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Put control in disabled state',\n      control: {\n        type: 'boolean',\n      },\n    },\n    readonly: {\n      name: 'Read Only',\n      description: 'Put control in read-only state',\n      control: {\n        type: 'boolean',\n      },\n    },\n    small: {\n      name: 'Small',\n      description: 'Use small variant',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  parameters: {\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  args: {\n    initialValue: '50',\n    showLabel: false,\n    labelText: 'Label',\n    showTooltip: true,\n    showTicks: false,\n    numTicks: '3',\n    showTickNumbers: false,\n    showControls: false,\n    showInput: false,\n    min: '0',\n    max: '100',\n    step: '1',\n    disabled: false,\n    small: false,\n    snapToTicks: false,\n    readonly: false,\n  },\n};\nconst Template = ({\n  initialValue,\n  min,\n  max,\n  showLabel,\n  labelText,\n  showTooltip,\n  showTicks,\n  numTicks,\n  showTickNumbers,\n  snapToTicks,\n  showControls,\n  step,\n  showInput,\n  disabled,\n  readonly,\n  small,\n}) =>\n  formatHtmlPreview(`\n    <sdds-slider id=\"sdds-slider\"\n      min=\"${min}\" \n      max=\"${max}\" \n      ${showControls && step ? `step=\"${step}\"` : ''}\n      value=\"${initialValue}\" \n      ${showTicks ? `ticks=\"${numTicks}\"` : ''} \n      ${showTickNumbers ? 'show-tick-numbers' : ''} \n      ${snapToTicks ? 'snap' : ''} \n      ${showLabel ? `label=\"${labelText}\"` : ''} \n      ${showTooltip ? 'tooltip' : ''} \n      ${showControls ? 'controls' : ''} \n      ${showInput ? 'input' : ''} \n      ${disabled ? 'disabled' : ''} \n      ${small ? 'size=\"sm\"' : ''}\n      ${readonly ? 'read-only' : ''} \n      >\n\n    </sdds-slider>\n\n    <!-- Script tag for demo purposes -->\n    <script>\n    slider = document.querySelectorAll('sdds-slider')[0]\n\n    slider.removeEventListener('sddsChange', null)\n    slider.addEventListener('sddsChange', (event) => {\n      console.log('Slider changed, value:', event.detail.value);\n    });\n\n    </script>\n  `);\n\nexport const Default = Template.bind({});\n"]}
+{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Slider',\n  argTypes: {\n    min: {\n      name: 'Min. value',\n      description: 'Sets the minimum value for the slider.',\n      control: {\n        type: 'number',\n      },\n      table: {\n        defaultValue: { summary: 0 },\n      },\n    },\n    max: {\n      name: 'Max. value',\n      description: 'Sets the maximum value for the slider.',\n      control: {\n        type: 'number',\n      },\n      table: {\n        defaultValue: { summary: 100 },\n      },\n    },\n    initialValue: {\n      name: 'Initial value',\n      description: 'Sets the initial value for the slider.',\n      control: {\n        type: 'number',\n      },\n      table: {\n        defaultValue: { summary: 0 },\n      },\n    },\n    showLabel: {\n      name: 'Show label',\n      description: 'Toggles if the lable should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    labelText: {\n      name: 'Label text',\n      description: 'Sets the text for the label.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'showLabel', eq: true },\n    },\n    showTicks: {\n      name: 'Show ticks',\n      description: 'Toggles if ticks should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    numTicks: {\n      name: 'Number of ticks',\n      description: 'Sets the number of ticks to be displayed.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'showTicks', eq: true },\n      \n      table: {\n        defaultValue: { summary: 0 },\n      },\n    },\n    showTickNumbers: {\n      name: 'Show tick numbers',\n      description: 'Toggles if tick numbers should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'showTicks', eq: true },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    snapToTicks: {\n      name: 'Snap to ticks',\n      description: 'Snaps the scrubber to the closest tick when dragging.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'showTicks', eq: true },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    showTooltip: {\n      name: 'Show tooltip',\n      description: 'Toggles if the tooltip should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    showControls: {\n      name: 'Show controls (not compatible with input field)',\n      description: 'Toggles if controls should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    step: {\n      name: 'Step value',\n      description: 'Sets the value to increment/decrement with when using controls.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'showControls', eq: true },\n      table: {\n        defaultValue: { summary: 1 },\n      },\n    },\n    showInput: {\n      name: 'Show value input field (not compatible with controls)',\n      description: 'Toggles if the values input field should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'showControls', eq: false },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    scrubberSize: {\n      name: 'Scrubber size',\n      description: 'Switches between the large and small version of the scrubber.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    readonly: {\n      name: 'Read Only',\n      description: 'Puts the control in a read-only state.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the slider.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  parameters: {\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  args: {\n    min: '0',\n    max: '100',\n    initialValue: '50',\n    showLabel: false,\n    labelText: 'Label',\n    showTicks: false,\n    numTicks: '3',\n    showTickNumbers: false,\n    snapToTicks: false,\n    showTooltip: true,\n    showControls: false,\n    step: '1',\n    showInput: false,\n    scrubberSize: 'Large',\n    readonly: false,\n    disabled: false,\n  },\n};\n\nconst sizeLookUp = {\n  'Large': 'lg',\n  'Small': 'sm',\n};\n\nconst Template = ({\n  min,\n  max,\n  initialValue,\n  showLabel,\n  labelText,\n  showTicks,\n  numTicks,\n  showTickNumbers,\n  snapToTicks,\n  showTooltip,\n  showControls,\n  step,\n  showInput,\n  scrubberSize,\n  readonly,\n  disabled,\n}) =>\n  formatHtmlPreview(`\n    <sdds-slider id=\"sdds-slider\"\n      min=\"${min}\" \n      max=\"${max}\" \n      ${showControls && step ? `step=\"${step}\"` : ''}\n      value=\"${initialValue}\" \n      ${showTicks ? `ticks=\"${numTicks}\"` : ''} \n      ${showTickNumbers ? 'show-tick-numbers' : ''} \n      ${snapToTicks ? 'snap' : ''} \n      ${showLabel ? `label=\"${labelText}\"` : ''} \n      ${showTooltip ? 'tooltip' : ''} \n      ${showControls ? 'controls' : ''} \n      ${showInput ? 'input' : ''} \n      ${disabled ? 'disabled' : ''} \n      scrubber-size=\"${sizeLookUp[scrubberSize]}\"\n      ${readonly ? 'read-only' : ''} \n      >\n\n    </sdds-slider>\n\n    <!-- Script tag for demo purposes -->\n    <script>\n    slider = document.querySelectorAll('sdds-slider')[0]\n\n    slider.removeEventListener('sddsChange', null)\n    slider.addEventListener('sddsChange', (event) => {\n      console.log('Slider changed, value:', event.detail.value);\n    });\n\n    </script>\n  `);\n\nexport const Default = Template.bind({});\n"]}

package/dist/collection/components/spinner/spinner.stories.js

@@ -21,19 +21,25 @@ export default {
   argTypes: {
     variant: {
       name: 'Variant',
+      description: 'Switches the variant of the spinner.',
       control: {
         type: 'radio',
       },
       options: ['Standard', 'Inverted'],
-      description: 'Variant of the spinner',
+      table: {
+        defaultValue: { summary: 'standard' },
+      },
     },
     size: {
       name: 'Size',
+      description: 'Sets the size of the spinner.',
       control: {
         type: 'radio',
       },
       options: ['Large', 'Medium', 'Small', 'Extra small'],
-      description: 'Size of the spinner',
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
     },
   },
   args: {

package/dist/collection/components/spinner/spinner.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;MACjC,WAAW,EAAE,wBAAwB;KACtC;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,WAAW,EAAE,qBAAqB;KACnC;GACF;EACD,IAAI,EAAE;IACJ,OAAO,EAAE,UAAU;IACnB,IAAI,EAAE,OAAO;GACd;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;EACrC,MAAM,UAAU,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;EACzF,MAAM,aAAa,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;EAErE,OAAO,iBAAiB,CACtB;;YAEQ,UAAU,CAAC,IAAI,CAAC;eACb,aAAa,CAAC,OAAO,CAAC;;GAElC,CACA,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;EACd,OAAO,EAAE,UAAU;CACpB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Spinner',\n  parameters: {\n    layout: 'centered', // Center the component horizontally and vertically in the Canvas\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    variant: {\n      name: 'Variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Standard', 'Inverted'],\n      description: 'Variant of the spinner',\n    },\n    size: {\n      name: 'Size',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      description: 'Size of the spinner',\n    },\n  },\n  args: {\n    variant: 'Standard',\n    size: 'Large',\n  },\n};\n\nconst Template = ({ size, variant }) => {\n  const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };\n  const variantLookup = { Standard: 'standard', Inverted: 'inverted' };\n\n  return formatHtmlPreview(\n    `\n  <sdds-spinner \n    size=\"${sizeLookup[size]}\"  \n    variant=\"${variantLookup[variant]}\">\n  </sdds-spinner>\n  `,\n  );\n};\n\nexport const Default = Template.bind({});\nDefault.args = {};\n\nexport const Inverted = Template.bind({});\nInverted.args = {\n  variant: 'Inverted',\n};\n"]}
+{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,sCAAsC;MACnD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;MACjC,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;OACtC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,+BAA+B;MAC5C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;GACF;EACD,IAAI,EAAE;IACJ,OAAO,EAAE,UAAU;IACnB,IAAI,EAAE,OAAO;GACd;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;EACrC,MAAM,UAAU,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;EACzF,MAAM,aAAa,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;EAErE,OAAO,iBAAiB,CACtB;;YAEQ,UAAU,CAAC,IAAI,CAAC;eACb,aAAa,CAAC,OAAO,CAAC;;GAElC,CACA,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;EACd,OAAO,EAAE,UAAU;CACpB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Spinner',\n  parameters: {\n    layout: 'centered', // Center the component horizontally and vertically in the Canvas\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    variant: {\n      name: 'Variant',\n      description: 'Switches the variant of the spinner.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Standard', 'Inverted'],\n      table: {\n        defaultValue: { summary: 'standard' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the spinner.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n  },\n  args: {\n    variant: 'Standard',\n    size: 'Large',\n  },\n};\n\nconst Template = ({ size, variant }) => {\n  const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };\n  const variantLookup = { Standard: 'standard', Inverted: 'inverted' };\n\n  return formatHtmlPreview(\n    `\n  <sdds-spinner \n    size=\"${sizeLookup[size]}\"  \n    variant=\"${variantLookup[variant]}\">\n  </sdds-spinner>\n  `,\n  );\n};\n\nexport const Default = Template.bind({});\nDefault.args = {};\n\nexport const Inverted = Template.bind({});\nInverted.args = {\n  variant: 'Inverted',\n};\n"]}

package/dist/collection/components/stepper/stepper.stories.js

@@ -19,44 +19,56 @@ export default {
   argTypes: {
     size: {
       name: 'Size',
-      description: 'Size of the stepper',
+      description: 'Sets the size of the stepper.',
       control: {
         type: 'radio',
       },
-      options: ['Default', 'Small'],
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'Large' },
+      },
     },
     style: {
       name: 'Style',
-      description: 'Style of the stepper',
+      description: 'Sets the style of the stepper.',
       control: {
         type: 'radio',
       },
       options: ['Default', 'Text on side', 'Vertical'],
-    },
-    showLabel: {
-      name: 'Show label text',
-      description: 'Show or hide the label text',
-      control: {
-        type: 'boolean',
+      table: {
+        defaultValue: { summary: 'Default' },
       },
     },
     iconType: {
       name: 'Icon type',
-      description: 'Native/Web Component',
+      description: 'Switch between showing a native or a web component icon.',
       control: {
         type: 'radio',
       },
       options: ['Native', 'Web Component'],
+      table: {
+        defaultValue: { summary: 'Native' },
+      },
+    },
+    hideLabels: {
+      name: 'Hide labels',
+      description: 'Hides the labels for all stepper items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
   },
   args: {
-    size: 'Default',
+    size: 'Large',
     style: 'Default',
-    showLabel: true,
     iconType: 'Native',
+    hideLabels: false,
   },
 };
-const Template = ({ size, style, showLabel, iconType }) => {
+const Template = ({ size, style, iconType, hideLabels }) => {
   const sizeClass = size === 'Small' ? 'sdds-stepper-sm' : '';
   const styleLookup = {
     'Default': '',
@@ -78,7 +90,7 @@ const Template = ({ size, style, showLabel, iconType }) => {
         <div class="sdds-stepper__step-icon">
           <span class="sdds-stepper__step-icon-value">1</span>
         </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step value</label>' : ''}
+        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step value</label>'}
       </div>
 
       <div class="sdds-stepper__step sdds-stepper__step--warning">
@@ -88,14 +100,14 @@ const Template = ({ size, style, showLabel, iconType }) => {
         `
     : `<sdds-icon name="warning" size="${size === 'Small' ? '16px' : '18px'}"></sdds-icon> `}
         </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step warning</label>' : ''}
+        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step warning</label>'}
       </div>
 
       <div class="sdds-stepper__step sdds-stepper__step--inactive">
         <div class="sdds-stepper__step-icon">
           <span class="sdds-stepper__step-icon-value">3</span>
         </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step inactive with text</label>' : ''}
+        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step inactive with text</label>'}
       </div>
 
       <div class="sdds-stepper__step sdds-stepper__step--success">
@@ -107,7 +119,7 @@ const Template = ({ size, style, showLabel, iconType }) => {
         <sdds-icon name="tick" size="${size === 'Small' ? '16px' : '20px'}"></sdds-icon> 
         </div>`}
         </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step success</label>' : ''}
+        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step success</label>'}
       </div>
 
     </div>

package/dist/collection/components/stepper/stepper.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;KAC9B;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,UAAU,CAAC;KACjD;IACD,SAAS,EAAE;MACT,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;KACrC;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,QAAQ;GACnB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;EACxD,MAAM,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;EAE5D,MAAM,WAAW,GAAG;IAClB,SAAS,EAAE,EAAE;IACb,cAAc,EAAE,wBAAwB;IACxC,UAAU,EAAE,wBAAwB;GACrC,CAAC;EACF,OAAO,iBAAiB,CACtB;;MAGE,QAAQ,KAAK,QAAQ;IACnB,CAAC,CAAC;;KAEL;IACG,CAAC,CAAC,EACN;;;+BAG2B,SAAS,IAAI,WAAW,CAAC,KAAK,CAAC;;;;;;UAMpD,SAAS,CAAC,CAAC,CAAC,4DAA4D,CAAC,CAAC,CAAC,EAAE;;;;;UAM7E,QAAQ,KAAK,QAAQ;IACnB,CAAC,CAAC;SACL;IACG,CAAC,CAAC,mCAAmC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,iBAC3E;;UAEE,SAAS,CAAC,CAAC,CAAC,8DAA8D,CAAC,CAAC,CAAC,EAAE;;;;;;;UAQ/E,SAAS,CAAC,CAAC,CAAC,yEAAyE,CAAC,CAAC,CAAC,EAC1F;;;;;UAME,QAAQ,KAAK,QAAQ;IACnB,CAAC,CAAC;SACL;IACG,CAAC,CAAC;uCACyB,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;eAEjE;;UAEE,SAAS,CAAC,CAAC,CAAC,8DAA8D,CAAC,CAAC,CAAC,EAAE;;;;KAIpF,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Stepper',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Size of the stepper',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Small'],\n    },\n    style: {\n      name: 'Style',\n      description: 'Style of the stepper',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Text on side', 'Vertical'],\n    },\n    showLabel: {\n      name: 'Show label text',\n      description: 'Show or hide the label text',\n      control: {\n        type: 'boolean',\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Native/Web Component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n    },\n  },\n  args: {\n    size: 'Default',\n    style: 'Default',\n    showLabel: true,\n    iconType: 'Native',\n  },\n};\n\nconst Template = ({ size, style, showLabel, iconType }) => {\n  const sizeClass = size === 'Small' ? 'sdds-stepper-sm' : '';\n\n  const styleLookup = {\n    'Default': '',\n    'Text on side': 'sdds-stepper--sidetext',\n    'Vertical': 'sdds-stepper--vertical',\n  };\n  return formatHtmlPreview(\n    `\n\n    ${\n      iconType === 'Native'\n        ? ` <style>/* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n  @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');</style>\n    `\n        : ''\n    }\n\n\n    <div class=\"sdds-stepper ${sizeClass} ${styleLookup[style]}\">\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--value\">\n        <div class=\"sdds-stepper__step-icon\">\n          <span class=\"sdds-stepper__step-icon-value\">1</span>\n        </div>\n        ${showLabel ? '<label class=\"sdds-stepper__step_label\">Step value</label>' : ''}\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--warning\">\n        <div class=\"sdds-stepper__step-icon\">\n        ${\n          iconType === 'Native'\n            ? `<i class=\"sdds-icon warning\"></i>\n        `\n            : `<sdds-icon name=\"warning\" size=\"${size === 'Small' ? '16px' : '18px'}\"></sdds-icon> `\n        }\n        </div>\n        ${showLabel ? '<label class=\"sdds-stepper__step_label\">Step warning</label>' : ''}\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--inactive\">\n        <div class=\"sdds-stepper__step-icon\">\n          <span class=\"sdds-stepper__step-icon-value\">3</span>\n        </div>\n        ${\n          showLabel ? '<label class=\"sdds-stepper__step_label\">Step inactive with text</label>' : ''\n        }\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--success\">\n        <div class=\"sdds-stepper__step-icon\">\n        ${\n          iconType === 'Native'\n            ? `<i class=\"sdds-icon tick\"></i>\n        `\n            : `<div>\n        <sdds-icon name=\"tick\" size=\"${size === 'Small' ? '16px' : '20px'}\"></sdds-icon> \n        </div>`\n        }\n        </div>\n        ${showLabel ? '<label class=\"sdds-stepper__step_label\">Step success</label>' : ''}\n      </div>\n\n    </div>\n    `,\n  );\n};\n\nexport const Native = Template.bind({});\nNative.args = {};\n"]}
+{"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Stepper',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the stepper.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    style: {\n      name: 'Style',\n      description: 'Sets the style of the stepper.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Text on side', 'Vertical'],\n      table: {\n        defaultValue: { summary: 'Default' },\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Switch between showing a native or a web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      table: {\n        defaultValue: { summary: 'Native' },\n      },\n    },\n    hideLabels: {\n      name: 'Hide labels',\n      description: 'Hides the labels for all stepper items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    size: 'Large',\n    style: 'Default',\n    iconType: 'Native',\n    hideLabels: false,\n  },\n};\n\nconst Template = ({ \n  size, \n  style, \n  iconType, \n  hideLabels \n}) => {\n  const sizeClass = size === 'Small' ? 'sdds-stepper-sm' : '';\n\n  const styleLookup = {\n    'Default': '',\n    'Text on side': 'sdds-stepper--sidetext',\n    'Vertical': 'sdds-stepper--vertical',\n  };\n  return formatHtmlPreview(\n    `\n\n    ${\n      iconType === 'Native'\n        ? ` <style>/* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n  @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');</style>\n    `\n        : ''\n    }\n\n\n    <div class=\"sdds-stepper ${sizeClass} ${styleLookup[style]}\">\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--value\">\n        <div class=\"sdds-stepper__step-icon\">\n          <span class=\"sdds-stepper__step-icon-value\">1</span>\n        </div>\n        ${hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step value</label>'}\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--warning\">\n        <div class=\"sdds-stepper__step-icon\">\n        ${\n          iconType === 'Native'\n            ? `<i class=\"sdds-icon warning\"></i>\n        `\n            : `<sdds-icon name=\"warning\" size=\"${size === 'Small' ? '16px' : '18px'}\"></sdds-icon> `\n        }\n        </div>\n        ${hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step warning</label>'}\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--inactive\">\n        <div class=\"sdds-stepper__step-icon\">\n          <span class=\"sdds-stepper__step-icon-value\">3</span>\n        </div>\n        ${\n          hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step inactive with text</label>'\n        }\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--success\">\n        <div class=\"sdds-stepper__step-icon\">\n        ${\n          iconType === 'Native'\n            ? `<i class=\"sdds-icon tick\"></i>\n        `\n            : `<div>\n        <sdds-icon name=\"tick\" size=\"${size === 'Small' ? '16px' : '20px'}\"></sdds-icon> \n        </div>`\n        }\n        </div>\n        ${hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step success</label>'}\n      </div>\n\n    </div>\n    `,\n  );\n};\n\nexport const Native = Template.bind({});\nNative.args = {};\n"]}

package/dist/collection/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.css

@@ -0,0 +1,79 @@
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+  z-index: 200;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host button {
+  min-width: 142px;
+  height: 100%;
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  cursor: pointer;
+  color: var(--sdds-folder-tab-color);
+  padding: 16px;
+  white-space: nowrap;
+  text-decoration: none;
+  text-align: left;
+  outline: none;
+  border: none;
+  border-top: 2px solid var(--sdds-folder-tab-background);
+  background-color: var(--sdds-folder-tab-background);
+  border-right: none;
+}
+:host button .label {
+  opacity: var(--sdds-folder-tab-color-opacity);
+}
+:host button.selected {
+  background-color: var(--sdds-folder-tab-background-selected);
+  border-top: 2px solid var(--sdds-folder-tab-border-selected);
+}
+:host button.selected::before {
+  content: " ";
+  background-color: var(--sdds-folder-tab-background);
+  width: 1px;
+  top: 0;
+  bottom: 0;
+  left: -1px;
+  display: block;
+  position: absolute;
+}
+:host button.selected .label {
+  opacity: var(--sdds-folder-tab-color-opacity-selected);
+}
+:host button:not(.selected) {
+  border-right-width: 1px;
+  border-right-style: solid;
+  border-right-color: var(--sdds-folder-tab-divider-color);
+}
+:host button:not(.selected):hover {
+  border-top-color: var(--sdds-folder-tab-background-hover);
+  background-color: var(--sdds-folder-tab-background-hover);
+}
+:host button:not(.selected):hover .label {
+  opacity: var(--sdds-folder-tab-color-opacity-hover);
+}
+:host button.disabled {
+  pointer-events: none;
+}
+:host button.disabled .label {
+  opacity: var(--sdds-folder-tab-color-opacity-disabled);
+}
+:host button.disabled:focus-visible {
+  outline: none;
+}
+:host button.disabled:focus-visible .label {
+  opacity: var(--sdds-folder-tab-color-opacity-disabled);
+}
+:host button:focus-visible {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+  opacity: var(--sdds-folder-tab-color-opacity-focus);
+}
+
+:host(.last) button:not(.selected) {
+  border-right-color: transparent;
+}