@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/collection/components/accordion/accordion.js

@@ -1,62 +1,62 @@
-import { h, Host } from '@stencil/core';
-export class Accordion {
-  constructor() {
-    this.divider = true;
-    this.modeVariant = 'primary';
-  }
-  render() {
-    return (h(Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant}` }, h("slot", null)));
-  }
-  static get is() { return "sdds-accordion"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["accordion.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["accordion.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "divider": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable or disable divider lines between items"
-        },
-        "attribute": "divider",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the variant of the the accordion."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      }
-    };
-  }
-}
+import { h, Host } from '@stencil/core';
+export class Accordion {
+  constructor() {
+    this.divider = true;
+    this.modeVariant = null;
+  }
+  render() {
+    return (h(Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+  }
+  static get is() { return "sdds-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["accordion.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["accordion.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "divider": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable divider lines between items"
+        },
+        "attribute": "divider",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the variant of the the accordion."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,90 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import readmeItem from './accordion-item/readme.md';
+export default {
+  title: 'Components/Accordion',
+  argTypes: {
+    iconPosition: {
+      name: 'Expand icon position',
+      control: {
+        type: 'radio',
+      },
+      options: { End: 'end', Start: 'start' },
+      description: 'The horizontal position of the expand icon.',
+      table: {
+        defaultValue: { summary: 'end' },
+      },
+    },
+    disabled: {
+      name: 'Disable all items',
+      description: 'Disable all accordion items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    paddingReset: {
+      name: 'Less padding right',
+      description: 'Less padding on the right inside accordion items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+  },
+  parameters: {
+    notes: { 'Accordion': readme, 'Accordion item': readmeItem },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  args: {
+    disabled: false,
+    paddingReset: false,
+    iconPosition: 'end',
+    modeVariant: 'Inherit from parent',
+  },
+};
+const Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {
+  const affixAttr = iconPosition === 'start' ? 'expand-icon-position="start"' : '';
+  const disabledAttr = disabled ? 'disabled' : '';
+  const paddingResetAttr = paddingReset ? 'padding-reset' : '';
+  return formatHtmlPreview(`
+    <sdds-accordion ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <sdds-accordion-item header="First item" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>
+        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
+        Lorem ipsum doler sit amet.
+      </sdds-accordion-item>
+      <sdds-accordion-item header="Second item" ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>
+        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.
+      </sdds-accordion-item>
+    </sdds-accordion>
+  `);
+};
+export const Default = Template.bind({});
+Default.args = {};

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

@@ -0,0 +1,102 @@
+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: {
+    hidden: {
+      name: 'Hidden',
+      description: 'Toggle visibility of badge',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    value: {
+      name: 'Value',
+      description: 'Set a value to show on the badge',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'size', neq: 'sm' },
+      table: {
+        defaultValue: { summary: null },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Size of the component',
+      options: {
+        Large: 'lg',
+        Small: 'sm',
+      },
+      control: {
+        type: 'radio',
+      },
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+  },
+  args: {
+    hidden: false,
+    size: 'lg',
+    value: 1,
+  },
+};
+const Template = ({ value, size, hidden }) => formatHtmlPreview(`
+    <sdds-badges
+      ${value ? `value="${value}"` : ''}
+      ${hidden ? 'hidden' : ''}
+      size="${size}">
+    </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 */
+    .badges-demo-box {
+      margin:5px;
+      height: 32px;
+      width: 32px;
+      position: relative;
+      background-color: #C4C4C4;
+    }
+
+    .badges-demo-box sdds-badges[size="lg"]{
+      position: absolute;
+      left: 16px;
+      top: -5px;
+    }
+
+    .badges-demo-box sdds-badges[size="sm"]{
+      position: absolute;
+      left: 26px;
+      top: -2px;
+    }
+    </style>
+
+    <div class="badges-demo-box">
+      <sdds-badges
+        ${value ? `value="${value}"` : ''}
+        is-visible=${visible}
+        size="${size}">
+      </sdds-badges>
+    </div>`);
+export const WithDemoComponent = WithDemoTemplate.bind({});

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

@@ -1,5 +1,5 @@
 :host {
-  --sdds-badges-bg-color: var(--sdds-negative);
+  --sdds-badges-background-color: var(--sdds-negative);
   --sdds-badges-color-text: var(--sdds-white);
   box-sizing: border-box;
   display: block;
@@ -11,7 +11,7 @@
 .sdds-badges {
   display: block;
   border-radius: 12px;
-  background-color: var(--sdds-badges-bg-color);
+  background-color: var(--sdds-badges-background-color);
   text-align: center;
 }
 .sdds-badges.sdds-badges-sm {

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

@@ -1,150 +1,147 @@
-import { h } from '@stencil/core';
-export class SddsBadges {
-  constructor() {
-    this.value = '';
-    this.isVisible = true;
-    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.isVisible ? '' : '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": "''"
-      },
-      "isVisible": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Changes visibility of badge"
-        },
-        "attribute": "is-visible",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "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": "isVisible",
-        "methodName": "watchProps"
-      }, {
-        "propName": "isSmall",
-        "methodName": "watchProps"
-      }, {
-        "propName": "size",
-        "methodName": "watchProps"
-      }];
-  }
-}
+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"
+      }];
+  }
+}