@scania/tegel 1.4.0 → 1.5.0

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

@@ -1,240 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import tdsTable from "./table/readme.md";
-import tdsTableToolbar from "./table-toolbar/readme.md";
-import tdsHeader from "./table-header/readme.md";
-import tdsHeaderCell from "./table-header-cell/readme.md";
-import tdsTableBody from "./table-body/readme.md";
-import tdsBodyRow from "./table-body-row/readme.md";
-import tdsBodyRowExpandable from "./table-body-row-expandable/readme.md";
-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,
-        },
-    },
-    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 design',
-            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 },
-            },
-        },
-        column1sortable: {
-            name: 'Column 1 is sortable',
-            description: 'Enables column 1 to be sorted alphabetically.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        column2sortable: {
-            name: 'Column 2 is sortable',
-            description: 'Enables column 2 to be sorted alphabetically.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        column3sortable: {
-            name: 'Column 3 is sortable',
-            description: 'Enables column 3 to be sorted alphabetically.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        column4sortable: {
-            name: 'Column 4 is sortable',
-            description: 'Enables column 4 to be sorted alphabetically.',
-            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,
-        column1sortable: true,
-        column2sortable: true,
-        column3sortable: true,
-        column4sortable: true,
-        verticalDivider: false,
-        noMinWidth: false,
-        column1Width: '',
-        column2Width: '',
-        column3Width: '',
-        column4Width: '',
-    },
-};
-const SortingTemplate = ({ modeVariant, compactDesign, responsiveDesign, column1sortable, column2sortable, column3sortable, column4sortable, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
-    <tds-table
-      table-id='tds-table-sorting-example'
-      vertical-dividers="${verticalDivider}"
-      compact-design="${compactDesign}"
-      responsive="${responsiveDesign}"
-      ${noMinWidth ? 'no-min-width' : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-      <tds-table-toolbar table-title="Sorting"></tds-table-toolbar>
-          <tds-table-header>
-              <tds-header-cell cell-key='truck' cell-value='Truck type' sortable="${column1sortable}" ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='driver' cell-value='Driver name' sortable="${column2sortable}" ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='country' cell-value='Country' sortable="${column3sortable}" ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='mileage' cell-value='Mileage' sortable="${column4sortable}" text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
-          </tds-table-header>
-          <tds-table-body>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-          </tds-table-body>
-  </tds-table>
-  <!-- Note: Code below is just for demo purposes -->
-  <div class="tds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
-  <p class="tds-u-mt0">Note: This box works only in "Canvas" tab.</p>
-    <h5 class="tds-u-mt0 tds-u-mb0">Event test box</h5>
-    <h6 class="tds-u-mt1 tds-u-mb0">Event name:</h6>
-    <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
-    <h6 class="tds-u-mt0 tds-u-mb0">Events value (aka detail)</h6>
-    <br>
-    <textarea id="event-value-textarea" rows="4" cols="50" readonly></textarea>
-  </div>
-  
-  
-  <script>    
-    
-    
-  window.addEventListener('tdsSort', e => {
-    document.getElementById('event-name-textarea').value = e.type;
-    document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
-  });
-  </script>`);
-export const Sorting = SortingTemplate.bind({});

package/dist/collection/components/tabs/folder-tabs/folder-tabs.stories.js

@@ -1,105 +0,0 @@
-import readme from "./readme.md";
-import readmeItem from "./folder-tab/readme.md";
-import { ComponentsFolder } from "../../../utils/constants";
-import formatHtmlPreview from "../../../stories/formatHtmlPreview";
-export default {
-    title: `${ComponentsFolder}/Tabs`,
-    parameters: {
-        notes: {
-            'Folder Tabs': readme,
-            'Folder Tab': readmeItem,
-        },
-        backgrounds: { default: 'white' },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        modeVariant: {
-            name: 'Mode variant',
-            description: 'Mode variation 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' },
-            },
-        },
-        defaultSelectedIndex: {
-            name: 'Default selected index',
-            description: 'Sets the default selected Tab, if this is used the Tab changes will be done automatically.',
-            control: {
-                type: 'radio',
-            },
-            options: ['None', 0, 1, 2, 3],
-            table: {
-                defaultValue: { summary: '0' },
-            },
-        },
-        selectedIndex: {
-            name: 'Selected index',
-            description: 'Sets the selected Tab, if this is used the Tab changes has to be handled by the user.',
-            control: {
-                type: 'radio',
-            },
-            options: ['None', 0, 1, 2, 3],
-            if: { arg: 'defaultSelectedIndex', eq: 'None' },
-        },
-        backgrounds: {
-            table: {
-                disable: true,
-            },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        defaultSelectedIndex: 'None',
-        selectedIndex: 'None',
-    },
-};
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-    <tds-folder-tabs
-      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      <tds-folder-tab>
-        <button>First tab</button>
-      </tds-folder-tab>
-      <tds-folder-tab>
-        <button>Second tab is much longer</button>
-      </tds-folder-tab>
-      <tds-folder-tab>
-        <button>Third tab</button>
-      </tds-folder-tab>
-      <tds-folder-tab disabled>
-        <button>Fourth tab</button>
-      </tds-folder-tab>
-    </tds-folder-tabs>
-
-    <!-- Demo container. -->
-    <div class="demo-container">
-      <h4 class="tds-headline-04">Selected tab index: <span class="selectedTabIndex"></span></h4>
-    </div>
-    
-    <!-- Script tag with eventlistener for demo purposes. -->
-    <script>
-    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-    tabs = document.querySelector('tds-folder-tabs');
-  
-    tabs.addEventListener('tdsChange', (event) => {
-      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-      console.log(event)
-    })
-    </script>
-`);
-export const FolderTabs = Template.bind({});

package/dist/collection/components/tabs/inline-tabs/inline-tabs.stories.js

@@ -1,99 +0,0 @@
-import formatHtmlPreview from "../../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import readmeTab from "./inline-tab/readme.md";
-import { ComponentsFolder } from "../../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Tabs`,
-    parameters: {
-        notes: {
-            'Inline Tabs': readme,
-            'Inline Tab': readmeTab,
-        },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        modeVariant: {
-            name: 'Mode variant',
-            description: 'Mode variation 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' },
-            },
-        },
-        defaultSelectedIndex: {
-            name: 'Default selected index',
-            description: 'Sets the default selected Tab, if this is used the Tab changes will be done automatically.',
-            control: {
-                type: 'radio',
-            },
-            options: ['None', 0, 1, 2, 3],
-            table: {
-                defaultValue: { summary: '0' },
-            },
-        },
-        selectedIndex: {
-            name: 'Selected index',
-            description: 'Sets the selected Tab, if this is used the Tab changes has to be handled by the user.',
-            control: {
-                type: 'radio',
-            },
-            options: ['None', 0, 1, 2, 3],
-            if: { arg: 'defaultSelectedIndex', eq: 'None' },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        defaultSelectedIndex: 'None',
-        selectedIndex: 'None',
-    },
-};
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-  <tds-inline-tabs
-    ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-    ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-    <tds-inline-tab>
-      <button>First tab</button>
-    </tds-inline-tab>
-    <tds-inline-tab>
-      <button>Second tab is much longer</button>
-    </tds-inline-tab>
-    <tds-inline-tab>
-      <button>Third tab</button>
-    </tds-inline-tab>
-    <tds-inline-tab disabled>
-      <button>Fourth tab</button>
-    </tds-inline-tab>
-   </tds-inline-tabs>
-
-   <!-- Demo container. -->
-   <div class="demo-container">
-     <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
-   </div>
-
-   <!-- Script tag with eventlistener for demo purposes. -->
-   <script>
-   selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-   tabs = document.querySelector('tds-inline-tabs');
-   
-   tabs.addEventListener('tdsChange', (event) => {
-     selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-     console.log(event)
-    })
-   </script>
-`);
-export const InlineTabs = Template.bind({});

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js

@@ -1,101 +0,0 @@
-import formatHtmlPreview from "../../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import readmeTab from "./navigation-tab/readme.md";
-import { ComponentsFolder } from "../../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Tabs`,
-    parameters: {
-        notes: {
-            'Navigation Tabs': readme,
-            'Navigation Tab': readmeTab,
-        },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        modeVariant: {
-            name: 'Mode variant',
-            description: 'Mode variation 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' },
-            },
-        },
-        defaultSelectedIndex: {
-            name: 'Default selected index',
-            description: 'Sets the default selected Tab, if this is used the Tab changes will be done automatically.',
-            control: {
-                type: 'radio',
-            },
-            options: ['None', 0, 1, 2, 3],
-            table: {
-                defaultValue: { summary: '0' },
-            },
-        },
-        selectedIndex: {
-            name: 'Selected index',
-            description: 'Sets the selected Tab, if this is used the Tab changes has to be handled by the user.',
-            control: {
-                type: 'radio',
-            },
-            options: ['None', 0, 1, 2, 3],
-            if: { arg: 'defaultSelectedIndex', eq: 'None' },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        defaultSelectedIndex: 'None',
-        selectedIndex: 'None',
-    },
-};
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-    <tds-navigation-tabs
-      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? ` mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-      <tds-navigation-tab>
-        <button>First tab</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab>
-        <button>Second tab is much longer</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab>
-        <button>Third tab</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab disabled>
-        <button>Fourth tab</button>
-      </tds-navigation-tab>
-    </tds-navigation-tabs>
-
-    <!-- Demo container. -->
-    <div class="demo-container">
-      <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
-    </div>
- 
-    <!-- Script tag with eventlistener for demo purposes. -->
-    <script>
-    selectedTab = document.getElementsByClassName('selectedTab')[0]
-    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-    tabs = document.querySelector('tds-navigation-tabs');
-    
-    tabs.addEventListener('tdsChange', (event) => {
-      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-      console.log(event)
-    })
-    </script>
-    `);
-export const NavigationTabs = Template.bind({});