@scania/tegel 0.0.2 → 0.0.4

package/dist/collection/components/breadcrumb/{breadcrumb-item/breadcrumb-item.css → sdds-breadcrumb-item/sdds-breadcrumb-item.css}

@@ -15,12 +15,15 @@ li:hover a {
   color: var(--sdds-breadcrumb-color-hover);
   text-decoration: underline;
 }
-li.sdds-breadcrumb-item-disabled a, li.sdds-breadcrumb-item-current a,
+li.disabled {
+  pointer-events: none;
+}
+li.disabled a, li.current a,
 li [aria-current=page] a {
   cursor: default;
   color: var(--sdds-breadcrumb-color-disabled);
 }
-li.sdds-breadcrumb-item-disabled:hover a, li.sdds-breadcrumb-item-current:hover a,
+li.disabled:hover a, li.current:hover a,
 li [aria-current=page]:hover a {
   color: var(--sdds-breadcrumb-color-disabled);
   text-decoration: none;
@@ -34,10 +37,7 @@ li a::after {
   width: 4px;
   height: 8px;
 }
-li:last-child {
-  color: red;
-}
 
-:host(.sdds-breadcrumb-item-last) a::after {
+:host(.last) a::after {
   display: none;
 }

package/dist/collection/components/breadcrumb/{breadcrumb-item/breadcrumb-item.js → sdds-breadcrumb-item/sdds-breadcrumb-item.js}

@@ -1,83 +1,120 @@
-import { h } from '@stencil/core';
-export class SddsBreadcrumbItem {
-  constructor() {
-    this.current = false;
-    this.href = undefined;
-    this.disabled = false;
-  }
-  render() {
-    return (h("li", { class: `${this.current ? 'sdds-breadcrumb-item-current' : ''} 
-        ${this.disabled ? 'sdds-breadcrumb-item-disabled' : ''}` }, h("a", { "aria-current": this.current && 'page',
-      // eslint-disable-next-line no-script-url
-      href: this.disabled ? 'javascript:void(0)' : this.href }, h("slot", null))));
-  }
-  static get is() { return "sdds-breadcrumb-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["breadcrumb-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["breadcrumb-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "current": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Boolean for the current link"
-        },
-        "attribute": "current",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Href for the link"
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Toggle the disabled state for the breadcrumb"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-}
+import { h } from '@stencil/core';
+export class SddsBreadcrumbItem {
+  constructor() {
+    this.current = false;
+    this.href = undefined;
+    this.target = '_self';
+    this.rel = 'noopener';
+    this.disabled = false;
+  }
+  render() {
+    return (h("li", { class: `${this.current ? 'current' : ''} 
+        ${this.disabled ? 'disabled' : ''}` }, h("a", { href: !this.disabled ? this.href : null, target: this.target, rel: this.rel }, h("slot", null))));
+  }
+  static get is() { return "sdds-breadcrumb-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-breadcrumb-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-breadcrumb-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "current": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Boolean for the current link"
+        },
+        "attribute": "current",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href for the link"
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_self' | '_blank' | '_parent' | '_top'",
+          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Where to open the linked URL"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'."
+        },
+        "attribute": "rel",
+        "reflect": false,
+        "defaultValue": "'noopener'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Toggle the disabled state for the breadcrumb"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=sdds-breadcrumb-item.js.map

package/dist/collection/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-breadcrumb-item.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;;mBAEF,KAAK;;kBAM0B,OAAO;eAG3C,UAAU;oBAGJ,KAAK;;EAEjC,MAAM;IACJ,OAAO,CACL,UACE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;MAEnC,SAAG,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG;QAC5E,eAAa,CACX,CACD,CACN,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-item',\n  styleUrl: 'sdds-breadcrumb-item.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbItem {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  /** Toggle the disabled state for the breadcrumb */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <li\n        class={`${this.current ? 'current' : ''} \n        ${this.disabled ? 'disabled' : ''}`}\n      >\n        <a href={!this.disabled ? this.href : null} target={this.target} rel={this.rel}>\n          <slot></slot>\n        </a>\n      </li>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb/{breadcrumb.js → sdds-breadcrumb.js}

@@ -1,22 +1,23 @@
-import { h } from '@stencil/core';
-export class SddsBreadcrumb {
-  connectedCallback() {
-    this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');
-  }
-  render() {
-    return (h("nav", null, h("ol", { class: 'sdds-breadcrumb' }, h("slot", null))));
-  }
-  static get is() { return "sdds-breadcrumb"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["breadcrumb-component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["breadcrumb-component.css"]
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+import { h } from '@stencil/core';
+export class SddsBreadcrumb {
+  connectedCallback() {
+    this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');
+  }
+  render() {
+    return (h("nav", null, h("ol", { class: 'sdds-breadcrumb' }, h("slot", null))));
+  }
+  static get is() { return "sdds-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-breadcrumb.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-breadcrumb.css"]
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=sdds-breadcrumb.js.map

package/dist/collection/components/breadcrumb/sdds-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOtD,MAAM,OAAO,cAAc;EAGzB,iBAAiB;IACf,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;EAC3F,CAAC;EAED,MAAM;IACJ,OAAO,CACL;MACE,UAAI,KAAK,EAAE,iBAAiB;QAC1B,eAAa,CACV,CACD,CACP,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb',\n  styleUrl: 'sdds-breadcrumb.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumb {\n  @Element() el: HTMLElement;\n\n  connectedCallback() {\n    this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');\n  }\n\n  render() {\n    return (\n      <nav>\n        <ol class={'sdds-breadcrumb'}>\n          <slot></slot>\n        </ol>\n      </nav>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,29 @@
+import itemReadme from './sdds-breadcrumb-item/readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Breadcrumb',
+  parameters: {
+    notes: { 'Breadcumb Item': itemReadme },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+};
+const Template = () => formatHtmlPreview(`   
+      <sdds-breadcrumb>
+        <sdds-breadcrumb-item href="#">Page 1</sdds-breadcrumb-item>
+        <sdds-breadcrumb-item href="google.se">Page 2</sdds-breadcrumb-item>
+        <sdds-breadcrumb-item current>Page 3</sdds-breadcrumb-item>
+      </sdds-breadcrumb>
+      `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=sdds-breadcrumb.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,gBAAgB,EAAE,UAAU,EAAE;IACvC,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;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;OAMG,CACJ,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import itemReadme from './sdds-breadcrumb-item/readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Breadcrumb',\n  parameters: {\n    notes: { 'Breadcumb Item': itemReadme },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `   \n      <sdds-breadcrumb>\n        <sdds-breadcrumb-item href=\"#\">Page 1</sdds-breadcrumb-item>\n        <sdds-breadcrumb-item href=\"google.se\">Page 2</sdds-breadcrumb-item>\n        <sdds-breadcrumb-item current>Page 3</sdds-breadcrumb-item>\n      </sdds-breadcrumb>\n      `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/button/button-component.js

@@ -1,155 +1,156 @@
-import { h, Host } from '@stencil/core';
-export class SddsButton {
-  constructor() {
-    this.text = '';
-    this.type = 'primary';
-    this.size = 'lg';
-    this.disabled = false;
-    this.fullbleed = false;
-    this.modeVariant = null;
-    this.onlyIcon = false;
-  }
-  componentWillLoad() {
-    if (this.text === '') {
-      this.onlyIcon = true;
-      this.host.setAttribute('only-icon', '');
-    }
-  }
-  render() {
+import { h, Host } from '@stencil/core';
+export class SddsButton {
+  constructor() {
+    this.text = '';
+    this.type = 'primary';
+    this.size = 'lg';
+    this.disabled = false;
+    this.fullbleed = false;
+    this.modeVariant = null;
+    this.onlyIcon = false;
+  }
+  componentWillLoad() {
+    if (this.text === '') {
+      this.onlyIcon = true;
+      this.host.setAttribute('only-icon', '');
+    }
+  }
+  render() {
     return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { class: `sdds-btn sdds-btn-${this.type} 
         ${`sdds-btn-${this.size}`}
         ${this.disabled ? 'disabled' : ''}
         ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}
-        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}` }, h("span", { class: "sdds-btn-text" }, this.text), h("slot", { name: "icon" }))));
-  }
-  static get is() { return "sdds-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text inside a button"
-        },
-        "attribute": "text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary' | 'ghost' | 'danger'",
-          "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of button"
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'xs' | 'sm' | 'md' | 'lg'",
-          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Control for disabled state of component"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "fullbleed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When enabled, makes button take 100% width"
-        },
-        "attribute": "fullbleed",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the mode variant of the the button."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "onlyIcon": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-}
+        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}` }, h("span", { class: "sdds-btn-text" }, this.text), h("slot", { name: "icon" }))));
+  }
+  static get is() { return "sdds-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text inside a button"
+        },
+        "attribute": "text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary' | 'ghost' | 'danger'",
+          "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of button"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xs' | 'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Control for disabled state of component"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fullbleed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When enabled, makes button take 100% width"
+        },
+        "attribute": "fullbleed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the mode variant of the the button."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "onlyIcon": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=button-component.js.map

package/dist/collection/components/button/button-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-component.js","sourceRoot":"","sources":["../../../src/components/button/button-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQzE,MAAM,OAAO,UAAU;;gBAGE,EAAE;gBAGoC,SAAS;gBAE5B,IAAI;oBAGlB,KAAK;qBAGJ,KAAK;uBAGa,IAAI;oBAEtB,KAAK;;EAIlC,iBAAiB;IACf,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,EAAE;MACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;KACzC;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,EAAE,EAAE;MACzF,cACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI;UACnC,YAAY,IAAI,CAAC,IAAI,EAAE;UACvB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UAC1C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE;QAE7C,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAQ;QAC9C,YAAM,IAAI,EAAC,MAAM,GAAG,CACb,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class SddsButton {\n  // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n  /** Text inside a button */\n  @Prop() text: string = '';\n\n  /** Type of button */\n  @Prop() type: 'primary' | 'secondary' | 'ghost' | 'danger' = 'primary';\n\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Control for disabled state of component */\n  @Prop() disabled: boolean = false;\n\n  /** When enabled, makes button take 100% width */\n  @Prop() fullbleed: boolean = false;\n\n  /** Set the mode variant of the the button. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() onlyIcon: boolean = false;\n\n  @Element() host: HostElement;\n\n  componentWillLoad() {\n    if (this.text === '') {\n      this.onlyIcon = true;\n      this.host.setAttribute('only-icon', '');\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n      <button\n        class={`sdds-btn sdds-btn-${this.type} \n        ${`sdds-btn-${this.size}`}\n        ${this.disabled ? 'disabled' : ''}\n        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n      >\n        <span class=\"sdds-btn-text\">{this.text}</span>\n        <slot name=\"icon\" />\n      </button>\n      </Host>\n    );\n  }\n}\n"]}