@scania/tegel 1.0.0 → 1.0.1

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

@@ -74,22 +74,22 @@ export default {
     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>
+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.stories.js

@@ -99,38 +99,38 @@ const positionLookup = {
   '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
-      id="tooltip-1"
-      placement="${positionLookup[tooltipPosition]}"
-      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>
-   <script>
-   (() => {
-     const tooltip = document.getElementById('tooltip-1');
-     const button = document.getElementById('button-1');
-
-     tooltip.referenceEl = button;
-    })();
-   </script>
+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
+      id="tooltip-1"
+      placement="${positionLookup[tooltipPosition]}"
+      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>
+   <script>
+   (() => {
+     const tooltip = document.getElementById('tooltip-1');
+     const button = document.getElementById('button-1');
+
+     tooltip.referenceEl = button;
+    })();
+   </script>
   `);
 export const Default = ComponentTooltip.bind({});

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

@@ -13,210 +13,210 @@ const meta = {
 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>
+  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 install @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>
     `,
 };