@scania/tegel 1.4.0 → 1.5.0

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

@@ -1,93 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Checkbox`,
-    parameters: {
-        notes: readme,
-        layout: 'centered',
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-            },
-        ],
-    },
-    argTypes: {
-        label: {
-            name: 'Label text',
-            description: 'Sets the label of the component.',
-            control: {
-                type: 'text',
-            },
-        },
-        checked: {
-            name: 'Checked',
-            description: 'Checks the Checkbox.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        indeterminate: {
-            name: 'Indeterminate',
-            description: 'Sets the checkbox in a intederminte state.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the Checkbox.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        label: 'Label',
-        checked: false,
-        disabled: false,
-        indeterminate: false,
-    },
-};
-const Template = ({ label, checked, disabled, indeterminate }) => formatHtmlPreview(`
-    <tds-checkbox
-        ${checked ? 'checked' : ''}
-        ${disabled ? 'disabled' : ''}
-        ${indeterminate ? 'indeterminate' : ''}
-        value="checkbox-1"
-        checkbox-id="first-checkbox"
-        >
-        <div slot="label">${label}</div>
-    </tds-checkbox>
-    
-    <!-- Script tag with event listener for demo purposes. -->
-    <script>
-      checkboxElement = document.querySelector("tds-checkbox");
-      checkboxElement.addEventListener("tdsChange", (event) => {
-        console.log("Checkbox with id: ", event.detail.checkboxId, " is ", event.detail.checked);
-      });
-      checkboxElement.addEventListener("tdsFocus", (event) => {
-        console.log(event);
-      });
-      checkboxElement.addEventListener("tdsBlur", (event) => {
-        console.log(event);
-      });
-    </script>
-  `);
-export const Default = Template.bind({});

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

@@ -1,230 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Chip`,
-    parameters: {
-        notes: readme,
-        layout: 'centered',
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-            },
-        ],
-    },
-    argTypes: {
-        inputType: {
-            name: 'Type',
-            description: 'Sets the Chip type.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Button', 'Radio', 'Checkbox'],
-            table: {
-                defaultValue: { summary: 'button' },
-            },
-        },
-        size: {
-            name: 'Size',
-            description: 'Sets the Chip size.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Small'],
-            table: {
-                defaultValue: { summary: 'Large' },
-            },
-        },
-        label: {
-            name: 'Label text',
-            description: 'Sets the label of the component.',
-            control: {
-                type: 'text',
-            },
-        },
-        icon: {
-            name: 'Icon',
-            description: 'Adds an icon to the component.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        iconPosition: {
-            name: 'Icon Position',
-            description: 'Sets the icon position.',
-            if: { arg: 'icon', eq: true },
-            control: {
-                type: 'radio',
-            },
-            options: ['Prefix', 'Suffix'],
-            table: {
-                defaultValue: { summary: 'Prefix' },
-            },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the checkbox.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                // TODO: Remove line below after we make design for disabled state, it hides control
-                disable: true,
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        inputType: 'Button',
-        size: 'Large',
-        label: 'Label',
-        icon: false,
-        iconPosition: 'Prefix',
-        disabled: false,
-    },
-};
-const Template = ({ inputType, size, label, icon, iconPosition }) => {
-    const sizeLookUp = {
-        Large: 'lg',
-        Small: 'sm',
-    };
-    return formatHtmlPreview(`
-  ${inputType === 'Button'
-        ? `<tds-chip type="button" size="${sizeLookUp[size]}">        
-            ${icon && iconPosition === 'Prefix'
-            ? '<tds-icon slot="prefix" name="star" size="16px"></tds-icon>'
-            : ''}           
-            <span slot="label">                
-                ${label}                
-            </span>         
-            ${icon && iconPosition === 'Suffix'
-            ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-            : ''}          
-        </tds-chip>
-
-        <!-- Script tag for demo purposes -->
-        <script>
-          document.addEventListener('tdsClick', (event)=>{
-          console.log(event)
-          })
-        </script>`
-        : ''}
-  ${inputType === 'Checkbox'
-        ? ` <style>
-      /* demo-wrapper and demo-styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        gap: 8px;
-      }
-    </style>
-
-    <div class="demo-wrapper">
-      <tds-chip type="checkbox" size="${sizeLookUp[size]}" checked value="checkbox-1-value">        
-          ${icon && iconPosition === 'Prefix'
-            ? '<tds-icon slot="prefix" name="heart" size="16px"></tds-icon>'
-            : ''}
-          <span slot="label">
-            ${label} 1
-          </span>
-          ${icon && iconPosition === 'Suffix'
-            ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-            : ''}        
-      </tds-chip>
-      <tds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-2-value">
-        ${icon && iconPosition === 'Prefix'
-            ? '<tds-icon slot="prefix" name="email" size="16px"></tds-icon>'
-            : ''}
-          <span slot="label">
-            ${label} 2
-          </span>
-          ${icon && iconPosition === 'Suffix'
-            ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-            : ''} 
-      </tds-chip>
-      <tds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-3-value">
-        ${icon && iconPosition === 'Prefix'
-            ? '<tds-icon slot="prefix" name="smartphone" size="16px"></tds-icon>'
-            : ''}
-          <span slot="label">
-            ${label} 3
-          </span>
-          ${icon && iconPosition === 'Suffix'
-            ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-            : ''} 
-      </tds-chip>
-    </div>
-
-    <!-- Script tag for demo purposes -->
-    <script>
-      document.addEventListener('tdsChange', (event)=>{
-          console.log(event)
-      })
-    </script>`
-        : ''}
-  ${inputType === 'Radio'
-        ? ` <style>
-      /* demo-wrapper and demo-styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        gap: 8px;
-      }
-    </style>
-
-    <div class="demo-wrapper">
-      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-1-value">
-        ${icon && iconPosition === 'Prefix'
-            ? '<tds-icon slot="prefix" name="sorting" size="16px"></tds-icon>'
-            : ''}
-          <span slot="label">
-            ${label} 1
-          </span>
-          ${icon && iconPosition === 'Suffix'
-            ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-            : ''} 
-      </tds-chip>
-      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" checked value="radio-2-value">
-        ${icon && iconPosition === 'Prefix'
-            ? '<tds-icon slot="prefix" name="cart" size="16px"></tds-icon>'
-            : ''}
-          <span slot="label">
-            ${label} 2
-          </span>
-          ${icon && iconPosition === 'Suffix'
-            ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-            : ''} 
-      </tds-chip>
-      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-3-value">
-        ${icon && iconPosition === 'Prefix'
-            ? '<tds-icon slot="prefix" name="star" size="16px"></tds-icon>'
-            : ''}
-          <span slot="label">
-            ${label} 3
-          </span>
-          ${icon && iconPosition === 'Suffix'
-            ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-            : ''} 
-      </tds-chip>
-    </div>
-
-    <!-- Script tag for demo purposes -->
-    <script>
-      document.addEventListener('tdsChange', (event)=>{
-          console.log(event)
-      })
-    </script>`
-        : ''}
-
-
-  `);
-};
-export const Default = Template.bind({});

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

@@ -1,219 +0,0 @@
-import readme from "./readme.md";
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Datetime`,
-    parameters: {
-        layout: 'centered',
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
-            },
-        ],
-    },
-    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' },
-            },
-        },
-        state: {
-            name: 'State',
-            description: 'Switches between success and error state.',
-            control: {
-                type: 'radio',
-            },
-            options: ['None', 'Success', 'Error'],
-        },
-        type: {
-            name: 'Type',
-            description: 'Sets the field to display date, time or both.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Datetime', 'Date', 'Time'],
-            table: {
-                defaultValue: { summary: 'datetime-local' },
-            },
-        },
-        size: {
-            name: 'Size',
-            description: 'Switches between different sizes.',
-            control: {
-                type: 'radio',
-                // todo: make consistent with other sizes, for example 'xs', 'sm', etc
-            },
-            options: ['Large', 'Medium', 'Small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-        defaultValue: {
-            name: 'Default value',
-            description: 'Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
-            control: {
-                type: 'radio',
-            },
-            options: ['None', 'Custom'],
-            table: {
-                defaultValue: { summary: 'none' },
-            },
-        },
-        minValue: {
-            description: 'Sets min value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
-            name: 'Min value',
-            control: {
-                type: 'text',
-            },
-            table: {
-                defaultValue: { summary: undefined },
-            },
-        },
-        maxValue: {
-            description: 'Sets max value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
-            name: 'Max value',
-            control: {
-                type: 'text',
-            },
-            table: {
-                defaultValue: { summary: undefined },
-            },
-        },
-        noMinWidth: {
-            name: 'No minimum width',
-            description: 'Enables component to shrink below 208px which is the default width.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        label: {
-            name: 'Label text',
-            description: 'Sets the label text.',
-            control: {
-                type: 'text',
-            },
-        },
-        helper: {
-            name: 'Helper text',
-            description: 'Sets the helper text.',
-            control: {
-                type: 'text',
-            },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the component.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        state: 'None',
-        type: 'Datetime',
-        size: 'Large',
-        defaultValue: 'None',
-        minValue: '',
-        maxValue: '',
-        noMinWidth: false,
-        label: 'Label text',
-        helper: 'Helper text',
-        disabled: false,
-    },
-};
-const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, minValue, maxValue, noMinWidth, label, helper, disabled, }) => {
-    const typeLookup = {
-        Datetime: 'datetime-local',
-        Date: 'date',
-        Time: 'time',
-    };
-    const sizeLookup = {
-        Large: 'lg',
-        Medium: 'md',
-        Small: 'sm',
-    };
-    const stateLookup = {
-        None: 'none',
-        Success: 'success',
-        Error: 'error',
-    };
-    const getDefaultValue = (value, componentType) => {
-        if (value === 'Custom') {
-            switch (componentType) {
-                case 'Datetime':
-                    return '1891-01-01T12:30';
-                case 'Date':
-                    return '1891-01-01';
-                case 'Time':
-                    return '12:30';
-                default:
-                    return 'Invalid type';
-            }
-        }
-        else
-            return false;
-    };
-    return formatHtmlPreview(`
-    <style>
-        /* Note: Demo classes used here are just for demo purposes in Storybook */
-        .demo-wrapper {
-            width: 180px;
-        }
-    </style>
-
-  <div class="demo-wrapper">
-        
-    <tds-datetime
-      id="datetime"
-      ${defaultValue !== 'None' ? `default-value="${getDefaultValue(defaultValue, type)}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      type="${typeLookup[type]}"      
-      ${minValue ? `min=${minValue}` : ''}
-      ${maxValue ? `max=${maxValue}` : ''}
-      size="${sizeLookup[size]}"
-      state="${stateLookup[state]}"
-      ${disabled ? 'disabled' : ''}
-      ${noMinWidth ? 'no-min-width' : ''}
-      ${label ? `label="${label}" ` : ''}
-      ${helper ? `helper="${helper}" ` : ''}
-      >
-    </tds-datetime>
-  </div>
-
-    <script>
-    /* DEMO Code: Used only for Storybook demo purposes */
-      datetimeElement = document.querySelector('tds-datetime');
-      datetimeElement.addEventListener('tdsChange', (event) => {
-        console.log(event);
-      });
-      datetimeElement.addEventListener('tdsFocus', (event) => {
-        console.log(event);
-      });
-      datetimeElement.addEventListener('tdsBlur', (event) => {
-        console.log(event);
-      });
-    </script>
-`);
-};
-export const Default = datetimeTemplate.bind({});

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

@@ -1,62 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Divider`,
-    parameters: {
-        layout: 'centered',
-        notes: { Divider: readme },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
-            },
-        ],
-    },
-    argTypes: {
-        orientation: {
-            name: 'Orientation',
-            description: 'Choose Divider orientation.',
-            control: {
-                type: 'radio',
-                options: ['Horizontal', 'Vertical'],
-            },
-            table: {
-                defaultValue: { summary: 'horizontal' },
-            },
-        },
-        width: {
-            name: 'Width',
-            description: 'Sets the Divider width.',
-            control: {
-                type: 'number',
-            },
-            if: { arg: 'orientation', eq: 'Horizontal' },
-        },
-        height: {
-            name: 'Height',
-            description: 'Sets the Divider height.',
-            control: {
-                type: 'number',
-            },
-            if: { arg: 'orientation', eq: 'Vertical' },
-        },
-    },
-    args: {
-        orientation: 'Horizontal',
-        width: 150,
-        height: 150,
-    },
-};
-const Template = ({ orientation, width, height }) => formatHtmlPreview(`
-  <div style="${orientation === 'Horizontal' ? `width: ${width}px;` : `height: ${height}px;`}">
-    <tds-divider orientation="${orientation.toLowerCase()}"></tds-divider>
-  </div>
-`);
-export const Default = Template.bind({});