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

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

@@ -1,251 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Slider',
-  argTypes: {
-    initialValue: {
-      name: 'Initial value',
-      description: 'Initial value for slider',
-      control: {
-        type: 'text',
-      },
-    },
-    min: {
-      name: 'Min. value',
-      description: 'Minimum value',
-      control: {
-        type: 'text',
-      },
-    },
-    max: {
-      name: 'Max. value',
-      description: 'Maximum value',
-      control: {
-        type: 'text',
-      },
-    },
-    showLabel: {
-      name: 'Show label',
-      description: 'Show or hide label',
-      control: {
-        type: 'boolean',
-      },
-    },
-    labelText: {
-      name: 'Label text',
-      description: 'Text for label',
-      control: {
-        type: 'text',
-      },
-      if: {
-        arg: 'showLabel',
-        truthy: true,
-      },
-    },
-    showTooltip: {
-      name: 'Show tooltip',
-      description: 'Show or hide tooltip',
-      control: {
-        type: 'boolean',
-      },
-    },
-    showTicks: {
-      name: 'Show ticks',
-      description: 'Show or hide ticks',
-      control: {
-        type: 'boolean',
-      },
-    },
-    numTicks: {
-      name: 'Number of ticks',
-      description: 'Set the number of ticks to display',
-      control: {
-        type: 'text',
-      },
-      if: {
-        arg: 'showTicks',
-        truthy: true,
-      },
-    },
-    snapToTicks: {
-      name: 'Snap to ticks',
-      description: 'Snap the scrubber to the closest tick when dragging',
-      control: {
-        type: 'boolean',
-      },
-      if: {
-        arg: 'showTicks',
-        truthy: true,
-      },
-    },
-    showTickNumbers: {
-      name: 'Show tick numbers',
-      description: 'Show or hide tick numbers',
-      control: {
-        type: 'boolean',
-      },
-      if: {
-        arg: 'showTicks',
-        truthy: true,
-      },
-    },
-    showControls: {
-      name: 'Show controls (not compatible with input field)',
-      description: 'Show or hide controls',
-      control: {
-        type: 'boolean',
-      },
-    },
-    step: {
-      name: 'Step value',
-      description: 'Value to increment/decrease when using controls',
-      control: {
-        type: 'text',
-      },
-      if: {
-        arg: 'showControls',
-        truthy: true,
-      },
-    },
-    showInput: {
-      name: 'Show value input field (not compatible with controls)',
-      description: 'Show or hide value input field',
-      control: {
-        type: 'boolean',
-      },
-      if: {
-        arg: 'showControls',
-        truthy: false,
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Put control in disabled state',
-      control: {
-        type: 'boolean',
-      },
-    },
-    readonly: {
-      name: 'Read Only',
-      description: 'Put control in read-only state',
-      control: {
-        type: 'boolean',
-      },
-    },
-    small: {
-      name: 'Small',
-      description: 'Use small variant',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  args: {
-    min: 0,
-    max: 100,
-    value: 50,
-  },
-};
-const style = `
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper {
-      width: 80%;
-      margin: 0 auto;
-      display: flex;
-      align-items: center;
-      height: 100%;
-      padding-top: 100px;
-      padding-left: 40px;
-      padding-right: 40px;
-    }    
-  </style>
-`;
-const Template = ({ initialValue, min, max, showLabel, labelText, showTooltip, showTicks, numTicks, showTickNumbers, snapToTicks, showControls, step, showInput, disabled, readonly, small, }) => {
-  return formatHtmlPreview(`
-    ${style}
-    <div class="demo-wrapper">
-      <sdds-slider id="sdds-slider"
-        min="${min}" 
-        max="${max}" 
-        ${showControls && step ? 'step="' + step + '"' : ''}
-        value="${initialValue}" 
-        ${showTicks ? 'ticks="' + numTicks + '"' : ''} 
-        ${showTickNumbers ? 'show-tick-numbers' : ''} 
-        ${snapToTicks ? 'snap' : ''} 
-        ${showLabel ? 'label="' + labelText + '"' : ''} 
-        ${showTooltip ? 'tooltip' : ''} 
-        ${showControls ? 'controls' : ''} 
-        ${showInput ? 'input' : ''} 
-        ${disabled ? 'disabled' : ''} 
-        ${small ? 'size="sm"' : ''}
-        ${readonly ? 'read-only' : ''} 
-        >
-
-      </sdds-slider>
-    </div>
-  `);
-};
-let sliderStoryLoaded = false;
-function ready(fn) {
-  if (document.readyState !== 'loading') {
-    fn();
-  }
-  else {
-    document.addEventListener('DOMContentLoaded', fn);
-  }
-}
-ready(() => {
-  if (sliderStoryLoaded) {
-    return;
-  }
-  sliderStoryLoaded = true;
-  const slider = document.querySelector('#sdds-slider');
-  if (!slider) {
-    return;
-  }
-  /*
-    @ATTENTION
-    Keep in mind that storybook does stuff, so if any story control is changed,
-    the page has to be reloaded for this event listener to work. Also it will only
-    work in the Canvas-tab
-  */
-  console.log('adding slider event');
-  slider.addEventListener('sliderChange', event => {
-    console.log('Got a sliderChange event', event['detail'].value);
-  });
-});
-export const Default = Template.bind({});
-Default.args = {
-  initialValue: '50',
-  showLabel: false,
-  labelText: 'Label',
-  showTooltip: true,
-  showTicks: false,
-  numTicks: '3',
-  showTickNumbers: false,
-  showControls: false,
-  showInput: false,
-  min: '0',
-  max: '100',
-  step: '1',
-  disabled: false,
-  small: false,
-  snapToTicks: false,
-  readonly: false,
-};

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

@@ -1,59 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Spinner',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    variant: {
-      name: 'Variant',
-      control: {
-        type: 'radio',
-      },
-      options: ['Standard', 'Inverted'],
-      description: 'Variant of the spinner',
-    },
-    size: {
-      name: 'Size',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      description: 'Size of the spinner',
-    },
-  },
-  args: {
-    variant: 'Standard',
-    size: 'Large',
-  },
-};
-const Template = ({ size, variant }) => {
-  const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };
-  const variantLookup = { Standard: 'standard', Inverted: 'inverted' };
-  return formatHtmlPreview(`
-  <sdds-spinner 
-    size="${sizeLookup[size]}"  
-    variant="${variantLookup[variant]}">
-  </sdds-spinner>
-  `);
-};
-export const Default = Template.bind({});
-Default.args = {};
-export const Inverted = Template.bind({});
-Inverted.args = {
-  variant: 'Inverted',
-};

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

@@ -1,139 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Stepper',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Size of the stepper',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Small'],
-    },
-    style: {
-      name: 'Style',
-      description: 'Style of the stepper',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Text on side', 'Vertical'],
-    },
-    showLabel: {
-      name: 'Show label text',
-      description: 'Show or hide the label text',
-      control: {
-        type: 'boolean',
-      },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Native/Web Component',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-    },
-  },
-  args: {
-    size: 'Default',
-    style: 'Default',
-    showLabel: true,
-    iconType: 'Native',
-  },
-};
-const Template = ({ size, style, showLabel, iconType }) => {
-  const sizeClass = size === 'Small' ? 'sdds-stepper-sm' : '';
-  const styleLookup = {
-    'Default': '',
-    'Text on side': 'sdds-stepper--sidetext',
-    'Vertical': 'sdds-stepper--vertical',
-  };
-  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-stepper-demo-container">
-    <div class="sdds-stepper ${sizeClass} ${styleLookup[style]}">
-
-      <div class="sdds-stepper__step sdds-stepper__step--value">
-        <div class="sdds-stepper__step-icon">
-          <span class="sdds-stepper__step-icon-value">1</span>
-        </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step value</label>' : ''}
-      </div>
-
-      <div class="sdds-stepper__step sdds-stepper__step--warning">
-        <div class="sdds-stepper__step-icon">
-        ${iconType === 'Native'
-    ? `<i class="sdds-icon warning"></i>
-        `
-    : `<sdds-icon name="warning" size="${size === 'Small' ? '16px' : '18px'}"></sdds-icon> `}
-        </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step warning</label>' : ''}
-      </div>
-
-      <div class="sdds-stepper__step sdds-stepper__step--inactive">
-        <div class="sdds-stepper__step-icon">
-          <span class="sdds-stepper__step-icon-value">3</span>
-        </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step inactive</label>' : ''}
-      </div>
-
-      <div class="sdds-stepper__step sdds-stepper__step--success">
-        <div class="sdds-stepper__step-icon">
-        ${iconType === 'Native'
-    ? `<i class="sdds-icon tick"></i>
-        `
-    : `<div>
-        <sdds-icon name="tick" size="${size === 'Small' ? '16px' : '20px'}"></sdds-icon> 
-        </div>`}
-        </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step success</label>' : ''}
-      </div>
-
-    </div>
-  </div>
-    `);
-};
-export const Default = Template.bind({});
-Default.args = {};
-export const Small = Template.bind({});
-Small.args = {
-  size: 'Small',
-};
-export const TextOnSide = Template.bind({});
-TextOnSide.args = {
-  size: 'Default',
-  style: 'Text on side',
-};
-export const Vertical = Template.bind({});
-Vertical.args = {
-  size: 'Default',
-  style: 'Vertical',
-};
-export const HideLabel = Template.bind({});
-HideLabel.args = {
-  size: 'Default',
-  style: 'Default',
-  label: 'Hide',
-};

package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js

@@ -1,65 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Tabs',
-  parameters: {
-    notes: readme,
-    backgrounds: { default: 'white' },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    autoHeight: {
-      name: 'Same height',
-      description: 'Make all tab panels as tall as the tallest tab panel',
-      control: {
-        type: 'boolean',
-      },
-    },
-    modeVariant: {
-      name: "Mode variant",
-      control: {
-        type: 'radio'
-      },
-      options: ['Primary', 'Secondary'],
-    },
-    backgrounds: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  args: {
-    autoHeight: false,
-    modeVariant: 'Primary'
-  },
-};
-// eslint-disable-next-line arrow-body-style
-const Template = ({ autoHeight = false, modeVariant }) => {
-  return formatHtmlPreview(`
-    <sdds-inline-tabs ${autoHeight ? 'auto-height' : ''}  mode-variant="${modeVariant.toLowerCase()}">
-      <div data-name="Tab with tall content">
-        Tab panel 1
-        <div style="width:200px; height:200px; background: linear-gradient(125deg,rgba(255, 0, 0, 1) 0%,rgba(255, 255, 0, 1) 33%,rgba(0, 192, 255, 1) 66%,rgba(192, 0, 255, 1) 100%);"></div>
-      </div>
-      <div data-name="Default tab" data-default="true">
-        Tab panel 2
-      </div>
-      <div data-name="Disabled tab" aria-disabled="true">
-        Tab panel 3
-      </div>
-    </sdds-inline-tabs>
-`);
-};
-export const InlineTabs = Template.bind({});
-InlineTabs.args = {};

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js

@@ -1,43 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Tabs',
-  parameters: {
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    modeVariant: {
-      name: "Variant",
-      control: {
-        type: 'radio'
-      },
-      options: ['Primary', 'Secondary'],
-    }
-  },
-  args: {
-    modeVariant: 'Primary'
-  }
-};
-const Template = ({ modeVariant }) => formatHtmlPreview(`
-  <sdds-inline-tabs-fullbleed id="inline-tabs-fullbleed-example" mode-variant="${modeVariant.toLowerCase()}">
-      <a href="#">Tab name</a>
-      <a href="#" class="sdds-inline-tabs-fullbleed--tab__active">Active tab</a>
-      <a href="#">Tab name</a>
-      <a href="#">Tab name</a>
-      <a href="#" class="sdds-inline-tabs-fullbleed--tab__disabled">Disabled tab</a>
-    </sdds-inline-tabs-fullbleed>
-`);
-export const InlineTabsFullbleed = Template.bind({});
-InlineTabsFullbleed.args = {};

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js

@@ -1,32 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Tabs',
-  parameters: {
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-};
-// Why role="link" on a disabled link: https://www.scottohara.me/blog/2021/05/28/disabled-links.html
-const Template = () => formatHtmlPreview(`
-    <sdds-navigation-tabs>
-      <a href="#" class="sdds-navigation-tabs-tab-active">Active tab</a>
-      <a href="#">Tab name</a>
-      <a href="#">Tab name</a>
-      <a href="#">Tab name</a>
-      <a role="link" aria-disabled="true" class="sdds-navigation-tabs-tab-disabled">Disabled tab</a>
-    </sdds-navigation-tabs>
-    `);
-export const NavigationTabs = Template.bind({});
-NavigationTabs.args = {};