@vcita/design-system 0.0.12-prod.beta.27 → 0.1.2

package/README.md

@@ -1,5 +1,8 @@
 # design-system
 
+link to storybook
+https://vcita.github.io/design-system
+
 ## Goals
 
 This project's goal is to create a set of tools that will enable future development to be quicker and more standard.
@@ -15,24 +18,21 @@ Development will proceed by using the storybook.
 
 1. Input variables will be well defined and validated
 2. Components should be constructed so that they are composable - slots are your friends
-3. A component will only use a vuetify component if it is the one it is wrapping. If you need any other component, it
-   needs to first be wrapped, and then used by creating an instance of the wrapper.
 
 ### 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
 
-Component name will start with 'Vc', for example VcButton.
-
 Every component that is created in this project should have the following things:
 
+Unit test file with 100% coverage.
+
 A storybook page with the following data
 
 1. link to Figma page with the design of the component
@@ -67,7 +67,7 @@ Other design variables will be defined in TBD. Each project that uses this packa
 design variables, and thus control its own design. Please be thoughtful when adding and using the design variables in
 your components.
 
-### Best practices
+### Styling best practices
 
 1. Values such as margins or padding will be set using css variables, so that each project can adapt the design if need
    be. The initial values will be set in the @/styles/variables.scss file.
@@ -98,20 +98,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 +155,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 +164,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