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

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.css

@@ -1,79 +0,0 @@
-:root,
-html {
-  --sdds-spinner-background: var(--sdds-blue-400);
-  --sdds-spinner-background-inverted: var(--sdds-white);
-  --sdds-spinner-speed: 1.8s;
-  --sdds-spinner-speed-lg: 2s;
-  --sdds-spinner-radius-xs: 8px;
-  --sdds-spinner-radius-sm: 12px;
-  --sdds-spinner-radius-md: 26px;
-  --sdds-spinner-radius-lg: 42px;
-  --sdds-spinner-radius: var(--sdds-spinner-radius-lg);
-  --sdds-spinner-stroke-width-xs: 3px;
-  --sdds-spinner-stroke-width-sm: 4px;
-  --sdds-spinner-stroke-width-md: 6px;
-  --sdds-spinner-stroke-width-lg: 8px;
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-lg);
-  --PI: 3.14159265358979;
-}
-
-:host {
-  box-sizing: border-box;
-  display: block;
-}
-:host * {
-  box-sizing: border-box;
-}
-
-.sdds-spinner-svg {
-  width: calc(var(--sdds-spinner-radius) * 2);
-  height: calc(var(--sdds-spinner-radius) * 2);
-  transform: scale(-1, 1) rotate(-90deg);
-}
-.sdds-spinner-svg-xs {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-xs);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-xs);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed);
-}
-.sdds-spinner-svg-sm {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-sm);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-sm);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed);
-}
-.sdds-spinner-svg-md {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-md);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-md);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed);
-}
-.sdds-spinner-svg-lg {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-lg);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-lg);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed-lg);
-}
-
-.sdds-spinner-circle {
-  cx: var(--sdds-spinner-radius);
-  cy: var(--sdds-spinner-radius);
-  r: calc(var(--sdds-spinner-radius) - var(--sdds-spinner-stroke-width) / 2);
-  stroke-width: var(--sdds-spinner-stroke-width);
-  fill: none;
-  --sdds-spinner-stroke-dash: calc((2 * var(--PI)) * var(--sdds-spinner-radius));
-  stroke-dasharray: var(--sdds-spinner-stroke-dash);
-  stroke-width: var(--sdds-spinner-stroke-width);
-  animation: dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
-}
-.sdds-spinner-circle-standard {
-  stroke: var(--sdds-spinner-background);
-}
-.sdds-spinner-circle-inverted {
-  stroke: var(--sdds-spinner-background-inverted);
-}
-
-@keyframes dash {
-  from {
-    stroke-dashoffset: calc(-1 * var(--sdds-spinner-stroke-dash));
-  }
-  to {
-    stroke-dashoffset: var(--sdds-spinner-stroke-dash);
-  }
-}

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

@@ -1,61 +0,0 @@
-import { h } from '@stencil/core';
-export class Spinner {
-  constructor() {
-    this.size = 'lg';
-    this.variant = 'standard';
-  }
-  render() {
-    return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `sdds-spinner-svg sdds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `sdds-spinner-circle sdds-spinner-circle-${this.variant}` }))));
-  }
-  static get is() { return "sdds-spinner"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["spinner.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["spinner.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'xs' | 'sm' | 'md' | 'lg'",
-          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of spinner. Accepted strings are: xs, sm, md and lg."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'standard' | 'inverted'",
-          "resolved": "\"inverted\" | \"standard\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant of spinner. Accepted strings are: standard and inverted"
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'standard'"
-      }
-    };
-  }
-}

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/Webcomponent',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Webcomponent'],
-    },
-  },
-  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',
-};