@scania/tegel 0.0.7 → 0.0.8

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

@@ -1,242 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Slider',
-  argTypes: {
-    min: {
-      name: 'Min. value',
-      description: 'Sets the minimum value for the slider.',
-      control: {
-        type: 'number',
-      },
-      table: {
-        defaultValue: { summary: 0 },
-      },
-    },
-    max: {
-      name: 'Max. value',
-      description: 'Sets the maximum value for the slider.',
-      control: {
-        type: 'number',
-      },
-      table: {
-        defaultValue: { summary: 100 },
-      },
-    },
-    initialValue: {
-      name: 'Initial value',
-      description: 'Sets the initial value for the slider.',
-      control: {
-        type: 'number',
-      },
-      table: {
-        defaultValue: { summary: 0 },
-      },
-    },
-    showLabel: {
-      name: 'Show label',
-      description: 'Toggles if the lable should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    labelText: {
-      name: 'Label text',
-      description: 'Sets the text for the label.',
-      control: {
-        type: 'text',
-      },
-      if: { arg: 'showLabel', eq: true },
-    },
-    showTicks: {
-      name: 'Show ticks',
-      description: 'Toggles if ticks should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    numTicks: {
-      name: 'Number of ticks',
-      description: 'Sets the number of ticks to be displayed.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'showTicks', eq: true },
-      table: {
-        defaultValue: { summary: 0 },
-      },
-    },
-    showTickNumbers: {
-      name: 'Show tick numbers',
-      description: 'Toggles if tick numbers should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'showTicks', eq: true },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    snapToTicks: {
-      name: 'Snap to ticks',
-      description: 'Snaps the scrubber to the closest tick when dragging.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'showTicks', eq: true },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    showTooltip: {
-      name: 'Show tooltip',
-      description: 'Toggles if the tooltip should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    showControls: {
-      name: 'Show controls (not compatible with input field)',
-      description: 'Toggles if controls should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    step: {
-      name: 'Step value',
-      description: 'Sets the value to increment/decrement with when using controls.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'showControls', eq: true },
-      table: {
-        defaultValue: { summary: 1 },
-      },
-    },
-    showInput: {
-      name: 'Show value input field (not compatible with controls)',
-      description: 'Toggles if the values input field should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'showControls', eq: false },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    scrubberSize: {
-      name: 'Scrubber size',
-      description: 'Switches between the large and small version of the scrubber.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    readonly: {
-      name: 'Read Only',
-      description: 'Puts the control in a read-only state.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the slider.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  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',
-    initialValue: '50',
-    showLabel: false,
-    labelText: 'Label',
-    showTicks: false,
-    numTicks: '3',
-    showTickNumbers: false,
-    snapToTicks: false,
-    showTooltip: true,
-    showControls: false,
-    step: '1',
-    showInput: false,
-    scrubberSize: 'Large',
-    readonly: false,
-    disabled: false,
-  },
-};
-const sizeLookUp = {
-  Large: 'lg',
-  Small: 'sm',
-};
-const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, scrubberSize, readonly, disabled, }) => formatHtmlPreview(`
- <!-- Style code below is just for demo purposes -->
-    <style>
-      .demo-wrapper {
-          width: 500px;
-          margin-left: 150px;
-      }
-    </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' : ''}
-        scrubber-size="${sizeLookUp[scrubberSize]}"
-        ${readonly ? 'read-only' : ''}
-        >
-      </sdds-slider>
-    </div>
-
-     <!-- Script tag for demo purposes -->
-    <script>
-      slider = document.querySelectorAll('sdds-slider')[0]
-
-      slider.removeEventListener('sddsChange', null)
-      slider.addEventListener('sddsChange', (event) => {
-        console.log(event);
-      });
-    </script>
-  `);
-export const Default = Template.bind({});

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

@@ -1,65 +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',
-      description: 'Switches the variant of the spinner.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Standard', 'Inverted'],
-      table: {
-        defaultValue: { summary: 'standard' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the spinner.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-  },
-  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,129 +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: 'Sets the size of the stepper.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-      table: {
-        defaultValue: { summary: 'Large' },
-      },
-    },
-    style: {
-      name: 'Style',
-      description: 'Sets the style of the stepper.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Text on side', 'Vertical'],
-      table: {
-        defaultValue: { summary: 'Default' },
-      },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Switch between showing a native or a web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      table: {
-        defaultValue: { summary: 'Native' },
-      },
-    },
-    hideLabels: {
-      name: 'Hide labels',
-      description: 'Hides the labels for all stepper items.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    size: 'Large',
-    style: 'Default',
-    iconType: 'Native',
-    hideLabels: false,
-  },
-};
-const Template = ({ size, style, iconType, hideLabels }) => {
-  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 ${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>
-        ${hideLabels ? '' : '<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>
-        ${hideLabels ? '' : '<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>
-        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step inactive with text</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>
-        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step success</label>'}
-      </div>
-
-    </div>
-    `);
-};
-export const Native = Template.bind({});
-Native.args = {};

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

@@ -1,104 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-import readmeItem from './folder-tab/readme.md';
-export default {
-  title: 'Components/Tabs',
-  parameters: {
-    notes: {
-      'Folder tabs': readme,
-      'Folder tabs item': readmeItem,
-    },
-    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: {
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variation 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' },
-      },
-    },
-    defaultSelectedIndex: {
-      name: 'Default selected index',
-      description: 'Sets the default selected tab, if this is used the tab changes will be done automatically.',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 0, 1, 2, 3],
-      table: {
-        defaultValue: { summary: '0' },
-      },
-    },
-    selectedIndex: {
-      name: 'Selected index',
-      description: 'Sets the selected tab, if this is used the tab changes has to be handled by the user.',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 0, 1, 2, 3],
-      if: { arg: 'defaultSelectedIndex', eq: 'None' },
-    },
-    backgrounds: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    defaultSelectedIndex: 'None',
-    selectedIndex: 'None',
-  },
-};
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-    <sdds-folder-tabs
-      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      <sdds-folder-tab>
-        <button>First tab</button>
-      </sdds-folder-tab>
-      <sdds-folder-tab>
-        <button>Second tab is much longer</button>
-      </sdds-folder-tab>
-      <sdds-folder-tab>
-        <button>Third tab</button>
-      </sdds-folder-tab>
-      <sdds-folder-tab disabled>
-        <button>Fourth tab</button>
-      </sdds-folder-tab>
-    </sdds-folder-tabs>
-
-    <!-- Demo container. -->
-    <div class="demo-container">
-      <h4 class="sdds-headline-04">Selected tab index: <span class="selectedTabIndex"></span></h4>
-    </div>
-    
-    <!-- Script tag with eventlistener for demo purposes. -->
-    <script>
-    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-    tabs = document.querySelector('sdds-folder-tabs');
-  
-    tabs.addEventListener('sddsChange', (event) => {
-      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-      console.log(event)
-    })
-    </script>
-`);
-export const FolderTabs = Template.bind({});

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

@@ -1,98 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-import readmeTab from './inline-tab/readme.md';
-export default {
-  title: 'Components/Tabs',
-  parameters: {
-    notes: {
-      'Inline tabs': readme,
-      'Inline tab': readmeTab,
-    },
-    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: 'Mode variant',
-      description: 'Mode variation 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' },
-      },
-    },
-    defaultSelectedIndex: {
-      name: 'Default selected index',
-      description: 'Sets the default selected tab, if this is used the tab changes will be done automatically.',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 0, 1, 2, 3],
-      table: {
-        defaultValue: { summary: '0' },
-      },
-    },
-    selectedIndex: {
-      name: 'Selected index',
-      description: 'Sets the selected tab, if this is used the tab changes has to be handled by the user.',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 0, 1, 2, 3],
-      if: { arg: 'defaultSelectedIndex', eq: 'None' },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    defaultSelectedIndex: 'None',
-    selectedIndex: 'None',
-  },
-};
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-  <sdds-inline-tabs
-    ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-    ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      <sdds-inline-tab>
-        <button>First tab</button>
-      </sdds-inline-tab>
-      <sdds-inline-tab>
-        <button>Second tab is much longer</button>
-      </sdds-inline-tab>
-      <sdds-inline-tab>
-        <button>Third tab</button>
-      </sdds-inline-tab>
-      <sdds-inline-tab disabled>
-        <button>Fourth tab</button>
-      </sdds-inline-tab>
-   </sdds-inline-tabs>
-
-   <!-- Demo container. -->
-   <div class="demo-container">
-     <h4 class="sdds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
-   </div>
-
-   <!-- Script tag with eventlistener for demo purposes. -->
-   <script>
-   selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-   tabs = document.querySelector('sdds-inline-tabs');
-   
-   tabs.addEventListener('sddsChange', (event) => {
-     selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-     console.log(event)
-    })
-   </script>
-`);
-export const InlineTabs = Template.bind({});