+
+ Published: 2023-10-11
+ Using Tegel in Angular
+
+ Tegel offers Angular wrappers for all web components. While the rendered components still maintain
+ their core as web components, these wrappers significantly enhance the developer's experience by
+ providing a more intuitive API and seamless integration with Angular. You can find these wrappers
+ in a separate package called @scania/tegel-angular, which is the recommended approach for integrating
+ Tegel into a Angular application.
+
+
+
+ Prerequisites
+
+ - Node version 18+
+ - Angular 14+
+
+
+
+
+ Installing @scania/tegel-angular
+
+ Install the @scania/tegel-angular package via npm.
+
+
+npm install @scania/tegel-angular
+
+
+ In your global css file import the tegel stylesheet.
+
+
+@import url('@scania/tegel/dist/tegel/tegel.css');
+
+
+
+ Import the TegelModule in your app.module.ts.
+
+
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { TegelModule } from '@scania/tegel-angular';
+
+@NgModule({
+ declarations: [
+ AppComponent,
+ TesterComponent
+ ],
+ imports: [
+ BrowserModule,
+ TegelModule,
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
+
+
+ After this, all TDS components will be available in your template files. Example:
+
+
+ <tds-button text="Click me!" variant="primary" size="sm">
+ <tds-icon slot="icon" name="truck"> </tds-icon>
+ </tds-button>
+
+
+
+
+ `,
+};
diff --git a/packages/core/src/stories/Installation/installation.stories.ts b/packages/core/src/stories/Installation/installation.stories.ts
deleted file mode 100644
index 47f2d4520..000000000
--- a/packages/core/src/stories/Installation/installation.stories.ts
+++ /dev/null
@@ -1,222 +0,0 @@
-import type { Meta } from '@storybook/html';
-import hljs from 'highlight.js';
-import '../../../.storybook/tegel.syntax.highlighter.css';
-
-const meta: Meta = {
- title: 'Intro/Installation',
- parameters: {
- layout: 'fullscreen',
- options: {
- showPanel: false,
- showToolbar: false,
- },
- },
-};
-
-hljs.highlightAll();
-
-export default meta;
-export const Installation = {
- render: () => `
-
-
+
+ Published: 2023-10-11
+ Installing Tegel
+ This is a getting started guide aimed at developers that want to install and use the @scania/tegel library (TDS).
+ This library consists of web components built using Stencil, which means that they are framework agnostic and follow
+ browser standards. The library is installed and updated via NPM (node package manager). For further installation
+ information please see the framework specific installation guides below.
+
+
+
+
+ Migration from SDDS
+ TDS and @scania/components (SDDS) share a lot of design, but the tech implementation have two different approaches.
+ Therefore there is some migration work needed when going from SDDS to TDS. We have outlined all the differences in this
+ migration document. However, since they exist in different namespaces (SDDS is prefixed with ‘sdds’ and TDS with ‘tds’)
+ the two solutions can exist alongside each other, enabling a soft migration that can be done over time.
+
+
+
+ Framework integrations
+ TDS is, like previously mentioned, a collection of web components. This enables them to work within any frontend
+ framework since they are built on web standards. However, achieving a seamless integration can be challenging because
+ different frameworks offer varying levels of support for vanilla web components. To still allow for a premium developer
+ experience we leverage Stencils (the complier used to build the TDS web components) output targets to build
+ “framework-wrappers”. These are separate npm packages consisting of framework specific counterparts for all of the
+ components in @scania/tegel. The currently available packages are built for Angular (@scania/tegel-angular) and
+ React (@scania/tegel-react). If you are planning to use TDS in an Angular or React application we recommend you follow the
+ installation guide for the respective framework.
+
+
+
+
+
+
+
+ Javascript
+ This guide is aimed at developers that want to use TDS in an application without any framework.
+ Run npm init to generate a package.json, and then install @scania/tegel.
+
+
+npm install @scania/tegel
+
+
+ The components needs to be registered before they can be used. For example, import and call the defineCustomElements function in your <head>. You also need to import the Tegel stylesheet.
+
+
+<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"/>
+
+
+ After this, all TDS component will be available in your template files. Example:
+
+
+<tds-button text="Click me!" variant="primary" size="sm">
+ <tds-icon slot="icon" name="truck"> </tds-icon>
+</tds-button>
+
+
+
+
+
+ `,
+};
diff --git a/packages/core/src/stories/Installation/react.stories.ts b/packages/core/src/stories/Installation/react.stories.ts
new file mode 100644
index 000000000..06a1c256f
--- /dev/null
+++ b/packages/core/src/stories/Installation/react.stories.ts
@@ -0,0 +1,120 @@
+import type { Meta } from '@storybook/html';
+
+const meta: Meta = {
+ title: 'Intro/Installation',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: false,
+ },
+ },
+};
+
+export default meta;
+export const React = {
+ render: () => `
+
+
+ Published: 2023-10-11
+ Using Tegel in React
+
+ Tegel offers React wrappers for all web components. While the rendered components still maintain
+ their core as web components, these wrappers significantly enhance the developers experience by
+ providing a more intuitive API and seamless integration with React. You can find these wrappers
+ in a separate package called @scania/tegel-react, which is the recommended approach for integrating
+ Tegel into a React application.
+
+
+
+
+
+ Installing @scania/tegel-react
+
+ Install the @scania/tegel-react package via npm.
+
+
+npm install @scania/tegel-react
+
+
+ In your global css file import the tegel stylesheet.
+
+
+@import url('@scania/tegel/dist/tegel/tegel.css');
+
+
+
+ Import the defineCustomElements function and call it. After that, import the components you want to use.
+
+
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+import { defineCustomElements, TdsButton } '@scania/tegel-react';
+
+defineCustomElements();
+function App() {
+ <div className="App">
+ <TdsButton text="Click me!">
+ <span slot="icon">
+ <TdsIcon name="truck"/>
+ </slot>
+ </TdsButton>
+ </div>
+}
+export default App;
+
+
+
+
+
+
+ PascalCase
+
+
+ Since the components exported from the @scania/tegel-react package
+ are React components these have a different look than our vanilla web components.
+ They are for one, PascalCased. This means that instead of being called
+ <tds-button> the Button component from @scania/tegel-react is called
+ <TdsButton>. The same goes for the props passed to the components.
+ Instead of using a hyphen, the props use PascalCase. For example:
+ <tds-button mode-variant="secondary"></tds-button>
+ would instead be
+ <TdsButton modeVariant="secondary"></TdsButton>.
+
+
+
+ `,
+};