@scania/tegel 0.0.6 → 0.0.8

package/dist/collection/components/toggle/sdds-toggle.stories.js

@@ -1,95 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Toggle',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the toggle.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    headline: {
-      name: 'Headline',
-      description: 'Sets the headline, displayed above the toggle.',
-      control: {
-        type: 'text',
-      },
-    },
-    label: {
-      name: 'Label',
-      description: 'Sets the label for the toggles input element.',
-      control: {
-        type: 'text',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'Sets the toggle as checked.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the toggle.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    size: 'Large',
-    headline: 'Headline',
-    label: 'Label',
-    checked: false,
-    disabled: false,
-  },
-};
-const Template = ({ size, headline, label, checked, disabled }) => formatHtmlPreview(`
-      <sdds-toggle
-        ${checked ? 'checked' : ''}
-        ${disabled ? 'disabled' : ''}
-        ${headline ? `headline="${headline}"` : ''}
-        size="${size === 'Large' ? 'lg' : 'sm'}">
-        <div slot="label">${label}</div>
-    </sdds-toggle>
-
-    <!-- Script tag with eventlistener for demo purposes. -->
-    <script>
-      toggleElement = document.querySelector('sdds-toggle')
-
-      toggleElement.addEventListener('sddsToggle', (event)=> {
-        console.log('Toggle with id: ', event.detail.toggleId, ' is ', event.detail.checked)
-      })
-    </script>
-  `);
-export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-toggle.stories.js.map

package/dist/collection/components/toggle/sdds-toggle.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-toggle.stories.js","sourceRoot":"","sources":["../../../src/components/toggle/sdds-toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,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,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;MAC3B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,gDAAgD;MAC7D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,+CAA+C;MAC5D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAChE,iBAAiB,CAAC;;UAEV,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACxB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC1B,QAAQ,CAAC,CAAC,CAAC,aAAa,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;gBAClC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;4BAClB,KAAK;;;;;;;;;;;GAW9B,CAAC,CAAC;AACL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Toggle',\n  parameters: {\n    notes: readme,\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=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the toggle.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    headline: {\n      name: 'Headline',\n      description: 'Sets the headline, displayed above the toggle.',\n      control: {\n        type: 'text',\n      },\n    },\n    label: {\n      name: 'Label',\n      description: 'Sets the label for the toggles input element.',\n      control: {\n        type: 'text',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Sets the toggle as checked.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the toggle.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    size: 'Large',\n    headline: 'Headline',\n    label: 'Label',\n    checked: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ size, headline, label, checked, disabled }) =>\n  formatHtmlPreview(`\n      <sdds-toggle\n        ${checked ? 'checked' : ''}\n        ${disabled ? 'disabled' : ''}\n        ${headline ? `headline=\"${headline}\"` : ''}\n        size=\"${size === 'Large' ? 'lg' : 'sm'}\">\n        <div slot=\"label\">${label}</div>\n    </sdds-toggle>\n\n    <!-- Script tag with eventlistener for demo purposes. -->\n    <script>\n      toggleElement = document.querySelector('sdds-toggle')\n\n      toggleElement.addEventListener('sddsToggle', (event)=> {\n        console.log('Toggle with id: ', event.detail.toggleId, ' is ', event.detail.checked)\n      })\n    </script>\n  `);\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1,78 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Toggle',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the toggle.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-    },
-    headline: {
-      name: 'Headline',
-      description: 'Sets the headline, displayed above the toggle.',
-      control: {
-        type: 'text',
-      },
-    },
-    label: {
-      name: 'Label',
-      description: 'Sets the label for the toggles input element.',
-      control: {
-        type: 'text',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'Sets the toggle as checked.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the toggle.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    size: 'Large',
-    headline: 'Headline',
-    label: 'Label',
-    checked: false,
-    disabled: false,
-  },
-};
-const Template = ({ size, headline, label, checked, disabled }) => {
-  const sizeValue = size === 'Small' ? 'sdds-toggle-sm' : '';
-  const headlineDiv = headline.length > 0 ? `<div class="sdds-toggle-headline">${headline}</div>` : '';
-  return formatHtmlPreview(`
-      <div class="sdds-toggle ${sizeValue} ${disabled ? 'disabled' : ''}">
-        ${headlineDiv}
-        <input type="checkbox" class="sdds-toggle-input" id="customSwitch1" ${disabled ? 'disabled' : ''} ${checked ? 'checked' : ''}>
-        <span class="sdds-toggle-switch"></span>
-        <label class="sdds-toggle-label" for="customSwitch1">${label}</label>
-      </div>
-  `);
-};
-export const Native = Template.bind({});
-//# sourceMappingURL=toggle.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"toggle.stories.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,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,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;KAC5B;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,gDAAgD;MAC7D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,+CAA+C;MAC5D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;EAChE,MAAM,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;EAC3D,MAAM,WAAW,GACf,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,qCAAqC,QAAQ,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;EAEnF,OAAO,iBAAiB,CAAC;gCACK,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC7D,WAAW;8EAEX,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAC1B,IAAI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;+DAE2B,KAAK;;GAEjE,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Toggle',\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=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the toggle.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n    },\n    headline: {\n      name: 'Headline',\n      description: 'Sets the headline, displayed above the toggle.',\n      control: {\n        type: 'text',\n      },\n    },\n    label: {\n      name: 'Label',\n      description: 'Sets the label for the toggles input element.',\n      control: {\n        type: 'text',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Sets the toggle as checked.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the toggle.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    size: 'Large',\n    headline: 'Headline',\n    label: 'Label',\n    checked: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ size, headline, label, checked, disabled }) => {\n  const sizeValue = size === 'Small' ? 'sdds-toggle-sm' : '';\n  const headlineDiv =\n    headline.length > 0 ? `<div class=\"sdds-toggle-headline\">${headline}</div>` : '';\n\n  return formatHtmlPreview(`\n      <div class=\"sdds-toggle ${sizeValue} ${disabled ? 'disabled' : ''}\">\n        ${headlineDiv}\n        <input type=\"checkbox\" class=\"sdds-toggle-input\" id=\"customSwitch1\" ${\n          disabled ? 'disabled' : ''\n        } ${checked ? 'checked' : ''}>\n        <span class=\"sdds-toggle-switch\"></span>\n        <label class=\"sdds-toggle-label\" for=\"customSwitch1\">${label}</label>\n      </div>\n  `);\n};\n\nexport const Native = Template.bind({});\n"]}

package/dist/collection/components/tooltip/tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /** In case tooltip contains only text, no HTML, text can be passed by this prop */\n  @Prop() text: string = '';\n\n  /** The CSS-selector for an element that will trigger the tooltip */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the tooltip (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button. */\n  @Prop() mouseOverTooltip: boolean = false;\n\n  /** Prop in control of showing and hiding prop */\n  @Prop({ mutable: true }) show: boolean = false;\n\n  /** Placement of tooltip. */\n  @Prop() placement: Placement = 'bottom';\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  border: string;\n\n  offsetSkidding: number = 0;\n\n  offsetDistance: number = 8;\n\n  tooltip!: HTMLInputElement;\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n\n    const thisValue = this;\n    this.popperInstance = createPopper(this.target, this.tooltip, {\n      placement: thisValue.placement,\n      modifiers: [\n        {\n          name: 'positionCalc',\n          enabled: true,\n          phase: 'main',\n          fn({ state }) {\n            if (state.placement === 'bottom-start' || state.placement === 'right-start') {\n              thisValue.border = 'top-left';\n            } else if (state.placement === 'bottom-end' || state.placement === 'left-start') {\n              thisValue.border = 'top-right';\n            } else if (state.placement === 'top-end' || state.placement === 'left-end') {\n              thisValue.border = 'bottom-right';\n            } else if (state.placement === 'top-start' || state.placement === 'right-end') {\n              thisValue.border = 'bottom-left';\n            } else if (state.placement === 'bottom' || state.placement === 'top') {\n              thisValue.border = 'default';\n            }\n          },\n        },\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showTooltip = () => {\n      this.show = true;\n    };\n\n    const hideTooltip = () => {\n      this.show = false;\n    };\n\n    // For tabbing over element\n    this.target.addEventListener('focusin', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('focusout', () => {\n      hideTooltip();\n    });\n\n    // For hovering over element with selector\n    this.target.addEventListener('mouseenter', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('mouseleave', () => {\n      hideTooltip();\n    });\n\n    // For hovering over tooltip itself:\n    if (this.mouseOverTooltip === true) {\n      this.tooltip.addEventListener('mouseenter', () => {\n        showTooltip();\n      });\n\n      this.tooltip.addEventListener('mouseleave', () => {\n        hideTooltip();\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  /* Slot on line 118 is added to support adding HTML elements to component */\n  render() {\n    return (\n      <span\n        ref={(el) => {\n          this.tooltip = el as HTMLInputElement;\n        }}\n        class={`sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}`}\n      >\n        {this.text}\n        <slot />\n      </span>\n    );\n  }\n}\n"]}

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

@@ -1,128 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Tooltip',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    tooltipPosition: {
-      name: 'Tooltip position',
-      description: 'Sets the position of the tooltip.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        'Bottom-start',
-        'Bottom',
-        'Bottom-end',
-        'Top-start',
-        'Top',
-        'Top-end',
-        'Left-start',
-        'Left',
-        'Left-end',
-        'Right-start',
-        'Right',
-        'Right-end',
-      ],
-      table: {
-        defaultValue: {
-          summary: 'bottom',
-        },
-      },
-    },
-    text: {
-      name: 'Tooltip text',
-      description: 'Sets the sext that will be displayed inside tooltip.',
-      control: {
-        type: 'text',
-      },
-    },
-    slot: {
-      name: 'Tooltip html content',
-      description: 'A slot for the tooltip to pass in html.',
-      control: {
-        type: 'text',
-      },
-    },
-    mouseOverTooltip: {
-      name: 'Open while hovering over tooltip',
-      description: 'Keeps the tooltip visible as long as the mouse hovers over it.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-  },
-  args: {
-    tooltipPosition: 'Bottom',
-    text: 'Text inside tooltip',
-    slot: '<p class="sdds-detail-05 sdds-u-m0"> Paragraph tag inside of Tooltip with <b>bold</b> and <i>italic</i> tags too. </p>',
-    mouseOverTooltip: true,
-  },
-};
-const positionLookup = {
-  'Bottom-start': 'bottom-start',
-  'Bottom': 'bottom',
-  'Bottom-end': 'bottom-end',
-  'Top-start': 'top-start',
-  'Top': 'top',
-  'Top-end': 'top-end',
-  'Left-start': 'left-start',
-  'Left': 'left',
-  'Left-end': 'left-end',
-  'Right-start': 'right-start',
-  'Right': 'right',
-  'Right-end': 'right-end',
-};
-const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) => formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-     .demo-wrapper{
-       height: 300px;
-       display: flex;
-       justify-content: center;
-       align-items: center;
-     }
-    </style>
-
-   <div class="demo-wrapper">
-   <!-- The 'referenceEl' prop can be used instead of 'selector',
-    which might be preferable in frameworks like React -->
-   <sdds-tooltip
-      placement="${positionLookup[tooltipPosition]}"
-      selector="#button-1"
-      text="${text}"
-      mouse-over-tooltip="${mouseOverTooltip}">
-      ${slot}
-    </sdds-tooltip>
-
-    <!-- Demo button for presentation purposes -->
-    <sdds-button size= 'sm' id="button-1" text='Hover me'></sdds-button>
-   </div>
-  `);
-export const WebComponent = ComponentTooltip.bind({});
-//# sourceMappingURL=tooltip.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.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,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,6GAA6G;OACnH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,6GAA6G;OACnH;KACF;GACF;EAED,QAAQ,EAAE;IACR,eAAe,EAAE;MACf,IAAI,EAAE,kBAAkB;MACxB,WAAW,EAAE,mCAAmC;MAChD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,cAAc;QACd,QAAQ;QACR,YAAY;QACZ,WAAW;QACX,KAAK;QACL,SAAS;QACT,YAAY;QACZ,MAAM;QACN,UAAU;QACV,aAAa;QACb,OAAO;QACP,WAAW;OACZ;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,QAAQ;SAClB;OACF;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,sDAAsD;MACnE,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,sBAAsB;MAC5B,WAAW,EAAE,yCAAyC;MACtD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,gBAAgB,EAAE;MAChB,IAAI,EAAE,kCAAkC;MACxC,WAAW,EAAE,gEAAgE;MAC7E,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,KAAK;SACf;OACF;KACF;GACF;EACD,IAAI,EAAE;IACJ,eAAe,EAAE,QAAQ;IACzB,IAAI,EAAE,qBAAqB;IAC3B,IAAI,EAAE,wHAAwH;IAC9H,gBAAgB,EAAE,IAAI;GACvB;CACF,CAAC;AAEF,MAAM,cAAc,GAAG;EACrB,cAAc,EAAE,cAAc;EAC9B,QAAQ,EAAE,QAAQ;EAClB,YAAY,EAAE,YAAY;EAC1B,WAAW,EAAE,WAAW;EACxB,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,SAAS;EACpB,YAAY,EAAE,YAAY;EAC1B,MAAM,EAAE,MAAM;EACd,UAAU,EAAE,UAAU;EACtB,aAAa,EAAE,aAAa;EAC5B,OAAO,EAAE,OAAO;EAChB,WAAW,EAAE,WAAW;CACzB,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EAAE,eAAe,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAC7E,iBAAiB,CACf;;;;;;;;;;;;;;;mBAee,cAAc,CAAC,eAAe,CAAC;;cAEpC,IAAI;4BACU,gBAAgB;QACpC,IAAI;;;;;;GAMT,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Tooltip',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n\n  argTypes: {\n    tooltipPosition: {\n      name: 'Tooltip position',\n      description: 'Sets the position of the tooltip.',\n      control: {\n        type: 'select',\n      },\n      options: [\n        'Bottom-start',\n        'Bottom',\n        'Bottom-end',\n        'Top-start',\n        'Top',\n        'Top-end',\n        'Left-start',\n        'Left',\n        'Left-end',\n        'Right-start',\n        'Right',\n        'Right-end',\n      ],\n      table: {\n        defaultValue: {\n          summary: 'bottom',\n        },\n      },\n    },\n    text: {\n      name: 'Tooltip text',\n      description: 'Sets the sext that will be displayed inside tooltip.',\n      control: {\n        type: 'text',\n      },\n    },\n    slot: {\n      name: 'Tooltip html content',\n      description: 'A slot for the tooltip to pass in html.',\n      control: {\n        type: 'text',\n      },\n    },\n    mouseOverTooltip: {\n      name: 'Open while hovering over tooltip',\n      description: 'Keeps the tooltip visible as long as the mouse hovers over it.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n  },\n  args: {\n    tooltipPosition: 'Bottom',\n    text: 'Text inside tooltip',\n    slot: '<p class=\"sdds-detail-05 sdds-u-m0\"> Paragraph tag inside of Tooltip with <b>bold</b> and <i>italic</i> tags too. </p>',\n    mouseOverTooltip: true,\n  },\n};\n\nconst positionLookup = {\n  'Bottom-start': 'bottom-start',\n  'Bottom': 'bottom',\n  'Bottom-end': 'bottom-end',\n  'Top-start': 'top-start',\n  'Top': 'top',\n  'Top-end': 'top-end',\n  'Left-start': 'left-start',\n  'Left': 'left',\n  'Left-end': 'left-end',\n  'Right-start': 'right-start',\n  'Right': 'right',\n  'Right-end': 'right-end',\n};\n\nconst ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) =>\n  formatHtmlPreview(\n    `\n    <style>\n    /* demo-wrapper is for demonstration purposes only*/\n     .demo-wrapper{\n       height: 300px;\n       display: flex;\n       justify-content: center;\n       align-items: center;\n     }\n    </style>\n\n   <div class=\"demo-wrapper\">\n   <!-- The 'referenceEl' prop can be used instead of 'selector',\n    which might be preferable in frameworks like React -->\n   <sdds-tooltip\n      placement=\"${positionLookup[tooltipPosition]}\"\n      selector=\"#button-1\"\n      text=\"${text}\"\n      mouse-over-tooltip=\"${mouseOverTooltip}\">\n      ${slot}\n    </sdds-tooltip>\n\n    <!-- Demo button for presentation purposes -->\n    <sdds-button size= 'sm' id=\"button-1\" text='Hover me'></sdds-button>\n   </div>\n  `,\n  );\n\nexport const WebComponent = ComponentTooltip.bind({});\n"]}

package/dist/collection/components/utility/colour/background-color.stories.js

@@ -1,97 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-export default {
-  title: 'Utilities/Colours',
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    backgroundColor: {
-      name: 'Background colour',
-      description: 'The colour of the text',
-      control: {
-        type: 'select',
-      },
-      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
-    },
-    greyScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        '50',
-        '100',
-        '200',
-        '300',
-        '400',
-        '500',
-        '600',
-        '700',
-        '800',
-        '846',
-        '868',
-        '900',
-        '958',
-      ],
-      if: { arg: 'backgroundColor', eq: 'grey' },
-    },
-    redScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'backgroundColor', eq: 'red' },
-    },
-    blueScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'backgroundColor', eq: 'blue' },
-    },
-  },
-};
-const Template = ({ backgroundColor, greyScale, blueScale, redScale }) => {
-  let scale = 100;
-  switch (backgroundColor) {
-    case 'blue':
-      scale = blueScale;
-      break;
-    case 'grey':
-      scale = greyScale;
-      break;
-    case 'red':
-      scale = redScale;
-      break;
-    default:
-      scale = blueScale;
-      break;
-  }
-  return formatHtmlPreview(`
-        <style>
-            .demo-wrapper{
-                height: 400px;
-                width: 400px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-        </style>
-        <div class="sdds-background-${backgroundColor}-${scale} demo-wrapper">
-            <h1>background-color:${backgroundColor}</h1>
-        </div>
-          `);
-};
-export const backgroundColor = Template.bind({});
-backgroundColor.args = {
-  backgroundColor: 'blue',
-  blueScale: '500',
-  redScale: '500',
-  greyScale: '958',
-};
-//# sourceMappingURL=background-color.stories.js.map

package/dist/collection/components/utility/colour/background-color.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"background-color.stories.js","sourceRoot":"","sources":["../../../../src/components/utility/colour/background-color.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;GACnB;EACD,QAAQ,EAAE;IACR,eAAe,EAAE;MACf,IAAI,EAAE,mBAAmB;MACzB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE;KACpD;IACD,SAAS,EAAE;MACT,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,IAAI;QACJ,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;OACN;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,EAAE;KAC3C;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;MAC9E,EAAE,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,EAAE,EAAE,KAAK,EAAE;KAC1C;IACD,SAAS,EAAE;MACT,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;MAC9E,EAAE,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,EAAE;KAC3C;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;EACvE,IAAI,KAAK,GAAG,GAAG,CAAC;EAChB,QAAQ,eAAe,EAAE;IACvB,KAAK,MAAM;MACT,KAAK,GAAG,SAAS,CAAC;MAClB,MAAM;IACR,KAAK,MAAM;MACT,KAAK,GAAG,SAAS,CAAC;MAClB,MAAM;IACR,KAAK,KAAK;MACR,KAAK,GAAG,QAAQ,CAAC;MACjB,MAAM;IACR;MACE,KAAK,GAAG,SAAS,CAAC;MAClB,MAAM;GACT;EACD,OAAO,iBAAiB,CACtB;;;;;;;;;;sCAUkC,eAAe,IAAI,KAAK;mCAC3B,eAAe;;WAEvC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjD,eAAe,CAAC,IAAI,GAAG;EACrB,eAAe,EAAE,MAAM;EACvB,SAAS,EAAE,KAAK;EAChB,QAAQ,EAAE,KAAK;EACf,SAAS,EAAE,KAAK;CACjB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\n\nexport default {\n  title: 'Utilities/Colours',\n  parameters: {\n    layout: 'centered',\n  },\n  argTypes: {\n    backgroundColor: {\n      name: 'Background colour',\n      description: 'The colour of the text',\n      control: {\n        type: 'select',\n      },\n      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },\n    },\n    greyScale: {\n      name: 'Scale',\n      description: 'The colour scale used.',\n      control: {\n        type: 'select',\n      },\n      options: [\n        '50',\n        '100',\n        '200',\n        '300',\n        '400',\n        '500',\n        '600',\n        '700',\n        '800',\n        '846',\n        '868',\n        '900',\n        '958',\n      ],\n      if: { arg: 'backgroundColor', eq: 'grey' },\n    },\n    redScale: {\n      name: 'Scale',\n      description: 'The colour scale used.',\n      control: {\n        type: 'select',\n      },\n      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],\n      if: { arg: 'backgroundColor', eq: 'red' },\n    },\n    blueScale: {\n      name: 'Scale',\n      description: 'The colour scale used.',\n      control: {\n        type: 'select',\n      },\n      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],\n      if: { arg: 'backgroundColor', eq: 'blue' },\n    },\n  },\n};\n\nconst Template = ({ backgroundColor, greyScale, blueScale, redScale }) => {\n  let scale = 100;\n  switch (backgroundColor) {\n    case 'blue':\n      scale = blueScale;\n      break;\n    case 'grey':\n      scale = greyScale;\n      break;\n    case 'red':\n      scale = redScale;\n      break;\n    default:\n      scale = blueScale;\n      break;\n  }\n  return formatHtmlPreview(\n    `\n        <style>\n            .demo-wrapper{\n                height: 400px;\n                width: 400px;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n            }\n        </style>\n        <div class=\"sdds-background-${backgroundColor}-${scale} demo-wrapper\">\n            <h1>background-color:${backgroundColor}</h1>\n        </div>\n          `,\n  );\n};\n\nexport const backgroundColor = Template.bind({});\n\nbackgroundColor.args = {\n  backgroundColor: 'blue',\n  blueScale: '500',\n  redScale: '500',\n  greyScale: '958',\n};\n"]}

package/dist/collection/components/utility/colour/text-color.stories.js

@@ -1,95 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-export default {
-  title: 'Utilities/Colours',
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    colour: {
-      name: 'Colour',
-      description: 'The colour of the text',
-      control: {
-        type: 'select',
-      },
-      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
-    },
-    greyScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        '50',
-        '100',
-        '200',
-        '300',
-        '400',
-        '500',
-        '600',
-        '700',
-        '800',
-        '846',
-        '868',
-        '900',
-        '958',
-      ],
-      if: { arg: 'colour', eq: 'grey' },
-    },
-    redScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'colour', eq: 'red' },
-    },
-    blueScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'colour', eq: 'blue' },
-    },
-  },
-};
-const Template = ({ colour, greyScale, blueScale, redScale }) => {
-  let scale = 100;
-  switch (colour) {
-    case 'blue':
-      scale = blueScale;
-      break;
-    case 'grey':
-      scale = greyScale;
-      break;
-    case 'red':
-      scale = redScale;
-      break;
-    default:
-      scale = blueScale;
-      break;
-  }
-  return formatHtmlPreview(`
-  <style>
-    .demo-wrapper h1 {
-      margin: 0;
-      width: 300px;
-    }
-  </style>
-  <div class="demo-wrapper">
-  <h1 class="sdds-text-${colour}-${scale}">A text ${colour} heading</h1>
-  <p class="sdds-text-${colour}-${scale}">A text ${colour} paragraph</p>
-  </div>
-  `);
-};
-export const textColor = Template.bind({});
-textColor.args = {
-  colour: 'blue',
-  blueScale: '500',
-  redScale: '500',
-  greyScale: '958',
-};
-//# sourceMappingURL=text-color.stories.js.map

package/dist/collection/components/utility/colour/text-color.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-color.stories.js","sourceRoot":"","sources":["../../../../src/components/utility/colour/text-color.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;GACnB;EACD,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE;KACpD;IACD,SAAS,EAAE;MACT,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,IAAI;QACJ,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;OACN;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE;KAClC;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;MAC9E,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE;KACjC;IACD,SAAS,EAAE;MACT,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;MAC9E,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE;KAClC;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;EAC9D,IAAI,KAAK,GAAG,GAAG,CAAC;EAChB,QAAQ,MAAM,EAAE;IACd,KAAK,MAAM;MACT,KAAK,GAAG,SAAS,CAAC;MAClB,MAAM;IACR,KAAK,MAAM;MACT,KAAK,GAAG,SAAS,CAAC;MAClB,MAAM;IACR,KAAK,KAAK;MACR,KAAK,GAAG,QAAQ,CAAC;MACjB,MAAM;IACR;MACE,KAAK,GAAG,SAAS,CAAC;MAClB,MAAM;GACT;EACD,OAAO,iBAAiB,CACtB;;;;;;;;yBAQqB,MAAM,IAAI,KAAK,YAAY,MAAM;wBAClC,MAAM,IAAI,KAAK,YAAY,MAAM;;GAEtD,CACA,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;EACf,MAAM,EAAE,MAAM;EACd,SAAS,EAAE,KAAK;EAChB,QAAQ,EAAE,KAAK;EACf,SAAS,EAAE,KAAK;CACjB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\n\nexport default {\n  title: 'Utilities/Colours',\n  parameters: {\n    layout: 'centered',\n  },\n  argTypes: {\n    colour: {\n      name: 'Colour',\n      description: 'The colour of the text',\n      control: {\n        type: 'select',\n      },\n      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },\n    },\n    greyScale: {\n      name: 'Scale',\n      description: 'The colour scale used.',\n      control: {\n        type: 'select',\n      },\n      options: [\n        '50',\n        '100',\n        '200',\n        '300',\n        '400',\n        '500',\n        '600',\n        '700',\n        '800',\n        '846',\n        '868',\n        '900',\n        '958',\n      ],\n      if: { arg: 'colour', eq: 'grey' },\n    },\n    redScale: {\n      name: 'Scale',\n      description: 'The colour scale used.',\n      control: {\n        type: 'select',\n      },\n      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],\n      if: { arg: 'colour', eq: 'red' },\n    },\n    blueScale: {\n      name: 'Scale',\n      description: 'The colour scale used.',\n      control: {\n        type: 'select',\n      },\n      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],\n      if: { arg: 'colour', eq: 'blue' },\n    },\n  },\n};\n\nconst Template = ({ colour, greyScale, blueScale, redScale }) => {\n  let scale = 100;\n  switch (colour) {\n    case 'blue':\n      scale = blueScale;\n      break;\n    case 'grey':\n      scale = greyScale;\n      break;\n    case 'red':\n      scale = redScale;\n      break;\n    default:\n      scale = blueScale;\n      break;\n  }\n  return formatHtmlPreview(\n    `\n  <style>\n    .demo-wrapper h1 {\n      margin: 0;\n      width: 300px;\n    }\n  </style>\n  <div class=\"demo-wrapper\">\n  <h1 class=\"sdds-text-${colour}-${scale}\">A text ${colour} heading</h1>\n  <p class=\"sdds-text-${colour}-${scale}\">A text ${colour} paragraph</p>\n  </div>\n  `,\n  );\n};\n\nexport const textColor = Template.bind({});\ntextColor.args = {\n  colour: 'blue',\n  blueScale: '500',\n  redScale: '500',\n  greyScale: '958',\n};\n"]}

package/dist/collection/foundations-stories/colour/colour-brand.stories.js

@@ -1,39 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Colour',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <style>
-  /* Demo code for presentation purposes */
-  .demo-wrapper {
-    height: 90px;
-  }
-  .demo-wrapper span {
-    color: white;
-    background-color: black;
-    border: 1px solid white;
-    padding: 4px;
-    position: absolute;
-  }
-</style>
-
-  <div class="demo-wrapper" style="background-color: var(--sdds-black)">
-    <span>--sdds-black</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--sdds-white)">
-    <span>--sdds-white</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--sdds-blue)">
-    <span>--sdds-blue</span>
-  </div>
-  `);
-export const Brand = Template.bind({});
-//# sourceMappingURL=colour-brand.stories.js.map

package/dist/collection/foundations-stories/colour/colour-brand.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colour-brand.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/colour/colour-brand.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;GAwBjB,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Colour',\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(`\n  <style>\n  /* Demo code for presentation purposes */\n  .demo-wrapper {\n    height: 90px;\n  }\n  .demo-wrapper span {\n    color: white;\n    background-color: black;\n    border: 1px solid white;\n    padding: 4px;\n    position: absolute;\n  }\n</style>\n\n  <div class=\"demo-wrapper\" style=\"background-color: var(--sdds-black)\">\n    <span>--sdds-black</span>\n  </div>\n  <div class=\"demo-wrapper\" style=\"background-color: var(--sdds-white)\">\n    <span>--sdds-white</span>\n  </div>\n  <div class=\"demo-wrapper\" style=\"background-color: var(--sdds-blue)\">\n    <span>--sdds-blue</span>\n  </div>\n  `);\n\nexport const Brand = Template.bind({});\n"]}