@skf-design-system/ui-components 1.0.0-alpha.34 → 1.0.0-alpha.36

package/README.md

@@ -42,13 +42,11 @@ The SKF UI Library is a collection of components that is meant to visually align
 
 The SKF UI Library is created using Lit/native web components in order to support as many frameworks as possible. It works out of the box for all frameworks, including React >= 19.
 
-For those who use React 18, we provide React wrappers that can be used in your application.
+## Philosophy
 
-## Reporting issues
-
-Reporting issues requires an skf email and github access. [See this section](#skf-email)
+We like to stay as close to how native compoments works as possible albeit adding extra features on top. The rationale behind is that it either makes easier to absorb the api or learn something that is usable in the world outside as well. Adding looped, repeated content is done declaratively by component specific child components.
 
-We are working on a solution to report issues without an explicit skf email, which will be publicly available.
+<!-- For those who use React 18, we provide React wrappers that can be used in your application.-->
 
 ## 🏃 Getting started
 
@@ -89,10 +87,16 @@ How you get started using our components is of course a bit different depending
 
 In order for our components to work as intended you need to import our global styles where appropiate e.g. App.tsx.
 
-```tsx
+```ts
 import '@skf-design-system/ui-components/styles/global.css';
 ```
 
+If you want to handle the loading of the SKF fonts yourself, you can use the alternative global css file:
+
+```ts
+import '@skf-design-system/ui-components/styles/global-alt.css';
+```
+
 ### Angular
 
 In order for our components to get the correct styling you need add our global styling to your project. In angular you can do that in the angular.json like this:
@@ -152,11 +156,11 @@ export class AppComponent {
 
 ```
 
-### React 19 beta / Next 15 beta
+### React 19 / Nextjs 15
 
-Web Components will become first class citizens in React 19. Should you want to use them in a version prior to 19 you have to wrap them in React, which essentially converts the native event to React Syntactic events. Long story short, use React 19 (when released) and your off the hook.
+Web Components is first class citizens in React 19. Should you want to use them in a version prior to 19 you have to wrap them in React wrappers, which essentially converts the native event to React Syntactic events. Long story short, use React 19 and your off the hook.
 
-If you want to proceed to use the React 19 beta together with typescript, see [React 19 RC upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide).
+If you want to proceed to use the React 19 together with typescript, see [React 19 upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide).
 
 You will also have to declare a global type for the web components to get it to play nice with JSX.
 
@@ -221,24 +225,7 @@ import { SkfInput } from "@skf-design-system/ui-components";
 <skf-input name="input" onchange={(e) => console.log((e.target as unknown as SkfInput).value)}></skf-input>
 ```
 
-### React 18
-
-> Note, for React 18 it is not necessary to install an extra plugin to get code completion since you are writing in react
-
-React 18 does not support native web components out of the box. If you want to use SKF UI components with React 18 you will have to use our generated wrappers in order to do so.
-
-```tsx
-import { SkfInput } from "@skf-design-system/ui-components/react/index.js";
-
-...
-
-<SkfInput
-  name="input"
-  onChange={(e) => {
-    console.log( e.target.value );
-  }}
-/>
-```
+⚠️ **React 18** does not support native web components. If you want to use this library you must upgrade React to version 19.
 
 ### Setting up code completion
 
@@ -321,6 +308,12 @@ steps:
 
 In this example a token has been added with the name `ACCESS_TOKEN_SECRET`, but you can give it any name you like ✨. If you want to know more about secret generation and usage you can read more about it in [GitHub's docs](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions).
 
+## Reporting issues
+
+Reporting issues requires an skf email and github access. [See this section](#skf-email)
+
+We are working on a solution to report issues without an explicit skf email, which will be publicly available.
+
 ## 📖 Further reading
 
 ### 🎁 Contributing