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

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/Web Component',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      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({});

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

@@ -1,124 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Chips',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    placeholderText: {
-      name: 'Placeholder',
-      description: 'Set custom chip text',
-      control: {
-        type: 'text',
-      },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Add an icon to the chip.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Choose what icon type to use',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      if: { arg: 'icon', eq: true },
-    },
-    iconPosition: {
-      name: 'Icon position',
-      description: 'Set the placement of the icon',
-      control: {
-        type: 'radio',
-      },
-      options: ['Icon left', 'Icon right'],
-      if: { arg: 'icon', eq: true },
-    },
-    state: {
-      name: 'State',
-      description: 'Set the chips state as active or default',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Active'],
-    },
-    size: {
-      name: 'Size',
-      description: 'Set the chip size',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Small'],
-    },
-  },
-  args: {
-    placeholderText: 'Chip text',
-    icon: false,
-    iconType: 'Native',
-    iconPosition: 'Icon right',
-    state: 'Default',
-    size: 'Default',
-  },
-};
-const Template = ({ icon, iconPosition, iconType, state, placeholderText, size }) => {
-  const stateValue = state === 'Active' ? 'sdds-chip__active' : '';
-  const sizeValue = size === 'Small' ? 'sdds-chip-sm' : '';
-  const iconPositionLookup = {
-    'Icon left': 'sdds-chip__icon-left',
-    'Icon right': 'sdds-chip__icon-right',
-  };
-  // TODO - Add dark theme to story
-  const iconSvg = `
-    ${iconType === 'Native'
-    ? '<i class="sdds-chip-icon sdds-icon notification"></i>'
-    : '<sdds-icon class="sdds-chip-icon" name="notification" size="16px"></sdds-icon>'}
-    `;
-  return formatHtmlPreview(`
-  ${iconType === 'Native'
-    ? `<style>
-/* Note: In case you are 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-chip ${icon ? iconPositionLookup[iconPosition] : ''} ${stateValue} ${sizeValue}">
-      ${icon ? iconSvg : ''}<span class="sdds-chip-text">${placeholderText}</span>
-    </div>
-    `);
-};
-export const Default = Template.bind({});
-Default.args = {};
-export const IconRight = Template.bind({});
-IconRight.args = {
-  icon: true,
-  iconPosition: 'Icon right',
-};
-export const IconLeft = Template.bind({});
-IconLeft.args = {
-  icon: true,
-  iconPosition: 'Icon left',
-};
-export const Active = Template.bind({});
-Active.args = {
-  state: 'Active',
-};
-export const Small = Template.bind({});
-Small.args = {
-  size: 'Small',
-};