@scania/tegel 0.0.7 → 0.0.8

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

@@ -1,100 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-import readmeTab from './navigation-tab/readme.md';
-export default {
-  title: 'Components/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(`
-    <sdds-navigation-tabs
-      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? ` mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-      <sdds-navigation-tab>
-        <a href="#">First tab</a>
-      </sdds-navigation-tab>
-      <sdds-navigation-tab>
-        <a href="#">Second tab is much longer</a>
-      </sdds-navigation-tab>
-      <sdds-navigation-tab selected>
-        <a href="#">Third tab</a>
-      </sdds-navigation-tab>
-      <sdds-navigation-tab disabled>
-        <a href="#">Fourth tab</a>
-      </sdds-navigation-tab>
-    </sdds-navigation-tabs>
-
-    <!-- Demo container. -->
-    <div class="demo-container">
-      <h4 class="sdds-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('sdds-navigation-tabs');
-    
-    tabs.addEventListener('sddsChange', (event) => {
-      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-      console.log(event)
-    })
-    </script>
-    `);
-export const NavigationTabs = Template.bind({});

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

@@ -1,187 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Textarea',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&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' },
-      },
-    },
-    state: {
-      name: 'State',
-      description: 'Switches between success and error state.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Success', 'Error'],
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    label: {
-      name: 'Label text',
-      description: 'Sets the label text.',
-      control: {
-        type: 'text',
-      },
-    },
-    labelPosition: {
-      name: 'Label position',
-      description: 'Sets the label text position.',
-      control: {
-        type: 'radio',
-      },
-      options: ['No label', 'Inside', 'Outside'],
-      table: {
-        defaultValue: { summary: 'no-label' },
-      },
-    },
-    placeholder: {
-      name: 'Placeholder',
-      description: 'Sets the placeholder text.',
-      control: {
-        type: 'text',
-      },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Sets the helper text.',
-      control: {
-        type: 'text',
-      },
-    },
-    rows: {
-      name: 'Rows',
-      description: 'Sets the number of rows.',
-      control: {
-        type: 'number',
-      },
-    },
-    maxLength: {
-      name: 'Max length',
-      description: 'Sets a maximum value of how long the text can be.',
-      control: {
-        type: 'number',
-      },
-    },
-    noMinWidth: {
-      name: 'No minimum width',
-      description: 'Enables component to shrink below 208px which is the default width.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    readonly: {
-      name: 'Read only',
-      description: 'Sets the textarea to read-only state.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the textarea.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    state: 'Default',
-    label: 'Label',
-    labelPosition: 'No label',
-    placeholder: 'Placeholder',
-    helper: '',
-    rows: 5,
-    maxLength: 0,
-    noMinWidth: false,
-    readonly: false,
-    disabled: false,
-  },
-};
-const Template = ({ modeVariant, state, label, labelPosition, placeholder, helper, rows, maxLength, noMinWidth, readonly, disabled, }) => {
-  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
-  const stateValue = state.toLowerCase();
-  const labelPosLookup = {
-    'No label': 'no-label',
-    'Inside': 'inside',
-    'Outside': 'outside',
-  };
-  return formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper {
-      width: 400px;
-    }
-  </style>
-
-  <div class="demo-wrapper">
-        <sdds-textarea
-          rows="${rows}"
-          state="${stateValue}"
-          label="${label}"
-          helper="${helper}"
-          ${modeVariant !== 'Inherit from parent'
-    ? `mode-variant="${modeVariant.toLowerCase()}"`
-    : ''}
-          label-position="${labelPosLookup[labelPosition]}"
-          ${disabled ? 'disabled' : ''}
-          ${readonly ? 'read-only' : ''}
-          ${noMinWidth ? 'no-min-width' : ''}
-          placeholder="${placeholder}"
-          ${maxlength}>
-        </sdds-textarea>
-  </div>
-  <!-- Script tag for demo purposes -->
-  <script>
-    textElement = document.querySelector('sdds-textarea')
-
-    textElement.addEventListener('sddsFocus',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('sddsBlur',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('sddsInput',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('sddsChange',(event) => {
-      console.log(event)
-    })
-  </script>
-  `);
-};
-export const Default = Template.bind({});

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

@@ -1,253 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Textfield',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&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' },
-      },
-    },
-    state: {
-      name: 'State',
-      description: 'Switches between success and error state.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Success', 'Error'],
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    type: {
-      name: 'Type',
-      description: 'Which type of textfield',
-      control: {
-        type: 'radio',
-      },
-      options: ['Text', 'Password'],
-      table: {
-        defaultValue: { summary: 'text' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Switches between different sizes.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    label: {
-      name: 'Label text',
-      description: 'Sets the label text.',
-      control: {
-        type: 'text',
-      },
-    },
-    labelPosition: {
-      name: 'Label position',
-      description: 'Sets the label text position.',
-      control: {
-        type: 'radio',
-      },
-      options: ['No label', 'Inside', 'Outside'],
-      table: {
-        defaultValue: { summary: 'no-label' },
-      },
-    },
-    placeholderText: {
-      name: 'Placeholder',
-      description: 'Sets the placeholder text.',
-      control: {
-        type: 'text',
-      },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Sets the helper text.',
-      control: {
-        type: 'text',
-      },
-    },
-    prefix: {
-      name: 'Prefix',
-      description: 'Adds a prefix symbol or text before the textfield.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    prefixType: {
-      name: 'Prefix type',
-      description: 'Switches between icon and text for the prefix.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Icon', 'Text'],
-      if: { arg: 'prefix', eq: true },
-    },
-    suffix: {
-      name: 'Suffix',
-      description: 'Adds a suffix symbol or text after the textfield.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    suffixType: {
-      name: 'Suffix type',
-      description: 'Swithces between icon or text for the suffix.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Icon', 'Text'],
-      if: { arg: 'suffix', eq: true },
-    },
-    maxLength: {
-      name: 'Max length',
-      description: 'Sets a maximum value of how long the text can be.',
-      control: {
-        type: 'number',
-      },
-    },
-    noMinWidth: {
-      name: 'No minimum width',
-      description: 'Enables component to shrink below 208px which is the default width.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    readonly: {
-      description: 'Sets the textfield to read-only state.',
-      name: 'Read Only',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      description: 'Disables the textfield.',
-      name: 'Disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    state: 'Default',
-    type: 'Text',
-    size: 'Large',
-    label: 'Label',
-    labelPosition: 'No label',
-    placeholderText: 'Placeholder',
-    helper: '',
-    prefix: false,
-    prefixType: 'Icon',
-    suffix: false,
-    suffixType: 'Icon',
-    maxLength: 0,
-    noMinWidth: 'Default',
-    readonly: false,
-    disabled: false,
-  },
-};
-const Template = ({ modeVariant, state, type, size, label, labelPosition, placeholderText, helper, prefix, prefixType, suffix, suffixType, maxLength, noMinWidth, readonly, disabled, }) => {
-  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
-  const stateValue = state.toLowerCase();
-  const sizeLookUp = {
-    Large: 'lg',
-    Medium: 'md',
-    Small: 'sm',
-  };
-  return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 200px;
-    height: 150px;
-  }
-    </style>
-
-  <div class="demo-wrapper">
-    <sdds-textfield
-      type="${type}"
-      size="${sizeLookUp[size]}"
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      state="${stateValue}"
-      label="${label}"
-      label-position="${labelPosition.toLowerCase()}"
-      ${helper ? `helper="${helper}"` : ''}
-      ${maxlength}
-      ${disabled ? 'disabled' : ''}
-      ${readonly ? 'read-only' : ''}
-      ${noMinWidth ? 'no-min-width' : ''}
-      placeholder="${placeholderText}" >
-        ${prefix
-    ? `
-          ${prefixType === 'Text'
-      ? '<span slot="prefix">$</span>'
-      : '<sdds-icon slot="prefix" name="truck" size="20px"></sdds-icon>'}
-        `
-    : ''}
-        ${suffix
-    ? `
-          ${suffixType === 'Text'
-      ? '<span slot="suffix">$</span>'
-      : '<sdds-icon slot="suffix" name="truck" size="20px"></sdds-icon>'}        `
-    : ''}
-        </sdds-textfield>
-  </div>
-  <!-- Script tag for demo purposes -->
-  <script>
-    textElement = document.querySelector('sdds-textfield')
-    textElement.addEventListener('sddsFocus',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('sddsBlur',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('sddsInput',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('sddsChange',(event) => {
-      console.log(event)
-    })
-  </script>
-  `);
-};
-// ${true ? '<sdds-icon name="cross" slot="sdds-prefix"></sdds-icon>' : ''}
-export const Default = Template.bind({});
-Default.args = {};

package/dist/collection/components/toast/sdds-toast.stories.js

@@ -1,86 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Toast',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Message type',
-      description: 'Changes the type of message.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Success', 'Warning', 'Error'],
-      table: {
-        defaultValue: {
-          summary: 'information',
-        },
-      },
-    },
-    header: {
-      name: 'Header',
-      description: 'Adds a header text.',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Adds a subheader text.',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Adds a CTA link.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    type: 'Information',
-    header: 'Header',
-    subheader: '',
-    link: false,
-  },
-};
-const Template = ({ type, header, subheader, link }) => formatHtmlPreview(`<sdds-toast
-        type="${type.toLowerCase()}"
-        header="${header}"
-    >
-      ${subheader
-  ? `
-      <div  slot="toast-subheader">
-        ${subheader}
-      </div>
-      `
-  : ''}
-       ${link
-  ? `<a slot="toast-link" href="#">This is a link.</a>
-       `
-  : ''}
-    </sdds-toast>
-        <script>
-        document.addEventListener('sddsClose', (event) => {
-            console.log(event)
-        })
-    </script>
-  `);
-export const WebComponent = Template.bind({});