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

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

@@ -0,0 +1,251 @@
+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

@@ -0,0 +1,79 @@
+: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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,139 @@
+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',
+};