@vcita/design-system 0.0.12-prod.beta.21 → 0.1.0

package/README.md

@@ -21,11 +21,10 @@ Development will proceed by using the storybook.
 ### Code standards
 
 1. The component name will start with Vc and be camel cased. example: VcComponent.vue
-2. Emitted events will start with "on" and be camel cased. example: 'onButtonClicked'.
-   Except for standard events such as "click" or "input".
-3. Don't use v-bind="$attrs" and v-on="$listeners", that's not the way. 
-   If you find yourself needing a lot of props, you may need to implement it using a render function instead.
-   
+2. Emitted events will start with "on" and be camel cased. example: 'onButtonClicked'. Except for standard events such
+   as "click" or "input".
+3. Don't use v-bind="$attrs" and v-on="$listeners", that's not the way. If you find yourself needing a lot of props, you
+   may need to implement it using a render function instead.
 
 ### Guidelines and best practices
 
@@ -98,20 +97,24 @@ npm run storybook
 ```
 
 ### Ongoing development
-In many cases, you don't want to publish the package each time you make a change.
-In those cases it can may life much easier to install the package directly from your branch in git.
+
+In many cases, you don't want to publish the package each time you make a change. In those cases it can may life much
+easier to install the package directly from your branch in git.
 
 ```
 npm install "https://github.com/vcita/design-system.git#branch" --save
 ```
 
 so to install from integration for example, run
+
 ```
 npm install "https://github.com/vcita/design-system.git#example" --save
 ```
-Note: before releasing, make sure to publish a version and use that in your project, or tracking version changes will become impossible.
 
-### publishing the package to npm
+Note: before releasing, make sure to publish a version and use that in your project, or tracking version changes will
+become impossible.
+
+### Publishing the package to npm
 
 You may first need to run
 
@@ -151,7 +154,7 @@ npm run lint
 
 ### Initializing in your project
 
-You can initialize the project without changing the theme or other options
+To initialize the project
 
 ```
 import DesignSystem from '@vcita/design-system';
@@ -160,16 +163,21 @@ import Vue from "vue";
 Vue.use(DesignSystem);
 ```
 
-Or in case you do want to adjust some values, you can do something like this
+If you need to also adjust some values, such as theme or configurations, it will look something like this:
 
 ```
-import DesignSystem from '@vcita/design-system';
 import Vue from "vue";
+import DesignSystem from '@vcita/design-system';
+import DesignSystemInit from '@vcita/design-system/init/DesignSystem';
+
+Vue.use(DesignSystem);
+
+const config = {
+                  theme: { primary: '#123456'}, 
+                  options: {toastTimeout: 5000 }
+               };
 
-Vue.use(DesignSystem, {
-                        theme: { primary: '#123456'}, 
-                        options: {toastTimeout: 5000 }
-                        });
+export default DesignSystemInit(config);
 ```
 
 ### Customize configuration