@scania/tegel 0.0.7 → 0.0.8

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

@@ -1,131 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from '../icon/iconsArray';
-export default {
-  title: 'Components/Toast',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Message type',
-      description: 'Changes the type of message.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Success', 'Warning', 'Error'],
-    },
-    header: {
-      name: 'Header',
-      description: 'Adds a header text.',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Adds a subheader text.',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Adds a CTA link.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Icon to display on the button. Choose "none" to exclude the icon, or choose "recommended" to pick the icon that is recommended for the type of toast.',
-      control: {
-        type: 'select',
-      },
-      options: ['none', 'recommended', ...iconsNames],
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Switch between showing a native or a web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-    },
-  },
-  args: {
-    type: 'Information',
-    header: 'Header',
-    subheader: '',
-    link: false,
-    icon: 'recommended',
-    iconType: 'Web Component',
-  },
-};
-const typeLookup = {
-  Success: 'success',
-  Information: 'info',
-  Warning: 'warning',
-  Error: 'error',
-};
-const iconLookup = {
-  Success: 'tick',
-  Information: 'info',
-  Warning: 'warning',
-  Error: 'error',
-};
-const Template = ({ type, header, subheader, link, iconType, icon }) => {
-  const iconValue = icon === 'recommended' ? iconLookup[type] : icon;
-  return formatHtmlPreview(`
-      ${iconType === 'Native'
-    ? `
-    <style>
-    /* Note: In case 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-toast sdds-toast-${typeLookup[type]}">
-  ${icon === 'none'
-    ? ''
-    : `
-    <div class="sdds-toast-icon">
-      ${iconType === 'Native'
-      ? `<i class="sdds-icon ${iconValue}"></i>`
-      : `<sdds-icon name="${iconValue}" size="20px"></sdds-icon>
-      `}
-    </div>
-  `}
-    <div class="sdds-toast-content">
-      <div class="sdds-toast-header">
-        <span class="sdds-toast-headline">${header}</span>
-        <button type="button" aria-label="close" class="sdds-toast-close">
-          ${iconType === 'Native'
-    ? `<i class="sdds-icon cross"></i>`
-    : `<sdds-icon name="cross" size="20px"></sdds-icon>
-          `}
-        </button>
-      </div>
-      ${subheader || link
-    ? `\n<div class="sdds-toast-body">\
-          ${subheader ? `\n<span class="sdds-toast-subheadline">${subheader}</span>` : ''}\
-          ${link ? '\n<a class="sdds-toast-link" href="#">Link example</a>' : ''}
-          </div> `
-    : ''}
-    </div>
-  </div>
-  `);
-};
-export const Native = Template.bind({});

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

@@ -1,94 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Toggle',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the toggle.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    headline: {
-      name: 'Headline',
-      description: 'Sets the headline, displayed above the toggle.',
-      control: {
-        type: 'text',
-      },
-    },
-    label: {
-      name: 'Label text',
-      description: 'Sets the label for the toggles input element.',
-      control: {
-        type: 'text',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'Sets the toggle as checked.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the toggle.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    size: 'Large',
-    headline: 'Headline',
-    label: 'Label',
-    checked: false,
-    disabled: false,
-  },
-};
-const Template = ({ size, headline, label, checked, disabled }) => formatHtmlPreview(`
-      <sdds-toggle
-        ${checked ? 'checked' : ''}
-        ${disabled ? 'disabled' : ''}
-        ${headline ? `headline="${headline}"` : ''}
-        size="${size === 'Large' ? 'lg' : 'sm'}">
-        <div slot="label">${label}</div>
-    </sdds-toggle>
-
-    <!-- Script tag with eventlistener for demo purposes. -->
-    <script>
-      toggleElement = document.querySelector('sdds-toggle')
-
-      toggleElement.addEventListener('sddsToggle', (event)=> {
-        console.log('Toggle with id: ', event.detail.toggleId, ' is ', event.detail.checked)
-      })
-    </script>
-  `);
-export const WebComponent = Template.bind({});

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

@@ -1,77 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Toggle',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the toggle.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-    },
-    headline: {
-      name: 'Headline',
-      description: 'Sets the headline, displayed above the toggle.',
-      control: {
-        type: 'text',
-      },
-    },
-    label: {
-      name: 'Label text',
-      description: 'Sets the label for the toggles input element.',
-      control: {
-        type: 'text',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'Sets the toggle as checked.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the toggle.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    size: 'Large',
-    headline: 'Headline',
-    label: 'Label',
-    checked: false,
-    disabled: false,
-  },
-};
-const Template = ({ size, headline, label, checked, disabled }) => {
-  const sizeValue = size === 'Small' ? 'sdds-toggle-sm' : '';
-  const headlineDiv = headline.length > 0 ? `<div class="sdds-toggle-headline">${headline}</div>` : '';
-  return formatHtmlPreview(`
-      <div class="sdds-toggle ${sizeValue} ${disabled ? 'disabled' : ''}">
-        ${headlineDiv}
-        <input type="checkbox" class="sdds-toggle-input" id="customSwitch1" ${disabled ? 'disabled' : ''} ${checked ? 'checked' : ''}>
-        <span class="sdds-toggle-switch"></span>
-        <label class="sdds-toggle-label" for="customSwitch1">${label}</label>
-      </div>
-  `);
-};
-export const Native = Template.bind({});

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

@@ -1,127 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Tooltip',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    tooltipPosition: {
-      name: 'Tooltip position',
-      description: 'Sets the position of the tooltip.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        'Bottom-start',
-        'Bottom',
-        'Bottom-end',
-        'Top-start',
-        'Top',
-        'Top-end',
-        'Left-start',
-        'Left',
-        'Left-end',
-        'Right-start',
-        'Right',
-        'Right-end',
-      ],
-      table: {
-        defaultValue: {
-          summary: 'bottom',
-        },
-      },
-    },
-    text: {
-      name: 'Tooltip text',
-      description: 'Sets the sext that will be displayed inside tooltip.',
-      control: {
-        type: 'text',
-      },
-    },
-    slot: {
-      name: 'Tooltip html content',
-      description: 'A slot for the tooltip to pass in html.',
-      control: {
-        type: 'text',
-      },
-    },
-    mouseOverTooltip: {
-      name: 'Open while hovering over tooltip',
-      description: 'Keeps the tooltip visible as long as the mouse hovers over it.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-  },
-  args: {
-    tooltipPosition: 'Bottom',
-    text: 'Text inside tooltip',
-    slot: '<p class="sdds-detail-05 sdds-u-m0"> Paragraph tag inside of Tooltip with <b>bold</b> and <i>italic</i> tags too. </p>',
-    mouseOverTooltip: true,
-  },
-};
-const positionLookup = {
-  'Bottom-start': 'bottom-start',
-  'Bottom': 'bottom',
-  'Bottom-end': 'bottom-end',
-  'Top-start': 'top-start',
-  'Top': 'top',
-  'Top-end': 'top-end',
-  'Left-start': 'left-start',
-  'Left': 'left',
-  'Left-end': 'left-end',
-  'Right-start': 'right-start',
-  'Right': 'right',
-  'Right-end': 'right-end',
-};
-const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) => formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-     .demo-wrapper{
-       height: 300px;
-       display: flex;
-       justify-content: center;
-       align-items: center;
-     }
-    </style>
-
-   <div class="demo-wrapper">
-   <!-- The 'referenceEl' prop can be used instead of 'selector',
-    which might be preferable in frameworks like React -->
-   <sdds-tooltip
-      placement="${positionLookup[tooltipPosition]}"
-      selector="#button-1"
-      text="${text}"
-      mouse-over-tooltip="${mouseOverTooltip}">
-      ${slot}
-    </sdds-tooltip>
-
-    <!-- Demo button for presentation purposes -->
-    <sdds-button size= 'sm' id="button-1" text='Hover me'></sdds-button>
-   </div>
-  `);
-export const WebComponent = ComponentTooltip.bind({});

package/dist/collection/components/utility/colour/background-color.stories.js

@@ -1,96 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-export default {
-  title: 'Utilities/Colours',
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    backgroundColor: {
-      name: 'Background colour',
-      description: 'The colour of the text',
-      control: {
-        type: 'select',
-      },
-      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
-    },
-    greyScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        '50',
-        '100',
-        '200',
-        '300',
-        '400',
-        '500',
-        '600',
-        '700',
-        '800',
-        '846',
-        '868',
-        '900',
-        '958',
-      ],
-      if: { arg: 'backgroundColor', eq: 'grey' },
-    },
-    redScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'backgroundColor', eq: 'red' },
-    },
-    blueScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'backgroundColor', eq: 'blue' },
-    },
-  },
-};
-const Template = ({ backgroundColor, greyScale, blueScale, redScale }) => {
-  let scale = 100;
-  switch (backgroundColor) {
-    case 'blue':
-      scale = blueScale;
-      break;
-    case 'grey':
-      scale = greyScale;
-      break;
-    case 'red':
-      scale = redScale;
-      break;
-    default:
-      scale = blueScale;
-      break;
-  }
-  return formatHtmlPreview(`
-        <style>
-            .demo-wrapper{
-                height: 400px;
-                width: 400px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-        </style>
-        <div class="sdds-background-${backgroundColor}-${scale} demo-wrapper">
-            <h1>background-color:${backgroundColor}</h1>
-        </div>
-          `);
-};
-export const backgroundColor = Template.bind({});
-backgroundColor.args = {
-  backgroundColor: 'blue',
-  blueScale: '500',
-  redScale: '500',
-  greyScale: '958',
-};

package/dist/collection/components/utility/colour/text-color.stories.js

@@ -1,94 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-export default {
-  title: 'Utilities/Colours',
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    colour: {
-      name: 'Colour',
-      description: 'The colour of the text',
-      control: {
-        type: 'select',
-      },
-      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
-    },
-    greyScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        '50',
-        '100',
-        '200',
-        '300',
-        '400',
-        '500',
-        '600',
-        '700',
-        '800',
-        '846',
-        '868',
-        '900',
-        '958',
-      ],
-      if: { arg: 'colour', eq: 'grey' },
-    },
-    redScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'colour', eq: 'red' },
-    },
-    blueScale: {
-      name: 'Scale',
-      description: 'The colour scale used.',
-      control: {
-        type: 'select',
-      },
-      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-      if: { arg: 'colour', eq: 'blue' },
-    },
-  },
-};
-const Template = ({ colour, greyScale, blueScale, redScale }) => {
-  let scale = 100;
-  switch (colour) {
-    case 'blue':
-      scale = blueScale;
-      break;
-    case 'grey':
-      scale = greyScale;
-      break;
-    case 'red':
-      scale = redScale;
-      break;
-    default:
-      scale = blueScale;
-      break;
-  }
-  return formatHtmlPreview(`
-  <style>
-    .demo-wrapper h1 {
-      margin: 0;
-      width: 300px;
-    }
-  </style>
-  <div class="demo-wrapper">
-  <h1 class="sdds-text-${colour}-${scale}">A text ${colour} heading</h1>
-  <p class="sdds-text-${colour}-${scale}">A text ${colour} paragraph</p>
-  </div>
-  `);
-};
-export const textColor = Template.bind({});
-textColor.args = {
-  colour: 'blue',
-  blueScale: '500',
-  redScale: '500',
-  greyScale: '958',
-};

package/dist/collection/foundations-stories/colour/colour-brand.stories.js

@@ -1,38 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Colour',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <style>
-  /* Demo code for presentation purposes */
-  .demo-wrapper {
-    height: 90px;
-  }
-  .demo-wrapper span {
-    color: white;
-    background-color: black;
-    border: 1px solid white;
-    padding: 4px;
-    position: absolute;
-  }
-</style>
-
-  <div class="demo-wrapper" style="background-color: var(--sdds-black)">
-    <span>--sdds-black</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--sdds-white)">
-    <span>--sdds-white</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--sdds-blue)">
-    <span>--sdds-blue</span>
-  </div>
-  `);
-export const Brand = Template.bind({});