@scania/tegel 0.0.7 → 0.0.9

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

@@ -1,128 +0,0 @@
-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: {
-    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' },
-      },
-    },
-    messageType: {
-      name: 'Message type',
-      description: 'Changes the type of the component.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Error', 'Warning', 'Success'],
-      table: {
-        defaultValue: { summary: 'Information' },
-      },
-    },
-    showExtendedMessage: {
-      name: 'Extended message',
-      description: 'Shows an extended message.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: true },
-      },
-    },
-    noIcon: {
-      name: 'No icon',
-      description: 'Hides the icon.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Switch between showing a native or a web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      if: { arg: 'icon', eq: true },
-      table: {
-        defaultValue: { summary: 'Web Component' },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    messageType: 'Information',
-    showExtendedMessage: true,
-    noIcon: false,
-    iconType: 'Web Component',
-  },
-};
-const nativeIconNameLookup = {
-  Information: 'info',
-  Error: 'error',
-  Warning: 'warning',
-  Success: 'tick',
-};
-const Template = ({ modeVariant, messageType, showExtendedMessage, noIcon, iconType }) => {
-  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 class="sdds-message-icon ${iconClass}"><sdds-icon name="${nativeIconNameLookup[messageType]}" size="20"></sdds-icon></div>`;
-  return formatHtmlPreview(`
-    <style>
-      .demo-wrapper {
-        width: 380px;
-      }
-    </style>
-
-    ${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="demo-wrapper">
-      <div class="sdds-message ${messageTypeClass} ${noIcon ? '' : 'sdds-message-icon-active'} ${showExtendedMessage ? 'sdds-message-extended-active' : ''} 
-      ${modeVariant === 'Inherit from parent'
-    ? ''
-    : `sdds-mode-variant-${modeVariant.toLowerCase()}`}">
-      ${noIcon ? '' : 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.</p>'
-    : ''}
-    </div>
-  </div>
-  `);
-};
-export const Native = Template.bind({});

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

@@ -1,70 +0,0 @@
-: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

@@ -1,135 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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: {
-    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' },
-      },
-    },
-    messageType: {
-      name: 'Message type',
-      description: 'Changes the type of the component.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Error', 'Warning', 'Success'],
-      table: {
-        defaultValue: { summary: 'information' },
-      },
-    },
-    header: {
-      name: 'Header',
-      description: 'Sets the header for the message.',
-      control: {
-        type: 'text',
-      },
-    },
-    extendedMessage: {
-      name: 'Extended message content',
-      description: 'Sets the content of an extended message.',
-      control: {
-        type: 'text',
-      },
-    },
-    minimal: {
-      name: 'Minimal',
-      description: 'Applies minimal message styling.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    noIcon: {
-      name: 'No icon',
-      description: 'Hides the icon.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    messageType: 'Information',
-    header: 'Message header',
-    extendedMessage: 'Longer message text can be placed here. Longer message text can be placed here.',
-    minimal: false,
-    noIcon: false,
-  },
-};
-const Template = ({ modeVariant, messageType, header, extendedMessage, minimal, noIcon }) => 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({});

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

@@ -1,137 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Modal',
-  parameters: {
-    layout: 'fullscreen',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    actions: {
-      name: 'Actions',
-      description: 'Defines the behaviour of modal.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Sticky', 'Static'],
-      table: {
-        defaultValue: { summary: 'Static' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of modal.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'Large' },
-      },
-    },
-    headline: {
-      name: 'Modal headline',
-      description: 'Sets the headline of the modal.',
-      control: {
-        type: 'text',
-      },
-    },
-    bodyText: {
-      name: 'Modal body text',
-      description: 'Sets the body text of the modal.',
-      control: {
-        type: 'text',
-      },
-    },
-    showModal: {
-      name: 'Show modal',
-      description: 'Toggles if the modal is displayed.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: true },
-      },
-    },
-  },
-  args: {
-    actions: 'Static',
-    size: 'Large',
-    headline: 'The buttons for the modal only works in the canvas tab',
-    bodyText: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
-    showModal: true,
-  },
-};
-const sizeLookUp = {
-  'Large': 'lg',
-  'Medium': 'md',
-  'Small': 'sm',
-  'Extra small': 'xs',
-};
-const Template = ({ actions, size, headline, bodyText, showModal }) => formatHtmlPreview(`    <style>
-  /* demo-wrapper and demo-styles is for demonstration purposes only*/
-  .demo-wrapper {
-    position: relative;
-    top: 0;
-    left: 0;
-    height: 100vh;
-  }
-  .demo-styles {
-    position: absolute;
-    margin-bottom: 20px;
-  }
-  </style>
-
-  <div class="demo-wrapper">
-    <button id="modal-button" class="sdds-btn sdds-btn-primary sdds-btn-lg">
-      <span class="sdds-btn-text">Open modal</span>
-    </button>
-    <div id="my-modal" class="sdds-modal-backdrop ${showModal ? 'show' : 'hide'} demo-styles">
-      <div class="sdds-modal sdds-modal-${sizeLookUp[size]} sdds-modal__actions-${actions.toLowerCase()}">
-        <div class="sdds-modal-header">
-          <h5 class="sdds-modal-headline">${headline}</h5>
-          <button class="sdds-modal-close" aria-label="close">
-            <sdds-icon name="cross" size="20px"></sdds-icon>
-          </button>
-        </div>
-          <div class="sdds-modal-body">
-            <p class="sdds-u-mb0 sdds-u-mt0">${bodyText}</p>
-          </div>
-          <div class="sdds-modal-actions">
-              <button class="sdds-btn sdds-btn-primary sdds-btn-md">Save</button>
-              <button class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
-          </div>
-      </div>
-    </div>
-  </div>
-
-  <script>
-  /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
-  modal = document.getElementById('my-modal');
-  buttons = modal.getElementsByTagName('button');
-  for (const button of buttons) {
-    button.addEventListener('click', () => {
-      modal.classList.replace('show', 'hide')
-    })
-  }
-
-  document.getElementsByClassName('sdds-modal-close')[0].addEventListener('click', () => {
-    modal.classList.replace('show', 'hide');
-  })
-
-  document.getElementById('modal-button').addEventListener('click', () => {
-    modal.classList.replace('hide', 'show')
-  })
-  </script>
-  `);
-export const Native = Template.bind({});

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

@@ -1,97 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Modal',
-  parameters: {
-    layout: 'fullscreen',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    actions: {
-      name: 'Actions',
-      description: 'Defines the behaviour of modal.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Sticky', 'Static'],
-      table: {
-        defaultValue: { summary: 'static' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of modal.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'md' },
-      },
-    },
-    headline: {
-      name: 'Modal headline',
-      description: 'Sets the headline of the modal.',
-      control: {
-        type: 'text',
-      },
-    },
-    bodyText: {
-      name: 'Modal body text',
-      description: 'Sets the body text of the modal.',
-      control: {
-        type: 'text',
-      },
-    },
-    showModal: {
-      name: 'Show modal',
-      description: 'Toggles if the modal is displayed.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    actions: 'Static',
-    size: 'Large',
-    headline: 'The buttons for the modal only works in the canvas tab',
-    bodyText: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
-    showModal: true,
-  },
-};
-const sizeLookUp = {
-  'Large': 'lg',
-  'Medium': 'md',
-  'Small': 'sm',
-  'Extra small': 'xs',
-};
-const ModalTemplate = ({ actions, size, headline, bodyText, showModal }) => formatHtmlPreview(`
-  <button id="my-modal-button" class="sdds-btn sdds-btn-primary">Open modal</button>
-  <sdds-modal selector="#my-modal-button" ${showModal ? 'show' : ''} id="my-modal" size="${sizeLookUp[size]}" actions="${actions.toLowerCase()}">
-      <h5 class="sdds-modal-headline" slot="sdds-modal-headline">${headline}</h5>
-      <span slot="sdds-modal-body">
-          ${bodyText}
-      </span>
-      <button slot="sdds-modal-actions" data-dismiss-modal class="sdds-btn sdds-btn-danger sdds-btn-md">Delete</button>
-      <button slot="sdds-modal-actions" data-dismiss-modal class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
-  </sdds-modal>
-  <script>
-    modal = document.querySelector('sdds-modal')
-    modal.addEventListener('sddsClose', (event) => {
-      console.log(event)
-    })
-  </script>
-  `);
-export const WebComponent = ModalTemplate.bind({});