@scania/tegel 0.0.2 → 0.0.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"datetime.js","sourceRoot":"","sources":["../../../src/components/datetime/datetime.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-datetime',\n  styleUrl: 'datetime.scss',\n  shadow: true,\n})\nexport class Datetime {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'datetime-local' | 'date' | 'time' = 'datetime-local';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value = '';\n\n  /** Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM */\n  @Prop() defaultValue: string | 'none' = 'none';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | '' = '';\n\n  /** With setting */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Set the variant of the the datetime component. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: string;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Label text for the component */\n  @Prop() label: string = '';\n\n  /** Helper text for the component */\n  @Prop() helper: string = '';\n\n  /** Listen to the focus state of the input */\n  @State() focusInput: boolean;\n\n  /** Change event for the datetime */\n  @Event({\n    composed: true,\n    bubbles: true,\n    cancelable: true,\n  })\n  customChange: EventEmitter;\n\n  getDefaultValue = () => {\n    const dateTimeObj = {\n      year: this.defaultValue.slice(0, 4),\n      month: this.defaultValue.slice(5, 7),\n      day: this.defaultValue.slice(8, 10),\n      hours: this.defaultValue.slice(11, 13),\n      minutes: this.defaultValue.slice(14, 16),\n    };\n    switch (this.type) {\n      case 'datetime-local':\n        return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n      case 'date':\n        return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n      case 'time':\n        return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n      default:\n        throw new Error('Invalid type.');\n    }\n  };\n\n  componentWillLoad() {\n    if (this.defaultValue !== 'none') {\n      this.value = this.getDefaultValue();\n    }\n  }\n\n  // Listener if input enters focus state\n  @Listen('focus')\n  handleFocusIn() {\n    this.focusInput = true;\n  }\n\n  // Listener if input leaves focus state\n  @Listen('focusout')\n  handleFocusOut() {\n    this.focusInput = false;\n  }\n\n  // Data input event in value prop\n  handleInput(e): void {\n    this.value = e.target.value;\n  }\n\n  // Change event isn't a composed:true by default in for input\n  handleChange(e: Event): void {\n    this.customChange.emit(e);\n  }\n\n  /** Set the input as focus when clicking the whole datetime with suffix/prefix */\n  handleFocusClick(): void {\n    this.textInput.focus();\n  }\n\n  render() {\n    let className = ' sdds-datetime-input';\n    if (this.size === 'md') {\n      className += `${className}-md`;\n    }\n    if (this.size === 'sm') {\n      className += `${className}-sm`;\n    }\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}\n        ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n        ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n        ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n        ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n        ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n        ${\n          this.state === 'error' || this.state === 'success'\n            ? `sdds-form-datetime-${this.state}`\n            : ''\n        }\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}\n        `}\n      >\n        {this.label && <div class=\"sdds-datetime-label\">{this.label}</div>}\n        <div\n          onClick={() => this.handleFocusClick()}\n          class=\"sdds-datetime-container sdds-datetime-container\"\n        >\n          <div class=\"sdds-datetime-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={className}\n              type={this.type}\n              disabled={this.disabled}\n              value={this.value}\n              autofocus={this.autofocus}\n              name={this.name}\n              onInput={(e) => this.handleInput(e)}\n              onChange={(e) => this.handleChange(e)}\n            />\n\n            <div class=\"datetime-icon icon-datetime-local\">\n              <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"datetime-icon icon-time\">\n              <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                <path\n                  d=\"M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n          </div>\n          <div class=\"sdds-datetime-bar\"></div>\n        </div>\n\n        <div class=\"sdds-datetime-helper\">\n          {this.helper && (\n            <div class=\"sdds-helper\">\n              {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n              {this.helper}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,157 +1,157 @@
-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 of the component.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    type: {
-      name: 'Type',
-      description: 'Set the field to display date, time or both',
-      control: {
-        type: 'radio',
-      },
-      options: ['Datetime', 'Date', 'Time'],
-    },
-    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'],
-    },
-    size: {
-      name: 'Size',
-      description: 'Switch between different sizes',
-      control: {
-        type: 'radio',
-        // todo: make consistent with other sizes, for example 'xs', 'sm', etc
-      },
-      options: ['Large', 'Medium', 'Small'],
-    },
-    minWidth: {
-      name: 'Min width',
-      description: 'Toggle min width',
-      control: {
-        type: 'boolean',
-      },
-    },
-    disabled: {
-      description: 'Set textfield to disabled state',
-      name: 'Disabled',
-      control: {
-        type: 'boolean',
-      },
-    },
-    label: {
-      name: 'Label',
-      description: 'Add/remove a label text for the component',
-      control: {
-        type: 'boolean',
-      },
-    },
-    labelText: {
-      description: 'Label text for specific textfield',
-      name: 'Label text',
-      control: {
-        type: 'text',
-      },
-      if: { arg: 'label', eq: true },
-    },
-    helper: {
-      name: 'Helper',
-      description: 'Add/remove a helper text for the component',
-      control: {
-        type: 'boolean',
-      },
-    },
-    helperText: {
-      name: 'Helper text',
-      description: 'Add helper text for the textfield',
-      control: {
-        type: 'text',
-      },
-      if: { arg: 'helper', eq: true },
-    },
-    state: {
-      name: 'State',
-      description: 'Switch between success or error state',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Success', 'Error'],
-    },
-  },
-  args: {
-    type: 'Datetime',
-    size: 'Large',
-    defaultValue: 'None',
-    minWidth: 'Default',
-    disabled: false,
-    state: 'None',
-    label: true,
-    labelText: 'Label text',
-    helper: true,
-    helperText: 'Helper text',
-    modeVariant: 'Inherit from parent',
-  },
-};
-const datetimeTemplate = ({ modeVariant, type, size, minWidth, disabled, label, labelText, state, helper, helperText, defaultValue, }) => {
-  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';
-      }
-    }
-  };
+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 of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    type: {
+      name: 'Type',
+      description: 'Set the field to display date, time or both',
+      control: {
+        type: 'radio',
+      },
+      options: ['Datetime', 'Date', 'Time'],
+    },
+    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'],
+    },
+    size: {
+      name: 'Size',
+      description: 'Switch between different sizes',
+      control: {
+        type: 'radio',
+        // todo: make consistent with other sizes, for example 'xs', 'sm', etc
+      },
+      options: ['Large', 'Medium', 'Small'],
+    },
+    minWidth: {
+      name: 'Min width',
+      description: 'Toggle min width',
+      control: {
+        type: 'boolean',
+      },
+    },
+    disabled: {
+      description: 'Set textfield to disabled state',
+      name: 'Disabled',
+      control: {
+        type: 'boolean',
+      },
+    },
+    label: {
+      name: 'Label',
+      description: 'Add/remove a label text for the component',
+      control: {
+        type: 'boolean',
+      },
+    },
+    labelText: {
+      description: 'Label text for specific textfield',
+      name: 'Label text',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'label', eq: true },
+    },
+    helper: {
+      name: 'Helper',
+      description: 'Add/remove a helper text for the component',
+      control: {
+        type: 'boolean',
+      },
+    },
+    helperText: {
+      name: 'Helper text',
+      description: 'Add helper text for the textfield',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'helper', eq: true },
+    },
+    state: {
+      name: 'State',
+      description: 'Switch between success or error state',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Success', 'Error'],
+    },
+  },
+  args: {
+    type: 'Datetime',
+    size: 'Large',
+    defaultValue: 'None',
+    minWidth: 'Default',
+    disabled: false,
+    state: 'None',
+    label: true,
+    labelText: 'Label text',
+    helper: true,
+    helperText: 'Helper text',
+    modeVariant: 'Inherit from parent',
+  },
+};
+const datetimeTemplate = ({ modeVariant, type, size, minWidth, disabled, label, labelText, state, helper, helperText, defaultValue, }) => {
+  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';
+      }
+    }
+  };
   return formatHtmlPreview(`
 
     <style>
@@ -189,19 +189,20 @@ const datetimeTemplate = ({ modeVariant, type, size, minWidth, disabled, label,
 
 
     </script>
-  </div>`);
-};
-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',
-};
+  </div>`);
+};
+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/datetime/datetime.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datetime.stories.js","sourceRoot":"","sources":["../../../src/components/datetime/datetime.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Datetime',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    type: {\n      name: 'Type',\n      description: 'Set the field to display date, time or both',\n      control: {\n        type: 'radio',\n      },\n      options: ['Datetime', 'Date', 'Time'],\n    },\n    defaultValue: {\n      name: 'Default value',\n      description:\n        'Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM ',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 'Custom'],\n    },\n    size: {\n      name: 'Size',\n      description: 'Switch between different sizes',\n      control: {\n        type: 'radio',\n        // todo: make consistent with other sizes, for example 'xs', 'sm', etc\n      },\n      options: ['Large', 'Medium', 'Small'],\n    },\n    minWidth: {\n      name: 'Min width',\n      description: 'Toggle min width',\n      control: {\n        type: 'boolean',\n      },\n    },\n    disabled: {\n      description: 'Set textfield to disabled state',\n      name: 'Disabled',\n      control: {\n        type: 'boolean',\n      },\n    },\n    label: {\n      name: 'Label',\n      description: 'Add/remove a label text for the component',\n      control: {\n        type: 'boolean',\n      },\n    },\n    labelText: {\n      description: 'Label text for specific textfield',\n      name: 'Label text',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'label', eq: true },\n    },\n    helper: {\n      name: 'Helper',\n      description: 'Add/remove a helper text for the component',\n      control: {\n        type: 'boolean',\n      },\n    },\n    helperText: {\n      name: 'Helper text',\n      description: 'Add helper text for the textfield',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'helper', eq: true },\n    },\n    state: {\n      name: 'State',\n      description: 'Switch between success or error state',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 'Success', 'Error'],\n    },\n  },\n  args: {\n    type: 'Datetime',\n    size: 'Large',\n    defaultValue: 'None',\n    minWidth: 'Default',\n    disabled: false,\n    state: 'None',\n    label: true,\n    labelText: 'Label text',\n    helper: true,\n    helperText: 'Helper text',\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst datetimeTemplate = ({\n  modeVariant,\n  type,\n  size,\n  minWidth,\n  disabled,\n  label,\n  labelText,\n  state,\n  helper,\n  helperText,\n  defaultValue,\n}) => {\n  const typeLookup = {\n    Datetime: 'datetime-local',\n    Date: 'date',\n    Time: 'time',\n  };\n  const sizeLookup = {\n    Large: 'lg',\n    Medium: 'md',\n    Small: 'sm',\n  };\n  const stateLookup = {\n    None: 'none',\n    Success: 'success',\n    Error: 'error',\n  };\n\n  const getDefaultValue = (value: string, componentType: string) => {\n    if (value === 'Custom') {\n      switch (componentType) {\n        case 'Datetime':\n          return '1891-01-01T12:30';\n        case 'Date':\n          return '1891-01-01';\n        case 'Time':\n          return '12:30';\n        default:\n          return 'Invalid type';\n      }\n    }\n  };\n\n  return formatHtmlPreview(\n    `\n\n    <style>\n        /* Note: Demo classes used here are just for demo purposes in Storybook */\n        .demo-wrapper {\n            width: 208px;\n        }\n    </style>\n\n  <div class=\"demo-wrapper\">\n\n    <sdds-datetime\n      id=\"datetime\"\n      ${defaultValue !== 'None' ? `default-value=\"${getDefaultValue(defaultValue, type)}\"` : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"`: ''}\n      type=\"${typeLookup[type]}\"\n      size=\"${sizeLookup[size]}\"\n      state=\"${stateLookup[state]}\"\n      ${disabled ? 'disabled' : ''}\n      ${minWidth ? 'no-min-width' : ''}\n      ${label ? `label=\"${labelText}\" ` : ''}\n      ${helper ? `helper=\"${helperText}\" ` : ''}\n      >\n    </sdds-datetime>\n\n\n    <script>\n\n\n    /* You can listen for the 'customChange' event to get value updates. */\n      const datetimeEl = document.getElementById('datetime');\n      datetimeEl.addEventListener('customChange', (event) => {\n        console.log(event.target.value);\n      });\n\n\n    </script>\n  </div>`,\n  );\n};\n\nexport const Default = datetimeTemplate.bind({});\n\nDefault.args = {};\n\nexport const ErrorState = datetimeTemplate.bind({});\n\nErrorState.args = {\n  state: 'Error',\n};\n\nexport const Time = datetimeTemplate.bind({});\n\nTime.args = {\n  type: 'Time',\n};\n\nexport const Date = datetimeTemplate.bind({});\n\nDate.args = {\n  type: 'Date',\n};\n"]}

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

@@ -1,101 +1,101 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Divider',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Type',
-      description: 'Choose divider type.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Horizontal', 'Vertical'],
-      table: {
-        defaultValue: { summary: 'Horizontal' },
-      },
-    },
-    width: {
-      name: 'Width',
-      description: 'Choose divider width.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'type', eq: 'Horizontal' },
-    },
-    height: {
-      name: 'Height',
-      description: 'Choose divider height.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'type', eq: 'Vertical' },
-    },
-    direction: {
-      name: 'Direction',
-      description: 'Set the direction of the divider',
-      control: {
-        type: 'select',
-      },
-      options: ['Top', 'Right', 'Bottom', 'Left'],
-    },
-  },
-  args: {
-    type: 'Horizontal',
-    width: 150,
-    height: 150,
-    direction: 'Top',
-  },
-};
-const Template = ({ type, width, height }) => {
-  const classLookup = {
-    Horizontal: `sdds-divider`,
-    Vertical: `sdds-divider-vertical`,
-  };
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Divider',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
+      },
+    ],
+  },
+  argTypes: {
+    type: {
+      name: 'Type',
+      description: 'Choose divider type.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Horizontal', 'Vertical'],
+      table: {
+        defaultValue: { summary: 'Horizontal' },
+      },
+    },
+    width: {
+      name: 'Width',
+      description: 'Choose divider width.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'type', eq: 'Horizontal' },
+    },
+    height: {
+      name: 'Height',
+      description: 'Choose divider height.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'type', eq: 'Vertical' },
+    },
+    direction: {
+      name: 'Direction',
+      description: 'Set the direction of the divider',
+      control: {
+        type: 'select',
+      },
+      options: ['Top', 'Right', 'Bottom', 'Left'],
+    },
+  },
+  args: {
+    type: 'Horizontal',
+    width: 150,
+    height: 150,
+    direction: 'Top',
+  },
+};
+const Template = ({ type, width, height }) => {
+  const classLookup = {
+    Horizontal: `sdds-divider`,
+    Vertical: `sdds-divider-vertical`,
+  };
   return formatHtmlPreview(`
       <style>
-         ${height
+         ${height
     ? `/* demo-div is for demonstration purposes only*/
         .demo-div {
           height: ${height}px;
           width: 1px;
           padding: 0px;
-        }`
-    : ''}    ${width
+        }`
+    : ''}    ${width
     ? `/* demo-div is for demonstration purposes only*/
             .demo-div {
               width: ${width}px;
               height: 1px;
               padding: 0px;
-            }`
+            }`
     : ''}
       </style>
      
       
       <div
   class="demo-div ${classLookup[type]}"></div>
-  `);
-};
-const BorderTemplate = ({ direction }) => {
-  const directionLookup = {
-    Top: 'top',
-    Right: 'right',
-    Bottom: 'bottom',
-    Left: 'left',
-  };
+  `);
+};
+const BorderTemplate = ({ direction }) => {
+  const directionLookup = {
+    Top: 'top',
+    Right: 'right',
+    Bottom: 'bottom',
+    Left: 'left',
+  };
   return formatHtmlPreview(`
       <style>
       #demo-wrapper{
@@ -118,16 +118,17 @@ const BorderTemplate = ({ direction }) => {
       <div
   class="border-demo-div sdds-divider-border-${directionLookup[direction]}">
   <H4>DEMO</H4></div></div>
-  `);
-};
-export const Default = Template.bind({});
-Default.argTypes = {
-  direction: { table: { disable: true } }
-};
-export const Border = BorderTemplate.bind({});
-Border.args = {
-  direction: 'Top'
-};
-Border.argTypes = {
-  type: { table: { disable: true } }
-};
+  `);
+};
+export const Default = Template.bind({});
+Default.argTypes = {
+  direction: { table: { disable: true } }
+};
+export const Border = BorderTemplate.bind({});
+Border.args = {
+  direction: 'Top'
+};
+Border.argTypes = {
+  type: { table: { disable: true } }
+};
+//# sourceMappingURL=divider.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.stories.js","sourceRoot":"","sources":["../../../src/components/divider/divider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Divider',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'Choose divider type.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Horizontal', 'Vertical'],\n      table: {\n        defaultValue: { summary: 'Horizontal' },\n      },\n    },\n    width: {\n      name: 'Width',\n      description: 'Choose divider width.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'type', eq: 'Horizontal' },\n    },\n    height: {\n      name: 'Height',\n      description: 'Choose divider height.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'type', eq: 'Vertical' },\n    },\n    direction: {\n      name: 'Direction',\n      description: 'Set the direction of the divider',\n      control: {\n        type: 'select',\n      },\n      options: ['Top', 'Right', 'Bottom', 'Left'],\n    },\n  },\n  args: {\n    type: 'Horizontal',\n    width: 150,\n    height: 150,\n    direction: 'Top',\n  },\n};\n\n\nconst Template = ({ type, width, height }) => {\n  const classLookup = {\n    Horizontal: `sdds-divider`,\n    Vertical: `sdds-divider-vertical`,\n  };\n  \n  return formatHtmlPreview(\n    `\n      <style>\n         ${\n      height\n        ? `/* demo-div is for demonstration purposes only*/\n        .demo-div {\n          height: ${height}px;\n          width: 1px;\n          padding: 0px;\n        }`\n        : ''\n    }    ${\n      width\n        ? `/* demo-div is for demonstration purposes only*/\n            .demo-div {\n              width: ${width}px;\n              height: 1px;\n              padding: 0px;\n            }`\n        : ''\n    }\n      </style>\n     \n      \n      <div\n  class=\"demo-div ${classLookup[type]}\"></div>\n  `,\n);\n};\n\nconst BorderTemplate= ({ direction }) => {\n  const directionLookup = {\n    Top: 'top',\n    Right: 'right',\n    Bottom: 'bottom',\n    Left: 'left',\n  };\n  return formatHtmlPreview(\n    `\n      <style>\n      #demo-wrapper{\n        padding: 50px;\n        background-color: var(--sdds-grey-958)\n      }\n       /* border-demo-div is for demonstration purposes only*/\n        .border-demo-div {\n          height: 200px;\n          width: 200px;\n          background-color: var(--sdds-grey-868);\n          color: var(--sdds-grey-50);\n          text-align: center;\n          padding: 10px;\n        }\n           \n      </style>\n     <div id= \"demo-wrapper\">\n      \n      <div\n  class=\"border-demo-div sdds-divider-border-${directionLookup[direction]}\">\n  <H4>DEMO</H4></div></div>\n  `,\n);\n};\n\n\nexport const Default = Template.bind({});\nDefault.argTypes={\n  direction: { table:  { disable: true } }  \n }\nexport const Border = BorderTemplate.bind({});\nBorder.args={\n  direction: 'Top'\n} \n \nBorder.argTypes={\n type: { table:  { disable: true } }  \n}\n\n\n"]}