@scania/tegel 0.0.33 → 0.0.51

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

@@ -1,107 +1,127 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Chips',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    placeholderText: {
-      name: 'Placeholder',
-      description: 'Set custom chip text',
-      control: {
-        type: 'text',
-      },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Add an icon to the chip.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Choose what icon type to use',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      if: { arg: 'icon', eq: true },
-    },
-    iconPosition: {
-      name: 'Icon position',
-      description: 'Set the placement of the icon',
-      control: {
-        type: 'radio',
-      },
-      options: ['Icon left', 'Icon right'],
-      if: { arg: 'icon', eq: true },
-    },
-    state: {
-      name: 'State',
-      description: 'Set the chips state as active or default',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Active'],
-    },
-    size: {
-      name: 'Size',
-      description: 'Set the chip size',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Small'],
-    },
-  },
-  args: {
-    placeholderText: 'Chip text',
-    icon: false,
-    iconType: 'Native',
-    iconPosition: 'Icon right',
-    state: 'Default',
-    size: 'Default',
-  },
-};
-const Template = ({ icon, iconPosition, iconType, state, placeholderText, size }) => {
-  const stateValue = state === 'Active' ? 'sdds-chip-active' : '';
-  const sizeValue = size === 'Small' ? 'sdds-chip-sm' : '';
-  const iconPositionLookup = {
-    'Icon left': 'sdds-chip-icon-left',
-    'Icon right': 'sdds-chip-icon-right',
-  };
-  // TODO - Add dark theme to story
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Chips',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    active: {
+      name: 'Active',
+      description: 'Toggles if the chip is active or not.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the chip size.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'Large' },
+      },
+    },
+    placeholderText: {
+      name: 'Placeholder',
+      description: 'Sets custom chip text.',
+      control: {
+        type: 'text',
+      },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Adds an icon to the chip.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    iconPosition: {
+      name: 'Icon position',
+      description: 'Sets the placement of the icon.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon left', 'Icon right'],
+      if: { arg: 'icon', eq: true },
+      table: {
+        defaultValue: { summary: 'Icon right' },
+      },
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Switch between showing a native or a web component icon.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+      if: { arg: 'icon', eq: true },
+      table: {
+        defaultValue: { summary: 'Native' },
+      },
+    },
+  },
+  args: {
+    active: false,
+    size: 'Large',
+    placeholderText: 'Chip text',
+    icon: false,
+    iconPosition: 'Icon right',
+    iconType: 'Native',
+  },
+};
+const Template = ({ active, size, placeholderText, icon, iconPosition, iconType }) => {
+  const activeValue = active === true ? 'sdds-chip-active' : '';
+  const sizeValue = size === 'Small' ? 'sdds-chip-sm' : '';
+  const iconPositionLookup = {
+    'Icon left': 'sdds-chip-icon-left',
+    'Icon right': 'sdds-chip-icon-right',
+  };
+  // TODO - Add dark theme to story
   const iconSvg = `
-    ${iconType === 'Native'
-    ? '<i class="sdds-chip-icon sdds-icon notification"></i>'
-    : '<sdds-icon class="sdds-chip-icon" name="notification" size="16px"></sdds-icon>'}
-    `;
+    ${iconType === 'Native'
+    ? '<i class=" sdds-icon notification"></i>'
+    : '<sdds-icon name="notification" size="16px"></sdds-icon>'}
+    `;
   return formatHtmlPreview(`
-  ${iconType === 'Native'
+  ${iconType === 'Native'
     ? `<style>
 /* Note: In case you are using WebFont icons, please make sure to import icons css file in your implementation */
     @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
 
-          </style>`
+          </style>`
     : ''}
     <!-- Below is a chip button implementation. Please use the proper html element 
     depending on usage (button, checkbox, radio, etc) -->
-    <button class="sdds-chip ${icon ? iconPositionLookup[iconPosition] : ''} ${stateValue} ${sizeValue}">
-      ${icon ? iconSvg : ''}<span class="sdds-chip-text">${placeholderText}</span>
+    <button class="sdds-chip ${icon ? iconPositionLookup[iconPosition] : ''} ${activeValue} ${sizeValue}">
+      ${icon
+    ? `
+      <div class="sdds-chip-icon">
+        ${iconSvg}
+      </div>
+      `
+    : ''}<span class="sdds-chip-text">${placeholderText}</span>
     </button>
-    `);
-};
-export const Native = Template.bind({});
-//# sourceMappingURL=chips.stories.js.map
+    `);
+};
+export const Native = Template.bind({});
+//# sourceMappingURL=chips.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chips.stories.js","sourceRoot":"","sources":["../../../src/components/chips/chips.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Chips',\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=11268%3A39456&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    placeholderText: {\n      name: 'Placeholder',\n      description: 'Set custom chip text',\n      control: {\n        type: 'text',\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Add an icon to the chip.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Choose what icon type to use',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'icon', eq: true },\n    },\n    iconPosition: {\n      name: 'Icon position',\n      description: 'Set the placement of the icon',\n      control: {\n        type: 'radio',\n      },\n      options: ['Icon left', 'Icon right'],\n      if: { arg: 'icon', eq: true },\n    },\n    state: {\n      name: 'State',\n      description: 'Set the chips state as active or default',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Active'],\n    },\n    size: {\n      name: 'Size',\n      description: 'Set the chip size',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Small'],\n    },\n  },\n  args: {\n    placeholderText: 'Chip text',\n    icon: false,\n    iconType: 'Native',\n    iconPosition: 'Icon right',\n    state: 'Default',\n    size: 'Default',\n  },\n};\n\nconst Template = ({ icon, iconPosition, iconType, state, placeholderText, size }) => {\n  const stateValue = state === 'Active' ? 'sdds-chip-active' : '';\n  const sizeValue = size === 'Small' ? 'sdds-chip-sm' : '';\n  const iconPositionLookup = {\n    'Icon left': 'sdds-chip-icon-left',\n    'Icon right': 'sdds-chip-icon-right',\n  };\n\n  // TODO - Add dark theme to story\n  const iconSvg = `\n    ${\n      iconType === 'Native'\n        ? '<i class=\"sdds-chip-icon sdds-icon notification\"></i>'\n        : '<sdds-icon class=\"sdds-chip-icon\" name=\"notification\" size=\"16px\"></sdds-icon>'\n    }\n    `;\n\n  return formatHtmlPreview(`\n  ${\n    iconType === 'Native'\n      ? `<style>\n/* Note: In case you are using WebFont icons, please make sure to import icons css file in your implementation */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n\n          </style>`\n      : ''\n  }\n    <!-- Below is a chip button implementation. Please use the proper html element \n    depending on usage (button, checkbox, radio, etc) -->\n    <button class=\"sdds-chip ${\n      icon ? iconPositionLookup[iconPosition] : ''\n    } ${stateValue} ${sizeValue}\">\n      ${icon ? iconSvg : ''}<span class=\"sdds-chip-text\">${placeholderText}</span>\n    </button>\n    `);\n};\n\nexport const Native = Template.bind({});\n"]}
+{"version":3,"file":"chips.stories.js","sourceRoot":"","sources":["../../../src/components/chips/chips.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,uCAAuC;MACpD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;MAC3B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,eAAe,EAAE;MACf,IAAI,EAAE,aAAa;MACnB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,2BAA2B;MACxC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,eAAe;MACrB,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC;MACpC,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE;MAC7B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE;OACxC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,0DAA0D;MACvE,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;MACpC,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE;MAC7B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;OACpC;KACF;GACF;EACD,IAAI,EAAE;IACJ,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,WAAW;IAC5B,IAAI,EAAE,KAAK;IACX,YAAY,EAAE,YAAY;IAC1B,QAAQ,EAAE,QAAQ;GACnB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE;EACnF,MAAM,WAAW,GAAG,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;EAC9D,MAAM,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;EACzD,MAAM,kBAAkB,GAAG;IACzB,WAAW,EAAE,qBAAqB;IAClC,YAAY,EAAE,sBAAsB;GACrC,CAAC;EAEF,iCAAiC;EACjC,MAAM,OAAO,GAAG;MAEZ,QAAQ,KAAK,QAAQ;IACnB,CAAC,CAAC,yCAAyC;IAC3C,CAAC,CAAC,yDACN;KACC,CAAC;EAEJ,OAAO,iBAAiB,CAAC;IAEvB,QAAQ,KAAK,QAAQ;IACnB,CAAC,CAAC;;;;mBAIW;IACb,CAAC,CAAC,EACN;;;+BAII,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAC5C,IAAI,WAAW,IAAI,SAAS;QAExB,IAAI;IACF,CAAC,CAAC;;UAEF,OAAO;;OAEV;IACG,CAAC,CAAC,EACN,gCAAgC,eAAe;;KAEhD,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Chips',\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=11268%3A39456&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    active: {\n      name: 'Active',\n      description: 'Toggles if the chip is active or not.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the chip size.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    placeholderText: {\n      name: 'Placeholder',\n      description: 'Sets custom chip text.',\n      control: {\n        type: 'text',\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Adds an icon to the chip.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    iconPosition: {\n      name: 'Icon position',\n      description: 'Sets the placement of the icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Icon left', 'Icon right'],\n      if: { arg: 'icon', eq: true },\n      table: {\n        defaultValue: { summary: 'Icon right' },\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Switch between showing a native or a web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'icon', eq: true },\n      table: {\n        defaultValue: { summary: 'Native' },\n      },\n    },\n  },\n  args: {\n    active: false,\n    size: 'Large',\n    placeholderText: 'Chip text',\n    icon: false,\n    iconPosition: 'Icon right',\n    iconType: 'Native',\n  },\n};\n\nconst Template = ({ active, size, placeholderText, icon, iconPosition, iconType }) => {\n  const activeValue = active === true ? 'sdds-chip-active' : '';\n  const sizeValue = size === 'Small' ? 'sdds-chip-sm' : '';\n  const iconPositionLookup = {\n    'Icon left': 'sdds-chip-icon-left',\n    'Icon right': 'sdds-chip-icon-right',\n  };\n\n  // TODO - Add dark theme to story\n  const iconSvg = `\n    ${\n      iconType === 'Native'\n        ? '<i class=\" sdds-icon notification\"></i>'\n        : '<sdds-icon name=\"notification\" size=\"16px\"></sdds-icon>'\n    }\n    `;\n\n  return formatHtmlPreview(`\n  ${\n    iconType === 'Native'\n      ? `<style>\n/* Note: In case you are using WebFont icons, please make sure to import icons css file in your implementation */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n\n          </style>`\n      : ''\n  }\n    <!-- Below is a chip button implementation. Please use the proper html element \n    depending on usage (button, checkbox, radio, etc) -->\n    <button class=\"sdds-chip ${\n      icon ? iconPositionLookup[iconPosition] : ''\n    } ${activeValue} ${sizeValue}\">\n      ${\n        icon\n          ? `\n      <div class=\"sdds-chip-icon\">\n        ${iconSvg}\n      </div>\n      `\n          : ''\n      }<span class=\"sdds-chip-text\">${placeholderText}</span>\n    </button>\n    `);\n};\n\nexport const Native = Template.bind({});\n"]}

package/dist/collection/components/data-table/native-table.stories.js

@@ -1,133 +1,111 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Data Table/Native',
-  argTypes: {
-    tableTitle: {
-      name: 'Table title',
-      description: 'Text that appears in table caption area.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: '',
-        },
-      },
-    },
-    isCompact: {
-      name: 'Compact design',
-      description: 'Enables compact design of the table, rows with less height.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    dividers: {
-      name: 'Vertical dividers',
-      description: 'When enabled, table has vertical dividers between columns.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'The mode variant of the component',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    responsiveTable: {
-      name: 'Responsive table',
-      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    noMinWidthArg: {
-      name: 'No minimum width',
-      description: 'Resets min-width rule and enabled setting column width value less then 192px which is default one. When enabled, controls for columns width will show here.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    column1Width: {
-      name: 'Column 1 width',
-      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
-      },
-      if: { arg: 'noMinWidthArg', eq: true },
-    },
-    column2Width: {
-      name: 'Column 2 width',
-      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
-      },
-      if: { arg: 'noMinWidthArg', eq: true },
-    },
-    column3Width: {
-      name: 'Column 3 width',
-      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
-      },
-      if: { arg: 'noMinWidthArg', eq: true },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    tableTitle: 'Native table',
-    isCompact: false,
-    dividers: false,
-    noMinWidthArg: false,
-    responsiveTable: false,
-    column1Width: '',
-    column2Width: '',
-    column3Width: '',
-  },
-};
-const Template = ({ modeVariant, tableTitle, isCompact, dividers, noMinWidthArg, responsiveTable, column1Width, column2Width, column3Width, }) => formatHtmlPreview(`
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Data Table/Native',
+  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' },
+      },
+    },
+    compactDesign: {
+      name: 'Compact design',
+      description: 'Enables compact design of the table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    responsiveDesign: {
+      name: 'Responsive table',
+      description: 'Enables table to take 100% of available width. For column values less than 192px, "No minimum width" has to be enabled too.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    tableTitle: {
+      name: 'Table title',
+      description: 'Sets text that appears in table caption area.',
+      control: {
+        type: 'text',
+      },
+    },
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between table columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    column1Width: {
+      name: 'Column 1 width',
+      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column2Width: {
+      name: 'Column 2 width',
+      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column3Width: {
+      name: 'Column 3 width',
+      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    responsiveDesign: false,
+    tableTitle: 'Native table',
+    verticalDivider: false,
+    noMinWidth: false,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+  },
+};
+const Template = ({ modeVariant, compactDesign, responsiveDesign, tableTitle, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, }) => formatHtmlPreview(`
     <table class="
         sdds-table
         ${modeVariant === 'Primary' ? 'sdds-mode-variant-primary' : ''}
         ${modeVariant === 'Secondary' ? 'sdds-mode-variant-secondary' : ''}
-        ${isCompact ? 'sdds-table--compact' : ''}
-        ${dividers ? 'sdds-table--divider' : ''}
-        ${noMinWidthArg ? 'sdds-table--no-min-width' : ''}
-        ${responsiveTable ? 'sdds-table--responsive' : ''}
+        ${compactDesign ? 'sdds-table--compact' : ''}
+        ${verticalDivider ? 'sdds-table--divider' : ''}
+        ${noMinWidth ? 'sdds-table--no-min-width' : ''}
+        ${responsiveDesign ? 'sdds-table--responsive' : ''}
     ">
     ${tableTitle && `<caption>${tableTitle}</caption>`}
     <thead>
@@ -155,7 +133,6 @@ const Template = ({ modeVariant, tableTitle, isCompact, dividers, noMinWidthArg,
       </tr>
     </tbody>
   </table>
-    `);
-export const Default = Template.bind({});
-Default.args = {};
-//# sourceMappingURL=native-table.stories.js.map
+    `);
+export const Default = Template.bind({});
+//# sourceMappingURL=native-table.stories.js.map

package/dist/collection/components/data-table/native-table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-table.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/native-table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,8BAA8B;EACrC,QAAQ,EAAE;IACR,UAAU,EAAE;MACV,IAAI,EAAE,aAAa;MACnB,WAAW,EAAE,0CAA0C;MACvD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,EAAE;SACZ;OACF;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,6DAA6D;MAC1E,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,KAAK;SACf;OACF;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,mBAAmB;MACzB,WAAW,EAAE,4DAA4D;MACzE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,KAAK;SACf;OACF;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,mCAAmC;MAChD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,eAAe,EAAE;MACf,IAAI,EAAE,kBAAkB;MACxB,WAAW,EACT,oHAAoH;MACtH,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,KAAK;SACf;OACF;KACF;IACD,aAAa,EAAE;MACb,IAAI,EAAE,kBAAkB;MACxB,WAAW,EACT,6JAA6J;MAC/J,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,KAAK;SACf;OACF;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,yKAAyK;MAC3K,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,OAAO;SACjB;OACF;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE;KACvC;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,yKAAyK;MAC3K,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,OAAO;SACjB;OACF;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE;KACvC;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,yKAAyK;MAC3K,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,OAAO;SACjB;OACF;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE;KACvC;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,UAAU,EAAE,cAAc;IAC1B,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,KAAK;IACpB,eAAe,EAAE,KAAK;IACtB,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;GACjB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,WAAW,EACX,UAAU,EACV,SAAS,EACT,QAAQ,EACR,aAAa,EACb,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,YAAY,GACb,EAAE,EAAE,CACH,iBAAiB,CAAC;;;UAGV,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;UAC5D,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE;UAChE,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;UACtC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;UACrC,aAAa,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;UAC/C,eAAe,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;;MAEnD,UAAU,IAAI,YAAY,UAAU,YAAY;;;cAGxC,YAAY,CAAC,CAAC,CAAC,iBAAiB,YAAY,IAAI,CAAC,CAAC,CAAC,EAAE;cACrD,YAAY,CAAC,CAAC,CAAC,iBAAiB,YAAY,IAAI,CAAC,CAAC,CAAC,EAAE;cACrD,YAAY,CAAC,CAAC,CAAC,iBAAiB,YAAY,IAAI,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;KAqB9D,CAAC,CAAC;AAEP,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Data Table/Native',\n  argTypes: {\n    tableTitle: {\n      name: 'Table title',\n      description: 'Text that appears in table caption area.',\n      control: {\n        type: 'text',\n      },\n      table: {\n        defaultValue: {\n          summary: '',\n        },\n      },\n    },\n    isCompact: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    dividers: {\n      name: 'Vertical dividers',\n      description: 'When enabled, table has vertical dividers between columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'The 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    responsiveTable: {\n      name: 'Responsive table',\n      description:\n        'Table takes 100% of available width. For column values less then 192px, \"No minimum width\" has to be enabled too. ',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    noMinWidthArg: {\n      name: 'No minimum width',\n      description:\n        'Resets min-width rule and enabled setting column width value less then 192px which is default one. When enabled, controls for columns width will show here.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    column1Width: {\n      name: 'Column 1 width',\n      description:\n        'Value of width for column 1. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidthArg', eq: true },\n    },\n    column2Width: {\n      name: 'Column 2 width',\n      description:\n        'Value of width for column 2. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidthArg', eq: true },\n    },\n    column3Width: {\n      name: 'Column 3 width',\n      description:\n        'Value of width for column 3. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidthArg', eq: true },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    tableTitle: 'Native table',\n    isCompact: false,\n    dividers: false,\n    noMinWidthArg: false,\n    responsiveTable: false,\n    column1Width: '',\n    column2Width: '',\n    column3Width: '',\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  tableTitle,\n  isCompact,\n  dividers,\n  noMinWidthArg,\n  responsiveTable,\n  column1Width,\n  column2Width,\n  column3Width,\n}) =>\n  formatHtmlPreview(`\n    <table class=\"\n        sdds-table\n        ${modeVariant === 'Primary' ? 'sdds-mode-variant-primary' : ''}\n        ${modeVariant === 'Secondary' ? 'sdds-mode-variant-secondary' : ''}\n        ${isCompact ? 'sdds-table--compact' : ''}\n        ${dividers ? 'sdds-table--divider' : ''}\n        ${noMinWidthArg ? 'sdds-table--no-min-width' : ''}\n        ${responsiveTable ? 'sdds-table--responsive' : ''}\n    \">\n    ${tableTitle && `<caption>${tableTitle}</caption>`}\n    <thead>\n      <tr>\n        <th ${column1Width ? `style=\"width: ${column1Width};\"` : ''}>Header</th>\n        <th ${column2Width ? `style=\"width: ${column2Width};\"` : ''}>Header</th>\n        <th ${column3Width ? `style=\"width: ${column3Width};\"` : ''}>Header</th>\n      </tr>\n    </thead>\n     <tbody>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n    </tbody>\n  </table>\n    `);\n\nexport const Default = Template.bind({});\nDefault.args = {};\n"]}
+{"version":3,"file":"native-table.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/native-table.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Data Table/Native',\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    compactDesign: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    responsiveDesign: {\n      name: 'Responsive table',\n      description: 'Enables table to take 100% of available width. For column values less than 192px, \"No minimum width\" has to be enabled too.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    tableTitle: {\n      name: 'Table title',\n      description: 'Sets text that appears in table caption area.',\n      control: {\n        type: 'text',\n      },\n    },\n    verticalDivider: {\n      name: 'Vertical dividers',\n      description: 'Enables vertical dividers between table columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    noMinWidth: {\n      name: 'No minimum width',\n      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    column1Width: {\n      name: 'Column 1 width',\n      description:'Value of width for column 1. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column2Width: {\n      name: 'Column 2 width',\n      description: 'Value of width for column 2. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column3Width: {\n      name: 'Column 3 width',\n      description: 'Value of width for column 3. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    responsiveDesign: false,\n    tableTitle: 'Native table',\n    verticalDivider: false,\n    noMinWidth: false,\n    column1Width: '',\n    column2Width: '',\n    column3Width: '',\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  compactDesign,\n  responsiveDesign,\n  tableTitle,\n  verticalDivider,\n  noMinWidth,\n  column1Width,\n  column2Width,\n  column3Width,\n}) =>\n  formatHtmlPreview(`\n    <table class=\"\n        sdds-table\n        ${modeVariant === 'Primary' ? 'sdds-mode-variant-primary' : ''}\n        ${modeVariant === 'Secondary' ? 'sdds-mode-variant-secondary' : ''}\n        ${compactDesign ? 'sdds-table--compact' : ''}\n        ${verticalDivider ? 'sdds-table--divider' : ''}\n        ${noMinWidth ? 'sdds-table--no-min-width' : ''}\n        ${responsiveDesign ? 'sdds-table--responsive' : ''}\n    \">\n    ${tableTitle && `<caption>${tableTitle}</caption>`}\n    <thead>\n      <tr>\n        <th ${column1Width ? `style=\"width: ${column1Width};\"` : ''}>Header</th>\n        <th ${column2Width ? `style=\"width: ${column2Width};\"` : ''}>Header</th>\n        <th ${column3Width ? `style=\"width: ${column3Width};\"` : ''}>Header</th>\n      </tr>\n    </thead>\n     <tbody>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n    </tbody>\n  </table>\n    `);\n\nexport const Default = Template.bind({});"]}