@scania/tegel 0.0.4 → 0.0.6

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

@@ -21,7 +21,7 @@ export default {
   argTypes: {
     modeVariant: {
       name: 'Mode variant',
-      description: 'Mode variant of the component.',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
         type: 'radio',
       },
@@ -30,99 +30,96 @@ export default {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
-    type: {
-      name: 'Type',
-      description: 'Set the field to display date, time or both',
+    state: {
+      name: 'State',
+      description: 'Switches between success and error state.',
       control: {
         type: 'radio',
       },
-      options: ['Datetime', 'Date', 'Time'],
+      options: ['None', 'Success', 'Error'],
     },
-    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 ',
+    type: {
+      name: 'Type',
+      description: 'Sets the field to display date, time or both.',
       control: {
         type: 'radio',
       },
-      options: ['None', 'Custom'],
+      options: ['Datetime', 'Date', 'Time'],
+      table: {
+        defaultValue: { summary: 'datetime-local' },
+      },
     },
     size: {
       name: 'Size',
-      description: 'Switch between different sizes',
+      description: 'Switches 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',
+      table: {
+        defaultValue: { summary: 'lg' },
       },
     },
-    disabled: {
-      description: 'Set textfield to disabled state',
-      name: 'Disabled',
+    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: 'boolean',
+        type: 'radio',
+      },
+      options: ['None', 'Custom'],
+      table: {
+        defaultValue: { summary: 'none' },
       },
     },
-    label: {
-      name: 'Label',
-      description: 'Add/remove a label text for the component',
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Enables component to shrink below 208px which is the default width.',
       control: {
         type: 'boolean',
       },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
-    labelText: {
-      description: 'Label text for specific textfield',
+    label: {
       name: 'Label text',
+      description: 'Sets the 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',
+      description: 'Sets the helper text.',
       control: {
         type: 'text',
       },
-      if: { arg: 'helper', eq: true },
     },
-    state: {
-      name: 'State',
-      description: 'Switch between success or error state',
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the component.',
       control: {
-        type: 'radio',
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
       },
-      options: ['None', 'Success', 'Error'],
     },
   },
   args: {
+    modeVariant: 'Inherit from parent',
+    state: 'None',
     type: 'Datetime',
     size: 'Large',
     defaultValue: 'None',
-    minWidth: 'Default',
+    noMinWidth: false,
+    label: 'Label text',
+    helper: 'Helper text',
     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 datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, noMinWidth, label, helper, disabled, }) => {
   const typeLookup = {
     Datetime: 'datetime-local',
     Date: 'date',
@@ -151,13 +148,14 @@ const datetimeTemplate = ({ modeVariant, type, size, minWidth, disabled, label,
           return 'Invalid type';
       }
     }
+    else
+      return false;
   };
   return formatHtmlPreview(`
-
     <style>
         /* Note: Demo classes used here are just for demo purposes in Storybook */
         .demo-wrapper {
-            width: 208px;
+            width: 180px;
         }
     </style>
 
@@ -171,25 +169,27 @@ const datetimeTemplate = ({ modeVariant, type, size, minWidth, disabled, label,
       size="${sizeLookup[size]}"
       state="${stateLookup[state]}"
       ${disabled ? 'disabled' : ''}
-      ${minWidth ? 'no-min-width' : ''}
-      ${label ? `label="${labelText}" ` : ''}
-      ${helper ? `helper="${helperText}" ` : ''}
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${label ? `label="${label}" ` : ''}
+      ${helper ? `helper="${helper}" ` : ''}
       >
     </sdds-datetime>
 
 
     <script>
-
-
-    /* You can listen for the 'customChange' event to get value updates. */
-      const datetimeEl = document.getElementById('datetime');
-      datetimeEl.addEventListener('customChange', (event) => {
-        console.log(event.target.value);
+    /* DEMO Code: Used only for Storybook demo purposes */
+      datetimeElement = document.getElementById('storybook-datetime');
+      datetimeElement.addEventListener('sddsChange', (event) => {
+        console.log("Firing sddsChange: " + event.target.value);
+      });
+      datetimeElement.addEventListener('sddsFocus', (event) => {
+        console.log("Firing sddsFocus: " + event.target.value);
+      });
+      datetimeElement.addEventListener('sddsBlur', (event) => {
+        console.log("Firing sddsBlur: " + event.target.value);
       });
-
-
     </script>
-  </div>`);
+`);
 };
 export const Default = datetimeTemplate.bind({});
 Default.args = {};

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

@@ -1 +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"]}
+{"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 adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    state: {\n      name: 'State',\n      description: 'Switches between success and error state.',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 'Success', 'Error'],\n    },\n    type: {\n      name: 'Type',\n      description: 'Sets the field to display date, time or both.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Datetime', 'Date', 'Time'],\n      table: {\n        defaultValue: { summary: 'datetime-local' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Switches 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      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    defaultValue: {\n      name: 'Default value',\n      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.',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 'Custom'],\n      table: {\n        defaultValue: { summary: 'none' },\n      },\n    },\n    noMinWidth: {\n      name: 'No minimum width',\n      description: 'Enables component to shrink below 208px which is the default width.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'Sets the label text.',\n      control: {\n        type: 'text',\n      },\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Sets the helper text.',\n      control: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the component.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    state: 'None',\n    type: 'Datetime',\n    size: 'Large',\n    defaultValue: 'None',\n    noMinWidth: false,\n    label: 'Label text',\n    helper: 'Helper text',\n    disabled: false,\n  },\n};\n\nconst datetimeTemplate = ({\n  modeVariant,\n  state,\n  type,\n  size,\n  defaultValue,\n  noMinWidth,\n  label,\n  helper,\n  disabled,\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    } else return false;\n  };\n\n  return formatHtmlPreview(\n    `\n    <style>\n        /* Note: Demo classes used here are just for demo purposes in Storybook */\n        .demo-wrapper {\n            width: 180px;\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      ${noMinWidth ? 'no-min-width' : ''}\n      ${label ? `label=\"${label}\" ` : ''}\n      ${helper ? `helper=\"${helper}\" ` : ''}\n      >\n    </sdds-datetime>\n\n\n    <script>\n    /* DEMO Code: Used only for Storybook demo purposes */\n      datetimeElement = document.getElementById('storybook-datetime');\n      datetimeElement.addEventListener('sddsChange', (event) => {\n        console.log(\"Firing sddsChange: \" + event.target.value);\n      });\n      datetimeElement.addEventListener('sddsFocus', (event) => {\n        console.log(\"Firing sddsFocus: \" + event.target.value);\n      });\n      datetimeElement.addEventListener('sddsBlur', (event) => {\n        console.log(\"Firing sddsBlur: \" + event.target.value);\n      });\n    </script>\n`,\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-component.css

@@ -0,0 +1,16 @@
+.divider {
+  box-sizing: border-box;
+}
+.divider * {
+  box-sizing: border-box;
+}
+.divider.horizontal {
+  background-color: var(--sdds-divider-background);
+  width: 100%;
+  height: 1px;
+}
+.divider.vertical {
+  background-color: var(--sdds-divider-background);
+  height: 100%;
+  width: 1px;
+}

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

@@ -0,0 +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,
+  },
+};
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider-webcomponent.stories.js","sourceRoot":"","sources":["../../../src/components/divider/divider-webcomponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAC1B,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,6GAA6G;OACnH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,6GAA6G;OACnH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,aAAa;MACnB,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;OACpC;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE;OACxC;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,yBAAyB;MACtC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,EAAE,EAAE,YAAY,EAAE;KAC7C;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,0BAA0B;MACvC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,EAAE,EAAE,UAAU,EAAE;KAC3C;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,YAAY;IACzB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;GACZ;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAClD,iBAAiB,CAAC;gBACJ,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,MAAM,KAAK;iCAC3D,WAAW,CAAC,WAAW,EAAE;;CAEzD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Divider',\n  parameters: {\n    layout: 'centered',\n    notes: { Divider: readme },\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=8p1W6DsJrzvgWfmp-4',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',\n      },\n    ],\n  },\n  argTypes: {\n    orientation: {\n      name: 'Orientation',\n      description: 'Choose divider orientation.',\n      control: {\n        type: 'radio',\n        options: ['Horizontal', 'Vertical'],\n      },\n      table: {\n        defaultValue: { summary: 'horizontal' },\n      },\n    },\n    width: {\n      name: 'Width',\n      description: 'Sets the divider width.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'orientation', eq: 'Horizontal' },\n    },\n    height: {\n      name: 'Height',\n      description: 'Sets the divider height.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'orientation', eq: 'Vertical' },\n    },\n  },\n  args: {\n    orientation: 'Horizontal',\n    width: 150,\n    height: 150,\n  },\n};\n\nconst Template = ({ orientation, width, height }) =>\n  formatHtmlPreview(`\n  <div style=\"${orientation === 'Horizontal' ? `width: ${width}px;` : `height: ${height}px;`}\">\n    <sdds-divider orientation=\"${orientation.toLowerCase()}\"></sdds-divider>\n  </div>\n`);\n\nexport const WebComponent = Template.bind({});\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,OAAO;;uBAE+B,YAAY;;EAE7D,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;MAE1E,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,WAAW,EAAE,GAAI,CACxC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-divider',\n  styleUrl: 'divider-component.scss',\n  shadow: true,\n})\nexport class Divider {\n  /** Orientation of the Divider, horizontal if not specified. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  render() {\n    return (\n      <Host\n        role=\"separator\"\n        aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n      >\n        <div class={`divider ${this.orientation}`} />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -17,50 +17,47 @@ export default {
     ],
   },
   argTypes: {
-    type: {
-      name: 'Type',
-      description: 'Choose divider type.',
+    orientation: {
+      name: 'Orientation',
+      description: 'Choose divider orientation.',
       control: {
         type: 'radio',
       },
       options: ['Horizontal', 'Vertical'],
-      table: {
-        defaultValue: { summary: 'Horizontal' },
+    },
+    direction: {
+      name: 'Direction',
+      description: 'Sets the direction of the divider.',
+      control: {
+        type: 'select',
       },
+      options: ['Top', 'Right', 'Bottom', 'Left'],
     },
     width: {
       name: 'Width',
-      description: 'Choose divider width.',
+      description: 'Sets the divider width.',
       control: {
         type: 'number',
       },
-      if: { arg: 'type', eq: 'Horizontal' },
+      if: { arg: 'orientation', eq: 'Horizontal' },
     },
     height: {
       name: 'Height',
-      description: 'Choose divider height.',
+      description: 'Sets the 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'],
+      if: { arg: 'orientation', eq: 'Vertical' },
     },
   },
   args: {
-    type: 'Horizontal',
+    orientation: 'Horizontal',
+    direction: 'Top',
     width: 150,
     height: 150,
-    direction: 'Top',
   },
 };
-const Template = ({ type, width, height }) => {
+const Template = ({ orientation, width, height }) => {
   const classLookup = {
     Horizontal: `sdds-divider`,
     Vertical: `sdds-divider-vertical`,
@@ -86,7 +83,7 @@ const Template = ({ type, width, height }) => {
      
       
       <div
-  class="demo-div ${classLookup[type]}"></div>
+  class="demo-div ${classLookup[orientation]}"></div>
   `);
 };
 const BorderTemplate = ({ direction }) => {
@@ -120,8 +117,8 @@ const BorderTemplate = ({ direction }) => {
   <H4>DEMO</H4></div></div>
   `);
 };
-export const Default = Template.bind({});
-Default.argTypes = {
+export const Native = Template.bind({});
+Native.argTypes = {
   direction: { table: { disable: true } }
 };
 export const Border = BorderTemplate.bind({});
@@ -129,6 +126,6 @@ Border.args = {
   direction: 'Top'
 };
 Border.argTypes = {
-  type: { table: { disable: true } }
+  orientation: { table: { disable: true } }
 };
 //# sourceMappingURL=divider.stories.js.map

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

@@ -1 +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"]}
+{"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    orientation: {\n      name: 'Orientation',\n      description: 'Choose divider orientation.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Horizontal', 'Vertical'],\n    },\n    direction: {\n      name: 'Direction',\n      description: 'Sets the direction of the divider.',\n      control: {\n        type: 'select',\n      },\n      options: ['Top', 'Right', 'Bottom', 'Left'],\n    },\n    width: {\n      name: 'Width',\n      description: 'Sets the divider width.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'orientation', eq: 'Horizontal' },\n    },\n    height: {\n      name: 'Height',\n      description: 'Sets the divider height.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'orientation', eq: 'Vertical' },\n    },\n  },\n  args: {\n    orientation: 'Horizontal',\n    direction: 'Top',\n    width: 150,\n    height: 150,\n  },\n};\n\n\nconst Template = ({ orientation, 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[orientation]}\"></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 Native = Template.bind({});\nNative.argTypes={\n  direction: { table:  { disable: true } }  \n }\nexport const Border = BorderTemplate.bind({});\nBorder.args={\n  direction: 'Top'\n} \n \nBorder.argTypes={\n orientation: { table:  { disable: true } }  \n}\n\n\n"]}