@scania/tegel 0.0.8 → 0.0.10

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

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
-export class Slider {
+import { generateUniqueId } from '../../utils/utils';
+export class TdsSlider {
   constructor() {
     this.wrapperElement = null;
     this.scrubberElement = null;
@@ -12,7 +13,6 @@ export class Slider {
     this.scrubberGrabbed = false;
     this.scrubberLeft = 0;
     this.tickValues = [];
-    this.disabledState = false;
     this.readonlyState = false;
     this.useControls = false;
     this.useInput = false;
@@ -36,7 +36,7 @@ export class Slider {
     this.name = '';
     this.scrubberSize = 'lg';
     this.snap = false;
-    this.sliderId = crypto.randomUUID();
+    this.sliderId = generateUniqueId();
   }
   /** Public method to re-initialise the slider if some configuration props are changed */
   async reset() {
@@ -135,7 +135,7 @@ export class Slider {
     this.trackFillElement.style.width = `${percentageFilled}%`;
   }
   dispatchChangeEvent() {
-    this.sddsChange.emit({ value: this.value });
+    this.tdsChange.emit({ value: this.value });
   }
   updateValue() {
     const trackWidth = this.getTrackWidth();
@@ -297,7 +297,6 @@ export class Slider {
       }
       this.tickValues.push(this.getMax());
     }
-    this.disabledState = this.disabled;
     this.readonlyState = this.readOnly;
     this.useInput = false;
     this.useControls = false;
@@ -307,46 +306,44 @@ export class Slider {
     else if (this.input) {
       this.useInput = true;
     }
-    this.useSmall = false;
-    if (this.scrubberSize === 'sm') {
-      this.useSmall = true;
-    }
-    this.useSnapping = false;
-    if (this.snap) {
-      this.useSnapping = true;
-    }
+    this.useSmall = this.scrubberSize === 'sm';
+    this.useSnapping = this.snap;
     const min = this.getMin();
     const max = this.getMax();
     if (min > max) {
       console.warn('min-prop must have a higher value than max-prop for the component to work correctly.');
-      this.disabledState = true;
+      this.disabled = true;
     }
   }
   render() {
-    return (h("div", { class: `sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "sdds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: `sdds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'sdds-slider-small' : ''}`, ref: (el) => {
+    return (h("div", { class: `tds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: `tds-slider ${this.disabled ? 'disabled' : ''} ${this.useSmall ? 'tds-slider-small' : ''}`, ref: (el) => {
         this.wrapperElement = el;
-      } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "sdds-slider__input-values" }, h("div", { ref: (el) => {
+      } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
+        this.minusElement = el;
+      }, class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => {
         this.minusElement = el;
-      }, class: "sdds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "sdds-slider__controls" }, h("div", { ref: (el) => (this.minusElement = el), class: "sdds-slider__control sdds-slider__control-minus" }, h("sdds-icon", { name: "minus", size: "16px" })))), h("div", { class: "sdds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "sdds-slider__value-dividers-wrapper" }, h("div", { class: "sdds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "sdds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "sdds-slider__track", ref: (el) => {
+      }, class: "tds-slider__control tds-slider__control-minus" }, h("tds-icon", { name: "minus", size: "16px" })))), h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "tds-slider__value-dividers-wrapper" }, h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "tds-slider__track", ref: (el) => {
         this.trackElement = el;
-      }, tabindex: this.disabled ? '-1' : '0' }, h("div", { class: "sdds-slider__track-fill", ref: (el) => {
+      }, tabindex: this.disabled ? '-1' : '0' }, h("div", { class: "tds-slider__track-fill", ref: (el) => {
         this.trackFillElement = el;
-      } }), h("div", { class: "sdds-slider__scrubber", ref: (el) => {
+      } }), h("div", { class: "tds-slider__scrubber", ref: (el) => {
         this.scrubberElement = el;
-      } }, this.tooltip && (h("div", { class: "sdds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { class: "sdds-slider__scrubber-inner", ref: (el) => {
+      } }, this.tooltip && (h("div", { class: "tds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { class: "tds-slider__scrubber-inner", ref: (el) => {
         this.scrubberInnerElement = el;
-      } })))), this.useInput && (h("div", { class: "sdds-slider__input-values" }, h("div", { ref: (el) => {
+      } })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
         this.minusElement = el;
-      }, class: "sdds-slider__input-value" }, this.max), h("div", { class: "sdds-slider__input-field-wrapper" }, h("input", { onFocus: (e) => {
+      }, class: "tds-slider__input-value" }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { onFocus: (e) => {
         if (this.readonlyState) {
           e.preventDefault();
           this.inputElement.blur();
         }
-      }, size: this.calculateInputSizeFromMax(), class: "sdds-slider__input-field", value: this.value, ref: (el) => {
+      }, size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, ref: (el) => {
         this.inputElement = el;
-      } })))), this.useControls && (h("div", { class: "sdds-slider__controls" }, h("div", { ref: (el) => (this.plusElement = el), class: "sdds-slider__control sdds-slider__control-plus" }, h("sdds-icon", { name: "plus", size: "16px" })))))));
+      } })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => {
+        this.plusElement = el;
+      }, class: "tds-slider__control tds-slider__control-plus" }, h("tds-icon", { name: "plus", size: "16px" })))))));
   }
-  static get is() { return "sdds-slider"; }
+  static get is() { return "tds-slider"; }
   static get originalStyleUrls() {
     return {
       "$": ["slider.scss"]
@@ -623,7 +620,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Snap to the ticks grid"
+          "text": "Snap to the tick's grid"
         },
         "attribute": "snap",
         "reflect": false,
@@ -641,18 +638,18 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID for the sliders input element, randomly generated if not specified."
+          "text": "ID for the Slider's input element, randomly generated if not specified."
         },
         "attribute": "slider-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       }
     };
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,

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

@@ -0,0 +1,243 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Slider`,
+  argTypes: {
+    min: {
+      name: 'Min. value',
+      description: 'Sets the minimum value for the slider.',
+      control: {
+        type: 'number',
+      },
+      table: {
+        defaultValue: { summary: 0 },
+      },
+    },
+    max: {
+      name: 'Max. value',
+      description: 'Sets the maximum value for the slider.',
+      control: {
+        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: 'Toggles if the lable should be shown or hidden.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    labelText: {
+      name: 'Label text',
+      description: 'Sets the text for the label.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'showLabel', eq: true },
+    },
+    showTicks: {
+      name: 'Show ticks',
+      description: 'Toggles if ticks should be shown or hidden.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    numTicks: {
+      name: 'Number of ticks',
+      description: 'Sets the number of ticks to be displayed.',
+      control: {
+        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', eq: true },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    snapToTicks: {
+      name: 'Snap to ticks',
+      description: 'Snaps the scrubber to the closest tick when dragging.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'showTicks', eq: true },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    showTooltip: {
+      name: 'Show tooltip',
+      description: 'Toggles if the tooltip should be shown or hidden.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    showControls: {
+      name: 'Show controls (not compatible with input field)',
+      description: 'Toggles if controls should be shown or hidden.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    step: {
+      name: 'Step value',
+      description: 'Sets the value to increment/decrement with when using controls.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'showControls', eq: true },
+      table: {
+        defaultValue: { summary: 1 },
+      },
+    },
+    showInput: {
+      name: 'Show value input field (not compatible with controls)',
+      description: 'Toggles if the values input field should be shown or hidden.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'showControls', eq: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    scrubberSize: {
+      name: 'Scrubber size',
+      description: 'Switches between the large and small version of the scrubber.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    readonly: {
+      name: 'Read Only',
+      description: 'Puts the control in a read-only state.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the slider.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  parameters: {
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  args: {
+    min: '0',
+    max: '100',
+    initialValue: '50',
+    showLabel: false,
+    labelText: 'Label',
+    showTicks: false,
+    numTicks: '3',
+    showTickNumbers: false,
+    snapToTicks: false,
+    showTooltip: true,
+    showControls: false,
+    step: '1',
+    showInput: false,
+    scrubberSize: 'Large',
+    readonly: false,
+    disabled: false,
+  },
+};
+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(`
+ <!-- Style code below is just for demo purposes -->
+    <style>
+      .demo-wrapper {
+          width: 500px;
+          margin-left: 150px;
+      }
+    </style>
+
+   <div class="demo-wrapper">
+     <tds-slider 
+        min="${min}"
+        max="${max}"
+        ${showControls && step ? `step="${step}"` : ''}
+        value="${initialValue}"
+        ${showTicks ? `ticks="${numTicks}"` : ''}
+        ${showTickNumbers ? 'show-tick-numbers' : ''}
+        ${snapToTicks ? 'snap' : ''}
+        ${showLabel ? `label="${labelText}"` : ''}
+        ${showTooltip ? 'tooltip' : ''}
+        ${showControls ? 'controls' : ''}
+        ${showInput ? 'input' : ''}
+        ${disabled ? 'disabled' : ''}
+        scrubber-size="${sizeLookUp[scrubberSize]}"
+        ${readonly ? 'read-only' : ''}
+        >
+      </tds-slider>
+    </div>
+
+     <!-- Script tag for demo purposes -->
+    <script>
+      slider = document.querySelector('tds-slider')
+
+      slider.removeEventListener('tdsChange', null)
+      slider.addEventListener('tdsChange', (event) => {
+        console.log(event);
+      });
+    </script>
+  `);
+export const Default = Template.bind({});

package/dist/collection/components/spinner/spinner.css

@@ -1,19 +1,18 @@
-:root,
-html {
-  --sdds-spinner-background: var(--sdds-blue-400);
-  --sdds-spinner-background-inverted: var(--sdds-white);
-  --sdds-spinner-speed: 1.8s;
-  --sdds-spinner-speed-lg: 2s;
-  --sdds-spinner-radius-xs: 8px;
-  --sdds-spinner-radius-sm: 12px;
-  --sdds-spinner-radius-md: 26px;
-  --sdds-spinner-radius-lg: 42px;
-  --sdds-spinner-radius: var(--sdds-spinner-radius-lg);
-  --sdds-spinner-stroke-width-xs: 3px;
-  --sdds-spinner-stroke-width-sm: 4px;
-  --sdds-spinner-stroke-width-md: 6px;
-  --sdds-spinner-stroke-width-lg: 8px;
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-lg);
+:root {
+  --tds-spinner-background: var(--tds-blue-400);
+  --tds-spinner-background-inverted: var(--tds-white);
+  --tds-spinner-speed: 1.8s;
+  --tds-spinner-speed-lg: 2s;
+  --tds-spinner-radius-xs: 8px;
+  --tds-spinner-radius-sm: 12px;
+  --tds-spinner-radius-md: 26px;
+  --tds-spinner-radius-lg: 42px;
+  --tds-spinner-radius: var(--tds-spinner-radius-lg);
+  --tds-spinner-stroke-width-xs: 3px;
+  --tds-spinner-stroke-width-sm: 4px;
+  --tds-spinner-stroke-width-md: 6px;
+  --tds-spinner-stroke-width-lg: 8px;
+  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-lg);
   --PI: 3.14159265358979;
 }
 
@@ -25,55 +24,54 @@ html {
   box-sizing: border-box;
 }
 
-.sdds-spinner-svg {
-  width: calc(var(--sdds-spinner-radius) * 2);
-  height: calc(var(--sdds-spinner-radius) * 2);
+.tds-spinner-svg {
+  width: calc(var(--tds-spinner-radius) * 2);
+  height: calc(var(--tds-spinner-radius) * 2);
   transform: scale(-1, 1) rotate(-90deg);
 }
-.sdds-spinner-svg-xs {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-xs);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-xs);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed);
+.tds-spinner-svg-xs {
+  --tds-spinner-radius: var(--tds-spinner-radius-xs);
+  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-xs);
+  --tds-spinner-animation-speed: var(--tds-spinner-speed);
 }
-.sdds-spinner-svg-sm {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-sm);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-sm);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed);
+.tds-spinner-svg-sm {
+  --tds-spinner-radius: var(--tds-spinner-radius-sm);
+  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-sm);
+  --tds-spinner-animation-speed: var(--tds-spinner-speed);
 }
-.sdds-spinner-svg-md {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-md);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-md);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed);
+.tds-spinner-svg-md {
+  --tds-spinner-radius: var(--tds-spinner-radius-md);
+  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-md);
+  --tds-spinner-animation-speed: var(--tds-spinner-speed);
 }
-.sdds-spinner-svg-lg {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-lg);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-lg);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed-lg);
+.tds-spinner-svg-lg {
+  --tds-spinner-radius: var(--tds-spinner-radius-lg);
+  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-lg);
+  --tds-spinner-animation-speed: var(--tds-spinner-speed-lg);
 }
 
-.sdds-spinner-circle {
-  cx: var(--sdds-spinner-radius);
-  cy: var(--sdds-spinner-radius);
-  r: calc(var(--sdds-spinner-radius) - var(--sdds-spinner-stroke-width) / 2);
-  stroke-width: var(--sdds-spinner-stroke-width);
+.tds-spinner-circle {
+  cx: var(--tds-spinner-radius);
+  cy: var(--tds-spinner-radius);
+  r: calc(var(--tds-spinner-radius) - var(--tds-spinner-stroke-width) / 2);
   fill: none;
-  --sdds-spinner-stroke-dash: calc((2 * var(--PI)) * var(--sdds-spinner-radius));
-  stroke-dasharray: var(--sdds-spinner-stroke-dash);
-  stroke-width: var(--sdds-spinner-stroke-width);
-  animation: dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
+  --tds-spinner-stroke-dash: calc((2 * var(--PI)) * var(--tds-spinner-radius));
+  stroke-dasharray: var(--tds-spinner-stroke-dash);
+  stroke-width: var(--tds-spinner-stroke-width);
+  animation: dash var(--tds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
 }
-.sdds-spinner-circle-standard {
-  stroke: var(--sdds-spinner-background);
+.tds-spinner-circle-standard {
+  stroke: var(--tds-spinner-background);
 }
-.sdds-spinner-circle-inverted {
-  stroke: var(--sdds-spinner-background-inverted);
+.tds-spinner-circle-inverted {
+  stroke: var(--tds-spinner-background-inverted);
 }
 
 @keyframes dash {
   from {
-    stroke-dashoffset: calc(-1 * var(--sdds-spinner-stroke-dash));
+    stroke-dashoffset: calc(-1 * var(--tds-spinner-stroke-dash));
   }
   to {
-    stroke-dashoffset: var(--sdds-spinner-stroke-dash);
+    stroke-dashoffset: var(--tds-spinner-stroke-dash);
   }
 }

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

@@ -1,13 +1,13 @@
 import { h } from '@stencil/core';
-export class Spinner {
+export class TdsSpinner {
   constructor() {
     this.size = 'lg';
     this.variant = 'standard';
   }
   render() {
-    return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `sdds-spinner-svg sdds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `sdds-spinner-circle sdds-spinner-circle-${this.variant}` }))));
+    return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
   }
-  static get is() { return "sdds-spinner"; }
+  static get is() { return "tds-spinner"; }
   static get originalStyleUrls() {
     return {
       "$": ["spinner.scss"]

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

@@ -0,0 +1,61 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Spinner`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    variant: {
+      name: 'Variant',
+      description: 'Switches the variant of the Spinner.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Standard', 'Inverted'],
+      table: {
+        defaultValue: { summary: 'standard' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the Spinner.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+  },
+  args: {
+    variant: 'Standard',
+    size: 'Large',
+  },
+};
+const Template = ({ size, variant }) => {
+  const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };
+  const variantLookup = { Standard: 'standard', Inverted: 'inverted' };
+  return formatHtmlPreview(`
+  <tds-spinner 
+    size="${sizeLookup[size]}"  
+    variant="${variantLookup[variant]}">
+  </tds-spinner>
+  `);
+};
+export const Default = Template.bind({});