@scania/tegel 0.0.8 → 0.0.10

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

@@ -0,0 +1,95 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Toggle`,
+  parameters: {
+    notes: readme,
+    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',
+      description: 'Sets the size of the Toggle.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    headline: {
+      name: 'Headline',
+      description: 'Sets the headline, displayed above the Toggle.',
+      control: {
+        type: 'text',
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: "Sets the label for the toggle's input element.",
+      control: {
+        type: 'text',
+      },
+    },
+    checked: {
+      name: 'Checked',
+      description: 'Sets the Toggle as checked.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the Toggle.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    size: 'Large',
+    headline: 'Headline',
+    label: 'Label',
+    checked: false,
+    disabled: false,
+  },
+};
+const Template = ({ size, headline, label, checked, disabled }) => formatHtmlPreview(`
+      <tds-toggle
+        ${checked ? 'checked' : ''}
+        ${disabled ? 'disabled' : ''}
+        ${headline ? `headline="${headline}"` : ''}
+        size="${size === 'Large' ? 'lg' : 'sm'}">
+        <div slot="label">${label}</div>
+    </tds-toggle>
+
+    <!-- Script tag with eventlistener for demo purposes. -->
+    <script>
+      toggleElement = document.querySelector('tds-toggle')
+
+      toggleElement.addEventListener('tdsToggle', (event)=> {
+        console.log(event)
+      })
+    </script>
+  `);
+export const Default = Template.bind({});

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

@@ -1,20 +1,20 @@
 :root,
-.sdds-mode-light {
-  --sdds-tooltip-background: var(--sdds-grey-800);
-  --sdds-tooltip-color: var(--sdds-white);
+.tds-mode-light {
+  --tds-tooltip-background: var(--tds-grey-800);
+  --tds-tooltip-color: var(--tds-white);
 }
 
-.sdds-mode-dark {
-  --sdds-tooltip-background: var(--sdds-grey-200);
-  --sdds-tooltip-color: var(--sdds-grey-958);
+.tds-mode-dark {
+  --tds-tooltip-background: var(--tds-grey-200);
+  --tds-tooltip-color: var(--tds-grey-958);
 }
 
-.sdds-tooltip {
+.tds-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);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-tooltip-color);
+  background-color: var(--tds-tooltip-background);
   border-radius: 4px;
   padding: 8px;
   word-wrap: break-word;
@@ -24,23 +24,23 @@
   visibility: hidden;
   transition: opacity 200ms ease-in, visibility 200ms ease-in;
 }
-.sdds-tooltip * {
+.tds-tooltip * {
   box-sizing: border-box;
 }
-.sdds-tooltip.sdds-tooltip-top-left {
+.tds-tooltip.tds-tooltip-top-left {
   border-radius: 0 4px 4px;
 }
-.sdds-tooltip.sdds-tooltip-top-right {
+.tds-tooltip.tds-tooltip-top-right {
   border-radius: 4px 0 4px 4px;
 }
-.sdds-tooltip.sdds-tooltip-bottom-right {
+.tds-tooltip.tds-tooltip-bottom-right {
   border-radius: 4px 4px 0;
 }
-.sdds-tooltip.sdds-tooltip-bottom-left {
+.tds-tooltip.tds-tooltip-bottom-left {
   border-radius: 4px 4px 4px 0;
 }
 
-.sdds-tooltip-show {
+.tds-tooltip-show {
   opacity: 1;
   visibility: visible;
 }

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

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import { createPopper } from '@popperjs/core';
-export class Tooltip {
+export class TdsTooltip {
   constructor() {
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
@@ -13,6 +13,11 @@ export class Tooltip {
     this.popperInstance = undefined;
     this.target = undefined;
   }
+  /** Method to update the Tooltip. Will reevaluate the Tooltips position. */
+  async updateTooltip() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+  }
   componentDidLoad() {
     var _a;
     this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
@@ -84,13 +89,12 @@ export class Tooltip {
     var _a;
     (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
   }
-  /* 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)));
+      }, class: `tds-tooltip tds-tooltip-${this.border} ${this.show ? 'tds-tooltip-show' : ''}` }, this.text, h("slot", null)));
   }
-  static get is() { return "sdds-tooltip"; }
+  static get is() { return "tds-tooltip"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -116,7 +120,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "In case Tooltip contains only text, no HTML, text can be passed by this prop"
+          "text": "In case Tooltip contains only text, no HTML, a text can be passed by this prop"
         },
         "attribute": "text",
         "reflect": false,
@@ -144,7 +148,7 @@ export class Tooltip {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
@@ -153,7 +157,7 @@ export class Tooltip {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Element that will trigger the Tooltip (takes priority over selector)"
@@ -226,4 +230,24 @@ export class Tooltip {
       "target": {}
     };
   }
+  static get methods() {
+    return {
+      "updateTooltip": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Method to update the Tooltip. Will reevaluate the Tooltips position.",
+          "tags": []
+        }
+      }
+    };
+  }
 }

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

@@ -0,0 +1,128 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/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',
+      description: 'Sets the position of the Tooltip.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        'Bottom-start',
+        'Bottom',
+        'Bottom-end',
+        'Top-start',
+        'Top',
+        'Top-end',
+        'Left-start',
+        'Left',
+        'Left-end',
+        'Right-start',
+        'Right',
+        'Right-end',
+      ],
+      table: {
+        defaultValue: {
+          summary: 'bottom',
+        },
+      },
+    },
+    text: {
+      name: 'Tooltip text',
+      description: 'Sets the 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',
+      description: 'Keeps the Tooltip visible as long as the mouse hovers over it.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+  },
+  args: {
+    tooltipPosition: 'Bottom',
+    text: 'Text inside Tooltip',
+    slot: '<p class="tds-detail-05 tds-u-m0"> Paragraph tag inside 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">
+   <!-- The 'referenceEl' prop can be used instead of 'selector',
+    which might be preferable in frameworks like React -->
+   <tds-tooltip
+      placement="${positionLookup[tooltipPosition]}"
+      selector="#button-1"
+      text="${text}"
+      mouse-over-tooltip="${mouseOverTooltip}">
+      ${slot}
+    </tds-tooltip>
+
+    <!-- Demo button for presentation purposes -->
+    <tds-button size= 'sm' id="button-1" text='Hover me'></tds-button>
+   </div>
+  `);
+export const Default = ComponentTooltip.bind({});

package/dist/collection/stories/Installation/installation.stories.js

@@ -0,0 +1,222 @@
+import hljs from 'highlight.js';
+import '../../../.storybook/tegel.syntax.highlighter.css';
+const meta = {
+  title: 'Intro/Installation',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: false,
+    },
+  },
+};
+hljs.highlightAll();
+export default meta;
+export const Installation = {
+  render: () => `
+    <style>
+    article {
+        box-sizing: border-box;
+        max-width: 688px;
+
+        padding: 32px;
+        margin: auto;
+        >* {
+            margin-bottom: 72px;
+        }
+    }
+
+    code {
+        border-radius: 4px;
+    }
+</style>
+<article class="tds-u-p2 tds-body-01">
+    <h2>React</h2>
+    <section>
+        <h4>Typescript</h4>
+        <ol class="tds-body-01">
+            <li>
+                <p>Run <code>npm install @scania/tegel</code></p>
+            </li>
+            <li>
+                <p>In the src folder create a file called <code>register-webcomponents.ts</code></p>
+            </li>
+            <li>
+                <p>Paste the following into that file:</p>
+                <pre>
+<code>import &#123; defineCustomElements, JSX as LocalJSX &#125; from
+    '@scania/tegel/loader';
+import &#123; DetailedHTMLProps, HTMLAttributes &#125; from 'react';
+
+type StencilProps&lt;T&gt; = &#123;
+    [P in keyof T]?:Omit&lt;T[P], 'ref'&gt; | HTMLAttributes&lt;T&gt;;&#125;;
+
+type ReactProps&lt;T&gt; = &#123;
+[P in keyof T]?: DetailedHTMLProps&lt;HTMLAttributes&lt;T[P]&gt;,
+    T[P]&gt;;&#125;;
+
+type StencilToReact&lt;T = LocalJSX.IntrinsicElements,
+    U = HTMLElementTagNameMap&gt; = StencilProps&lt;T&gt; &
+    ReactProps&lt;U&gt;;
+
+declare global &#123;
+    export namespace JSX &#123;
+        interface IntrinsicElements extends StencilToReact &#123;&#125;
+    &#125;
+&#125;
+
+defineCustomElements(window);
+</code>
+</pre>
+            </li>
+            <li>
+                <p>In your index.tsx import <code>register-webcomponents.ts</code></p>
+                <pre>
+<code>import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import './register-webcomponents';
+
+const root = ReactDOM.createRoot(document.
+    getElementById('root') as HTMLElement);
+root.render(
+&lt;React.StrictMode&gt;
+    &lt;App /&gt;
+&lt;/React.StrictMode&gt;,
+);
+
+reportWebVitals();</code>
+                </pre>
+
+            </li>
+            <li>
+                <p>In your global css file import the tegel stylesheet.</p>
+                <pre>
+            <code>@import url('@scania/tegel/dist/tegel/tegel.css');</code>
+        </pre>
+            </li>
+        </ol>
+    </section>
+    <section>
+        <h4>Javascript</h4>
+        <ol class="tds-body-01">
+            <li>
+                <p>Run <code>npm install @scania/tegel</code></p>
+            </li>
+            <li>
+                <p>In your index.jsx define the custom components:</p>
+                <pre>
+<code>import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import { defineCustomElements } from '@scania/tegel/loader';
+
+const root = ReactDOM.createRoot(document.
+    getElementById('root') as HTMLElement);
+root.render(
+&lt;React.StrictMode&gt;
+    &lt;App /&gt;
+&lt;/React.StrictMode&gt;,
+);
+
+reportWebVitals();
+defineCustomElements();</code>
+                </pre>
+
+            </li>
+            <li>
+                <p>In your global css file import the tegel stylesheet.</p>
+                <pre>
+            <code>@import url('@scania/tegel/dist/tegel/tegel.css');</code>
+        </pre>
+            </li>
+        </ol>
+    </section>
+    <h2>Angular</h2>
+    <section>
+        <ol class="tds-body-01">
+            <li>
+                <p>Run <code>npm install @scania/tegel</code></p>
+            </li>
+            <li>
+                <p>In your main.ts import and call the function <code>defineCustomElements()</code></p>
+                <pre>
+                    <code>import { platformBrowserDynamic } from
+                        '@angular/platform-browser-dynamic';
+import { defineCustomElements } from '@scania/tegel/loader';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic()
+.bootstrapModule(AppModule)
+.catch((err) => console.error(err));
+
+defineCustomElements(window);</code>
+                </pre>
+            </li>
+            <li>
+                <p>In your app.module.ts import 'CUSTOM_ELEMENTS_SCHEMA'</p>
+                <pre>
+                    <code>import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { 
+    CUSTOM_ELEMENTS_SCHEMA,
+    NgModule
+    } from '@angular/core';
+
+@NgModule({
+    declarations: [AppComponent],
+    imports: [BrowserModule],
+    providers: [],
+    bootstrap: [AppComponent],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+
+export class AppModule {}</code>
+                </pre>
+            </li>
+            <li>
+                <p>In your global css file import the tegel stylesheet.</p>
+                <pre>
+                    <code>@import url('@scania/tegel/dist/tegel/tegel.css');</code>
+                </pre>
+            </li>
+        </ol>
+    </section>
+    <h2>HTML</h2>
+    <section>
+        <ol>
+            <li><p>Run <code>npm init</code> to generate a package.json</p></li>
+            <li><p>Run <code>npm istall @scania/tegel</code></p></li>
+            <li><p>Import the package and stylesheet in your <code>&lt;head&gt;</code></p>
+                <pre>
+                    <code>&lt;script type="module"&gt;
+    import { defineCustomElements } from 
+        './node_modules/@scania/tegel/loader/index.es2017.js';
+    defineCustomElements();
+&lt;/script&gt;
+&lt;link rel="stylesheet"
+    href="./node_modules/@scania/tegel/dist/tegel/tegel.css"/&gt;</code>
+                <pre>
+            </li>
+            
+        </ol>
+    </section>
+    <h2>Stencil</h2>
+    <section>
+        <ol>
+            <li><p>Run <code>npm install @scania/tegel</code></p></li>
+            <li><p>Import @scania/tegel in your stencil component.</p></li>
+            <li><p>In your global css file import the tegel stylesheet.</p>
+            <pre>
+                <code>@import url('@scania/tegel/dist/tegel/tegel.css');</code>
+            </pre></li>
+            <li><p>And don't forget to set <code>'shadow: false';</code> for your component.</p></li>
+        </ol>
+    </section>
+</article>
+    `,
+};