@scania/tegel 0.0.1-beta.9 → 0.0.2

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);
+}

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

@@ -0,0 +1,135 @@
+import { Host, h } from '@stencil/core';
+export class SddsMessage {
+  constructor() {
+    this.getIconName = () => {
+      switch (this.type) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.header = undefined;
+    this.modeVariant = null;
+    this.type = 'information';
+    this.noIcon = false;
+    this.minimal = false;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `
+        message-wrapper ${this.type}
+        ${this.minimal ? 'message-minimal' : ''}
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `message-content` }, this.header && h("div", { class: "message-header" }, this.header), !this.minimal && (h("div", { class: "message-extended-message" }, h("slot", null)))))));
+  }
+  static get is() { return "sdds-message"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-message.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-message.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header text for the component."
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the component, based on current mode."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'information' | 'error' | 'warning' | 'success'",
+          "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of message."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'information'"
+      },
+      "noIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the icon in the message."
+        },
+        "attribute": "no-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "minimal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimal message styling."
+        },
+        "attribute": "minimal",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,106 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Message',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    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'],
+      table: {
+        defaultValue: { summary: 'information' },
+      },
+    },
+    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' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Header for the message',
+      control: {
+        type: 'text',
+      },
+    },
+    extendedMessage: {
+      name: 'Extended message content',
+      control: {
+        type: 'text',
+      },
+    },
+    noIcon: {
+      name: 'No icon',
+      description: 'Hide the icon',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    minimal: {
+      name: 'Minimal',
+      description: 'Minimal message styling.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    messageType: 'Information',
+    modeVariant: 'Inherit from parent',
+    header: 'Message header',
+    noIcon: false,
+    extendedMessage: 'Longer message text can be placed here. Longer message text can be placed here.',
+    minimal: false,
+  },
+};
+const Template = ({ messageType, noIcon, extendedMessage, modeVariant, header, minimal }) => formatHtmlPreview(`
+    <style>
+      .demo-wrapper {
+        width: 380px;
+      }
+    </style>
+    <div class="demo-wrapper">
+      <sdds-message
+          type="${messageType.toLowerCase()}"
+          header="${header}"
+          ${noIcon ? 'no-icon' : ''}
+          ${minimal ? 'minimal' : ''}
+          mode-variant="${modeVariant.toLowerCase()}"
+          ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      >
+      ${extendedMessage}
+      </sdds-message>
+    </div>
+    `);
+export const WebComponent = Template.bind({});