@scania/tegel 0.0.1-beta.7 → 0.0.2

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

@@ -0,0 +1,22 @@
+.sdds-block-webcomponent {
+  box-sizing: border-box;
+  color: var(--sdds-block-color);
+  border-radius: 4px;
+  padding: 16px;
+  font: var(--sdds-body-01);
+  letter-spacing: var(--sdds-body-01-ls);
+  background-color: var(--sdds-block-background);
+}
+.sdds-block-webcomponent * {
+  box-sizing: border-box;
+}
+
+.sdds-mode-variant-primary {
+  --sdds-block-background: var(--sdds-block-background-primary);
+  --sdds-block-background-nested: var(--sdds-block-background-nested-primary);
+}
+
+.sdds-mode-variant-secondary {
+  --sdds-block-background: var(--sdds-block-background-secondary);
+  --sdds-block-background-nested: var(--sdds-block-background-nested-secondary);
+}

package/dist/collection/components/block/sdds-block.js

@@ -0,0 +1,55 @@
+import { h } from '@stencil/core';
+export class SddsBlock {
+  constructor() {
+    this.modeVariant = null;
+  }
+  connectedCallback() {
+    this.children = Array.from(this.host.children).filter((item) => item.tagName === 'SDDS-BLOCK');
+    this.children.forEach((item) => {
+      if (!this.modeVariant) {
+        item.setAttribute('mode-variant', 'secondary');
+      }
+      else {
+        item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');
+      }
+    });
+  }
+  render() {
+    return (h("div", { class: `sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+  }
+  static get is() { return "sdds-block"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-block.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-block.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mode variant of the component, based on current mode."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,48 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Block',
+  parameters: {
+    layout: 'padded',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background. ',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+  },
+};
+const Template = ({ modeVariant }) => formatHtmlPreview(`
+      <sdds-block ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+        <h2 class="sdds-headline-02">Block</h2>
+        <p class="sdds-body-01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
+          <sdds-block>
+              <h3 class="sdds-headline-04">Nested block</h3>
+              <p class="sdds-detail-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
+          </sdds-block>
+      </sdds-block>
+    `);
+export const WebComponent = Template.bind({});

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

@@ -0,0 +1,30 @@
+:root,
+.sdds-mode-light {
+  --sdds-breadcrumb-color: var(--sdds-grey-900);
+  --sdds-breadcrumb-color-hover: var(--sdds-grey-700);
+  --sdds-breadcrumb-color-focus: var(--sdds-grey-700);
+  --sdds-breadcrumb-color-disabled: var(--sdds-grey-500);
+  --sdds-breadcrumb-separator-color: var(--sdds-grey-500);
+}
+
+.sdds-mode-dark {
+  --sdds-breadcrumb-color: var(--sdds-grey-300);
+  --sdds-breadcrumb-color-hover: var(--sdds-grey-500);
+  --sdds-breadcrumb-color-focus: var(--sdds-grey-500);
+  --sdds-breadcrumb-color-disabled: var(--sdds-grey-700);
+  --sdds-breadcrumb-separator-color: var(--sdds-grey-700);
+}
+
+nav ol.sdds-breadcrumb {
+  box-sizing: border-box;
+  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;
+}
+nav ol.sdds-breadcrumb * {
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,43 @@
+@charset "UTF-8";
+li {
+  display: flex;
+  align-items: center;
+  color: var(--sdds-breadcrumb-color);
+}
+li a {
+  color: var(--sdds-breadcrumb-color);
+  text-decoration: none;
+}
+li:hover {
+  cursor: pointer;
+}
+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 [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 {
+  color: var(--sdds-breadcrumb-color-disabled);
+  text-decoration: none;
+}
+li a::after {
+  content: "›";
+  color: var(--sdds-breadcrumb-separator-color);
+  margin-right: 4px;
+  margin-left: 4px;
+  display: inline-block;
+  width: 4px;
+  height: 8px;
+}
+li:last-child {
+  color: red;
+}
+
+:host(.sdds-breadcrumb-item-last) a::after {
+  display: none;
+}

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

@@ -0,0 +1,83 @@
+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"
+      }
+    };
+  }
+}

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,22 @@
+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"; }
+}

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

@@ -0,0 +1,26 @@
+export default {
+  title: 'Components/Breadcrumb',
+  parameters: {
+    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 = () => `   
+    <div class="sdds-breadcrumb">
+      <div class="sdds-breadcrumb-item"><a href="#">Page 1</a></div>
+      <div class="sdds-breadcrumb-item"><a href="#">Page 2</a></div>
+      <div class="sdds-breadcrumb-item sdds-breadcrumb-item-current"><a aria-current="page">Page 3</a></div>
+    </div>
+    `;
+export const Native = Template.bind({});
+Native.args = {};

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

@@ -1,154 +1,155 @@
-import { h } from '@stencil/core';
-export class SddsButton {
-  constructor() {
-    this.text = '';
-    this.type = 'primary';
-    this.variant = 'default';
-    this.size = 'lg';
-    this.disabled = false;
-    this.fullbleed = false;
-    this.onlyIcon = false;
-  }
-  componentWillLoad() {
-    if (this.text === '') {
-      this.onlyIcon = true;
-    }
-  }
-  render() {
-    return (h("button", { class: `sdds-btn sdds-btn-${this.type}
+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.variant === 'variant' ? 'sdds-on-white-bg' : ''}
-        ${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'"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'default' | 'variant'",
-          "resolved": "\"default\" | \"variant\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'default'"
-      },
-      "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"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "onlyIcon": {}
-    };
-  }
-}
+        ${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"; }
+}