@scania/tegel 0.0.1-beta.3 → 0.0.1-beta.4

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

@@ -0,0 +1,181 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,124 @@
+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

@@ -0,0 +1,182 @@
+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

@@ -0,0 +1,15 @@
+: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%;
+}