@vcita/design-system 1.18.8 → 1.19.0-beta

package/README.md

@@ -17,6 +17,7 @@ Notice that ATM we need to install the dependencies in one node version but then
 TODO: standardise node version for both operations https://myvcita.atlassian.net/browse/VCITA2-2439
 
 ### Getting started
+
 ```
 npm i @vcita/design-system
 ```
@@ -27,6 +28,7 @@ This package depends on [Vuetify](https://vuetifyjs.com/en/getting-started/insta
 Currently, the needed version is 2.4.0, we will update this from time to time.
 
 ### Initializing in your project
+
 To initialize the project create plugins/designSystem.js
 
 ```
@@ -39,7 +41,7 @@ import Vue from "vue";
 Vue.use(DesignSystem);
 
 // Use this in case you want to load selectively only the components you need
-Vue.use(DesignSystem, { 
+Vue.use(DesignSystem, {
   components: {
     VcComponent: () => import('@vcita/design-system/src/components/VcComponent/VcComponent.vue'),
     ...
@@ -49,6 +51,7 @@ export default DesignSystemInit();
 ```
 
 Import into src/main.js and into the vue initialization
+
 ```
 // src/main.js
 import ds from './plugins/designSystem';
@@ -81,14 +84,19 @@ export default DesignSystemInit(config);
 All configuration options are specified [here](#available-configuration-options)
 
 ### Applying the styling to your project
+
 Create the file src/styles/variables.scss and edit to fit your needs. you may only need the import statement.
+
 ```
 @import "~@vcita/design-system/styles/variables.scss";
 ```
+
 In order to load the variables.scss file, add this to src/main.js
+
 ```
 import "@/../styles/variables.scss";
 ```
+
 Create the file src/styles/vuetify-variables.scss
 
 ```
@@ -119,6 +127,7 @@ css: {
 
 Please note: to receive the theme in your components, make sure to initialize your app using the v-app tag.
 Your App.vue will look something like this:
+
 ```
 <template>
   <v-app id="app">
@@ -131,35 +140,45 @@ The src/styles/variables.scss file can be used to override some styling variable
 You can do this by specifying a different value to one or more of the css variables that have been provided.
 
 For example, to use another font
+
 ```
 body {
   --primary-font-family: YourFont;
 }
 ```
+
 All component styling options are specified [here](https://vcita.github.io/design-system/?path=/story/variables--page)
 
 ### Using the components
+
 You can now use the components from the new library anywhere in the application, as you normally would
+
 ```
 <VcButton>label</VcButton>
 ```
 
 ### Available configuration options
+
 #### Theme
+
 The default theme values are based on default vcita colors, but they can be set according to the current business.
 Please note that colors must be set as hex values.
 
 To facilitate that the file colorUtil.js has been included, which contains the following functions:
+
 - rgbToHex() - Use this to convert rgb values to hex values.
 - hexToRgb() - If you have other areas in your project that require rgb format, you can use this to convert any hex values to rgb.
 - pSBC() - This function can calculate various opacity levels, based on an initial color, and return them in hex or rgb formats, as needed
+
 ```
 // stringUtil.pSBC(opacity, baseColor)
 stringUtil.pSBC(0.6, this.secondaryColor)
 ```
 
 ##### During startup
+
 This is how they can be set during startup of the app:
+
 ```
 // plugins/designSystem.js
 const config = {
@@ -174,7 +193,9 @@ const config = {
     }
 }
 ```
+
 ##### During runtime
+
 ```
 import colorUtil from '@vcita/design-system/utils/colorUtil.js';
 
@@ -193,6 +214,7 @@ There are a few components that contain localized strings.
 For example, the wizard and modal components.
 
 ##### Initialization
+
 ```
 import initI18n from '@vcita/design-system/init/initI18n';
 ...
@@ -200,6 +222,7 @@ Vue.use(DesignSystem);
 initI18n();
 ...
 ```
+
 This will enable the components to use the this.$dst function to get the localized strings.
 
 By default, the texts will be presented in English, so should you need to display them in another locale, this is now you can set the locale as needed.
@@ -221,39 +244,48 @@ export default DesignSystemInit(config, locale);
 ##### During runtime
 
 In a component, such as App.vue, add this call
+
 ```
 // App.vue
 this.$ds.setLocale(locale);
 ```
 
 ## Component configuration options
+
 ### VcTextField
+
 #### Usage of VcTextField with googleAddressAutoComplete set to 'true'
 
 ```
 // plugins/designSystem.js
-const config = { 
+const config = {
                   options: {googleAppKey: 'yourGoogleAddressKey'}
                };
 ```
 
 ### VcToast
+
 #### Change VcToast default timeout
+
 By default, the VcToast timeout is 3000ms.
 You can change that for a specific instance by setting the timeout prop to your desired value.
 In case you want to change that for the entire project, so any instance will use another timeout value, it can be done by calling this code
+
 ```
 // plugins/designSystem.js
 const config = {
                   options: {toastTimeout: 5000 }
                };
 ```
+
 This will set the default timeout for all instances of VcToast in your project.
 Any instance that is getting a different value in the timeout prop will keep using that value.
 
 ## Adding external icons
+
 The package comes with a set of icons already included, which can easily be displayed using the VcIcon component.
 It is possible to extend that set by creating an object with key-value format
+
 ```
 export default {
     yourKey1: `<svg ... /></svg>`,
@@ -262,14 +294,17 @@ export default {
 ```
 
 And passing that to the DesignSystem initialization
+
 ```
 // plugins/designSystem.js
 import extIcons from './yourFile.js';
-const config = { 
+const config = {
                   extIcons
                };
 ```
+
 Then to use the icons
+
 ```
 <template>
     <VcIcon>$yourKey1</VcIcon>
@@ -277,15 +312,13 @@ Then to use the icons
 ```
 
 ### Automation hooks
-In order to facilitate automation, each design system component has a prop called dataQa. 
+
+In order to facilitate automation, each design system component has a prop called dataQa.
 This prop has a default value matching the component's name.
 The value set in this prop will become an attribute on the component instance, which you can use in your automation code, to easily locate the component on the page.
 
 To differentiate different instances, you can pass different dataQa values to different instances.
 
-[//]: # (### Customize configuration)
-
-[//]: # ()
-[//]: # (See [Configuration Reference]&#40;https://cli.vuejs.org/config/&#41;.)
-
-
+[//]: # '### Customize configuration'
+[//]: #
+[//]: # 'See [Configuration Reference](https://cli.vuejs.org/config/).'

package/dist/@vcita/design-system.esm.js

@@ -1,2 +1,2 @@
-export { a_ as default } from '../entry-9374fc5f.js';
+export { a_ as default } from '../entry-bfd62350.js';
 import 'vuetify/lib';

package/dist/@vcita/design-system.ssr.js

@@ -1 +1 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var entry=require('../entry-cc5cc6f4.js');require('vuetify/lib');exports["default"]=entry.a_;
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var entry=require('../entry-dc792202.js');require('vuetify/lib');exports["default"]=entry.a_;