@scania/tegel 0.0.51 → 0.0.52

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

@@ -1,156 +1,156 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Datetime',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-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' },
-      },
-    },
-    state: {
-      name: 'State',
-      description: 'Switches between success and error state.',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Success', 'Error'],
-    },
-    type: {
-      name: 'Type',
-      description: 'Sets the field to display date, time or both.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Datetime', 'Date', 'Time'],
-      table: {
-        defaultValue: { summary: 'datetime-local' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Switches between different sizes.',
-      control: {
-        type: 'radio',
-        // todo: make consistent with other sizes, for example 'xs', 'sm', etc
-      },
-      options: ['Large', 'Medium', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    defaultValue: {
-      name: 'Default value',
-      description: 'Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Custom'],
-      table: {
-        defaultValue: { summary: 'none' },
-      },
-    },
-    noMinWidth: {
-      name: 'No minimum width',
-      description: 'Enables component to shrink below 208px which is the default width.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    label: {
-      name: 'Label text',
-      description: 'Sets the label text.',
-      control: {
-        type: 'text',
-      },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Sets the helper text.',
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the component.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    state: 'None',
-    type: 'Datetime',
-    size: 'Large',
-    defaultValue: 'None',
-    noMinWidth: false,
-    label: 'Label text',
-    helper: 'Helper text',
-    disabled: false,
-  },
-};
-const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, noMinWidth, label, helper, disabled, }) => {
-  const typeLookup = {
-    Datetime: 'datetime-local',
-    Date: 'date',
-    Time: 'time',
-  };
-  const sizeLookup = {
-    Large: 'lg',
-    Medium: 'md',
-    Small: 'sm',
-  };
-  const stateLookup = {
-    None: 'none',
-    Success: 'success',
-    Error: 'error',
-  };
-  const getDefaultValue = (value, componentType) => {
-    if (value === 'Custom') {
-      switch (componentType) {
-        case 'Datetime':
-          return '1891-01-01T12:30';
-        case 'Date':
-          return '1891-01-01';
-        case 'Time':
-          return '12:30';
-        default:
-          return 'Invalid type';
-      }
-    }
-    else
-      return false;
-  };
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Datetime',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-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' },
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switches between success and error state.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Success', 'Error'],
+    },
+    type: {
+      name: 'Type',
+      description: 'Sets the field to display date, time or both.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Datetime', 'Date', 'Time'],
+      table: {
+        defaultValue: { summary: 'datetime-local' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Switches between different sizes.',
+      control: {
+        type: 'radio',
+        // todo: make consistent with other sizes, for example 'xs', 'sm', etc
+      },
+      options: ['Large', 'Medium', 'Small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    defaultValue: {
+      name: 'Default value',
+      description: 'Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Custom'],
+      table: {
+        defaultValue: { summary: 'none' },
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Enables component to shrink below 208px which is the default width.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: 'Sets the label text.',
+      control: {
+        type: 'text',
+      },
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Sets the helper text.',
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the component.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    state: 'None',
+    type: 'Datetime',
+    size: 'Large',
+    defaultValue: 'None',
+    noMinWidth: false,
+    label: 'Label text',
+    helper: 'Helper text',
+    disabled: false,
+  },
+};
+const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, noMinWidth, label, helper, disabled, }) => {
+  const typeLookup = {
+    Datetime: 'datetime-local',
+    Date: 'date',
+    Time: 'time',
+  };
+  const sizeLookup = {
+    Large: 'lg',
+    Medium: 'md',
+    Small: 'sm',
+  };
+  const stateLookup = {
+    None: 'none',
+    Success: 'success',
+    Error: 'error',
+  };
+  const getDefaultValue = (value, componentType) => {
+    if (value === 'Custom') {
+      switch (componentType) {
+        case 'Datetime':
+          return '1891-01-01T12:30';
+        case 'Date':
+          return '1891-01-01';
+        case 'Time':
+          return '12:30';
+        default:
+          return 'Invalid type';
+      }
+    }
+    else
+      return false;
+  };
   return formatHtmlPreview(`
     <style>
         /* Note: Demo classes used here are just for demo purposes in Storybook */
@@ -189,20 +189,20 @@ const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, noMinW
         console.log("Firing sddsBlur: " + event.target.value);
       });
     </script>
-`);
-};
-export const Default = datetimeTemplate.bind({});
-Default.args = {};
-export const ErrorState = datetimeTemplate.bind({});
-ErrorState.args = {
-  state: 'Error',
-};
-export const Time = datetimeTemplate.bind({});
-Time.args = {
-  type: 'Time',
-};
-export const Date = datetimeTemplate.bind({});
-Date.args = {
-  type: 'Date',
-};
-//# sourceMappingURL=datetime.stories.js.map
+`);
+};
+export const Default = datetimeTemplate.bind({});
+Default.args = {};
+export const ErrorState = datetimeTemplate.bind({});
+ErrorState.args = {
+  state: 'Error',
+};
+export const Time = datetimeTemplate.bind({});
+Time.args = {
+  type: 'Time',
+};
+export const Date = datetimeTemplate.bind({});
+Date.args = {
+  type: 'Date',
+};
+//# sourceMappingURL=datetime.stories.js.map

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

@@ -1,62 +1,62 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Divider',
-  parameters: {
-    layout: 'centered',
-    notes: { Divider: readme },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
-      },
-    ],
-  },
-  argTypes: {
-    orientation: {
-      name: 'Orientation',
-      description: 'Choose divider orientation.',
-      control: {
-        type: 'radio',
-        options: ['Horizontal', 'Vertical'],
-      },
-      table: {
-        defaultValue: { summary: 'horizontal' },
-      },
-    },
-    width: {
-      name: 'Width',
-      description: 'Sets the divider width.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'orientation', eq: 'Horizontal' },
-    },
-    height: {
-      name: 'Height',
-      description: 'Sets the divider height.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'orientation', eq: 'Vertical' },
-    },
-  },
-  args: {
-    orientation: 'Horizontal',
-    width: 150,
-    height: 150,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Divider',
+  parameters: {
+    layout: 'centered',
+    notes: { Divider: readme },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
+      },
+    ],
+  },
+  argTypes: {
+    orientation: {
+      name: 'Orientation',
+      description: 'Choose divider orientation.',
+      control: {
+        type: 'radio',
+        options: ['Horizontal', 'Vertical'],
+      },
+      table: {
+        defaultValue: { summary: 'horizontal' },
+      },
+    },
+    width: {
+      name: 'Width',
+      description: 'Sets the divider width.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'orientation', eq: 'Horizontal' },
+    },
+    height: {
+      name: 'Height',
+      description: 'Sets the divider height.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'orientation', eq: 'Vertical' },
+    },
+  },
+  args: {
+    orientation: 'Horizontal',
+    width: 150,
+    height: 150,
+  },
+};
 const Template = ({ orientation, width, height }) => formatHtmlPreview(`
   <div style="${orientation === 'Horizontal' ? `width: ${width}px;` : `height: ${height}px;`}">
     <sdds-divider orientation="${orientation.toLowerCase()}"></sdds-divider>
   </div>
-`);
-export const WebComponent = Template.bind({});
-//# sourceMappingURL=divider-webcomponent.stories.js.map
+`);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=divider-webcomponent.stories.js.map

package/dist/collection/components/divider/divider.js

@@ -1,44 +1,44 @@
-import { Host, h } from '@stencil/core';
-export class Divider {
-  constructor() {
-    this.orientation = 'horizontal';
-  }
-  render() {
-    return (h(Host, { role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { class: `divider ${this.orientation}` })));
-  }
-  static get is() { return "sdds-divider"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["divider-component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["divider-component.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "orientation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'horizontal' | 'vertical'",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Orientation of the Divider, horizontal if not specified."
-        },
-        "attribute": "orientation",
-        "reflect": false,
-        "defaultValue": "'horizontal'"
-      }
-    };
-  }
-}
-//# sourceMappingURL=divider.js.map
+import { Host, h } from '@stencil/core';
+export class Divider {
+  constructor() {
+    this.orientation = 'horizontal';
+  }
+  render() {
+    return (h(Host, { role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { class: `divider ${this.orientation}` })));
+  }
+  static get is() { return "sdds-divider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["divider-component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["divider-component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'horizontal' | 'vertical'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Orientation of the Divider, horizontal if not specified."
+        },
+        "attribute": "orientation",
+        "reflect": false,
+        "defaultValue": "'horizontal'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=divider.js.map