@skodaflow/web-library 3.2.4 → 3.2.5

package/README.md

@@ -1,120 +1,81 @@
-## `@skodaflow/web-library@2.x`
-
-> Flow Web Library is the REACT implementation of the Skoda Flow Design system:
-> https://skodaauto.frontify.com/d/SCWeidKKNkoy
->
-> This package is a set of all assets for frontend web development and set of react components for Skoda Auto web applications.
-
-## Installation
-
-#### Library location
-
-Library is located in public NPM repository. You also need to define **@skodaflow** scope:
-
-```
-registry=https://registry.npmjs.com/
-```
-
-#### Install package
-
-For NPM use command:
-
-```
-npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library --save
-```
-
-For Yarn use command:
-
-```
-yarn add @mui/material @emotion/react @emotion/styled @skodaflow/web-library
-```
-
-@mui/material is the peer dependency but minimal required version is 5.0.1.
-According to documentation, @mui/material has another peer dependency to @emotion, so you need to install all dependencies.
-For more details: https://mui.com/getting-started/installation/
-
-## Usage
-
-**1. Step.**
-In the root component of your application, for example in app.jsx use SkodaTheme.
-
-```
-import { SkodaTheme } from '@skodaflow/web-library';
-```
-
-Then wrap your app into SkodaTheme:
-
-```
-<SkodaTheme>
-   <App />
-</SkodaTheme>
-```
-
-All content inside this wrapper will now styled according to Skoda Flow Design System.
-Content out of the SkodaTheme will stay untouched. Skoda Flow Design System will be aplied only on child elements.
-For global usage of foundation as typography, colors and effects variables out of the SkodaTheme wrapper include global stylesheet:
-
-```
-import '@skodaflow/web-library/theme/skoda/globals.css';
-```
-
-**1.1 Fonts.**
-If your application is created from scratch without assets like a fonts, and these assets are not delivered to client by higher scope (any kind of Layout or runtime where is your application running), then you need to include Skoda Next font from @skodaflow/web-library.
-
-```
-import '@skodaflow/web-library/theme/skoda/fonts.css'
-```
-
-Please, take care about including Skoda Next font to your application, because it is the important part of Skoda Flow Design System.
-
-**1.2 Icons.**
-If your application need to use SkodaNext icon font, include icon font asset too.
-
-```
-import '@skodaflow/web-library/theme/skoda/icons.css'
-```
-
-**2. Step.** Use prepared components from library, for example: Button.
-
-```
-import {Button} from '@skodaflow/web-library'
-
-const MyComponents = () => {
-	return <Button label="Primary" />
-}
-```
-
-For detailed documentation about Flow foundation visit:
-https://skodaauto.frontify.com/d/SCWeidKKNkoy/web
-
-For preview of components and Storybook visit:
-https://skodaflow-web.azurewebsites.net/
-
-## Additional usage
-
-All components are now based on most powerfull and popular library @mui/material.
-This core library was used for speed up development of flow components and web-library is the set of high order components designed by Skoda Flow theme.
-For more details about core library please visit: https://mui.com/
-
-If there is no prepared component in @skodaflow/web-library what you need,
-you still can use all components available in core MUI library.
-
-#### Migration from 1.x to 2.x
-
-1. update @skodaflow/web-library to version 2.x and install dependencies
-
-```
-npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library@^2.0.0 --save
-```
-
-2. wrap your application to SkodaTheme
-
-```
-import { SkodaTheme } from '@skodaflow/web-library';
-
-<SkodaTheme>
-   <App />
-</SkodaTheme>
-```
-
-3. Remove this import from root: ~~import '@skodaflow/web-library/theme/skoda'~~
+# `@skodaflow/web-library`
+
+> Flow Web Library is the REACT implementation of the Skoda Flow Design system:
+> https://skoda-brand.com/hub/26
+>
+> This package is a set of all assets for frontend web development and set of react components for Skoda Auto web applications.
+
+## Installation
+
+Library is located in public NPM repository.
+
+```bash
+# for npm users
+npm i @emotion/react @emotion/styled @mui/material @mui/system react @skodaflow/web-library
+
+# for yarn users
+yarn add @emotion/react @emotion/styled @mui/material @mui/system react @skodaflow/web-library
+```
+
+@mui/material is the peer dependency (minimal required version is 5.9.0).
+According to documentation, @mui/material has another peer dependency to @emotion, so you need to install all dependencies. For more details: https://mui.com/getting-started/installation/
+
+## Usage
+
+### Basic Usage
+
+Use theme provider in the root component of your application (eg. App.tsx).
+
+```tsx
+// use library provider
+import { SkodaThemeProvider } from '@skodaflow/web-library';
+...
+<SkodaThemeProvider>
+   <App/>
+</SkodaThemeProvider>
+
+// use MUI provider with custom theme
+// this allows to change skoda theme when needed
+import { skodaTheme } from '@skodaflow/web-library';
+import { ThemeProvider } from '@mui/material';
+...
+<ThemeProvider theme={skodaTheme}>
+   <App/>
+</ThemeProvider>
+```
+
+### Global Styles
+
+All content inside theme provider is now styled according to Skoda Flow Design System.
+Content out of the SkodaTheme will stay untouched. Skoda Flow Design System will be applied only on child elements.
+For global usage of foundation as typography, colors and effects variables out of the SkodaTheme wrapper include global stylesheet
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/globals.css";
+```
+
+### Fonts
+
+If your application is created from scratch without assets like a fonts, and these assets are not delivered to client by higher scope (any kind of Layout or runtime where is your application running), then you need to include Skoda Next font from @skodaflow/web-library.
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/fonts.css";
+```
+
+Please, take care about including Skoda Next font to your application, because it is the important part of Skoda Flow Design System.
+
+### Icons
+
+If your application need to use SkodaNext icon font, include icon font asset too.
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/icons.css";
+```
+
+---
+
+For detailed documentation about Flow foundation visit:
+https://skodaauto.frontify.com/d/SCWeidKKNkoy/web
+
+For preview of components and Storybook visit:
+https://skodaflow-web.azurewebsites.net/

package/build/README.md

@@ -1,120 +1,81 @@
-## `@skodaflow/web-library@2.x`
-
-> Flow Web Library is the REACT implementation of the Skoda Flow Design system:
-> https://skodaauto.frontify.com/d/SCWeidKKNkoy
->
-> This package is a set of all assets for frontend web development and set of react components for Skoda Auto web applications.
-
-## Installation
-
-#### Library location
-
-Library is located in public NPM repository. You also need to define **@skodaflow** scope:
-
-```
-registry=https://registry.npmjs.com/
-```
-
-#### Install package
-
-For NPM use command:
-
-```
-npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library --save
-```
-
-For Yarn use command:
-
-```
-yarn add @mui/material @emotion/react @emotion/styled @skodaflow/web-library
-```
-
-@mui/material is the peer dependency but minimal required version is 5.0.1.
-According to documentation, @mui/material has another peer dependency to @emotion, so you need to install all dependencies.
-For more details: https://mui.com/getting-started/installation/
-
-## Usage
-
-**1. Step.**
-In the root component of your application, for example in app.jsx use SkodaTheme.
-
-```
-import { SkodaTheme } from '@skodaflow/web-library';
-```
-
-Then wrap your app into SkodaTheme:
-
-```
-<SkodaTheme>
-   <App />
-</SkodaTheme>
-```
-
-All content inside this wrapper will now styled according to Skoda Flow Design System.
-Content out of the SkodaTheme will stay untouched. Skoda Flow Design System will be aplied only on child elements.
-For global usage of foundation as typography, colors and effects variables out of the SkodaTheme wrapper include global stylesheet:
-
-```
-import '@skodaflow/web-library/theme/skoda/globals.css';
-```
-
-**1.1 Fonts.**
-If your application is created from scratch without assets like a fonts, and these assets are not delivered to client by higher scope (any kind of Layout or runtime where is your application running), then you need to include Skoda Next font from @skodaflow/web-library.
-
-```
-import '@skodaflow/web-library/theme/skoda/fonts.css'
-```
-
-Please, take care about including Skoda Next font to your application, because it is the important part of Skoda Flow Design System.
-
-**1.2 Icons.**
-If your application need to use SkodaNext icon font, include icon font asset too.
-
-```
-import '@skodaflow/web-library/theme/skoda/icons.css'
-```
-
-**2. Step.** Use prepared components from library, for example: Button.
-
-```
-import {Button} from '@skodaflow/web-library'
-
-const MyComponents = () => {
-	return <Button label="Primary" />
-}
-```
-
-For detailed documentation about Flow foundation visit:
-https://skodaauto.frontify.com/d/SCWeidKKNkoy/web
-
-For preview of components and Storybook visit:
-https://skodaflow-web.azurewebsites.net/
-
-## Additional usage
-
-All components are now based on most powerfull and popular library @mui/material.
-This core library was used for speed up development of flow components and web-library is the set of high order components designed by Skoda Flow theme.
-For more details about core library please visit: https://mui.com/
-
-If there is no prepared component in @skodaflow/web-library what you need,
-you still can use all components available in core MUI library.
-
-#### Migration from 1.x to 2.x
-
-1. update @skodaflow/web-library to version 2.x and install dependencies
-
-```
-npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library@^2.0.0 --save
-```
-
-2. wrap your application to SkodaTheme
-
-```
-import { SkodaTheme } from '@skodaflow/web-library';
-
-<SkodaTheme>
-   <App />
-</SkodaTheme>
-```
-
-3. Remove this import from root: ~~import '@skodaflow/web-library/theme/skoda'~~
+# `@skodaflow/web-library`
+
+> Flow Web Library is the REACT implementation of the Skoda Flow Design system:
+> https://skoda-brand.com/hub/26
+>
+> This package is a set of all assets for frontend web development and set of react components for Skoda Auto web applications.
+
+## Installation
+
+Library is located in public NPM repository.
+
+```bash
+# for npm users
+npm i @emotion/react @emotion/styled @mui/material @mui/system react @skodaflow/web-library
+
+# for yarn users
+yarn add @emotion/react @emotion/styled @mui/material @mui/system react @skodaflow/web-library
+```
+
+@mui/material is the peer dependency (minimal required version is 5.9.0).
+According to documentation, @mui/material has another peer dependency to @emotion, so you need to install all dependencies. For more details: https://mui.com/getting-started/installation/
+
+## Usage
+
+### Basic Usage
+
+Use theme provider in the root component of your application (eg. App.tsx).
+
+```tsx
+// use library provider
+import { SkodaThemeProvider } from '@skodaflow/web-library';
+...
+<SkodaThemeProvider>
+   <App/>
+</SkodaThemeProvider>
+
+// use MUI provider with custom theme
+// this allows to change skoda theme when needed
+import { skodaTheme } from '@skodaflow/web-library';
+import { ThemeProvider } from '@mui/material';
+...
+<ThemeProvider theme={skodaTheme}>
+   <App/>
+</ThemeProvider>
+```
+
+### Global Styles
+
+All content inside theme provider is now styled according to Skoda Flow Design System.
+Content out of the SkodaTheme will stay untouched. Skoda Flow Design System will be applied only on child elements.
+For global usage of foundation as typography, colors and effects variables out of the SkodaTheme wrapper include global stylesheet
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/globals.css";
+```
+
+### Fonts
+
+If your application is created from scratch without assets like a fonts, and these assets are not delivered to client by higher scope (any kind of Layout or runtime where is your application running), then you need to include Skoda Next font from @skodaflow/web-library.
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/fonts.css";
+```
+
+Please, take care about including Skoda Next font to your application, because it is the important part of Skoda Flow Design System.
+
+### Icons
+
+If your application need to use SkodaNext icon font, include icon font asset too.
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/icons.css";
+```
+
+---
+
+For detailed documentation about Flow foundation visit:
+https://skodaauto.frontify.com/d/SCWeidKKNkoy/web
+
+For preview of components and Storybook visit:
+https://skodaflow-web.azurewebsites.net/

package/build/eula.txt

@@ -0,0 +1,40 @@
+EULA - SKODA AUTO Libraries
+ŠKODA AUTO a.s. with registered offices at Mladá Boleslav, tř. Václava Klementa 869,  Mladá Boleslav II, 293 01 Mladá Boleslav, Czech Republic, ID No. 00177041, registered in the commercial Register held by Městský Soud v Praze (Metropolitan Court in Prague), section B, entry 332 (“ŠKODA AUTO”) releases this End-User Licence Agreement (“EULA”) to specify the rights and obligations when using library/package applicable to this EULA (“Library”).
+
+Specification of the Library
+
+ Specification of the library is not part of this EULA and is provided by suitable documentation, shiped with beforementioned library.
+
+The Library is dedicated to sustaining all ŠKODA AUTO web development projects.
+
+License
+
+ŠKODA AUTO declares that all source code, files, fonts and all other assets are exclusively owned by ŠKODA AUTO.
+
+ŠKODA AUTO grants you a revocable, non-exclusive, non-transferable, limited license to download, install and use the Library strictly in accordance with this EULA.
+
+If you violate any of these limitations or restrictions, the license grant will automatically and immediately expire. Any usage of the Library outside the scope of the applicable license constitutes an infringement of ŠKODA AUTO’s intellectual property rights as well as a material breach of this EULA.
+
+Restrictions
+
+You agree not to, and you will not permit others to:
+
+license, sell, rent, lease, assign, distribute, transmit, host, outsource, disclose or otherwise commercially exploit the Library or make the Library available to any third party;
+provide or make available any features or functionality of the Library to any person or entity outside of your organization;
+change, decompile or disassemble the Library or its source code, algorithms, methods or techniques;
+remove, alter or obscure any proprietary notices, labels or marks in the Library;
+translate, adapt, arrange, or create derivative works based on, or otherwise modify the Library for any purpose except of the purpose which is stated in this EULA;
+use the Application in excess of, or in any manner inconsistent with your entitlements.
+The Library may only be used for the purpose of creating products for ŠKODA AUTO. You agree not to use the Library for any other purpose and outside of the scope of business with ŠKODA AUTO.
+
+Copyright
+
+ŠKODA AUTO and its licensors retain title to and ownership of, and all other rights with respect to, the Library, including, without limitation, any related copyrights, trademarks, trade secrets, patents, and other intellectual property rights. You have only the limited license granted with respect to the Library expressly set forth in this EULA. You acknowledge and agree that the Library is licensed, not sold, and that rights to use the Library are acquired only under the license from ŠKODA AUTO.
+
+Modifications of the Library
+
+ ŠKODA AUTO reserves the right to modify, suspend or discontinue, temporarily or permanently, the Library or any service to which it connects, with or without notice and without liability to you.
+
+The Library will not be updated or maintained regularly. All updates depend on the decision of ŠKODA AUTO.
+
+In Mladá Boleslav on 2022

package/build/index.d.ts

@@ -2,3 +2,4 @@ export * from './design';
 export * from './components';
 export * from './organisms';
 export * from './utils';
+export * from './layout';