@scania/tegel 0.0.51 → 0.0.52

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

@@ -1,70 +1,70 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Badge',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the component.',
-      control: {
-        type: 'radio',
-      },
-      options: {
-        Large: 'lg',
-        Small: 'sm',
-      },
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    value: {
-      name: 'Value',
-      description: 'Sets a value to show on the badge.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'size', neq: 'sm' },
-    },
-    hidden: {
-      name: 'Hidden',
-      description: 'Toggles visibility of the badge.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    size: 'lg',
-    value: 1,
-    hidden: false,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Badge',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: {
+        Large: 'lg',
+        Small: 'sm',
+      },
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    value: {
+      name: 'Value',
+      description: 'Sets a value to show on the badge.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'size', neq: 'sm' },
+    },
+    hidden: {
+      name: 'Hidden',
+      description: 'Toggles visibility of the badge.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    size: 'lg',
+    value: 1,
+    hidden: false,
+  },
+};
 const Template = ({ value, size, hidden }) => formatHtmlPreview(`
     <sdds-badges
       ${value ? `value="${value}"` : ''}
       ${hidden ? 'hidden' : ''}
       size="${size}">
-    </sdds-badges>`);
-export const Default = Template.bind({});
+    </sdds-badges>`);
+export const Default = Template.bind({});
 const WithDemoTemplate = ({ value, size, visible }) => formatHtmlPreview(`
     <style>
     /* Note: Demo classes used here are just for demo purposes in Storybook */
@@ -95,6 +95,6 @@ const WithDemoTemplate = ({ value, size, visible }) => formatHtmlPreview(`
         is-visible=${visible}
         size="${size}">
       </sdds-badges>
-    </div>`);
-export const WithDemoComponent = WithDemoTemplate.bind({});
-//# sourceMappingURL=badge.stories.js.map
+    </div>`);
+export const WithDemoComponent = WithDemoTemplate.bind({});
+//# sourceMappingURL=badge.stories.js.map

package/dist/collection/components/badge/badges.js

@@ -1,148 +1,148 @@
-import { h } from '@stencil/core';
-export class SddsBadges {
-  constructor() {
-    this.value = '';
-    this.hidden = false;
-    this.isSmall = false;
-    this.size = 'lg';
-    this.shape = '';
-    this.text = '';
-  }
-  watchProps() {
-    this.checkProps();
-  }
-  componentWillLoad() {
-    this.checkProps();
-    if (this.isSmall) {
-      this.size = 'sm';
-      console.warn('Prop isSmall is deprecated. Use size"small" instead');
-    }
-  }
-  checkProps() {
-    const valueAsNumber = parseInt(this.value);
-    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
-      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
-      this.size = 'lg';
-      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
-    }
-    else {
-      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-      this.value !== '' && this.size !== 'sm'
-        ? console.warn('The provided value is either empty or string, please provide value as number.')
-        : '';
-    }
-  }
-  render() {
-    return (h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.hidden ? 'sdds-badges-hidden' : ''}` }, h("div", { class: "sdds-badges-text" }, this.text)));
-  }
-  static get is() { return "sdds-badges"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["badges.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["badges.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value shown in badge"
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "hidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Changes visibility of badge"
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isSmall": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Use size prop instead. Changes badge from large to small size"
-            }],
-          "text": ""
-        },
-        "attribute": "is-small",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'lg' | 'sm'",
-          "resolved": "\"lg\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets component size."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "shape": {},
-      "text": {}
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "watchProps"
-      }, {
-        "propName": "isSmall",
-        "methodName": "watchProps"
-      }, {
-        "propName": "size",
-        "methodName": "watchProps"
-      }];
-  }
-}
-//# sourceMappingURL=badges.js.map
+import { h } from '@stencil/core';
+export class SddsBadges {
+  constructor() {
+    this.value = '';
+    this.hidden = false;
+    this.isSmall = false;
+    this.size = 'lg';
+    this.shape = '';
+    this.text = '';
+  }
+  watchProps() {
+    this.checkProps();
+  }
+  componentWillLoad() {
+    this.checkProps();
+    if (this.isSmall) {
+      this.size = 'sm';
+      console.warn('Prop isSmall is deprecated. Use size"small" instead');
+    }
+  }
+  checkProps() {
+    const valueAsNumber = parseInt(this.value);
+    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
+      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
+      this.size = 'lg';
+      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
+    }
+    else {
+      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+      this.value !== '' && this.size !== 'sm'
+        ? console.warn('The provided value is either empty or string, please provide value as number.')
+        : '';
+    }
+  }
+  render() {
+    return (h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.hidden ? 'sdds-badges-hidden' : ''}` }, h("div", { class: "sdds-badges-text" }, this.text)));
+  }
+  static get is() { return "sdds-badges"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["badges.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["badges.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value shown in badge"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Changes visibility of badge"
+        },
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isSmall": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use size prop instead. Changes badge from large to small size"
+            }],
+          "text": ""
+        },
+        "attribute": "is-small",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'lg' | 'sm'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets component size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "shape": {},
+      "text": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchProps"
+      }, {
+        "propName": "isSmall",
+        "methodName": "watchProps"
+      }, {
+        "propName": "size",
+        "methodName": "watchProps"
+      }];
+  }
+}
+//# sourceMappingURL=badges.js.map

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

@@ -1,83 +1,83 @@
-import { formatHtmlPreview } from '../../utils/utils';
-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 the type of the component.',
-      options: ['Default', 'Error', 'Info'],
-      control: {
-        type: 'radio',
-      },
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    header: {
-      name: 'Header',
-      description: 'Sets text to be displayed in the header section.',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Sets text to be displayed in the subheader section.',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Sets text to be displayed in the link section.',
-      control: {
-        type: 'text',
-      },
-    },
-    hideIcon: {
-      name: 'Hide icon',
-      description: 'Controls if an icon should be displayed. The truck icon is used here as an example, but it should be changed to suit your needs.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-  args: {
-    state: 'Default',
-    header: 'This is a header text area',
-    subheader: 'SubHeader text area',
-    link: 'Learn more',
-    hideIcon: false,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+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 the type of the component.',
+      options: ['Default', 'Error', 'Info'],
+      control: {
+        type: 'radio',
+      },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Sets text to be displayed in the header section.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Sets text to be displayed in the subheader section.',
+      control: {
+        type: 'text',
+      },
+    },
+    link: {
+      name: 'Link',
+      description: 'Sets text to be displayed in the link section.',
+      control: {
+        type: 'text',
+      },
+    },
+    hideIcon: {
+      name: 'Hide icon',
+      description: 'Controls if an icon should be displayed. The truck icon is used here as an example, but it should be changed to suit your needs.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    state: 'Default',
+    header: 'This is a header text area',
+    subheader: 'SubHeader text area',
+    link: 'Learn more',
+    hideIcon: false,
+  },
+};
 const Template = ({ state, hideIcon, header, subheader, link }) => formatHtmlPreview(`
     <div class="sdds-banner sdds-banner-${state.toLowerCase()}">
-      ${!hideIcon && state === 'error'
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="error" size="20px"></sdds-icon></span>'
+      ${!hideIcon && state === 'error'
+  ? '<span class="sdds-banner-prefix"><sdds-icon name="error" size="20px"></sdds-icon></span>'
   : ''}
-      ${!hideIcon && state === 'info'
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="info" size="20px"></sdds-icon></span>'
+      ${!hideIcon && state === 'info'
+  ? '<span class="sdds-banner-prefix"><sdds-icon name="info" size="20px"></sdds-icon></span>'
   : ''}
-      ${!hideIcon && !(state === 'info' || state === 'error')
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="truck" size="20px"></sdds-icon></span>'
+      ${!hideIcon && !(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>`}
@@ -88,6 +88,6 @@ const Template = ({ state, hideIcon, header, subheader, link }) => formatHtmlPre
         <sdds-icon name="cross" size="20px"></sdds-icon>
       </button>
     </div>
-  `);
-export const Native = Template.bind({});
-//# sourceMappingURL=banner.stories.js.map
+  `);
+export const Native = Template.bind({});
+//# sourceMappingURL=banner.stories.js.map

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

@@ -59,15 +59,20 @@
   font: var(--sdds-headline-06);
   letter-spacing: var(--sdds-headline-06-ls);
 }
-:host .banner-content .banner-subheader {
+:host .banner-content slot[name=banner-subheader] {
+  display: block;
   margin-top: 4px;
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
 }
-:host .banner-content sdds-link {
+:host .banner-content .banner-link slot[name=banner-link] {
+  display: block;
   width: fit-content;
   margin-top: 16px;
 }
+:host .banner-content .banner-link.no-subheader slot[name=banner-link] {
+  margin-top: 4px;
+}
 :host .banner-close {
   color: var(--sdds-banner-x-color);
 }