@scania/tegel 0.0.1-beta.3 → 0.0.1-beta.5

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

@@ -0,0 +1,93 @@
+import { formatHtmlPreview } from '../../utils/utils';
+// FIXME: CMS: Change state to type in Code tab of component
+export default {
+  title: 'Components/Banner',
+  parameters: {
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    state: {
+      name: 'Type',
+      description: 'Changes type of component',
+      options: ['Default', 'Error', 'Info'],
+      control: {
+        type: 'radio',
+      },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Text to display in header section',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Text to display in subheader section',
+      control: {
+        type: 'text',
+      },
+    },
+    link: {
+      name: 'Link',
+      description: 'Text to display in link section',
+      control: {
+        type: 'text',
+      },
+    },
+    prefix: {
+      name: 'Show icon',
+      description: 'If an icon should be displayed. For type default the truck icon is used in this example, but it should be changed to suit your needs.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+  },
+  args: {
+    state: 'Default',
+    header: 'This is a header text area',
+    subheader: 'SubHeader text area',
+    link: 'Learn more',
+    prefix: true,
+  },
+};
+const Template = ({ state, prefix, header, subheader, link }) => formatHtmlPreview(`
+    <div class="sdds-banner sdds-banner-${state.toLowerCase()}">
+      ${prefix && state === 'error'
+  ? '<span class="sdds-banner-prefix"><sdds-icon name="error" size="20px"></sdds-icon></span>'
+  : ''}
+      ${prefix && state === 'info'
+  ? '<span class="sdds-banner-prefix"><sdds-icon name="info" size="20px"></sdds-icon></span>'
+  : ''}
+      ${prefix && !(state === 'info' || state === 'error')
+  ? '<span class="sdds-banner-prefix"><sdds-icon name="truck" size="20px"></sdds-icon></span>'
+  : ''}
+      <div class="sdds-banner-body">
+      ${header && `<h6 class="sdds-banner-header">${header}</h6>`}
+      ${subheader && `<div class="sdds-banner-subheader">${subheader}</div>`}
+      ${link && `<a class="sdds-link sdds-banner-link">${link}</a>`}
+      </div>
+      <button type="button" aria-label="close" class="sdds-banner-close">
+        <sdds-icon name="cross" size="20px"></sdds-icon>
+      </button>
+    </div>
+  `);
+export const Default = Template.bind({});

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

@@ -0,0 +1,46 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Block',
+  parameters: {
+    layout: 'padded',
+    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: {
+    type: {
+      name: 'Mode variation',
+      description: 'Mode variation adjusts component colors to have better visibility depending on global mode and background. ',
+      control: {
+        type: 'radio',
+      },
+      options: ['Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Primary' },
+      },
+    },
+  },
+  args: {
+    type: 'Primary',
+  },
+};
+const Template = ({ type }) => formatHtmlPreview(`
+      <div class="sdds-block sdds-block-${type.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>
+        <div class="sdds-block">
+          <h3 class="sdds-headline-03">Block in a block</h3>
+          <p class="sdds-body-02">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>
+        </div>
+      </div>
+    `);
+export const Default = Template.bind({});

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 Default = Template.bind({});
+Default.args = {};

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

@@ -0,0 +1,154 @@
+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}
+        ${`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": {}
+    };
+  }
+}

package/dist/collection/components/button/button-native.stories.js

@@ -0,0 +1,183 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from '../icon/iconsArray';
+export default {
+  title: 'Components/Button',
+  parameters: {
+    layout: 'padded',
+    chromatic: {
+      disableSnapshot: false, // enables snapshotting for the component
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    text: {
+      name: 'Text',
+      description: 'The text to be displayed on the button',
+      control: {
+        type: 'text',
+      },
+    },
+    btnType: {
+      name: 'Type',
+      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent',
+      control: {
+        type: 'radio',
+      },
+      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Size of the button',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    variant: {
+      name: 'Variant',
+      description: 'Button variant.',
+      control: {
+        type: 'radio',
+      },
+      options: ['On light', 'On dark'],
+      table: {
+        defaultValue: { summary: 'on-dark' },
+      },
+    },
+    fullbleed: {
+      name: 'Fullbleed',
+      defaultValue: false,
+      description: 'Fluid width in certain components-old',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'onlyIcon', eq: false },
+    },
+    disabled: {
+      name: 'Disabled',
+      type: 'boolean',
+      description: 'Choose to disable the button',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    onlyIcon: {
+      name: 'Only Icon',
+      description: 'Displays only the icon and excludes any text from the button',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Icon to display on the button. Choose "none" to exclude the icon.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', ...iconsNames],
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Native/Web Component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+      if: { arg: 'icon', neq: 'none' },
+    },
+  },
+  args: {
+    text: 'Button',
+    btnType: 'Primary',
+    size: 'Large',
+    variant: 'On dark',
+    fullbleed: false,
+    disabled: false,
+    onlyIcon: false,
+    icon: 'none',
+    iconType: 'Native',
+  },
+};
+const NativeTemplate = ({ size, variant, btnType, fullbleed, text = 'Button', disabled = '', onlyIcon, icon, iconType, }) => {
+  const fbClass = fullbleed ? 'sdds-btn-fullbleed' : '';
+  const onlyIconCss = onlyIcon ? 'sdds-btn-icon' : '';
+  const btnTypeLookUp = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Ghost: 'ghost',
+    Danger: 'danger',
+  };
+  const sizeLookUp = {
+    'Large': 'lg',
+    'Medium': 'md',
+    'Small': 'sm',
+    'Extra small': 'xs',
+  };
+  const varaintLookup = {
+    'On light': 'on-light',
+    'On dark': 'on-dark',
+  };
+  return formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+    ${icon && iconType === 'Native'
+    ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
+    i.sdds-btn-icon{
+      font-size: ${size === 'Small' ? '16' : '20'}px;
+    }\n `
+    : ''}\ .demo-wrapper{
+      width: 100%;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+<button class="sdds-btn sdds-btn-${btnTypeLookUp[btnType]} sdds-btn-${sizeLookUp[size]} ${fbClass} ${disabled ? 'disabled' : ''} ${onlyIconCss} ${varaintLookup[variant] === 'on-light' ? 'sdds-on-white-bg' : ''}  ${onlyIcon ? 'sdds-btn-only-icon' : ''}">
+  ${!onlyIcon ? `<span class="sdds-btn-text">${text}</span>` : ''}
+  ${onlyIcon || (icon && icon !== 'none')
+    ? `
+    ${iconType === 'Native'
+      ? `<i class="sdds-btn-icon sdds-icon ${icon}"></i>`
+      : `<sdds-icon class='sdds-btn-icon ' size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></sdds-icon>`}
+  `
+    : ''}
+</button>
+  </div>
+  `);
+};
+export const Native = NativeTemplate.bind({});
+Native.args = {};
+export const NativeWithIcon = NativeTemplate.bind({});
+NativeWithIcon.args = {
+  icon: 'truck',
+};
+export const NativeOnlyIcon = NativeTemplate.bind({});
+NativeOnlyIcon.args = {
+  text: '',
+  onlyIcon: true,
+  icon: 'truck',
+};

package/dist/collection/components/button/button-webcomponent.stories.js

@@ -0,0 +1,182 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from '../icon/iconsArray';
+import readme from './readme.md';
+export default {
+  title: 'Components/Button',
+  parameters: {
+    notes: readme,
+    layout: 'padded',
+    chromatic: {
+      disableSnapshot: false, // enables snapshotting for the component
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    text: {
+      name: 'Text',
+      description: 'The text to be displayed on the button',
+      control: {
+        type: 'text',
+      },
+    },
+    btnType: {
+      name: 'Type',
+      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent',
+      control: {
+        type: 'radio',
+      },
+      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    size: {
+      name: 'Size',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+      description: 'Size of the button',
+    },
+    variant: {
+      name: 'Variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['On light', 'On dark'],
+      description: 'Button variant.',
+      table: {
+        defaultValue: { summary: 'on-dark' },
+      },
+    },
+    fullbleed: {
+      name: 'Fullbleed',
+      type: 'boolean',
+      description: 'Fluid width in certain components-old',
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'onlyIcon', truthy: false },
+    },
+    disabled: {
+      name: 'Disabled',
+      type: 'boolean',
+      description: 'Choose to disable the button',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    onlyIcon: {
+      name: 'Only Icon',
+      description: 'Displays only the icon and excludes any text from the button',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Icon to display on the button. Choose "none" to exclude the icon.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', ...iconsNames],
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Native/Web Component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+      if: { arg: 'icon', neq: 'none' },
+    },
+  },
+  args: {
+    text: 'Button',
+    btnType: 'Primary',
+    size: 'Large',
+    variant: 'On dark',
+    fullbleed: false,
+    disabled: false,
+    onlyIcon: false,
+    icon: 'none',
+    iconType: 'Webcomponent',
+  },
+};
+const WebComponentTemplate = ({ onlyIcon, size, variant, btnType, fullbleed, disabled, icon, iconType, text = 'Button', }) => {
+  const btnTypeLookUp = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Ghost: 'ghost',
+    Danger: 'danger',
+  };
+  const sizeLookUp = {
+    'Large': 'lg',
+    'Medium': 'md',
+    'Small': 'sm',
+    'Extra small': 'xs',
+  };
+  const varaintLookup = {
+    'On light': 'on-light',
+    'On dark': 'on-dark',
+  };
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/${icon && iconType === 'Native'
+    ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
+    i.sdds-icon::before{
+      font-size: ${size === 'Large' || size === 'Medium' ? '20' : '16'}px;
+    }`
+    : ''}
+    .demo-wrapper{
+      width: 100%;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+  <sdds-button ${onlyIcon ? 'onlyIcon' : ''} type="${btnTypeLookUp[btnType]}" size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''} text="${onlyIcon ? '' : text}" variant="${varaintLookup[variant]}" >
+    ${onlyIcon || (icon && icon !== 'none')
+    ? `
+    ${iconType === 'Native'
+      ? `<i class="sdds-btn-icon sdds-icon ${icon}" slot="icon"></i>`
+      : `<sdds-icon slot="icon" class='sdds-btn-icon ' size='${sizeLookUp[size] == 'sm' ? '16px' : '20px'}' name='${icon}'></sdds-icon>`}
+  `
+    : ''}
+</sdds-button>
+  </div>
+  `);
+};
+/** Button as web component */
+export const WebComponent = WebComponentTemplate.bind({});
+WebComponent.args = {};
+export const WebComponentWithIcon = WebComponentTemplate.bind({});
+WebComponentWithIcon.args = {
+  icon: 'truck',
+  iconType: 'Webcomponent',
+};
+export const WebComponentOnlyIcon = WebComponentTemplate.bind({});
+WebComponentOnlyIcon.args = {
+  text: '',
+  iconType: 'Webcomponent',
+  onlyIcon: true,
+  icon: 'truck',
+};