@scania/tegel 0.0.7 → 0.0.9

package/dist/collection/components/data-table/table-toolbar/table-toolbar.js

@@ -1,141 +0,0 @@
-import { h, Host, } from '@stencil/core';
-const relevantTableProps = [
-  'compactDesign',
-  'noMinWidth',
-  'verticalDividers',
-];
-export class TableToolbar {
-  constructor() {
-    this.tableTitle = '';
-    this.enableFiltering = false;
-    this.verticalDividers = false;
-    this.compactDesign = false;
-    this.noMinWidth = false;
-    this.whiteBackground = false;
-    this.tableId = '';
-  }
-  internalSddsPropChangeListener(event) {
-    if (this.tableId === event.detail.tableId) {
-      event.detail.changed
-        .filter((changedProp) => relevantTableProps.includes(changedProp))
-        .forEach((changedProp) => {
-        if (typeof this[changedProp] === 'undefined') {
-          throw new Error(`Table prop is not supported: ${changedProp}`);
-        }
-        this[changedProp] = event.detail[changedProp];
-      });
-    }
-  }
-  connectedCallback() {
-    this.tableEl = this.host.closest('sdds-table');
-    this.tableId = this.tableEl.tableId;
-  }
-  componentWillLoad() {
-    relevantTableProps.forEach((tablePropName) => {
-      this[tablePropName] = this.tableEl[tablePropName];
-    });
-  }
-  searchFunction(event) {
-    const searchTerm = event.currentTarget.value.toLowerCase();
-    const sddsTableSearchBar = event.currentTarget.parentElement;
-    this.sddsFilter.emit([this.tableId, searchTerm]);
-    if (searchTerm.length > 0) {
-      sddsTableSearchBar.classList.add('sdds-table__searchbar--active');
-    }
-    else {
-      sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');
-    }
-  }
-  render() {
-    return (h(Host, { class: this.compactDesign ? 'sdds-table--compact' : '' }, h("div", { class: "sdds-table__upper-bar-flex" }, h("caption", { class: "sdds-table__title" }, this.tableTitle), h("div", { class: "sdds-table__actionbar" }, this.enableFiltering && (h("div", { class: "sdds-table__searchbar" }, h("input", { class: "sdds-table__searchbar-input", type: "text", onKeyUp: (event) => this.searchFunction(event) }), h("span", { class: "sdds-table__searchbar-icon" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z", fill: "currentColor" }))))), h("slot", { name: "sdds-table__actionbar" })))));
-  }
-  static get is() { return "sdds-table-toolbar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["table-toolbar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["table-toolbar.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "tableTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds title to the data-table"
-        },
-        "attribute": "table-title",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "enableFiltering": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enables preview of searchbar"
-        },
-        "attribute": "enable-filtering",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "verticalDividers": {},
-      "compactDesign": {},
-      "noMinWidth": {},
-      "whiteBackground": {},
-      "tableId": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sddsFilter",
-        "name": "sddsFilter",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Used for sending users input to main parent <sdds-table> component, can also be listened to in order to implement custom sorting logic."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "internalSddsTablePropChange",
-        "method": "internalSddsPropChangeListener",
-        "target": "body",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

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

@@ -1,207 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Datetime',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variant 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' },
-      },
-    },
-    state: {
-      name: 'State',
-      description: 'Switches between success and error state.',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Success', 'Error'],
-    },
-    type: {
-      name: 'Type',
-      description: 'Sets the field to display date, time or both.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Datetime', 'Date', 'Time'],
-      table: {
-        defaultValue: { summary: 'datetime-local' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Switches between different sizes.',
-      control: {
-        type: 'radio',
-        // todo: make consistent with other sizes, for example 'xs', 'sm', etc
-      },
-      options: ['Large', 'Medium', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    defaultValue: {
-      name: 'Default value',
-      description: 'Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Custom'],
-      table: {
-        defaultValue: { summary: 'none' },
-      },
-    },
-    noMinWidth: {
-      name: 'No minimum width',
-      description: 'Enables component to shrink below 208px which is the default width.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    label: {
-      name: 'Label text',
-      description: 'Sets the label text.',
-      control: {
-        type: 'text',
-      },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Sets the helper text.',
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the component.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    state: 'None',
-    type: 'Datetime',
-    size: 'Large',
-    defaultValue: 'None',
-    noMinWidth: false,
-    label: 'Label text',
-    helper: 'Helper text',
-    disabled: false,
-  },
-};
-const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, noMinWidth, label, helper, disabled, }) => {
-  const typeLookup = {
-    Datetime: 'datetime-local',
-    Date: 'date',
-    Time: 'time',
-  };
-  const sizeLookup = {
-    Large: 'lg',
-    Medium: 'md',
-    Small: 'sm',
-  };
-  const stateLookup = {
-    None: 'none',
-    Success: 'success',
-    Error: 'error',
-  };
-  const getDefaultValue = (value, componentType) => {
-    if (value === 'Custom') {
-      switch (componentType) {
-        case 'Datetime':
-          return '1891-01-01T12:30';
-        case 'Date':
-          return '1891-01-01';
-        case 'Time':
-          return '12:30';
-        default:
-          return 'Invalid type';
-      }
-    }
-    else
-      return false;
-  };
-  return formatHtmlPreview(`
-    <style>
-        /* Note: Demo classes used here are just for demo purposes in Storybook */
-        .demo-wrapper {
-            width: 180px;
-        }
-    </style>
-
-  <div class="demo-wrapper">
-
-    <sdds-datetime
-      id="datetime"
-      ${defaultValue !== 'None' ? `default-value="${getDefaultValue(defaultValue, type)}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      type="${typeLookup[type]}"
-      size="${sizeLookup[size]}"
-      state="${stateLookup[state]}"
-      ${disabled ? 'disabled' : ''}
-      ${noMinWidth ? 'no-min-width' : ''}
-      ${label ? `label="${label}" ` : ''}
-      ${helper ? `helper="${helper}" ` : ''}
-      >
-    </sdds-datetime>
-
-
-    <script>
-    /* DEMO Code: Used only for Storybook demo purposes */
-      datetimeElement = document.getElementById('storybook-datetime');
-      datetimeElement.addEventListener('sddsChange', (event) => {
-        console.log("Firing sddsChange: " + event.target.value);
-      });
-      datetimeElement.addEventListener('sddsFocus', (event) => {
-        console.log("Firing sddsFocus: " + event.target.value);
-      });
-      datetimeElement.addEventListener('sddsBlur', (event) => {
-        console.log("Firing sddsBlur: " + event.target.value);
-      });
-    </script>
-`);
-};
-export const Default = datetimeTemplate.bind({});
-Default.args = {};
-export const ErrorState = datetimeTemplate.bind({});
-ErrorState.args = {
-  state: 'Error',
-};
-export const Time = datetimeTemplate.bind({});
-Time.args = {
-  type: 'Time',
-};
-export const Date = datetimeTemplate.bind({});
-Date.args = {
-  type: 'Date',
-};

package/dist/collection/components/divider/divider-component.css

@@ -1,16 +0,0 @@
-.divider {
-  box-sizing: border-box;
-}
-.divider * {
-  box-sizing: border-box;
-}
-.divider.horizontal {
-  background-color: var(--sdds-divider-background);
-  width: 100%;
-  height: 1px;
-}
-.divider.vertical {
-  background-color: var(--sdds-divider-background);
-  height: 100%;
-  width: 1px;
-}

package/dist/collection/components/divider/divider-webcomponent.stories.js

@@ -1,61 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Divider',
-  parameters: {
-    layout: 'centered',
-    notes: { Divider: readme },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
-      },
-    ],
-  },
-  argTypes: {
-    orientation: {
-      name: 'Orientation',
-      description: 'Choose divider orientation.',
-      control: {
-        type: 'radio',
-        options: ['Horizontal', 'Vertical'],
-      },
-      table: {
-        defaultValue: { summary: 'horizontal' },
-      },
-    },
-    width: {
-      name: 'Width',
-      description: 'Sets the divider width.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'orientation', eq: 'Horizontal' },
-    },
-    height: {
-      name: 'Height',
-      description: 'Sets the divider height.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'orientation', eq: 'Vertical' },
-    },
-  },
-  args: {
-    orientation: 'Horizontal',
-    width: 150,
-    height: 150,
-  },
-};
-const Template = ({ orientation, width, height }) => formatHtmlPreview(`
-  <div style="${orientation === 'Horizontal' ? `width: ${width}px;` : `height: ${height}px;`}">
-    <sdds-divider orientation="${orientation.toLowerCase()}"></sdds-divider>
-  </div>
-`);
-export const WebComponent = Template.bind({});

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

@@ -1,130 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Divider',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-    ],
-  },
-  argTypes: {
-    orientation: {
-      name: 'Orientation',
-      description: 'Choose divider orientation.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Horizontal', 'Vertical'],
-    },
-    direction: {
-      name: 'Direction',
-      description: 'Sets the direction of the divider.',
-      control: {
-        type: 'select',
-      },
-      options: ['Top', 'Right', 'Bottom', 'Left'],
-    },
-    width: {
-      name: 'Width',
-      description: 'Sets the divider width.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'orientation', eq: 'Horizontal' },
-    },
-    height: {
-      name: 'Height',
-      description: 'Sets the divider height.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'orientation', eq: 'Vertical' },
-    },
-  },
-  args: {
-    orientation: 'Horizontal',
-    direction: 'Top',
-    width: 150,
-    height: 150,
-  },
-};
-const Template = ({ orientation, width, height }) => {
-  const classLookup = {
-    Horizontal: `sdds-divider`,
-    Vertical: `sdds-divider-vertical`,
-  };
-  return formatHtmlPreview(`
-      <style>
-         ${height
-    ? `/* demo-div is for demonstration purposes only*/
-        .demo-div {
-          height: ${height}px;
-          width: 1px;
-          padding: 0px;
-        }`
-    : ''}    ${width
-    ? `/* demo-div is for demonstration purposes only*/
-            .demo-div {
-              width: ${width}px;
-              height: 1px;
-              padding: 0px;
-            }`
-    : ''}
-      </style>
-     
-      
-      <div
-  class="demo-div ${classLookup[orientation]}"></div>
-  `);
-};
-const BorderTemplate = ({ direction }) => {
-  const directionLookup = {
-    Top: 'top',
-    Right: 'right',
-    Bottom: 'bottom',
-    Left: 'left',
-  };
-  return formatHtmlPreview(`
-      <style>
-      #demo-wrapper{
-        padding: 50px;
-        background-color: var(--sdds-grey-958)
-      }
-       /* border-demo-div is for demonstration purposes only*/
-        .border-demo-div {
-          height: 200px;
-          width: 200px;
-          background-color: var(--sdds-grey-868);
-          color: var(--sdds-grey-50);
-          text-align: center;
-          padding: 10px;
-        }
-           
-      </style>
-     <div id= "demo-wrapper">
-      
-      <div
-  class="border-demo-div sdds-divider-border-${directionLookup[direction]}">
-  <H4>DEMO</H4></div></div>
-  `);
-};
-export const Native = Template.bind({});
-Native.argTypes = {
-  direction: { table: { disable: true } }
-};
-export const Border = BorderTemplate.bind({});
-Border.args = {
-  direction: 'Top'
-};
-Border.argTypes = {
-  orientation: { table: { disable: true } }
-};