@scania/tegel 0.0.7 → 0.0.8

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

@@ -1,159 +0,0 @@
-import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Card',
-  parameters: {
-    notes: readme,
-    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: {
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    header: {
-      name: 'Header text',
-      description: 'Sets the header text.',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader text',
-      description: 'Sets the subheader text.',
-      control: {
-        type: 'text',
-      },
-    },
-    headerImg: {
-      name: 'Header image',
-      description: 'Toggles an image in the header.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    headerPlacement: {
-      name: 'Header placement',
-      description: 'Sets the placement of the header, above or below the body image.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Above', 'Below'],
-      table: {
-        defaultValue: { summary: 'above' },
-      },
-    },
-    bodyImg: {
-      name: 'Body image',
-      description: 'Toggles an image in the card body. Cannot be combined with divider.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'bodyDivider', eq: false },
-    },
-    bodyContent: {
-      name: 'Body text',
-      description: 'Sets the body text for the card.',
-      control: {
-        type: 'text',
-      },
-    },
-    bodyDivider: {
-      name: 'Body divider',
-      description: 'Adds a divider above the body content. Cannot be combined with body image.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'bodyImg', eq: false },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    cardBottom: {
-      name: 'Content of the bottom of the card',
-      description: 'Slot to add custom HTML elements to the bottom 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 },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    header: 'Header text',
-    subheader: 'Subheader text',
-    headerImg: true,
-    headerPlacement: 'Above',
-    bodyImg: false,
-    bodyContent: '',
-    bodyDivider: false,
-    cardBottom: `<div slot="card-bottom"><sdds-icon style="font-size: 20px;" name="arrow_right"></sdds-icon></div>`,
-    clickable: false,
-  },
-};
-const Template = ({ modeVariant, header, subheader, headerImg, headerPlacement, bodyImg, bodyContent, bodyDivider, cardBottom, clickable, }) => formatHtmlPreview(`<style>
-    /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper {
-        width: 368px;
-    }
-    </style>
-    <div class="demo-wrapper">
-    <sdds-card
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    ${header ? `header="${header}"` : ''}
-    header-placement="${headerPlacement.toLowerCase()}"
-    ${subheader ? `subheader="${subheader}"` : ''}
-    ${headerImg ? `header-img="${CardPlaceholder}"` : ''}
-    ${bodyImg ? `body-img="${CardPlaceholder}"` : ''}
-    ${clickable ? 'clickable' : ''}
-    ${bodyDivider ? 'body-divider' : ''}
-  >
-  ${bodyContent
-  ? `
-    <div slot="card-body">
-        ${bodyContent}
-    </div>`
-  : ''}
-    ${cardBottom ? `${cardBottom}` : ''}
-    </sdds-card>
-    </div>
-    ${clickable
-  ? `
-    <script>
-        document.addEventListener('sddsClick', (event)=>{
-            console.log('Card with id: ', event.detail.cardId, ' was clicked.')
-        })
-    </script>
-    `
-  : ''}
-  `);
-export const WebComponent = Template.bind({});

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

@@ -1,62 +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: {
-    label: {
-      name: 'Label text',
-      description: 'Sets the label of the component.',
-      control: {
-        type: 'text',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'Checks the checkbox.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the checkbox.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    label: 'Label',
-    checked: false,
-    disabled: false,
-  },
-};
-const Template = ({ label, checked, disabled }) => 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 Native = Template.bind({});

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

@@ -1,79 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Checkbox',
-  parameters: {
-    notes: readme,
-    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: {
-    label: {
-      name: 'Label text',
-      description: 'Sets the label of the component.',
-      control: {
-        type: 'text',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'Checks the checkbox.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the checkbox.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    label: 'Label',
-    checked: false,
-    disabled: false,
-  },
-};
-const Template = ({ label, checked, disabled }) => formatHtmlPreview(`
-    <sdds-checkbox
-        ${checked ? 'checked' : ''}
-        ${disabled ? 'disabled' : ''}
-        value="checkbox-value"
-        >
-        <div slot="label">${label}</div>
-    </sdds-checkbox>
-    
-    <!-- Script tag with event listener for demo purposes. -->
-    <script>
-        checkboxElement = document.querySelector('sdds-checkbox')
-        checkboxElement.addEventListener('sddsChange', (event) => {
-            console.log('Checkbox with id: ', event.detail.checkboxId, ' is ', event.detail.checked)
-        })
-        checkboxElement.addEventListener('sddsFocus',(event) => {
-          console.log(event)
-        })
-        checkboxElement.addEventListener('sddsBlur',(event) => {
-          console.log(event)
-        })
-    </script>
-  `);
-export const WebComponent = Template.bind({});

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

@@ -1,126 +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: {
-    active: {
-      name: 'Active',
-      description: 'Toggles if the chip is active or not.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the chip size.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-      table: {
-        defaultValue: { summary: 'Large' },
-      },
-    },
-    placeholderText: {
-      name: 'Placeholder',
-      description: 'Sets custom chip text.',
-      control: {
-        type: 'text',
-      },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Adds an icon to the chip.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    iconPosition: {
-      name: 'Icon position',
-      description: 'Sets the placement of the icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Icon left', 'Icon right'],
-      if: { arg: 'icon', eq: true },
-      table: {
-        defaultValue: { summary: 'Icon right' },
-      },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Switch between showing a native or a web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      if: { arg: 'icon', eq: true },
-      table: {
-        defaultValue: { summary: 'Native' },
-      },
-    },
-  },
-  args: {
-    active: false,
-    size: 'Large',
-    placeholderText: 'Chip text',
-    icon: false,
-    iconPosition: 'Icon right',
-    iconType: 'Native',
-  },
-};
-const Template = ({ active, size, placeholderText, icon, iconPosition, iconType }) => {
-  const activeValue = active === true ? '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-icon notification"></i>'
-    : '<sdds-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>`
-    : ''}
-    <!-- Below is a chip button implementation. Please use the proper html element 
-    depending on usage (button, checkbox, radio, etc) -->
-    <button class="sdds-chip ${icon ? iconPositionLookup[iconPosition] : ''} ${activeValue} ${sizeValue}">
-      ${icon
-    ? `
-      <div class="sdds-chip-icon">
-        ${iconSvg}
-      </div>
-      `
-    : ''}<span class="sdds-chip-text">${placeholderText}</span>
-    </button>
-    `);
-};
-export const Native = Template.bind({});

package/dist/collection/components/chip/sdds-chip.stories.js

@@ -1,229 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components',
-  parameters: {
-    notes: readme,
-    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: {
-    inputType: {
-      name: 'Type',
-      description: 'Sets the chip type.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Button', 'Radio', 'Checkbox'],
-      table: {
-        defaultValue: { summary: 'button' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the chip size.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-      table: {
-        defaultValue: { summary: 'Large' },
-      },
-    },
-    label: {
-      name: 'Label text',
-      description: 'Sets the label of the component.',
-      control: {
-        type: 'text',
-      },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Adds an icon to the component.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    iconPosition: {
-      name: 'Icon Position',
-      description: 'Sets the icon position.',
-      if: { arg: 'icon', eq: true },
-      control: {
-        type: 'radio',
-      },
-      options: ['Prefix', 'Suffix'],
-      table: {
-        defaultValue: { summary: 'Prefix' },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the checkbox.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        // TODO: Remove line below after we make design for disabled state, it hides control
-        disable: true,
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    inputType: 'Button',
-    size: 'Large',
-    label: 'Label',
-    icon: false,
-    iconPosition: 'Prefix',
-    disabled: false,
-  },
-};
-const Template = ({ inputType, size, label, icon, iconPosition }) => {
-  const sizeLookUp = {
-    Large: 'lg',
-    Small: 'sm',
-  };
-  return formatHtmlPreview(`
-  ${inputType === 'Button'
-    ? `<sdds-chip type="button" size="${sizeLookUp[size]}">
-            <span slot="label">
-                ${icon && iconPosition === 'Prefix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-                ${label}
-                ${icon && iconPosition === 'Suffix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-            </span>
-        </sdds-chip>
-
-        <!-- Script tag for demo purposes -->
-        <script>
-          document.addEventListener('sddsClick', (event)=>{
-          console.log(event)
-          })
-        </script>`
-    : ''}
-  ${inputType === 'Checkbox'
-    ? ` <style>
-      /* demo-wrapper and demo-styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        gap: 8px;
-      }
-    </style>
-
-    <div class="demo-wrapper">
-      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" checked value="checkbox-1-value">
-        <span slot="label">
-          ${icon && iconPosition === 'Prefix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-          ${label} 1
-          ${icon && iconPosition === 'Suffix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-        </span>
-      </sdds-chip>
-      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-2-value">
-        <span slot="label">
-          ${icon && iconPosition === 'Prefix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-          ${label} 2
-          ${icon && iconPosition === 'Suffix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-        </span>
-      </sdds-chip>
-      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-3-value">
-        <span slot="label">
-          ${icon && iconPosition === 'Prefix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-          ${label} 3
-          ${icon && iconPosition === 'Suffix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-        </span>
-      </sdds-chip>
-    </div>
-
-    <!-- Script tag for demo purposes -->
-    <script>
-      document.addEventListener('sddsChange', (event)=>{
-          console.log(event)
-      })
-    </script>`
-    : ''}
-  ${inputType === 'Radio'
-    ? ` <style>
-      /* demo-wrapper and demo-styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        gap: 8px;
-      }
-    </style>
-
-    <div class="demo-wrapper">
-      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-1-value">
-        <span slot="label">
-          ${icon && iconPosition === 'Prefix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-          ${label} 1
-          ${icon && iconPosition === 'Suffix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-        </span>
-      </sdds-chip>
-      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" checked value="radio-2-value">
-        <span slot="label">
-          ${icon && iconPosition === 'Prefix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-          ${label} 2
-          ${icon && iconPosition === 'Suffix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-        </span>
-      </sdds-chip>
-      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-3-value">
-        <span slot="label">
-          ${icon && iconPosition === 'Prefix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-          ${label} 3
-          ${icon && iconPosition === 'Suffix'
-      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
-      : ''}
-        </span>
-      </sdds-chip>
-    </div>
-
-    <!-- Script tag for demo purposes -->
-    <script>
-      document.addEventListener('sddsChange', (event)=>{
-          console.log(event)
-      })
-    </script>`
-    : ''}
-
-
-  `);
-};
-export const Chip = Template.bind({});