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

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',
-};

package/dist/collection/components/data-table/native-table.stories.js

@@ -1,182 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Data Table/Native',
-  argTypes: {
-    tableTitle: {
-      name: 'Table title',
-      description: 'Text that appears in table caption area.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: '',
-        },
-      },
-    },
-    isCompact: {
-      name: 'Compact design',
-      description: 'Enables compact design of the table, rows with less height.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    dividers: {
-      name: 'Vertical dividers',
-      description: 'When enabled, table has vertical dividers between columns.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    onWhiteBG: {
-      name: 'On white background',
-      description: 'Changes BG color of table element to grey variation for better visibility on white layouts',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    responsiveTable: {
-      name: 'Responsive table',
-      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    noMinWidthArg: {
-      name: 'No minimum width',
-      description: 'Resets min-width rule and enabled setting column width value less then 192px which is default one. When enabled, controls for columns width will show here.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    column1Width: {
-      name: 'Column 1 width',
-      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
-      },
-      if: { arg: 'noMinWidthArg', eq: true },
-    },
-    column2Width: {
-      name: 'Column 2 width',
-      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
-      },
-      if: { arg: 'noMinWidthArg', eq: true },
-    },
-    column3Width: {
-      name: 'Column 3 width',
-      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
-      },
-      if: { arg: 'noMinWidthArg', eq: true },
-    },
-    column4Width: {
-      name: 'Column 4 width',
-      description: 'Value of width for column 4. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
-      },
-      if: { arg: 'noMinWidthArg', eq: true },
-    },
-  },
-  args: {
-    tableTitle: 'Native table',
-    isCompact: false,
-    dividers: false,
-    onWhiteBG: false,
-    noMinWidthArg: false,
-    responsiveTable: false,
-    column1Width: '',
-    column2Width: '',
-    column3Width: '',
-    column4Width: '',
-  },
-};
-const Template = (args) => formatHtmlPreview(`
-    <table class="
-        sdds-table
-        ${args.isCompact ? 'sdds-table--compact' : ''}
-        ${args.dividers ? 'sdds-table--divider' : ''}
-        ${args.onWhiteBG ? 'sdds-table--on-white-bg' : ''}
-        ${args.noMinWidthArg ? 'sdds-table--no-min-width' : ''}
-        ${args.responsiveTable ? 'sdds-table--responsive' : ''}
-    " >
-    ${args.tableTitle && `<caption class="sdds-table__title">${args.tableTitle}</caption>`}
-    <thead class="sdds-table__header">
-      <tr class="sdds-table__row">
-        <th class="sdds-table__header-cell" ${args.column1Width ? `style="width: ${args.column1Width};"` : ''}>Header</th>
-        <th class="sdds-table__header-cell" ${args.column2Width ? `style="width: ${args.column2Width};"` : ''}>Header</th>
-        <th class="sdds-table__header-cell" ${args.column3Width ? `style="width: ${args.column3Width};"` : ''}>Header</th>
-        <th class="sdds-table__header-cell" ${args.column4Width ? `style="width: ${args.column4Width};"` : ''}>Header</th>
-      </tr>
-    </thead>
-     <tbody class="sdds-table__body">
-      <tr class="sdds-table__row">
-        <td class="sdds-table__body-cell">Text</td>
-        <td class="sdds-table__body-cell">Text</td>
-        <td class="sdds-table__body-cell">Text</td>
-       <td class="sdds-table__body-cell">Text</td>
-      </tr>
-      <tr class="sdds-table__row">
-        <td class="sdds-table__body-cell">Text</td>
-        <td class="sdds-table__body-cell">Text</td>
-        <td class="sdds-table__body-cell">Text</td>
-       <td class="sdds-table__body-cell">Text</td>
-      </tr>
-      <tr class="sdds-table__row">
-        <td class="sdds-table__body-cell">Text</td>
-        <td class="sdds-table__body-cell">Text</td>
-        <td class="sdds-table__body-cell">Text</td>
-       <td class="sdds-table__body-cell">Text</td>
-      </tr>
-      <tr class="sdds-table__row">
-        <td class="sdds-table__body-cell">Text</td>
-        <td class="sdds-table__body-cell">Text</td>
-        <td class="sdds-table__body-cell">Text</td>
-       <td class="sdds-table__body-cell">Text</td>
-      </tr>
-    </tbody>
-  </table>
-    `);
-export const Default = Template.bind({});
-Default.args = {};

package/dist/collection/components/data-table/table/table.css

@@ -1,15 +0,0 @@
-:host,
-.sdds-table {
-  border-collapse: collapse;
-  display: table;
-  box-sizing: border-box;
-}
-:host *,
-.sdds-table * {
-  box-sizing: border-box;
-}
-
-:host(.sdds-table--responsive),
-.sdds-table--responsive {
-  width: 100%;
-}