@scania/tegel 0.0.1-beta.9 → 0.0.2

package/dist/collection/collection-manifest.json

@@ -0,0 +1,52 @@
+{
+  "entries": [
+    "./components/data-table/table/table.js",
+    "./components/accordion/accordion.js",
+    "./components/accordion/accordion-item/accordion-item.js",
+    "./components/badge/badges.js",
+    "./components/banner/sdds-banner.js",
+    "./components/block/sdds-block.js",
+    "./components/breadcrumb/breadcrumb.js",
+    "./components/breadcrumb/breadcrumb-item/breadcrumb-item.js",
+    "./components/button/button-component.js",
+    "./components/card/sdds-card.js",
+    "./components/checkbox/sdds-checkbox.js",
+    "./components/data-table/table-body/table-body.js",
+    "./components/data-table/table-body-cell/table-body-cell.js",
+    "./components/data-table/table-body-row/table-body-row.js",
+    "./components/data-table/table-body-row-expandable/table-body-row-expandable.js",
+    "./components/data-table/table-footer/table-footer.js",
+    "./components/data-table/table-header/table-header.js",
+    "./components/data-table/table-header-cell/table-header-cell.js",
+    "./components/data-table/table-toolbar/table-toolbar.js",
+    "./components/datetime/datetime.js",
+    "./components/dropdown/dropdown.js",
+    "./components/dropdown/dropdown-filter/dropdown-filter.js",
+    "./components/dropdown/dropdown-option/dropdown-option.js",
+    "./components/icon/icon.js",
+    "./components/link/sdds-link.js",
+    "./components/message/sdds-message.js",
+    "./components/modal/modal.js",
+    "./components/popover-canvas/popover-canvas.js",
+    "./components/popover-menu/popover-menu.js",
+    "./components/radio-button/radio-button.js",
+    "./components/slider/slider.js",
+    "./components/spinner/spinner.js",
+    "./components/tabs/inline-tabs-default/inline-tabs.js",
+    "./components/tabs/inline-tabs-default/inline-tab/inline-tab.js",
+    "./components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js",
+    "./components/tabs/navigation-tabs/navigation-tabs.js",
+    "./components/textarea/textarea.js",
+    "./components/textfield/textfield.js",
+    "./components/toast/sdds-toast.js",
+    "./components/toggle/sdds-toggle.js",
+    "./components/tooltip/tooltip.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/accordion/accordion-item/accordion-item.css

@@ -0,0 +1,153 @@
+.sdds-accordion-item {
+  box-sizing: border-box;
+  list-style: none;
+  color: var(--sdds-accordion-color);
+  position: relative;
+  border-top: 1px solid var(--sdds-accordion-border);
+}
+.sdds-accordion-item * {
+  box-sizing: border-box;
+}
+.sdds-accordion-item button.sdds-accordion-header-icon-start,
+.sdds-accordion-item button.sdds-accordion-header-icon-end {
+  all: unset;
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start,
+.sdds-accordion-item .sdds-accordion-header-icon-end,
+.sdds-accordion-item button.sdds-accordion-header-icon-start,
+.sdds-accordion-item button.sdds-accordion-header-icon-end {
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  padding: var(--sdds-spacing-element-16);
+  background-color: var(--sdds-accordion-background);
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start *,
+.sdds-accordion-item .sdds-accordion-header-icon-end *,
+.sdds-accordion-item button.sdds-accordion-header-icon-start *,
+.sdds-accordion-item button.sdds-accordion-header-icon-end * {
+  box-sizing: border-box;
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon,
+.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon,
+.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon,
+.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon {
+  transform-origin: center;
+  transition: transform 0.15s ease-in-out;
+  color: var(--sdds-accordion-color);
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon > sdds-icon,
+.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon > sdds-icon,
+.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon > sdds-icon,
+.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon > sdds-icon {
+  display: block;
+}
+.sdds-accordion-item .sdds-accordion-title {
+  flex-grow: 2;
+}
+.sdds-accordion-item .sdds-accordion-panel {
+  cursor: default;
+  padding: var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64) var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);
+  display: none;
+  font: var(--sdds-detail-03);
+  letter-spacing: var(--sdds-detail-03-ls);
+}
+.sdds-accordion-item .sdds-accordion-panel p {
+  margin: 0;
+  padding: 0;
+}
+.sdds-accordion-item .sdds-accordion-panel--padding-reset {
+  padding-right: var(--sdds-spacing-element-16);
+}
+.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon {
+  margin: 0 0 0 var(--sdds-spacing-element-32);
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-title {
+  order: 1;
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon {
+  order: 0;
+  margin: 0 var(--sdds-spacing-element-16) 0 0;
+}
+.sdds-accordion-item.disabled,
+.sdds-accordion-item.disabled .sdds-accordion-header-icon-end,
+.sdds-accordion-item.disabled .sdds-accordion-header-icon-start,
+.sdds-accordion-item.disabled .sdds-accordion-panel {
+  color: var(--sdds-accordion-color-disabled);
+  cursor: not-allowed;
+}
+.sdds-accordion-item.disabled .sdds-accordion-icon,
+.sdds-accordion-item.disabled .sdds-accordion-header-icon-end .sdds-accordion-icon,
+.sdds-accordion-item.disabled .sdds-accordion-header-icon-start .sdds-accordion-icon,
+.sdds-accordion-item.disabled .sdds-accordion-panel .sdds-accordion-icon {
+  color: var(--sdds-accordion-color-disabled);
+}
+.sdds-accordion-item.disabled:hover,
+.sdds-accordion-item.disabled:hover *, .sdds-accordion-item.disabled:focus,
+.sdds-accordion-item.disabled:focus *, .sdds-accordion-item.disabled:active,
+.sdds-accordion-item.disabled:active *, .sdds-accordion-item.disabled.active,
+.sdds-accordion-item.disabled.active * {
+  cursor: not-allowed;
+}
+.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start,
+.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end, .sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start,
+.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end, .sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start,
+.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end, .sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start,
+.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-bg);
+  outline: none;
+  pointer-events: none;
+}
+.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start::after,
+.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end::after, .sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start::after,
+.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end::after, .sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start::after,
+.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end::after, .sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start::after,
+.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end::after {
+  border-color: transparent;
+}
+.sdds-accordion-item.expanded .sdds-accordion-panel {
+  display: block;
+  padding-bottom: 31px;
+}
+.sdds-accordion-item.expanded .sdds-accordion-icon {
+  transform: rotate(180deg);
+}
+.sdds-accordion-item.expanded .sdds-accordion-header-icon-end .sdds-accordion-icon {
+  margin-right: 0;
+  margin-left: var(--sdds-spacing-element-32);
+}
+.sdds-accordion-item.expanded .sdds-accordion-header-icon-start .sdds-accordion-icon {
+  margin-left: 0;
+  margin-right: var(--sdds-spacing-element-16);
+}
+.sdds-accordion-item:focus {
+  border-top: 1px solid var(--sdds-accordion-border-focus);
+}
+.sdds-accordion-item[disabled=true]:focus {
+  border-color: var(--sdds-accordion-border);
+}
+
+:host(:focus) .sdds-accordion-item {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-background-focus);
+  outline: none;
+}
+
+:host(:hover) .sdds-accordion-header-icon-start,
+:host(:hover) .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-background-hover);
+}
+
+:host(:active) .sdds-accordion-header-icon-start,
+:host(:active) .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-background-active);
+  outline: none;
+}

package/dist/collection/components/accordion/accordion-item/accordion-item.js

@@ -0,0 +1,146 @@
+import { h, Host } from '@stencil/core';
+export class AccordionItem {
+  constructor() {
+    this.header = '';
+    this.expandIconPosition = 'end';
+    this.disabled = false;
+    this.expanded = false;
+    this.paddingReset = false;
+  }
+  openAccordion() {
+    this.expanded = !this.expanded;
+    this.accordionItemToggle.emit(this.expanded);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `sdds-accordion-item 
+        ${this.disabled ? 'disabled' : ''} 
+        ${this.expanded ? 'expanded' : ''}
+        ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `sdds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.openAccordion(), disabled: this.disabled }, h("div", { class: "sdds-accordion-title" }, this.header), h("div", { class: "sdds-accordion-icon" }, h("sdds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `sdds-accordion-panel 
+            ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}         
+            ` }, h("slot", null)))));
+  }
+  static get is() { return "sdds-accordion-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["accordion-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["accordion-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The header gives users the context about the additional information available inside the panel"
+        },
+        "attribute": "header",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "expandIconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'end'",
+          "resolved": "\"end\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Changes where the expand icon is placed."
+        },
+        "attribute": "expand-icon-position",
+        "reflect": false,
+        "defaultValue": "'end'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disabled option in `boolean`."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "expanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to expand panel open"
+        },
+        "attribute": "expanded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "paddingReset": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true 16px on right padding instead of 64px"
+        },
+        "attribute": "padding-reset",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "accordionItemToggle",
+        "name": "accordionItemToggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/accordion/accordion.css

@@ -0,0 +1,63 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .sdds-accordion-header-icon-start,
+:host .sdds-accordion-header-icon-end {
+  position: relative;
+}
+
+:host(:focus) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-background-focus);
+  outline: none;
+}
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start::after,
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end::after {
+  border-color: var(--sdds-accordion-border-focus);
+}
+:host(:focus) .disabled,
+:host(:focus) .disabled * {
+  cursor: not-allowed;
+}
+:host(:focus) .disabled .sdds-accordion-header-icon-start,
+:host(:focus) .disabled .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-bg);
+  outline: none;
+  pointer-events: none;
+}
+:host(:focus) .disabled .sdds-accordion-header-icon-start::after,
+:host(:focus) .disabled .sdds-accordion-header-icon-end::after {
+  border-color: transparent;
+}
+
+:host(:active) .sdds-accordion-header-icon-start,
+:host(:active) .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-background-active);
+  outline: none;
+}
+:host(:active) .disabled,
+:host(:active) .disabled * {
+  cursor: not-allowed;
+}
+:host(:active) .disabled .sdds-accordion-header-icon-start,
+:host(:active) .disabled .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-bg);
+  outline: none;
+  pointer-events: none;
+}
+:host(:active) .disabled .sdds-accordion-header-icon-start::after,
+:host(:active) .disabled .sdds-accordion-header-icon-end::after {
+  border-color: transparent;
+}
+
+:host(:last-child) {
+  border-bottom: 1px solid var(--sdds-accordion-border);
+}

package/dist/collection/components/accordion/accordion.js

@@ -0,0 +1,62 @@
+import { h, Host } from '@stencil/core';
+export class Accordion {
+  constructor() {
+    this.divider = true;
+    this.modeVariant = null;
+  }
+  render() {
+    return (h(Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+  }
+  static get is() { return "sdds-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["accordion.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["accordion.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "divider": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable divider lines between items"
+        },
+        "attribute": "divider",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the variant of the the accordion."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,90 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import readmeItem from './accordion-item/readme.md';
+export default {
+  title: 'Components/Accordion',
+  argTypes: {
+    iconPosition: {
+      name: 'Expand icon position',
+      control: {
+        type: 'radio',
+      },
+      options: { End: 'end', Start: 'start' },
+      description: 'The horizontal position of the expand icon.',
+      table: {
+        defaultValue: { summary: 'end' },
+      },
+    },
+    disabled: {
+      name: 'Disable all items',
+      description: 'Disable all accordion items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    paddingReset: {
+      name: 'Less padding right',
+      description: 'Less padding on the right inside accordion items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+  },
+  parameters: {
+    notes: { 'Accordion': readme, 'Accordion item': readmeItem },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  args: {
+    disabled: false,
+    paddingReset: false,
+    iconPosition: 'end',
+    modeVariant: 'Inherit from parent',
+  },
+};
+const Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {
+  const affixAttr = iconPosition === 'start' ? 'expand-icon-position="start"' : '';
+  const disabledAttr = disabled ? 'disabled' : '';
+  const paddingResetAttr = paddingReset ? 'padding-reset' : '';
+  return formatHtmlPreview(`
+    <sdds-accordion ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <sdds-accordion-item header="First item" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>
+        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
+        Lorem ipsum doler sit amet.
+      </sdds-accordion-item>
+      <sdds-accordion-item header="Second item" ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>
+        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.
+      </sdds-accordion-item>
+    </sdds-accordion>
+  `);
+};
+export const Default = Template.bind({});
+Default.args = {};

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

@@ -0,0 +1,102 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Badge',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    hidden: {
+      name: 'Hidden',
+      description: 'Toggle visibility of badge',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    value: {
+      name: 'Value',
+      description: 'Set a value to show on the badge',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'size', neq: 'sm' },
+      table: {
+        defaultValue: { summary: null },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Size of the component',
+      options: {
+        Large: 'lg',
+        Small: 'sm',
+      },
+      control: {
+        type: 'radio',
+      },
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+  },
+  args: {
+    hidden: false,
+    size: 'lg',
+    value: 1,
+  },
+};
+const Template = ({ value, size, hidden }) => formatHtmlPreview(`
+    <sdds-badges
+      ${value ? `value="${value}"` : ''}
+      ${hidden ? 'hidden' : ''}
+      size="${size}">
+    </sdds-badges>`);
+export const Default = Template.bind({});
+const WithDemoTemplate = ({ value, size, visible }) => formatHtmlPreview(`
+    <style>
+    /* Note: Demo classes used here are just for demo purposes in Storybook */
+    .badges-demo-box {
+      margin:5px;
+      height: 32px;
+      width: 32px;
+      position: relative;
+      background-color: #C4C4C4;
+    }
+
+    .badges-demo-box sdds-badges[size="lg"]{
+      position: absolute;
+      left: 16px;
+      top: -5px;
+    }
+
+    .badges-demo-box sdds-badges[size="sm"]{
+      position: absolute;
+      left: 26px;
+      top: -2px;
+    }
+    </style>
+
+    <div class="badges-demo-box">
+      <sdds-badges
+        ${value ? `value="${value}"` : ''}
+        is-visible=${visible}
+        size="${size}">
+      </sdds-badges>
+    </div>`);
+export const WithDemoComponent = WithDemoTemplate.bind({});