Fix readme (#271)

README.md

@@ -5,40 +5,9 @@
 yarn install
 ```
 
-## Font variables setup
-Required!: Add scss font variables to your project
-
-```
-$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default;
-$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default;
-$s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default;
-```
-
 ## Usage library in project
-### 1.Install all of library components:
-```
-import Vue from 'vue
-import SoramitsuElements from '@soramitsu/soramitsu-js-ui'
 
-const options = {
-  store // if u want to merge ui lib modules
-}
-
-Vue.use(SoramitsuElements, options)
-```
-### 2.Install only necessary components (to reduce vendors bundle size)
-```
-import Vue from 'vue
-import ElementUIPlugin from '@soramitsu/soramitsu-js-ui/lib/plugins/elementUI'
-import SoramitsuUIStorePlugin from '@soramitsu/soramitsu-js-ui/lib/plugins/soramitsuUIStore'
-import SButton from '@soramitsu/soramitsu-js-ui/lib/components/Button/SButton'
-import SButton from '@soramitsu/soramitsu-js-ui/lib/components/Input/SInput'
-
-Vue.use(ElementUIPlugin) // required
-Vue.use(SoramitsuUIStorePlugin, store) // optional
-Vue.use(SButton)
-Vue.use(SInput)
-```
+The full guide about usage can be found [here](./src/stories/Intro/Intro.stories.mdx)
 
 ### Compiles and hot-reloads storybook with components for development
 ```

src/stories/Intro/Intro.stories.mdx

@@ -22,13 +22,13 @@ npm login --registry="https://nexus.iroha.tech/repository/npm-group/"
 
 # 2. Add as a dependency to the project
 
-Add `"@soramitsu/soramitsu-js-ui": "^0.3.4"` in `package.json` file (`"dependencies"` section)
+Add `"@soramitsu/soramitsu-js-ui": "version"` in `package.json` file (`"dependencies"` section)
 
 OR RUN
 
 `yarn add "@soramitsu/soramitsu-js-ui"`
 
-# 3. Add components with styles to the project
+# 3. Add components with utilities to the project
 
 For instance, `soramitsuUI.ts`:
 
@@ -57,7 +57,7 @@ setTheme(Theme.LIGHT)
 setDesignSystem(DesignSystem.NEUMORPHIC)
 ```
 
-You could also use direct components import:
+You could also use direct components import to reduce vendors bundle size:
 
 ```
 import Vue from 'vue'
@@ -92,11 +92,16 @@ Add `"element-ui"` in `tsconfig.json` file (`"types"` section)
 
 # 5. Add all required styles
 
-The previous section added not all required styles. To fix it you should add imports into `scss` file.
+The previous sections added not all required styles. To fix it you should add imports into `scss` file.
+Also, you should add **Font variables**
 
 For instance, `soramitsu-variables.scss`:
 
 ```
+$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default;
+$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default;
+$s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default;
+
 @import '~@soramitsu/soramitsu-js-ui/lib/styles/index';
 ```
 
@@ -110,6 +115,10 @@ $s-color-theme-accent: #ED145B;
 // Basic colors
 $s-color-base-content-primary: #0D0248;
 
+$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default;
+$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default;
+$s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default;
+
 @import '~@soramitsu/soramitsu-js-ui/lib/styles/index';
 
 ```