@scania/tegel 0.0.1-beta.5 → 0.0.1-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "0.0.1-beta.5",
+  "version": "0.0.1-beta.6",
   "description": "Tegel - Scania's Digital Design System",
   "keywords": [
     "tegel",
@@ -18,7 +18,7 @@
   "es2017": "dist/esm/index.mjs",
   "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "./dist/index.cjs.js",
+  "collection:main": "dist/collection/index.js",
   "unpkg": "dist/components/components.esm.js",
   "repository": {
     "type": "git",

package/readme.md

@@ -15,6 +15,141 @@ Check out [Tegel Design System](https://tegel.scania.com/) for implementation an
 
 - Installation: [https://tegel.scania.com/development/getting-started-development/installation](https://tegel.scania.com/development/getting-started-development/installation)
 
+## React
+
+### 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');
+```
+
+### 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).