@scania/tegel 1.3.3 → 1.4.0

package/dist/collection/components/table/table-component-custom-width.stories.js

@@ -10,113 +10,113 @@ import tdsBodyCell from "./table-body-cell/readme.md";
 import tdsTableFooter from "./table-footer/readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
-  title: `${ComponentsFolder}/Table`,
-  parameters: {
-    notes: {
-      'tds-table': tdsTable,
-      'tds-table-toolbar': tdsTableToolbar,
-      'tds-header': tdsHeader,
-      'tds-header-cell': tdsHeaderCell,
-      'tds-table-body': tdsTableBody,
-      'tds-body-row': tdsBodyRow,
-      'tds-body-row-expandable': tdsBodyRowExpandable,
-      'tds-body-cell': tdsBodyCell,
-      'tds-table-footer': tdsTableFooter,
+    title: `${ComponentsFolder}/Table`,
+    parameters: {
+        notes: {
+            'tds-table': tdsTable,
+            'tds-table-toolbar': tdsTableToolbar,
+            'tds-header': tdsHeader,
+            'tds-header-cell': tdsHeaderCell,
+            'tds-table-body': tdsTableBody,
+            'tds-body-row': tdsBodyRow,
+            'tds-body-row-expandable': tdsBodyRowExpandable,
+            'tds-body-cell': tdsBodyCell,
+            'tds-table-footer': tdsTableFooter,
+        },
     },
-  },
-  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' },
-      },
+    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 },
+            },
+        },
+        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',
+            },
+        },
+        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 },
+        },
+        column4Width: {
+            name: 'Column 4 width',
+            description: 'Value of width for column 4. 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 },
+        },
     },
-    compactDesign: {
-      name: 'Compact design',
-      description: 'Enables compact design of the Table, rows with less height.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
+    args: {
+        modeVariant: 'Inherit from parent',
+        compactDesign: false,
+        responsiveDesign: false,
+        verticalDivider: true,
+        noMinWidth: true,
+        column1Width: '321px',
+        column2Width: '400px',
+        column3Width: '150px',
+        column4Width: '110px',
     },
-    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 },
-      },
-    },
-    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',
-      },
-    },
-    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 },
-    },
-    column4Width: {
-      name: 'Column 4 width',
-      description: 'Value of width for column 4. 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,
-    verticalDivider: true,
-    noMinWidth: true,
-    column1Width: '321px',
-    column2Width: '400px',
-    column3Width: '150px',
-    column4Width: '110px',
-  },
 };
 const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
   <tds-table

package/dist/collection/components/table/table-component-expandable-rows.stories.js

@@ -10,113 +10,113 @@ import tdsBodyCell from "./table-body-cell/readme.md";
 import tdsTableFooter from "./table-footer/readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
-  title: `${ComponentsFolder}/Table`,
-  parameters: {
-    notes: {
-      'tds-table': tdsTable,
-      'tds-table-toolbar': tdsTableToolbar,
-      'tds-header': tdsHeader,
-      'tds-header-cell': tdsHeaderCell,
-      'tds-table-body': tdsTableBody,
-      'tds-body-row': tdsBodyRow,
-      'tds-body-row-expandable': tdsBodyRowExpandable,
-      'tds-body-cell': tdsBodyCell,
-      'tds-table-footer': tdsTableFooter,
+    title: `${ComponentsFolder}/Table`,
+    parameters: {
+        notes: {
+            'tds-table': tdsTable,
+            'tds-table-toolbar': tdsTableToolbar,
+            'tds-header': tdsHeader,
+            'tds-header-cell': tdsHeaderCell,
+            'tds-table-body': tdsTableBody,
+            'tds-body-row': tdsBodyRow,
+            'tds-body-row-expandable': tdsBodyRowExpandable,
+            'tds-body-cell': tdsBodyCell,
+            'tds-table-footer': tdsTableFooter,
+        },
     },
-  },
-  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' },
-      },
+    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 },
+            },
+        },
+        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',
+            },
+        },
+        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 },
+        },
+        column4Width: {
+            name: 'Column 4 width',
+            description: 'Value of width for column 4. 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 },
+        },
     },
-    compactDesign: {
-      name: 'Compact design',
-      description: 'Enables compact design of the Table, rows with less height.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
+    args: {
+        modeVariant: 'Inherit from parent',
+        compactDesign: false,
+        responsiveDesign: false,
+        verticalDivider: false,
+        noMinWidth: false,
+        column1Width: '',
+        column2Width: '',
+        column3Width: '',
+        column4Width: '',
     },
-    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 },
-      },
-    },
-    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',
-      },
-    },
-    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 },
-    },
-    column4Width: {
-      name: 'Column 4 width',
-      description: 'Value of width for column 4. 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,
-    verticalDivider: false,
-    noMinWidth: false,
-    column1Width: '',
-    column2Width: '',
-    column3Width: '',
-    column4Width: '',
-  },
 };
 const ExpandableRowTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
   <tds-table

package/dist/collection/components/table/table-component-filtering.stories.js

@@ -10,113 +10,113 @@ import tdsBodyCell from "./table-body-cell/readme.md";
 import tdsTableFooter from "./table-footer/readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
-  title: `${ComponentsFolder}/Table`,
-  parameters: {
-    notes: {
-      'tds-table': tdsTable,
-      'tds-table-toolbar': tdsTableToolbar,
-      'tds-header': tdsHeader,
-      'tds-header-cell': tdsHeaderCell,
-      'tds-table-body': tdsTableBody,
-      'tds-body-row': tdsBodyRow,
-      'tds-body-row-expandable': tdsBodyRowExpandable,
-      'tds-body-cell': tdsBodyCell,
-      'tds-table-footer': tdsTableFooter,
+    title: `${ComponentsFolder}/Table`,
+    parameters: {
+        notes: {
+            'tds-table': tdsTable,
+            'tds-table-toolbar': tdsTableToolbar,
+            'tds-header': tdsHeader,
+            'tds-header-cell': tdsHeaderCell,
+            'tds-table-body': tdsTableBody,
+            'tds-body-row': tdsBodyRow,
+            'tds-body-row-expandable': tdsBodyRowExpandable,
+            'tds-body-cell': tdsBodyCell,
+            'tds-table-footer': tdsTableFooter,
+        },
     },
-  },
-  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' },
-      },
+    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 },
+            },
+        },
+        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',
+            },
+        },
+        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 },
+        },
+        column4Width: {
+            name: 'Column 4 width',
+            description: 'Value of width for column 4. 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 },
+        },
     },
-    compactDesign: {
-      name: 'Compact design',
-      description: 'Enables compact design of the Table, rows with less height.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
+    args: {
+        modeVariant: 'Inherit from parent',
+        compactDesign: false,
+        responsiveDesign: true,
+        verticalDivider: false,
+        noMinWidth: false,
+        column1Width: '',
+        column2Width: '',
+        column3Width: '',
+        column4Width: '',
     },
-    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 },
-      },
-    },
-    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',
-      },
-    },
-    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 },
-    },
-    column4Width: {
-      name: 'Column 4 width',
-      description: 'Value of width for column 4. 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: true,
-    verticalDivider: false,
-    noMinWidth: false,
-    column1Width: '',
-    column2Width: '',
-    column3Width: '',
-    column4Width: '',
-  },
 };
 const FilteringTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
    <tds-table