@scania/tegel 0.0.51 → 0.0.52

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

@@ -1,127 +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: {
-    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
+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-icon notification"></i>'
+    ${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] : ''} ${activeValue} ${sizeValue}">
-      ${icon
+      ${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/data-table/native-table.stories.js

@@ -1,102 +1,102 @@
-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: '',
-  },
-};
+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
@@ -133,6 +133,6 @@ const Template = ({ modeVariant, compactDesign, responsiveDesign, tableTitle, ve
       </tr>
     </tbody>
   </table>
-    `);
-export const Default = Template.bind({});
-//# sourceMappingURL=native-table.stories.js.map
+    `);
+export const Default = Template.bind({});
+//# sourceMappingURL=native-table.stories.js.map