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

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

@@ -1,183 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from '../icon/iconsArray';
-export default {
-  title: 'Components/Button',
-  parameters: {
-    layout: 'padded',
-    chromatic: {
-      disableSnapshot: false, // enables snapshotting for the component
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    text: {
-      name: 'Text',
-      description: 'The text to be displayed on the button',
-      control: {
-        type: 'text',
-      },
-    },
-    btnType: {
-      name: 'Type',
-      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Size of the button',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    variant: {
-      name: 'Variant',
-      description: 'Button variant.',
-      control: {
-        type: 'radio',
-      },
-      options: ['On light', 'On dark'],
-      table: {
-        defaultValue: { summary: 'on-dark' },
-      },
-    },
-    fullbleed: {
-      name: 'Fullbleed',
-      defaultValue: false,
-      description: 'Fluid width in certain components-old',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'onlyIcon', eq: false },
-    },
-    disabled: {
-      name: 'Disabled',
-      type: 'boolean',
-      description: 'Choose to disable the button',
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    onlyIcon: {
-      name: 'Only Icon',
-      description: 'Displays only the icon and excludes any text from the button',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'size', neq: 'Extra small' },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Icon to display on the button. Choose "none" to exclude the icon.',
-      control: {
-        type: 'select',
-      },
-      options: ['none', ...iconsNames],
-      if: { arg: 'size', neq: 'Extra small' },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Native/Webcomponent',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Webcomponent'],
-      if: { arg: 'icon', neq: 'none' },
-    },
-  },
-  args: {
-    text: 'Button',
-    btnType: 'Primary',
-    size: 'Large',
-    variant: 'On dark',
-    fullbleed: false,
-    disabled: false,
-    onlyIcon: false,
-    icon: 'none',
-    iconType: 'Native',
-  },
-};
-const NativeTemplate = ({ size, variant, btnType, fullbleed, text = 'Button', disabled = '', onlyIcon, icon, iconType, }) => {
-  const fbClass = fullbleed ? 'sdds-btn-fullbleed' : '';
-  const onlyIconCss = onlyIcon ? 'sdds-btn-icon' : '';
-  const btnTypeLookUp = {
-    Primary: 'primary',
-    Secondary: 'secondary',
-    Ghost: 'ghost',
-    Danger: 'danger',
-  };
-  const sizeLookUp = {
-    'Large': 'lg',
-    'Medium': 'md',
-    'Small': 'sm',
-    'Extra small': 'xs',
-  };
-  const varaintLookup = {
-    'On light': 'on-light',
-    'On dark': 'on-dark',
-  };
-  return formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-    ${icon && iconType === 'Native'
-    ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
-    i.sdds-btn-icon{
-      font-size: ${size === 'Small' ? '16' : '20'}px;
-    }\n `
-    : ''}\ .demo-wrapper{
-      width: 100%;
-    }
-  </style>
-
-  <div class="demo-wrapper">
-<button class="sdds-btn sdds-btn-${btnTypeLookUp[btnType]} sdds-btn-${sizeLookUp[size]} ${fbClass} ${disabled ? 'disabled' : ''} ${onlyIconCss} ${varaintLookup[variant] === 'on-light' ? 'sdds-on-white-bg' : ''}  ${onlyIcon ? 'sdds-btn-only-icon' : ''}">
-  ${!onlyIcon ? `<span class="sdds-btn-text">${text}</span>` : ''}
-  ${onlyIcon || (icon && icon !== 'none')
-    ? `
-    ${iconType === 'Native'
-      ? `<i class="sdds-btn-icon sdds-icon ${icon}"></i>`
-      : `<sdds-icon class='sdds-btn-icon ' size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></sdds-icon>`}
-  `
-    : ''}
-</button>
-  </div>
-  `);
-};
-export const Native = NativeTemplate.bind({});
-Native.args = {};
-export const NativeWithIcon = NativeTemplate.bind({});
-NativeWithIcon.args = {
-  icon: 'truck',
-};
-export const NativeOnlyIcon = NativeTemplate.bind({});
-NativeOnlyIcon.args = {
-  text: '',
-  onlyIcon: true,
-  icon: 'truck',
-};

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

@@ -1,182 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from '../icon/iconsArray';
-import readme from './readme.md';
-export default {
-  title: 'Components/Button',
-  parameters: {
-    notes: readme,
-    layout: 'padded',
-    chromatic: {
-      disableSnapshot: false, // enables snapshotting for the component
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    text: {
-      name: 'Text',
-      description: 'The text to be displayed on the button',
-      control: {
-        type: 'text',
-      },
-    },
-    btnType: {
-      name: 'Type',
-      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    size: {
-      name: 'Size',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-      description: 'Size of the button',
-    },
-    variant: {
-      name: 'Variant',
-      control: {
-        type: 'radio',
-      },
-      options: ['On light', 'On dark'],
-      description: 'Button variant.',
-      table: {
-        defaultValue: { summary: 'on-dark' },
-      },
-    },
-    fullbleed: {
-      name: 'Fullbleed',
-      type: 'boolean',
-      description: 'Fluid width in certain components-old',
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'onlyIcon', truthy: false },
-    },
-    disabled: {
-      name: 'Disabled',
-      type: 'boolean',
-      description: 'Choose to disable the button',
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    onlyIcon: {
-      name: 'Only Icon',
-      description: 'Displays only the icon and excludes any text from the button',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'size', neq: 'Extra small' },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Icon to display on the button. Choose "none" to exclude the icon.',
-      control: {
-        type: 'select',
-      },
-      options: ['none', ...iconsNames],
-      if: { arg: 'size', neq: 'Extra small' },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Native/Webcomponent',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Webcomponent'],
-      if: { arg: 'icon', neq: 'none' },
-    },
-  },
-  args: {
-    text: 'Button',
-    btnType: 'Primary',
-    size: 'Large',
-    variant: 'On dark',
-    fullbleed: false,
-    disabled: false,
-    onlyIcon: false,
-    icon: 'none',
-    iconType: 'Webcomponent',
-  },
-};
-const WebComponentTemplate = ({ onlyIcon, size, variant, btnType, fullbleed, disabled, icon, iconType, text = 'Button', }) => {
-  const btnTypeLookUp = {
-    Primary: 'primary',
-    Secondary: 'secondary',
-    Ghost: 'ghost',
-    Danger: 'danger',
-  };
-  const sizeLookUp = {
-    'Large': 'lg',
-    'Medium': 'md',
-    'Small': 'sm',
-    'Extra small': 'xs',
-  };
-  const varaintLookup = {
-    'On light': 'on-light',
-    'On dark': 'on-dark',
-  };
-  return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/${icon && iconType === 'Native'
-    ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
-    i.sdds-icon::before{
-      font-size: ${size === 'Large' || size === 'Medium' ? '20' : '16'}px;
-    }`
-    : ''}
-    .demo-wrapper{
-      width: 100%;
-    }
-  </style>
-
-  <div class="demo-wrapper">
-  <sdds-button ${onlyIcon ? 'onlyIcon' : ''} type="${btnTypeLookUp[btnType]}" size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''} text="${onlyIcon ? '' : text}" variant="${varaintLookup[variant]}" >
-    ${onlyIcon || (icon && icon !== 'none')
-    ? `
-    ${iconType === 'Native'
-      ? `<i class="sdds-btn-icon sdds-icon ${icon}" slot="icon"></i>`
-      : `<sdds-icon slot="icon" class='sdds-btn-icon ' size='${sizeLookUp[size] == 'sm' ? '16px' : '20px'}' name='${icon}'></sdds-icon>`}
-  `
-    : ''}
-</sdds-button>
-  </div>
-  `);
-};
-/** Button as web component */
-export const WebComponent = WebComponentTemplate.bind({});
-WebComponent.args = {};
-export const WebComponentWithIcon = WebComponentTemplate.bind({});
-WebComponentWithIcon.args = {
-  icon: 'truck',
-  iconType: 'Webcomponent',
-};
-export const WebComponentOnlyIcon = WebComponentTemplate.bind({});
-WebComponentOnlyIcon.args = {
-  text: '',
-  iconType: 'Webcomponent',
-  onlyIcon: true,
-  icon: 'truck',
-};

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

@@ -1,181 +0,0 @@
-import CardImage from '../../stories/assets/image/card-img.png';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Card',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    headline: {
-      name: 'Header text',
-      description: 'The header text',
-      control: {
-        type: 'text',
-      },
-    },
-    subheadline: {
-      name: 'Subheader text',
-      description: 'The subheader text',
-      control: {
-        type: 'text',
-      },
-    },
-    text: {
-      name: 'Body text',
-      description: 'The body text for the card',
-      control: {
-        type: 'text',
-      },
-    },
-    divider: {
-      name: 'Divider',
-      description: 'Add a divider to the card',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    footer: {
-      name: 'Footer',
-      description: 'The footer of the card',
-      control: {
-        type: 'text',
-      },
-    },
-    clickable: {
-      name: 'Clickable',
-      description: 'Toggles if the card is clickable or not.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    image: {
-      name: 'Image',
-      description: 'Image on card',
-      control: {
-        type: 'boolean',
-      },
-    },
-    imageTop: {
-      name: 'Image on top',
-      description: 'Sets the image on top',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'image', eq: true },
-    },
-    avatar: {
-      name: 'Avatar',
-      description: 'An avatar image for the card',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    headline: 'Header text',
-    subheadline: 'Subheader text',
-    text: '',
-    divider: false,
-    footer: '<sdds-icon style="font-size: 20px;" name="arrow_left"></sdds-icon>',
-    clickable: false,
-    image: false,
-    imageTop: false,
-    avatar: false,
-  },
-};
-const Template = ({ headline, subheadline, footer, clickable, text, divider, imageTop, avatar }) => formatHtmlPreview(`
-<style>
-/* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 300px;
-  }
-</style>
-
-    <div class="demo-wrapper">
-          <div class="sdds-card${clickable ? ' sdds-clickable' : ''}">
-            ${imageTop === true
-  ? `<img class="sdds-card-img" src="${CardImage}" alt="Add description to image"/>`
-  : ''}
-            <div class="${avatar ? 'sdds-card-header-avatar' : 'sdds-card-header'}">
-            ${avatar
-  ? `
-              <div class="sdds-card-avatar">
-                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18" cy="18" r="18" fill="#E2E2E4"/></svg>
-              </div>`
-  : ''}
-                ${avatar
-  ? `<div class="sdds-card-headlines">
-                  ${headline ? `<h6 class="sdds-card-headline">${headline}</h6>` : ''}
-                  ${subheadline ? `<h6 class="sdds-card-sub-headline" >${subheadline}</h6>` : ''}
-                  </div>`
-  : `${headline ? `<h6 class="sdds-card-headline">${headline}</h6>` : ''}
-                 ${subheadline ? `<h6 class="sdds-card-sub-headline" >${subheadline}</h6>` : ''}
-                `}
-            </div>
-            ${imageTop === false
-  ? `<img class="sdds-card-img" src="${CardImage}" alt="Add description to image"/>`
-  : ''}
-            ${divider ? '<div class="sdds-divider-light-border-top"></div>' : ''}
-            ${text ? `<div class="sdds-card-body">${text}</div>` : ''}
-            ${footer ? `<div class="sdds-card-footer">${footer}</div>` : ''}
-          </div>
-    </div>
-  `);
-export const Default = Template.bind({});
-Default.args = {};
-export const SupportText = Template.bind({});
-SupportText.args = {
-  text: 'This is a short and consist detail text describing for the user what this text is really about.',
-};
-export const Divider = Template.bind({});
-Divider.args = {
-  divider: true,
-  text: 'This is a short and consist detail text describing for the user what this text is really about.',
-};
-export const Link = Template.bind({});
-Link.args = {
-  divider: true,
-  text: 'This is a short and consist detail text describing for the user what this text is really about.',
-  footer: '<a class="sdds-link sdds-link--no-underline" href="#">Link text</a><a class="sdds-link sdds-link--no-underline" href="#">Link text</a>',
-};
-export const Button = Template.bind({});
-Button.args = {
-  divider: true,
-  text: 'This is a short and consist detail text describing for the user what this text is really about.',
-  footer: '<button class="sdds-btn sdds-btn-sm sdds-btn-primary">Button text</button>',
-};
-export const Image = Template.bind({});
-Image.args = {
-  divider: true,
-  text: 'This is a short and consist detail text describing for the user what this text is really about.',
-  image: true,
-  imageTop: true,
-};
-export const Avatar = Template.bind({});
-Avatar.args = {
-  avatar: true,
-  divider: false,
-  text: 'This is a short and consist detail text describing for the user what this text is really about.',
-  imageTop: false,
-};

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

@@ -1,54 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Checkbox',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the checkbox',
-      control: {
-        type: 'boolean',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'Checks the checkbox',
-      control: {
-        type: 'boolean',
-      },
-    },
-    label: {
-      name: 'Label text',
-      description: 'The label of the component',
-      type: 'string',
-    },
-  },
-  args: {
-    disabled: false,
-    checked: false,
-    label: 'Label',
-  },
-};
-const Template = ({ checked, disabled, label }) => formatHtmlPreview(`
-    <div class="sdds-checkbox-item">
-      <input class="sdds-form-input" type="checkbox" id="unique-id" ${checked ? 'checked="checked"' : ''}  ${disabled ? 'disabled' : ''}>
-      ${label
-  ? `<label class="sdds-form-label" for="unique-id" ${disabled ? 'disabled' : ''}>  ${label} </label>`
-  : ''}
-    </div>
-  `);
-export const Default = Template.bind({});