@scania/tegel 0.0.7 → 0.0.8

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

@@ -1,207 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/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' },
-      },
-    },
-    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',
-    noMinWidth: false,
-    label: 'Label text',
-    helper: 'Helper text',
-    disabled: false,
-  },
-};
-const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, 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">
-
-    <sdds-datetime
-      id="datetime"
-      ${defaultValue !== 'None' ? `default-value="${getDefaultValue(defaultValue, type)}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      type="${typeLookup[type]}"
-      size="${sizeLookup[size]}"
-      state="${stateLookup[state]}"
-      ${disabled ? 'disabled' : ''}
-      ${noMinWidth ? 'no-min-width' : ''}
-      ${label ? `label="${label}" ` : ''}
-      ${helper ? `helper="${helper}" ` : ''}
-      >
-    </sdds-datetime>
-
-
-    <script>
-    /* DEMO Code: Used only for Storybook demo purposes */
-      datetimeElement = document.getElementById('storybook-datetime');
-      datetimeElement.addEventListener('sddsChange', (event) => {
-        console.log("Firing sddsChange: " + event.target.value);
-      });
-      datetimeElement.addEventListener('sddsFocus', (event) => {
-        console.log("Firing sddsFocus: " + event.target.value);
-      });
-      datetimeElement.addEventListener('sddsBlur', (event) => {
-        console.log("Firing sddsBlur: " + event.target.value);
-      });
-    </script>
-`);
-};
-export const Default = datetimeTemplate.bind({});
-Default.args = {};
-export const ErrorState = datetimeTemplate.bind({});
-ErrorState.args = {
-  state: 'Error',
-};
-export const Time = datetimeTemplate.bind({});
-Time.args = {
-  type: 'Time',
-};
-export const Date = datetimeTemplate.bind({});
-Date.args = {
-  type: 'Date',
-};

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

@@ -1,61 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/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;`}">
-    <sdds-divider orientation="${orientation.toLowerCase()}"></sdds-divider>
-  </div>
-`);
-export const WebComponent = Template.bind({});

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

@@ -1,130 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Divider',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-    ],
-  },
-  argTypes: {
-    orientation: {
-      name: 'Orientation',
-      description: 'Choose divider orientation.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Horizontal', 'Vertical'],
-    },
-    direction: {
-      name: 'Direction',
-      description: 'Sets the direction of the divider.',
-      control: {
-        type: 'select',
-      },
-      options: ['Top', 'Right', 'Bottom', 'Left'],
-    },
-    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',
-    direction: 'Top',
-    width: 150,
-    height: 150,
-  },
-};
-const Template = ({ orientation, width, height }) => {
-  const classLookup = {
-    Horizontal: `sdds-divider`,
-    Vertical: `sdds-divider-vertical`,
-  };
-  return formatHtmlPreview(`
-      <style>
-         ${height
-    ? `/* demo-div is for demonstration purposes only*/
-        .demo-div {
-          height: ${height}px;
-          width: 1px;
-          padding: 0px;
-        }`
-    : ''}    ${width
-    ? `/* demo-div is for demonstration purposes only*/
-            .demo-div {
-              width: ${width}px;
-              height: 1px;
-              padding: 0px;
-            }`
-    : ''}
-      </style>
-     
-      
-      <div
-  class="demo-div ${classLookup[orientation]}"></div>
-  `);
-};
-const BorderTemplate = ({ direction }) => {
-  const directionLookup = {
-    Top: 'top',
-    Right: 'right',
-    Bottom: 'bottom',
-    Left: 'left',
-  };
-  return formatHtmlPreview(`
-      <style>
-      #demo-wrapper{
-        padding: 50px;
-        background-color: var(--sdds-grey-958)
-      }
-       /* border-demo-div is for demonstration purposes only*/
-        .border-demo-div {
-          height: 200px;
-          width: 200px;
-          background-color: var(--sdds-grey-868);
-          color: var(--sdds-grey-50);
-          text-align: center;
-          padding: 10px;
-        }
-           
-      </style>
-     <div id= "demo-wrapper">
-      
-      <div
-  class="border-demo-div sdds-divider-border-${directionLookup[direction]}">
-  <H4>DEMO</H4></div></div>
-  `);
-};
-export const Native = Template.bind({});
-Native.argTypes = {
-  direction: { table: { disable: true } }
-};
-export const Border = BorderTemplate.bind({});
-Border.args = {
-  direction: 'Top'
-};
-Border.argTypes = {
-  orientation: { table: { disable: true } }
-};

package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js

@@ -1,182 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Dropdown Filter',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-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: 'Error state',
-      description: 'Puts the component in error state.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the dropdown.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    openDirection: {
-      name: 'Open direction',
-      description: 'Sets which direction the dropdown will open in.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Up', 'Down', 'Auto'],
-      table: {
-        defaultValue: { summary: 'auto' },
-      },
-    },
-    labelPosition: {
-      name: 'Label position',
-      description: 'Sets the label text position.',
-      control: {
-        type: 'radio',
-      },
-      options: ['No label', 'Outside'],
-      table: {
-        defaultValue: { summary: 'no-label' },
-      },
-    },
-    labelText: {
-      name: 'Label text',
-      description: 'Sets a label text to help describe what the dropdown contains.',
-      control: {
-        type: 'text',
-      },
-      if: { arg: 'labelPosition', neq: 'No label' },
-    },
-    placeholder: {
-      name: 'Placeholder',
-      description: 'Sets the placeholder text when no option is selected.',
-      control: {
-        type: 'text',
-      },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Sets a helper text to assist the user with additional information about the dropdown.',
-      control: {
-        type: 'text',
-      },
-    },
-    defaultOption: {
-      name: 'Default option',
-      description: 'Sets a pre-selected option and replaces the placeholder.',
-      control: {
-        type: 'radio',
-      },
-      options: ['No default', 'Option 1', 'Option 2', 'Option 3'],
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the dropdown.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    state: false,
-    size: 'Large',
-    openDirection: 'Auto',
-    labelPosition: 'No label',
-    labelText: 'Label text',
-    placeholder: 'Placeholder',
-    helper: '',
-    defaultOption: 'Option 1',
-    disabled: false,
-  },
-};
-const FilterTemplate = ({ modeVariant, state = false, size, openDirection, labelPosition, labelText, placeholder, helper = '', defaultOption, disabled = false, }) => {
-  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
-  const labelPosLookup = { 'No label': 'no-label', 'Outside': 'outside' };
-  const defaultOptionLookup = {
-    'No default': 'no-default',
-    'Option 1': 'option-1',
-    'Option 2': 'option-2',
-    'Option 3': 'option-3',
-  };
-  return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-      .demo-wrapper {
-        width: 300px;
-        height:200px;
-        }
-    </style>
-
-    <div class="demo-wrapper">
-      <sdds-dropdown-filter
-      ${modeVariant !== 'Inherit from parent'
-    ? `mode-variant="${modeVariant.toLowerCase()}".sdds-option-label {
-        `
-    : ''}
-        id="sdds-dropdown-filter"
-        size="${sizeLookup[size]}"
-        placeholder="${placeholder}"
-        disabled="${disabled}"
-        open-direction="${openDirection.toLowerCase()}"
-        label-position="${labelPosLookup[labelPosition]}"
-        ${labelPosLookup[labelPosition] !== 'no-label' ? `label="${labelText}"` : ''}
-        ${helper !== '' ? `helper="${helper}"` : ''}
-        state="${state}"
-        data='[
-          {
-            "value": "option-1",
-            "label":"Jakarta"
-          },
-          {
-            "value":"option-2"
-            ,"label":"Stockholm"
-          },
-          {
-            "value":"option-3",
-            "label":"Barcelona"
-          }
-        ]'
-        default-option="${defaultOptionLookup[defaultOption]}">
-      </sdds-dropdown-filter>
-    </div>
-  `);
-};
-export const Default = FilterTemplate.bind({});

package/dist/collection/components/dropdown/dropdown-native.stories.js

@@ -1,103 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Dropdown',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-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: 'Error state',
-      description: 'Puts the component in error state.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the dropdown.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small'],
-    },
-    label: {
-      name: 'Label text',
-      description: 'Sets a label text to help describe what the dropdown contains.',
-      control: {
-        type: 'text',
-      },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Sets a helper text to assist the user with additional information about the dropdown.',
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the dropdown.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    state: false,
-    size: 'Large',
-    label: '',
-    helper: '',
-    disabled: false,
-  },
-};
-const NativeTemplate = ({ modeVariant, state, size, label, helper, disabled }) => {
-  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
-  return formatHtmlPreview(`
-  <style>
-/* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 300px;
-  }
-</style>
-
-<div class="demo-wrapper">
-       <div class="sdds-dropdown ${size !== 'Large' ? `sdds-dropdown-${sizeLookup[size]}` : ''} ${state ? 'sdds-dropdown--error' : ''} ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}">
-       ${label !== '' ? `<span class="sdds-dropdown-label-outside">${label}</span> ` : ''}
-       <select
-       name="nativeDropdown"
-       id="mySelect"
-       ${disabled ? `disabled` : ''} >
-           <option value="truck">Truck</option>
-           <option value="bus">Bus</option>
-           <option value="car">Car</option>
-         </select>
-         ${helper !== '' ? `<span class="sdds-dropdown-helper">${helper}</span>` : ''}
-       </div>
-     </div>
- `);
-};
-export const Native = NativeTemplate.bind({});