@scania/tegel 0.0.2 → 0.0.5

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

@@ -1,31 +1,34 @@
 @charset "UTF-8";
-li {
+[role=listitem] {
   display: flex;
   align-items: center;
   color: var(--sdds-breadcrumb-color);
 }
-li a {
+[role=listitem] a {
   color: var(--sdds-breadcrumb-color);
   text-decoration: none;
 }
-li:hover {
+[role=listitem]:hover {
   cursor: pointer;
 }
-li:hover a {
+[role=listitem]:hover a {
   color: var(--sdds-breadcrumb-color-hover);
   text-decoration: underline;
 }
-li.sdds-breadcrumb-item-disabled a, li.sdds-breadcrumb-item-current a,
-li [aria-current=page] a {
+[role=listitem].disabled {
+  pointer-events: none;
+}
+[role=listitem].disabled a, [role=listitem].current a,
+[role=listitem] [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 [aria-current=page]:hover a {
+[role=listitem].disabled:hover a, [role=listitem].current:hover a,
+[role=listitem] [aria-current=page]:hover a {
   color: var(--sdds-breadcrumb-color-disabled);
   text-decoration: none;
 }
-li a::after {
+[role=listitem] a::after {
   content: "›";
   color: var(--sdds-breadcrumb-separator-color);
   margin-right: 4px;
@@ -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-link/sdds-breadcrumb-link.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 SddsBreadcrumbLink {
+  constructor() {
+    this.current = false;
+    this.href = undefined;
+    this.target = '_self';
+    this.rel = 'noopener';
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { role: "listitem", 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-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-breadcrumb-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-breadcrumb-link.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-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-breadcrumb-link.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.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,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;QACvC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;MAEjC,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,CACA,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-link',\n  styleUrl: 'sdds-breadcrumb-link.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbLink {\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      <div\n        role=\"listitem\"\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      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb/sdds-breadcrumb.css

@@ -0,0 +1,15 @@
+:host {
+  box-sizing: border-box;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host [role=list] {
+  padding: 0;
+  margin: 0;
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+}

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('last');
+  }
+  render() {
+    return (h("nav", null, h("div", { role: "list", 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,MAAM,CAAC,CAAC;EACtE,CAAC;EAED,MAAM;IACJ,OAAO,CACL;MACE,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,iBAAiB;QACvC,eAAa,CACT,CACF,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('last');\n  }\n\n  render() {\n    return (\n      <nav>\n        <div role=\"list\" class={'sdds-breadcrumb'}>\n          <slot></slot>\n        </div>\n      </nav>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,30 @@
+import itemReadme from './sdds-breadcrumb-link/readme.md';
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Breadcrumb',
+  parameters: {
+    notes: { 'Breadcumb': readme, 'Breadcumb Link': 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-link href="#">Page 1</sdds-breadcrumb-link>
+        <sdds-breadcrumb-link href="google.se">Page 2</sdds-breadcrumb-link>
+        <sdds-breadcrumb-link current>Page 3</sdds-breadcrumb-link>
+      </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,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE;IAC5D,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-link/readme.md';\nimport readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Breadcrumb',\n  parameters: {\n    notes: { 'Breadcumb': readme, 'Breadcumb Link': 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-link href=\"#\">Page 1</sdds-breadcrumb-link>\n        <sdds-breadcrumb-link href=\"google.se\">Page 2</sdds-breadcrumb-link>\n        <sdds-breadcrumb-link current>Page 3</sdds-breadcrumb-link>\n      </sdds-breadcrumb>\n      `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}