@scania/tegel 0.0.1-beta.1 → 0.0.1-beta.11

package/dist/types/components.d.ts

@@ -173,7 +173,7 @@ export namespace Components {
          */
         "state": string;
         /**
-          * `Controls type of dropdown. 'Default', 'multiselect' and 'filter' are correct values
+          * `Controls type of dropdown.
          */
         "type": 'default' | 'multiselect' | 'filter';
     }
@@ -203,7 +203,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Position of label: `no-label` (default), `inside`, `outside`
+          * Position of label
          */
         "labelPosition": 'no-label' | 'inside' | 'outside';
         /**
@@ -312,7 +312,7 @@ export namespace Components {
          */
         "prevent": boolean;
         /**
-          * Size of modal. Accepted strings are: xs, sm, md, lg.
+          * Size of modal
          */
         "size": 'xs' | 'sm' | 'md' | 'lg';
     }
@@ -430,11 +430,11 @@ export namespace Components {
     }
     interface SddsSpinner {
         /**
-          * Size of spinner. Accepted strings are: xs, sm, md and lg.
+          * Size of spinner
          */
         "size": 'xs' | 'sm' | 'md' | 'lg';
         /**
-          * Variant of spinner. Accepted strings are: standard and inverted
+          * Variant of spinner
          */
         "variant": 'standard' | 'inverted';
     }
@@ -662,7 +662,7 @@ export namespace Components {
          */
         "mouseOverTooltip": boolean;
         /**
-          * 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.
+          * Placement of tooltip.
          */
         "placement": Placement;
         /**
@@ -1120,7 +1120,7 @@ declare namespace LocalJSX {
          */
         "state"?: string;
         /**
-          * `Controls type of dropdown. 'Default', 'multiselect' and 'filter' are correct values
+          * `Controls type of dropdown.
          */
         "type"?: 'default' | 'multiselect' | 'filter';
     }
@@ -1150,7 +1150,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Position of label: `no-label` (default), `inside`, `outside`
+          * Position of label
          */
         "labelPosition"?: 'no-label' | 'inside' | 'outside';
         /**
@@ -1260,7 +1260,7 @@ declare namespace LocalJSX {
          */
         "prevent"?: boolean;
         /**
-          * Size of modal. Accepted strings are: xs, sm, md, lg.
+          * Size of modal
          */
         "size"?: 'xs' | 'sm' | 'md' | 'lg';
     }
@@ -1378,11 +1378,11 @@ declare namespace LocalJSX {
     }
     interface SddsSpinner {
         /**
-          * Size of spinner. Accepted strings are: xs, sm, md and lg.
+          * Size of spinner
          */
         "size"?: 'xs' | 'sm' | 'md' | 'lg';
         /**
-          * Variant of spinner. Accepted strings are: standard and inverted
+          * Variant of spinner
          */
         "variant"?: 'standard' | 'inverted';
     }
@@ -1666,7 +1666,7 @@ declare namespace LocalJSX {
          */
         "mouseOverTooltip"?: boolean;
         /**
-          * 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.
+          * Placement of tooltip.
          */
         "placement"?: Placement;
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.11",
   "description": "Tegel - Scania's Digital Design System",
   "keywords": [
     "tegel",
@@ -16,7 +16,7 @@
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/components/components.esm.js",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@stencil/core": "^2.13.0",
+    "@stencil/core": "^2.20.0",
     "@storybook/addon-google-analytics": "^6.2.9",
     "concurrently": "^7.4.0",
     "dotenv": "^16.0.3",
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",
-    "@stencil/sass": "^2.0.0",
+    "@stencil/sass": "^2.0.1",
     "@storybook/addon-a11y": "^6.5.14",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",

package/readme.md

@@ -11,9 +11,143 @@
 
 Check out [Tegel Design System](https://tegel.scania.com/) for implementation and technical documentation.
 
-## Quick start
 
-- Installation: [https://tegel.scania.com/development/getting-started-development/installation](https://tegel.scania.com/development/getting-started-development/installation)
+[comment]: <> (Needs to be updated once a stable version is released.)
+## Installation
+### React
+
+#### with Typescript
+
+1. Run `npm install @scania/tegel`
+2. src folder create a file called `register-webcomponents.ts`
+3. Paste the following into that file:
+```ts
+import { defineCustomElements, JSX as LocalJSX } from '@scania/tegel/loader';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+type StencilProps<T> = {
+    [P in keyof T]?: Omit<T[P], 'ref'> | HTMLAttributes<T>;
+  };
+  
+  type ReactProps<T> = {
+    [P in keyof T]?: DetailedHTMLProps<HTMLAttributes<T[P]>, T[P]>;
+  };
+  
+  type StencilToReact<T = LocalJSX.IntrinsicElements, U = HTMLElementTagNameMap> = StencilProps<T> &
+    ReactProps<U>;
+  
+  declare global {
+    export namespace JSX {
+      interface IntrinsicElements extends StencilToReact { }
+    }
+  }
+  
+defineCustomElements(window)
+```
+4. In your index.tsx import `register-webcomponents.ts`
+```tsx
+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(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+reportWebVitals();
+```
+5. In your global css file (usually `App.css`) import the tegel stylesheet.
+```css
+@import url('@scania/tegel/dist/tegel/tegel.css');
+```
+
+#### with Javascript
+1. Run `npm install @scania/tegel`
+2. In your index.jsx define the custom components:
+```jsx
+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'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+reportWebVitals();
+defineCustomElements()
+```
+3. In your global css file (usually `App.css`) import the tegel stylesheet.
+```css
+@import url('@scania/tegel/dist/tegel/tegel.css');
+```
+
+### Angular
+
+1. Run `npm install @scania/tegel`
+2. In your `main.ts` import and call the function `defineCustomElements()`:
+
+```ts
+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);
+```
+3. In your `app.module.ts` import `CUSTOM_ELEMENTS_SCHEMA`:
+```ts
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent], 
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule { }
+```
+4. In your global css file (`styles.css`) import the tegel stylesheet.
+```css
+@import url('@scania/tegel/dist/tegel/tegel.css');
+```
+
+### HTML
+
+1. Run `npm init` to generate a package.json
+2. Run `npm install @scania/tegel`
+3. Import the package and its style in your `<head>`:
+```html
+ <script type="module">
+        import { defineCustomElements } from "./node_modules/@scania/tegel/loader/index.es2017.js";
+        defineCustomElements();
+</script>
+<link rel="stylesheet" href="./node_modules/@scania/tegel/dist/tegel/tegel.css">
+```
+
+
 
 
 See all available components in the [Tegel Design System](https://tegel.scania.com/components/overview).

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

@@ -1,91 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-import readmeItem from './accordion-item/readme.md';
-export default {
-  title: 'Components/Accordion',
-  argTypes: {
-    iconPosition: {
-      name: 'Expand icon position',
-      control: {
-        type: 'radio',
-      },
-      options: { End: 'end', Start: 'start' },
-      description: 'The horizontal position of the expand icon.',
-      table: {
-        defaultValue: { summary: 'end' },
-      },
-    },
-    disabled: {
-      name: 'Disable all items',
-      description: 'Disable all accordion items.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    paddingReset: {
-      name: 'Less padding right',
-      description: 'Less padding on the right inside accordion items.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Variant of the component.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-    },
-  },
-  parameters: {
-    notes: { 'Accordion': readme, 'Accordion item': readmeItem },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  args: {
-    disabled: false,
-    paddingReset: false,
-    iconPosition: 'end',
-    modeVariant: 'Primary',
-  },
-};
-const Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {
-  const affixAttr = iconPosition === 'start' ? 'expand-icon-position="start"' : '';
-  const disabledAttr = disabled ? 'disabled' : '';
-  const paddingResetAttr = paddingReset ? 'padding-reset' : '';
-  const tabIndexAttr = 'tabindex="0"';
-  return formatHtmlPreview(`
-    <sdds-accordion mode-variant="${modeVariant.toLowerCase()}">
-      <sdds-accordion-item header="First item" ${tabIndexAttr} ${affixAttr} ${disabledAttr} ${paddingResetAttr}>
-        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
-        Lorem ipsum doler sit amet.
-      </sdds-accordion-item>
-      <sdds-accordion-item header="Second item" ${tabIndexAttr} ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>
-        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.
-      </sdds-accordion-item>
-    </sdds-accordion>
-  `);
-};
-export const Default = Template.bind({});
-Default.args = {};

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

@@ -1,101 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Badge',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    visible: {
-      name: 'Visible',
-      description: 'Toggle visibility of badge',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    value: {
-      name: 'Value',
-      description: 'Set a value to show on the badge',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'size', neq: 'sm' },
-      table: {
-        defaultValue: { summary: null },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Size of the component',
-      options: {
-        Large: 'lg',
-        Small: 'sm',
-      },
-      control: {
-        type: 'radio',
-      },
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-  },
-  args: {
-    visible: true,
-    size: 'lg',
-    value: 1,
-  },
-};
-const Template = ({ value, size, visible }) => formatHtmlPreview(`<sdds-badges
-    ${value ? `value="${value}"` : ''}
-    is-visible=${visible}
-    size="${size}">
-  </sdds-badges>`);
-export const Default = Template.bind({});
-const WithDemoTemplate = ({ value, size, visible }) => formatHtmlPreview(`
-    <style>
-    /* Note: Demo classes used here are just for demo purposes in Storybook */
-    .badges-demo-box {
-      margin:5px;
-      height: 32px;
-      width: 32px;
-      position: relative;
-      background-color: #C4C4C4;
-    }
-
-    .badges-demo-box sdds-badges[size="lg"]{
-      position: absolute;
-      left: 16px;
-      top: -5px;
-    }
-
-    .badges-demo-box sdds-badges[size="sm"]{
-      position: absolute;
-      left: 26px;
-      top: -2px;
-    }
-    </style>
-
-    <div class="badges-demo-box">
-      <sdds-badges
-        ${value ? `value="${value}"` : ''}
-        is-visible=${visible}
-        size="${size}">
-      </sdds-badges>
-    </div>`);
-export const WithDemoComponent = WithDemoTemplate.bind({});

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

@@ -1,93 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-// FIXME: CMS: Change state to type in Code tab of component
-export default {
-  title: 'Components/Banner',
-  parameters: {
-    layout: 'fullscreen',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    state: {
-      name: 'Type',
-      description: 'Changes type of component',
-      options: ['Default', 'Error', 'Info'],
-      control: {
-        type: 'radio',
-      },
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    header: {
-      name: 'Header',
-      description: 'Text to display in header section',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Text to display in subheader section',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Text to display in link section',
-      control: {
-        type: 'text',
-      },
-    },
-    prefix: {
-      name: 'Show icon',
-      description: 'If an icon should be displayed. For type default the truck icon is used in this example, but it should be changed to suit your needs.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-    },
-  },
-  args: {
-    state: 'Default',
-    header: 'This is a header text area',
-    subheader: 'SubHeader text area',
-    link: 'Learn more',
-    prefix: true,
-  },
-};
-const Template = ({ state, prefix, header, subheader, link }) => formatHtmlPreview(`
-    <div class="sdds-banner sdds-banner-${state.toLowerCase()}">
-      ${prefix && state === 'error'
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="error" size="20px"></sdds-icon></span>'
-  : ''}
-      ${prefix && state === 'info'
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="info" size="20px"></sdds-icon></span>'
-  : ''}
-      ${prefix && !(state === 'info' || state === 'error')
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="truck" size="20px"></sdds-icon></span>'
-  : ''}
-      <div class="sdds-banner-body">
-      ${header && `<h6 class="sdds-banner-header">${header}</h6>`}
-      ${subheader && `<div class="sdds-banner-subheader">${subheader}</div>`}
-      ${link && `<a class="sdds-link sdds-banner-link">${link}</a>`}
-      </div>
-      <button type="button" aria-label="close" class="sdds-banner-close">
-        <sdds-icon name="cross" size="20px"></sdds-icon>
-      </button>
-    </div>
-  `);
-export const Default = Template.bind({});

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

@@ -1,46 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Block',
-  parameters: {
-    layout: 'padded',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Mode variation',
-      description: 'Mode variation adjusts component colors to have better visibility depending on global mode and background. ',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Primary' },
-      },
-    },
-  },
-  args: {
-    type: 'Primary',
-  },
-};
-const Template = ({ type }) => formatHtmlPreview(`
-      <div class="sdds-block sdds-block-${type.toLowerCase()}">
-      <h2 class="sdds-headline-02">Block</h2>
-        <p class="sdds-body-01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
-        <div class="sdds-block">
-          <h3 class="sdds-headline-03">Block in a block</h3>
-          <p class="sdds-body-02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
-        </div>
-      </div>
-    `);
-export const Default = Template.bind({});

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

@@ -1,26 +0,0 @@
-export default {
-  title: 'Components/Breadcrumb',
-  parameters: {
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  }
-};
-const Template = () => `   
-    <div class="sdds-breadcrumb">
-      <div class="sdds-breadcrumb-item"><a href="#">Page 1</a></div>
-      <div class="sdds-breadcrumb-item"><a href="#">Page 2</a></div>
-      <div class="sdds-breadcrumb-item sdds-breadcrumb-item-current"><a aria-current="page">Page 3</a></div>
-    </div>
-    `;
-export const Default = Template.bind({});
-Default.args = {};