@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/collection/components/icon/icon.js

@@ -1,89 +1,89 @@
-// Check status of webFont solution
-import { h, Host } from '@stencil/core';
-import { iconsCollection } from './iconsArray';
-export class Icon {
-  constructor() {
-    this.setIcons = () => this.arrayOfIcons.map(element => {
-      if (element.name === this.name) {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size } }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
-      }
-    });
-    this.name = 'arrow_diagonal';
-    this.size = '16px';
-    this.icons_object = iconsCollection;
-    this.arrayOfIcons = [];
-  }
-  componentWillLoad() {
-    this.arrayDataWatcher(this.icons_object);
-  }
-  arrayDataWatcher(newValue) {
-    if (typeof newValue === 'string') {
-      this.arrayOfIcons = JSON.parse(newValue);
-    }
-    else {
-      this.arrayOfIcons = newValue;
-    }
-    this.arrayOfIcons = [...this.arrayOfIcons];
-  }
-  render() {
-    return h(Host, null, this.setIcons());
-  }
-  static get is() { return "sdds-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook"
-        },
-        "attribute": "name",
-        "reflect": true,
-        "defaultValue": "'arrow_diagonal'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Pass a size of icon as a string, for example: 32px, 1rem, 4em..."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'16px'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "icons_object": {},
-      "arrayOfIcons": {}
-    };
-  }
-}
+// Check status of webFont solution
+import { h, Host } from '@stencil/core';
+import { iconsCollection } from './iconsArray';
+export class Icon {
+  constructor() {
+    this.setIcons = () => this.arrayOfIcons.map(element => {
+      if (element.name === this.name) {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size } }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
+      }
+    });
+    this.name = 'arrow_diagonal';
+    this.size = '16px';
+    this.icons_object = iconsCollection;
+    this.arrayOfIcons = [];
+  }
+  componentWillLoad() {
+    this.arrayDataWatcher(this.icons_object);
+  }
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this.arrayOfIcons = JSON.parse(newValue);
+    }
+    else {
+      this.arrayOfIcons = newValue;
+    }
+    this.arrayOfIcons = [...this.arrayOfIcons];
+  }
+  render() {
+    return h(Host, null, this.setIcons());
+  }
+  static get is() { return "sdds-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook"
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "'arrow_diagonal'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Pass a size of icon as a string, for example: 32px, 1rem, 4em..."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'16px'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "icons_object": {},
+      "arrayOfIcons": {}
+    };
+  }
+}

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

@@ -0,0 +1,45 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Link',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    disabled: {
+      name: 'Disabled',
+      description: 'Display link in disabled state',
+      controls: {
+        type: 'boolean',
+      },
+    },
+    noUnderline: {
+      name: 'No underline',
+      description: 'Hide underline under link text',
+      controls: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    disabled: false,
+    noUnderline: false,
+  },
+};
+const Template = ({ disabled, noUnderline }) => formatHtmlPreview(`
+      <a class="sdds-link ${disabled ? 'disabled' : ''} ${noUnderline ? 'sdds-link--no-underline' : ''}" href="#">
+        This is a link.
+      </a>
+  `);
+export const Native = Template.bind({});

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

@@ -0,0 +1,36 @@
+a {
+  cursor: pointer;
+  outline: none;
+  color: var(--sdds-link);
+}
+a:active {
+  color: var(--sdds-link);
+  text-decoration: underline;
+  text-decoration-color: var(--sdds-link);
+}
+a:hover {
+  color: var(--sdds-link-hover);
+  text-decoration: underline;
+  text-decoration-color: var(--sdds-link-hover);
+}
+a:visited {
+  color: var(--sdds-link-visited);
+  text-decoration-color: var(--sdds-link-visited);
+}
+a:focus {
+  color: var(--sdds-link-focus);
+  text-decoration: none;
+  outline: 2px solid var(--sdds-link-focus);
+  outline-offset: -2px;
+}
+a.disabled {
+  color: var(--sdds-link-disabled);
+  text-decoration-color: var(--sdds-link-disabled);
+  pointer-events: none;
+}
+a.no-underline {
+  text-decoration: none;
+}
+a.no-underline:hover {
+  text-decoration: none;
+}

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

@@ -0,0 +1,121 @@
+import { h } from '@stencil/core';
+export class SddsLink {
+  constructor() {
+    this.href = undefined;
+    this.target = '_self';
+    this.disabled = false;
+    this.underline = true;
+    this.rel = 'noopener';
+  }
+  render() {
+    return (h("a", { class: `
+        ${this.disabled ? 'disabled' : ''}
+        ${this.underline ? '' : 'no-underline'}
+        
+        `, href: this.href, target: this.target, rel: this.rel }, h("slot", null)));
+  }
+  static get is() { return "sdds-link"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-link.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "URL 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'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the link"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "underline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displays the link with an underline."
+        },
+        "attribute": "underline",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "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'"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,70 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Link',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    disabled: {
+      name: 'Disabled',
+      description: 'Display link in disabled state',
+      controls: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    underline: {
+      name: 'Underline',
+      description: 'Underline under link text.',
+      controls: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+    target: {
+      name: 'Target',
+      description: 'Where to open the linked URL.',
+      control: {
+        type: 'radio',
+      },
+      options: ['_self', '_blank', '_parent', '_top'],
+      table: {
+        defaultValue: { summary: '_self' },
+      },
+    },
+  },
+  args: {
+    disabled: false,
+    underline: true,
+    target: '_self',
+  },
+};
+const Template = ({ disabled, underline, target }) => formatHtmlPreview(`
+    <sdds-link
+        ${disabled ? 'disabled' : ''}
+        ${underline ? '' : 'underline="false"'}
+        href="#"
+        target="${target}"
+        >
+        This is a link.
+    </sdds-link>
+  `);
+export const WebComponent = Template.bind({});

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

@@ -0,0 +1,108 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Message',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    messageType: {
+      name: 'Message Type',
+      description: 'The type of the message.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Information', 'Error', 'Warning', 'Success'],
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'The mode variant of the component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Show icon',
+      control: {
+        type: 'boolean',
+      },
+    },
+    iconType: {
+      name: 'Icon',
+      description: 'Switch between show a native/web component icon.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+      if: { arg: 'icon', eq: true },
+    },
+    showExtendedMessage: {
+      name: 'Extended Message',
+      description: 'Show an extended message',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    messageType: 'Information',
+    modeVariant: 'Inherit from parent',
+    icon: false,
+    iconType: 'Web Component',
+    showExtendedMessage: false,
+  },
+};
+const nativeIconNameLookup = {
+  Information: 'info',
+  Error: 'error',
+  Warning: 'warning',
+  Success: 'tick',
+};
+const Template = ({ messageType, icon, iconType, showExtendedMessage, modeVariant }) => {
+  const messageTypeClass = messageType === 'Information'
+    ? 'sdds-message-type-informative'
+    : `sdds-message-type-${messageType.toLowerCase()}`;
+  const iconClass = messageType === 'Information'
+    ? 'sdds-message-icon-informative'
+    : `sdds-message-icon-${messageType.toLowerCase()}`;
+  const iconHtml = iconType === 'Native'
+    ? `<i class="sdds-message-icon sdds-icon ${iconClass} ${nativeIconNameLookup[messageType]}"></i>`
+    : `<div><sdds-icon class="sdds-message-icon ${iconClass}" name="${nativeIconNameLookup[messageType]}" size="20"></sdds-icon></div>`;
+  return formatHtmlPreview(`
+
+    ${iconType === 'Native'
+    ? `<style>
+    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */
+    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
+    </style>`
+    : ''}
+
+    <div class="sdds-message ${messageTypeClass} ${icon ? 'sdds-message-icon-active' : ''} ${showExtendedMessage ? 'sdds-message-extended-active' : ''} 
+    ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}">
+    ${icon ? iconHtml : ''}
+    <h4 class="sdds-message-single">
+      Single line message goes here.
+    </h4>
+    ${showExtendedMessage
+    ? '<p class="sdds-message-extended">Longer message text can be placed here. Longer message text can be placed here. Longer message text can be placed here.</p>'
+    : ''}
+  </div>
+  `);
+};
+export const Native = Template.bind({});

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

@@ -0,0 +1,70 @@
+:host .message-wrapper {
+  display: flex;
+  padding: 16px;
+  background-color: var(--sdds-message-background);
+  border-radius: 4px;
+}
+:host .message-wrapper.information {
+  border-left: 4px solid var(--sdds-information);
+}
+:host .message-wrapper.information sdds-icon {
+  color: var(--sdds-information);
+}
+:host .message-wrapper.success {
+  border-left: 4px solid var(--sdds-positive);
+}
+:host .message-wrapper.success sdds-icon {
+  color: var(--sdds-positive);
+}
+:host .message-wrapper.error {
+  background-color: var(--sdds-message-type-error-background);
+  border-left: 4px solid var(--sdds-negative);
+}
+:host .message-wrapper.error sdds-icon {
+  color: var(--sdds-negative);
+}
+:host .message-wrapper.warning {
+  border-left: 4px solid var(--sdds-warning);
+}
+:host .message-wrapper.warning sdds-icon {
+  color: var(--sdds-warning);
+}
+:host .message-wrapper.message-minimal {
+  border: none;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  background-color: transparent;
+}
+:host .message-wrapper.message-minimal .message-header {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+}
+:host .message-wrapper.message-minimal sdds-icon {
+  padding-right: 8px;
+}
+:host sdds-icon {
+  padding-right: 16px;
+}
+:host .message-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: var(--sdds-message-color);
+  padding: 2px 0;
+}
+:host .message-content .message-header {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+}
+:host .message-content .message-extended-message {
+  color: var(--sdds-message-color);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+}
+:host .sdds-mode-variant-primary {
+  --sdds-message-background: var(--sdds-message-background-primary);
+}
+:host .sdds-mode-variant-secondary {
+  --sdds-message-background: var(--sdds-message-background-secondary);
+}