@scania/tegel 0.0.7 → 0.0.8

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

@@ -1,174 +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: {
-    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: 'lg' },
-      },
-    },
-    labelPosition: {
-      name: 'Label position',
-      description: 'Sets the label text position.',
-      control: {
-        type: 'radio',
-      },
-      options: ['No label', 'Inside', '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: {
-      if: { arg: 'type', neq: 'Multiselect' },
-      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 Template = ({ modeVariant, state = false, size, openDirection, labelText, labelPosition, placeholder, helper, defaultOption, disabled = false, }) => {
-  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
-  const labelPosLookup = { 'No label': 'no-label', '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
-          ${modeVariant !== 'Inherit from parent'
-    ? `mode-variant="${modeVariant.toLowerCase()}".sdds-option-label {
-            `
-    : ''}
-          id="sdds-dropdown-reg"
-          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}"
-          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,169 +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: {
-    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', 'Inside', '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',
-      },
-    },
-    multiDefaultOption: {
-      name: 'Default options',
-      description: 'Sets a pre-selected option and replaces the placeholder.',
-      if: { arg: 'type', neq: 'Default' },
-      control: {
-        type: 'check',
-      },
-      options: ['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: '',
-    multiDefaultOption: ['Option 1', 'Option 2'],
-    disabled: false,
-  },
-};
-const Template = ({ modeVariant, state = false, size, openDirection, labelPosition, labelText, placeholder, helper, multiDefaultOption, disabled = false, }) => {
-  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
-  const labelPosLookup = { 'No label': 'no-label', '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
-        ${modeVariant !== 'Inherit from parent'
-    ? `mode-variant="${modeVariant.toLowerCase()}".sdds-option-label {
-          `
-    : ''}
-          id="sdds-dropdown-reg"
-          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}"
-          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,117 +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: {
-    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' },
-      },
-    },
-    topPart: {
-      name: 'Top part',
-      description: 'Adds the top part of the footer with more links.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    topPart: false,
-  }
-};
-const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
-  <style>
-  .demo-wrapper {
-    padding: 0;
-    margin: 0;
-    font-size: 14px;
-  }
-  </style>
-
-  <div class="demo-wrapper">
-  <div class="sdds-footer 
-  ${modeVariant !== 'Inherit from parent' ? `sdds-mode-variant-${modeVariant.toLowerCase()}` : ''}
- ">
-    ${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 link</a></li>
-        <li><a href="#">Social link</a></li>
-        <li><a href="#">Social link</a></li>
-      </ul>
-      <div class="sdds-footer-main-brand">
-        <p>Copyright &copy; 2022 Scania</p>
-      </div>
-    </div>
-  </div>
-    </div>
-  `);
-export const Native = Template.bind({});

package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js

@@ -1,144 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-import readmeItem from './sdds-footer-item/readme.md';
-import readmeLinkGroup from './sdds-footer-group/readme.md';
-export default {
-  title: 'Components/Footer',
-  parameters: {
-    notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer item': readmeItem },
-    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: {
-    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' },
-      },
-    },
-    topPart: {
-      name: 'Top part',
-      description: 'Adds the top part of the footer with more links.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    topPart: false,
-  },
-};
-const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
-    <main>
-      <div class="sdds-u-p3 ">
-        <div class="sdds-body-01">
-          Resize the window to see how the footer behaves on smaller/bigger screens.
-        </div>
-      </div>
-    </main>
-    <sdds-footer
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-      ${topPart
-  ? `
-      <div slot="top">
-        <sdds-footer-group title-text="Title">
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-
-        <sdds-footer-group title-text="Title">
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-
-        <sdds-footer-group title-text="Title">
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-
-        <sdds-footer-group title-text="Title">
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-      </div>
-      `
-  : ''}
-      <div slot="main-left">
-        <sdds-footer-group>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-      </div>
-      <div slot="main-right">
-        <sdds-footer-group>
-          <sdds-footer-item >
-            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-      </div>
-    </sdds-footer>
-  
-  `);
-export const WebComponent = Template.bind({});