@scania/tegel 0.0.1-beta.1 → 0.0.1-beta.10

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

@@ -1,130 +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: {
-    size: {
-      name: 'Size',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small'],
-      description: 'Size of the dropdown',
-    },
-    placeholder: {
-      name: 'Placeholder',
-      type: 'string',
-      description: 'Placeholder text when no option is selected',
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the component',
-      control: {
-        type: 'boolean',
-      },
-    },
-    helper: {
-      name: 'Helper text',
-      control: {
-        type: 'text',
-      },
-      description: 'Helper text assists the user with additional information about the dropdown',
-    },
-    defaultOption: {
-      description: 'Sets a pre-selected option and replaces placeholder',
-      name: 'Default option',
-      control: {
-        type: 'radio',
-      },
-      options: ['No default', 'Option 1', 'Option 2', 'Option 3'],
-    },
-    openDirection: {
-      name: 'Open direction',
-      description: 'The direction the dropdown will open.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Up', 'Down', 'Auto'],
-      table: {
-        summary: {
-          defaultValue: 'auto',
-        },
-      },
-    },
-  },
-  args: {
-    size: 'Large',
-    placeholder: 'Placeholder',
-    disabled: false,
-    helper: '',
-    defaultOption: 'Option 1',
-    state: 'Default',
-    openDirection: 'Auto',
-  },
-};
-const FilterTemplate = ({ size, disabled = false, helper = '', label, state = 'default', placeholder, labelPosition, defaultOption, openDirection, }) => {
-  const stateValue = state === 'Error' ? 'error' : 'default';
-  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
-  const labelPosLookup = { None: 'no-default', 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
-        id="sdds-dropdown-filter"
-        size="${sizeLookup[size]}"
-        placeholder="${placeholder}"
-        disabled="${disabled}"
-        open-direction="${openDirection.toLowerCase()}"
-        label-position="${labelPosLookup[labelPosition]}"
-        ${labelPosLookup[labelPosition] !== 'no-default' ? `label="${label}"` : ''}
-        ${helper !== '' ? `helper="${helper}"` : ''}
-        state="${stateValue}"
-        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,90 +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: {
-    label: {
-      name: 'Label',
-      type: 'string',
-      description: 'Label text helps to describe what the dropdown contains',
-    },
-    size: {
-      name: 'Size',
-      description: 'Size of the dropdown',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small'],
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the component',
-      control: {
-        type: 'boolean',
-      },
-    },
-    state: {
-      name: 'State',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Error'],
-      description: 'Support error state',
-    },
-    helper: {
-      name: 'Helper text',
-      control: {
-        type: 'text',
-      },
-      description: 'Helper text assists the user with additional information about the dropdown',
-    },
-  },
-  args: {
-    label: '',
-    size: 'Large',
-    disabled: false,
-    state: 'Default',
-    helper: '',
-  },
-};
-const NativeTemplate = ({ disabled, size, helper, label, state }) => {
-  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 === 'Error' ? 'sdds-dropdown--error' : ''}" >
-       ${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({});

package/dist/collection/components/dropdown/dropdown-wc-default.stories.js

@@ -1,151 +0,0 @@
-import readme from './readme.md';
-import readmeOption from './dropdown-option/readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Dropdown',
-  parameters: {
-    layout: 'centered',
-    notes: { 'Dropdown': readme, 'Dropdown option': readmeOption },
-    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: {
-    size: {
-      name: 'Size',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small'],
-      description: 'Size of the dropdown',
-    },
-    placeholder: {
-      name: 'Placeholder',
-      type: 'string',
-      description: 'Placeholder text when no option is selected',
-    },
-    labelPosition: {
-      name: 'Label position',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Inside', 'Outside'],
-      description: 'Label text position',
-    },
-    labelText: {
-      name: 'Label text',
-      control: 'text',
-      description: 'Label text helps to describe what the dropdown contains',
-      if: { arg: 'labelPosition', neq: 'None' },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the component',
-      control: {
-        type: 'boolean',
-      },
-    },
-    state: {
-      name: 'State',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Error'],
-      description: 'Support error state',
-    },
-    helper: {
-      name: 'Add helper text',
-      control: 'boolean',
-      description: 'Adds a helper text.',
-    },
-    helperText: {
-      name: 'Helper text',
-      description: 'Helper text assists the user with additional information about the dropdown',
-      control: 'text',
-      if: { arg: 'helper', eq: true },
-    },
-    defaultOption: {
-      if: { arg: 'type', neq: 'Multiselect' },
-      name: 'Default option',
-      description: 'Sets a pre-selected option and replaces placeholder',
-      control: {
-        type: 'radio',
-      },
-      options: ['No default', 'Option 1', 'Option 2', 'Option 3'],
-    },
-    openDirection: {
-      name: 'Open direction',
-      description: 'The direction the dropdown will open.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Up', 'Down', 'Auto'],
-      table: {
-        summary: {
-          defaultValue: 'auto',
-        },
-      },
-    },
-  },
-  args: {
-    size: 'Large',
-    placeholder: 'Placeholder',
-    state: 'Default',
-    disabled: false,
-    labelPosition: 'None',
-    labelText: 'Label text',
-    helper: false,
-    helperText: 'Helper text',
-    defaultOption: 'Option 1',
-    openDirection: 'Auto',
-  },
-};
-const Template = ({ size, disabled = false, labelPosition, helper, helperText, labelText, state = 'default', placeholder, defaultOption, openDirection, }) => {
-  const stateValue = state === 'Error' ? 'error' : 'default';
-  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
-  const labelPosLookup = { None: 'no-default', Inside: 'inside', 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
-          id="sdds-dropdown-reg"
-          size="${sizeLookup[size]}"
-          placeholder="${placeholder}"
-          disabled="${disabled}"
-          open-direction="${openDirection.toLowerCase()}"
-          label-position="${labelPosLookup[labelPosition]}"
-          ${labelPosLookup[labelPosition] !== 'no-default' ? `label="${labelText}"` : ''}
-          ${helper ? `helper="${helperText}"` : ''}
-          state="${stateValue}"
-          type="default"
-          default-option="${defaultOptionLookup[defaultOption]}" >
-          <sdds-dropdown-option value="option-1" tabindex="0" disabled>Option 1</sdds-dropdown-option>
-          <sdds-dropdown-option value="option-2" tabindex="0">Option 2</sdds-dropdown-option>
-          <sdds-dropdown-option value="option-3" tabindex="0">Option 3</sdds-dropdown-option>
-        </sdds-dropdown>
-      </div>
-  `);
-};
-export const WebComponentDefault = Template.bind({});

package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js

@@ -1,146 +0,0 @@
-import readme from './readme.md';
-import readmeOption from './dropdown-option/readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Dropdown',
-  parameters: {
-    layout: 'centered',
-    notes: { 'Dropdown': readme, 'Dropdown option': readmeOption },
-    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: {
-    size: {
-      name: 'Size',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small'],
-      description: 'Size of the dropdown',
-    },
-    placeholder: {
-      name: 'Placeholder',
-      type: 'string',
-      description: 'Placeholder text when no option is selected',
-    },
-    labelPosition: {
-      name: 'Label position',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Inside', 'Outside'],
-      description: 'Label text position',
-    },
-    labelText: {
-      name: 'Label text',
-      control: 'text',
-      description: 'Label text helps to describe what the dropdown contains',
-      if: { arg: 'labelPosition', neq: 'None' },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the component',
-      control: {
-        type: 'boolean',
-      },
-    },
-    state: {
-      name: 'State',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Error'],
-      description: 'Support error state',
-    },
-    helper: {
-      name: 'Add helper text',
-      control: 'boolean',
-      description: 'Adds a helper text.',
-    },
-    helperText: {
-      name: 'Helper text',
-      description: 'Helper text assists the user with additional information about the dropdown',
-      control: 'text',
-      if: { arg: 'helper', eq: true },
-    },
-    multiDefaultOption: {
-      name: 'Default options',
-      description: 'Sets a pre-selected option and replaces placeholder',
-      if: { arg: 'type', neq: 'Default' },
-      control: {
-        type: 'check',
-      },
-      options: ['Option 1', 'Option 2', 'Option 3'],
-    },
-    openDirection: {
-      name: 'Open direction',
-      description: 'The direction the dropdown will open.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Up', 'Down', 'Auto'],
-      table: {
-        summary: {
-          defaultValue: 'auto',
-        },
-      },
-    },
-  },
-  args: {
-    size: 'Large',
-    placeholder: 'Placeholder',
-    state: 'Default',
-    disabled: false,
-    labelPosition: 'None',
-    labelText: 'Label text',
-    helper: false,
-    helperText: 'Helper text',
-    multiDefaultOption: ['Option 1', 'Option 2'],
-    openDirection: 'Auto',
-  },
-};
-const Template = ({ size, disabled = false, labelPosition, labelText, helper, helperText, state = 'default', placeholder, multiDefaultOption, openDirection, }) => {
-  const stateValue = state === 'Error' ? 'error' : 'default';
-  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
-  const labelPosLookup = { None: 'no-default', Inside: 'inside', Outside: 'outside' };
-  const multiDefaultOptionValue = multiDefaultOption.map((value) => value.toLowerCase().replace(' ', '-'));
-  return formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 300px;
-    height:200px;
-  }
-  </style>
-
-    <div class="demo-wrapper">
-        <sdds-dropdown
-          id="sdds-dropdown-reg"
-          size="${sizeLookup[size]}"
-          placeholder="${placeholder}"
-          disabled="${disabled}"
-          open-direction="${openDirection.toLowerCase()}"
-          label-position="${labelPosLookup[labelPosition]}"
-          ${labelPosLookup[labelPosition] !== 'no-default' ? `label="${labelText}"` : ''}
-          ${helper ? `helper="${helperText}"` : ''}
-          state="${stateValue}"
-          type="multiselect"
-          default-option="${multiDefaultOptionValue}" >
-          <sdds-dropdown-option value="option-1" tabindex="0">Option 1</sdds-dropdown-option>
-          <sdds-dropdown-option value="option-2" tabindex="0" disabled>Option 2</sdds-dropdown-option>
-          <sdds-dropdown-option value="option-3" tabindex="0">Option 3</sdds-dropdown-option>
-        </sdds-dropdown>
-      </div>
-  `);
-};
-export const WebComponentMultiselect = Template.bind({});

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

@@ -1,100 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Footer',
-  parameters: {
-    notes: readme,
-    layout: 'fullscreen',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    topPart: {
-      name: 'Top part',
-      description: 'Adds top part of the footer with more links',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-const Template = ({ topPart }) => formatHtmlPreview(`
-  <style>
-  .demo-wrapper {
-    padding: 0;
-    margin: 0;
-    font-size: 14px;
-  }
-  </style>
-
-  <div class="demo-wrapper">
-  <div class="sdds-footer">
-    ${topPart
-  ? `
-      <div class="sdds-footer-top sdds-container-fluid">
-        <div class="sdds-row">
-          <div class="sdds-footer-top-col sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
-            <div class="sdds-footer-title opened">
-              <span>Title 1</span>
-              <span class="sdds-footer-top-icon">
-                <sdds-icon name="chevron_down" size="16px"></sdds-icon>
-              </span>
-            </div>
-            <ul class="sdds-footer-main-links opened">
-              <li><a href="#">Legal link</a></li>
-              <li><a href="#">Legal link</a></li>
-              <li><a href="#">Legal link</a></li>
-              <li><a href="#">Legal link</a></li>
-            </ul>
-          </div>
-
-          <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
-            <div class="sdds-footer-title">
-              <span>Title 2</span>
-              <span class="sdds-footer-top-icon">
-              <sdds-icon name="chevron_down" size="16px"></sdds-icon>
-              </span>
-            </div>
-            <ul class="sdds-footer-main-links">
-              <li><a href="#">Legal link</a></li>
-              <li><a href="#">Legal link</a></li>
-              <li><a href="#">Legal link</a></li>
-              <li><a href="#">Legal link</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      `
-  : ''}
-    <div class="sdds-footer-main">
-      <ul class="sdds-footer-main-links">
-        <li><a href="#">Legal link</a></li>
-        <li><a href="#">Legal link</a></li>
-        <li><a href="#">Legal link</a></li>
-      </ul>
-      <ul class="sdds-footer-social-links">
-        <li><a href="#">Social 1</a></li>
-        <li><a href="#">Social 1</a></li>
-        <li><a href="#">Social 1</a></li>
-      </ul>
-      <div class="sdds-footer-main-brand">
-        <p>Copyright &copy; 2022 Scania</p>
-      </div>
-    </div>
-  </div>
-    </div>
-  `);
-export const Default = Template.bind({});
-Default.args = {
-  topPart: false,
-};