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

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

@@ -1,62 +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',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Small'],
-      description: 'Size of the toggle',
-    },
-    headline: {
-      name: 'Headline',
-      description: 'Optional value to be used to clarify what the toggle is switching on / off',
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Should it be disabled?',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    size: 'Default',
-    headline: '',
-    disabled: false,
-  },
-};
-const Template = ({ size, disabled = false, headline = '' }) => {
-  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' : ''}" tabindex="0">
-        ${headlineDiv}
-        <input type="checkbox" class="sdds-toggle-input" id="customSwitch1" ${disabled ? 'disabled' : ''}>
-        <span class="sdds-toggle-switch"></span>
-        <label class="sdds-toggle-label" for="customSwitch1">Toggle this switch element</label>
-      </div>
-  `);
-};
-export const Default = Template.bind({});
-Default.args = {};

package/dist/collection/components/tooltip/tooltip.css

@@ -1,46 +0,0 @@
-:root,
-.sdds-theme-light {
-  --sdds-tooltip-background: var(--sdds-grey-800);
-  --sdds-tooltip-color: var(--sdds-white);
-}
-
-.sdds-theme-dark {
-  --sdds-tooltip-background: var(--sdds-grey-200);
-  --sdds-tooltip-color: var(--sdds-grey-958);
-}
-
-.sdds-tooltip {
-  box-sizing: border-box;
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-tooltip-color);
-  background-color: var(--sdds-tooltip-background);
-  border-radius: 4px;
-  padding: 8px;
-  word-wrap: break-word;
-  max-width: 192px;
-  z-index: 20000;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 200ms ease-in, visibility 200ms ease-in;
-}
-.sdds-tooltip * {
-  box-sizing: border-box;
-}
-.sdds-tooltip.sdds-tooltip-top-left {
-  border-radius: 0 4px 4px;
-}
-.sdds-tooltip.sdds-tooltip-top-right {
-  border-radius: 4px 0 4px 4px;
-}
-.sdds-tooltip.sdds-tooltip-bottom-right {
-  border-radius: 4px 4px 0;
-}
-.sdds-tooltip.sdds-tooltip-bottom-left {
-  border-radius: 4px 4px 4px 0;
-}
-
-.sdds-tooltip-show {
-  opacity: 1;
-  visibility: visible;
-}

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

@@ -1,200 +0,0 @@
-import { h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
-export class Tooltip {
-  constructor() {
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.text = '';
-    this.selector = '';
-    this.mouseOverTooltip = false;
-    this.show = false;
-    this.placement = 'bottom';
-    this.target = undefined;
-  }
-  componentDidLoad() {
-    this.target = document.querySelector(this.selector);
-    const thisValue = this;
-    createPopper(this.target, this.tooltip, {
-      placement: thisValue.placement,
-      modifiers: [
-        {
-          name: 'positionCalc',
-          enabled: true,
-          phase: 'main',
-          fn({ state }) {
-            if (state.placement === 'bottom-start' || state.placement === 'right-start') {
-              thisValue.border = 'top-left';
-            }
-            else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
-              thisValue.border = 'top-right';
-            }
-            else if (state.placement === 'top-end' || state.placement === 'left-end') {
-              thisValue.border = 'bottom-right';
-            }
-            else if (state.placement === 'top-start' || state.placement === 'right-end') {
-              thisValue.border = 'bottom-left';
-            }
-            else if (state.placement === 'bottom' || state.placement === 'top') {
-              thisValue.border = 'default';
-            }
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showTooltip = () => {
-      this.show = true;
-    };
-    const hideTooltip = () => {
-      this.show = false;
-    };
-    // For tabbing over element
-    this.target.addEventListener('focusin', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('focusout', () => {
-      hideTooltip();
-    });
-    // For hovering over element with selector
-    this.target.addEventListener('mouseenter', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('mouseleave', () => {
-      hideTooltip();
-    });
-    // For hovering over tooltip itself:
-    if (this.mouseOverTooltip === true) {
-      this.tooltip.addEventListener('mouseenter', () => {
-        showTooltip();
-      });
-      this.tooltip.addEventListener('mouseleave', () => {
-        hideTooltip();
-      });
-    }
-  }
-  /* Slot on line 118 is added to support adding HTML elements to component */
-  render() {
-    return (h("span", { ref: (el) => (this.tooltip = el), class: `sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}` }, this.text, h("slot", null)));
-  }
-  static get is() { return "sdds-tooltip"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tooltip.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tooltip.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "In case tooltip contains only text, no HTML, text can be passed by this prop"
-        },
-        "attribute": "text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "selector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "CSS selector of element on which tooltip is used on."
-        },
-        "attribute": "selector",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "mouseOverTooltip": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button."
-        },
-        "attribute": "mouse-over-tooltip",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "show": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Prop in control of showing and hiding prop"
-        },
-        "attribute": "show",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@popperjs/core"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Placement of tooltip. Possible values: auto, auto-start, auto-end, top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end."
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'bottom'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "target": {}
-    };
-  }
-}

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

@@ -1,113 +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',
-      control: {
-        type: 'select',
-        options: [
-          'Bottom-start',
-          'Bottom',
-          'Bottom-end',
-          'Top-start',
-          'Top',
-          'Top-end',
-          'Left-start',
-          'Left',
-          'Left-end',
-          'Right-start',
-          'Right',
-          'Right-end',
-        ],
-      },
-      description: 'Position of the tooltip',
-    },
-    text: {
-      name: 'Tooltip text',
-      description: 'Text 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',
-      control: 'boolean',
-      description: 'Keep the tooltip visible as long as the mouse hover over it',
-    },
-  },
-  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">
-   <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 Default = 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({});