@scania/tegel 0.0.1-beta.6 → 0.0.1-beta.7

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

@@ -1,149 +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: {
-    placeholder: {
-      name: 'Placeholder',
-      description: 'Placeholder text',
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      description: 'Set textfield to disabled state',
-      name: 'Disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    readonly: {
-      description: 'Set textfield to disabled state',
-      name: 'Read only',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    label: {
-      description: 'Label text for specific textfield',
-      name: 'Label text',
-      control: {
-        type: 'text',
-      },
-    },
-    labelPosition: {
-      name: 'Label position',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Inside', 'Outside'],
-      description: 'Label text position',
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Add helper text for the textfield',
-      control: {
-        type: 'text',
-      },
-    },
-    maxLength: {
-      name: 'Max length',
-      description: 'Set a maximum value of how long the text can be.',
-      control: {
-        type: 'number',
-      },
-    },
-    rows: {
-      name: 'Rows',
-      description: 'Set the number of rows',
-      control: {
-        type: 'number',
-      },
-    },
-    state: {
-      name: 'State',
-      description: 'Switch between success or error state',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Success', 'Error'],
-    },
-    variant: {
-      name: 'Mode Variant',
-      description: 'The variant of the textarea',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary'],
-    },
-  },
-  args: {
-    placeholder: 'Placeholder',
-    disabled: false,
-    readonly: false,
-    label: 'Label',
-    labelPosition: 'None',
-    helper: '',
-    maxLength: 0,
-    rows: 5,
-    state: 'Default',
-    variant: 'Secondary',
-  },
-};
-const Template = ({ placeholder, disabled, readonly, label, labelPosition, state, helper, maxLength, rows, variant, }) => {
-  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
-  const variantValue = variant === 'Primary' ? 'primary' : 'secondary';
-  const stateValue = state.toLowerCase();
-  const labelPosLookup = {
-    None: '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}"
-          mode-variant="${variantValue}"
-          helper="${helper}"
-          label-position="${labelPosLookup[labelPosition]}"
-          ${disabled ? 'disabled' : ''}
-          ${readonly ? 'read-only' : ''}
-          placeholder="${placeholder}"
-          ${maxlength}>
-        </sdds-textarea>
-  </div>
-  `);
-};
-export const Default = Template.bind({});
-Default.args = {};

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

@@ -1,222 +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: {
-    placeholderText: {
-      name: 'Placeholder',
-      description: 'Placeholder text',
-      control: {
-        type: 'text',
-      },
-    },
-    type: {
-      name: 'Type',
-      description: 'Which type of textfield',
-      control: {
-        type: 'radio',
-        options: ['password', 'text'],
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Switch between different sizes',
-      control: {
-        type: 'radio',
-        options: ['Large', 'Medium', 'Small'],
-      },
-    },
-    minWidth: {
-      name: 'No minimum width',
-      description: 'Toggle the minimum width.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      description: 'Set textfield to disabled state',
-      name: 'Disabled',
-      control: {
-        type: 'boolean',
-      },
-    },
-    readonly: {
-      description: 'Set textfield to read only',
-      name: 'Read Only',
-      control: {
-        type: 'boolean',
-      },
-    },
-    label: {
-      description: 'Label text for specific textfield',
-      name: 'Label text',
-      control: {
-        type: 'text',
-      },
-    },
-    labelPosition: {
-      name: 'Label position',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Inside', 'Outside'],
-      description: 'Label text position',
-    },
-    prefix: {
-      name: 'Prefix',
-      description: 'Add prefix symbol/text before the textfield',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    prefixType: {
-      name: 'Prefix type',
-      description: 'Choose icon or text for prefix.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Icon', 'Text'],
-      if: { arg: 'prefix', eq: true },
-    },
-    suffix: {
-      name: 'Suffix',
-      description: 'Add suffix symbol/text after the textfield',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    suffixType: {
-      name: 'Suffix type',
-      description: 'Choose icon or text for suffix.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Icon', 'Text'],
-      if: { arg: 'suffix', eq: true },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Add helper text for the textfield',
-      control: {
-        type: 'text',
-      },
-    },
-    maxLength: {
-      name: 'Max length',
-      description: 'Set a maximum value of how long the text can be.',
-      control: {
-        type: 'number',
-      },
-    },
-    state: {
-      name: 'State',
-      description: 'Switch between success or error state',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Success', 'Error'],
-    },
-    variant: {
-      name: 'Mode Variant',
-      description: 'The variant of the textarea',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary'],
-    },
-  },
-  args: {
-    placeholderText: 'Placeholder',
-    disabled: false,
-    readonly: false,
-    label: 'Label',
-    labelPosition: 'None',
-    helper: '',
-    maxLength: 0,
-    state: 'Default',
-    variant: 'Secondary',
-    suffix: false,
-    suffixType: 'Icon',
-    prefix: false,
-    prefixType: 'Icon',
-    minWidth: 'Default',
-    size: 'Large',
-    type: 'text',
-  },
-};
-const Template = ({ type, placeholderText, size, minWidth, disabled, readonly, label, labelPosition, state, variant, helper, prefix, prefixType, suffix, suffixType, maxLength, }) => {
-  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
-  const variantValue = variant === 'Primary' ? 'primary' : 'secondary';
-  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]}"
-      state="${stateValue}"
-      mode-variant="${variantValue}"
-      label="${label}"
-      label-position="${labelPosition.toLowerCase()}"
-      ${maxlength}
-      ${disabled ? 'disabled' : ''}
-      ${readonly ? 'readonly' : ''}
-      ${minWidth ? 'no-min-width' : ''}
-      placeholder="${placeholderText}" >
-        ${prefix
-    ? `
-        <span slot="sdds-prefix">
-          ${prefixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
-        </span>`
-    : ''}
-        ${helper ? `<span slot='sdds-helper'>${helper}</span>` : ''}
-        ${suffix
-    ? `
-        <span slot="sdds-suffix">
-          ${suffixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
-        </span>`
-    : ''}
-        </sdds-textfield>
-  </div>
-  `);
-};
-// ${true ? '<sdds-icon name="cross" slot="sdds-prefix"></sdds-icon>' : ''}
-export const Default = Template.bind({});
-Default.args = {};

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

@@ -1,119 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from '../icon/iconsArray';
-export default {
-  title: 'Components/Toast',
-  parameters: {
-    layout: 'centered',
-    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: {
-    toastType: {
-      name: 'Message type',
-      description: 'Changes the type of message',
-      control: {
-        type: 'radio',
-      },
-      options: ['Success', 'Info', 'Warning', 'Error'],
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Adds a subheader',
-    },
-    link: {
-      name: 'Link',
-      description: 'Adds a CTA link',
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Native/Web Component',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Icon to display on the button. Choose "none" to exclude the icon, or choose "recommended" to pick the icon that is recommended for the type of toast.',
-      control: {
-        type: 'select',
-      },
-      options: ['none', 'recommended', ...iconsNames],
-      if: { arg: 'size', neq: 'xs' },
-    },
-  },
-  args: {
-    toastType: 'Success',
-    subheader: false,
-    link: false,
-    iconType: 'Webcomponent',
-    icon: 'recommended',
-  },
-};
-const typeLookup = {
-  Success: 'success',
-  Info: 'info',
-  Warning: 'warning',
-  Error: 'error',
-};
-const iconLookup = {
-  Success: 'tick',
-  Info: 'info',
-  Warning: 'warning',
-  Error: 'error',
-};
-const Template = ({ toastType, subheader, link, iconType, icon }) => {
-  const iconValue = icon === 'recommended' ? iconLookup[toastType] : icon;
-  return formatHtmlPreview(`
-      ${iconType === 'Native'
-    ? `
-    <style>
-    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */
-    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
-
-    </style>
-      `
-    : ''}
-  <div class="sdds-toast sdds-toast-${typeLookup[toastType]}">
-  ${icon === 'none'
-    ? ''
-    : `
-    <div class="sdds-toast-icon">
-      ${iconType === 'Native'
-      ? `<i class="sdds-icon ${iconValue}"></i>`
-      : `<sdds-icon name="${iconValue}" size="20px"></sdds-icon>
-      `}
-    </div>
-  `}
-    <div class="sdds-toast-content">
-      <div class="sdds-toast-header">
-        <span class="sdds-toast-headline">This is ${toastType === 'Success' || toastType === 'Warning' ? 'a' : 'an'} ${toastType.toLowerCase()} message</span>
-        <button type="button" aria-label="close" class="sdds-toast-dismiss">
-          ${iconType === 'Native'
-    ? `<i class="sdds-icon cross"></i>`
-    : `<sdds-icon name="cross" size="20px"></sdds-icon>
-          `}
-        </button>
-      </div>
-      ${subheader || link
-    ? `\n<div class="sdds-toast-body">\
-          ${subheader ? '\n<span class="sdds-toast-subheadline">Short subheader</span>' : ''}\
-          ${link ? '\n<a class="sdds-toast-link" href="#">Link example</a>' : ''}
-          </div> `
-    : ''}
-    </div>
-  </div>
-  `);
-};
-export const Default = Template.bind({});
-Default.args = {};

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

@@ -1,62 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Toggle',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Small'],
-      description: 'Size of the toggle',
-    },
-    headline: {
-      name: 'Headline',
-      description: 'Optional value to be used to clarify what the toggle is switching on / off',
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Should it be disabled?',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    size: 'Default',
-    headline: '',
-    disabled: false,
-  },
-};
-const Template = ({ size, disabled = false, headline = '' }) => {
-  const sizeValue = size === 'Small' ? 'sdds-toggle-sm' : '';
-  const headlineDiv = headline.length > 0 ? `<div class="sdds-toggle-headline">${headline}</div>` : '';
-  return formatHtmlPreview(`
-      <div class="sdds-toggle ${sizeValue} ${disabled ? 'disabled' : ''}" tabindex="0">
-        ${headlineDiv}
-        <input type="checkbox" class="sdds-toggle-input" id="customSwitch1" ${disabled ? 'disabled' : ''}>
-        <span class="sdds-toggle-switch"></span>
-        <label class="sdds-toggle-label" for="customSwitch1">Toggle this switch element</label>
-      </div>
-  `);
-};
-export const Default = Template.bind({});
-Default.args = {};

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

@@ -1,113 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Tooltip',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    tooltipPosition: {
-      name: 'Tooltip position',
-      control: {
-        type: 'select',
-        options: [
-          'Bottom-start',
-          'Bottom',
-          'Bottom-end',
-          'Top-start',
-          'Top',
-          'Top-end',
-          'Left-start',
-          'Left',
-          'Left-end',
-          'Right-start',
-          'Right',
-          'Right-end',
-        ],
-      },
-      description: 'Position of the tooltip',
-    },
-    text: {
-      name: 'Tooltip text',
-      description: 'Text that will be displayed inside tooltip',
-      control: {
-        type: 'text',
-      },
-    },
-    slot: {
-      name: 'Tooltip html content',
-      description: 'A slot for the tooltip to pass in html.',
-      control: {
-        type: 'text',
-      },
-    },
-    mouseOverTooltip: {
-      name: 'Open while hovering over tooltip',
-      control: 'boolean',
-      description: 'Keep the tooltip visible as long as the mouse hover over it',
-    },
-  },
-  args: {
-    tooltipPosition: 'Bottom',
-    text: 'Text inside tooltip',
-    slot: '<p class="sdds-detail-05 sdds-u-m0"> Paragraph tag inside of Tooltip with <b>bold</b> and <i>italic</i> tags too. </p>',
-    mouseOverTooltip: true,
-  },
-};
-const positionLookup = {
-  'Bottom-start': 'bottom-start',
-  'Bottom': 'bottom',
-  'Bottom-end': 'bottom-end',
-  'Top-start': 'top-start',
-  'Top': 'top',
-  'Top-end': 'top-end',
-  'Left-start': 'left-start',
-  'Left': 'left',
-  'Left-end': 'left-end',
-  'Right-start': 'right-start',
-  'Right': 'right',
-  'Right-end': 'right-end',
-};
-const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) => formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-     .demo-wrapper{
-       height: 300px;
-       display: flex;
-       justify-content: center;
-       align-items: center;
-     }
-    </style>
-
-   <div class="demo-wrapper">
-   <sdds-tooltip
-      placement="${positionLookup[tooltipPosition]}"
-      selector="#button-1"
-      text="${text}"
-      mouse-over-tooltip="${mouseOverTooltip}">
-      ${slot}
-    </sdds-tooltip>
-
-    <!-- Demo button for presentation purposes -->
-    <sdds-button size= 'sm' id="button-1" text='Hover me'></sdds-button>
-   </div>
-  `);
-export const Default = ComponentTooltip.bind({});