@vcita/design-system 1.0.3 → 1.0.6

package/README.md

@@ -1,55 +1,179 @@
 # 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.
 
-
 ## Creating components
 
+### The concept
+
+The components in this package are project agnostic. They should not contain anything that is specific to any project.
+Development will proceed by using the storybook.
+
+### Requirements
+
+1. Input variables will be well defined and validated
+2. Components should be constructed so that they are composable - slots are your friends
+
+### 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.
+
 ### Guidelines and best practices
 
 Every component that is created in this project should have the following things:
 
-A storybook page with the following data:
-   1. link to Figma page with the design of the component
-   2. controls definition that allows to manipulate the component parameters
-   3. use actions to demonstrate the output of the component in terms of emitted events and data
+Unit test file with 100% coverage.
+
+A storybook page with the following data
+
+1. link to Figma page with the design of the component
+2. controls definition that allows to manipulate the component parameters
+3. use actions to demonstrate the output of the component in terms of emitted events and data
+4. display variations will be clearly presented
 
 Consider localization issues, such as:
+
 1. Texts that are set to uppercase by Vuetify need to be changed to text-transform: initial;
 2. Date formatting should be flexible according to different localizations
+3. components should not contain any constant texts, all texts must be passed in as a parameter.
+
+## Adding component to the package
+
+Add to src/components/index.js an entry for your new component, something like:
 
-## Project setup
 ```
-npm install
+export { default as VcYourComp } from './VcYourComp/VcYourComp.vue';
 ```
 
-### Compiles and hot-reloads for development
+## Styling
+
+### Design tokens and themes
+
+Since we want these components to be flexible enough that they can be used in multiple projects, we will be using
+variables to apply most of the design characteristics of each component.
+
+Colors will be applied by using the vuetify theme, as defined in preview.js
+
+Other design variables will be defined in TBD. Each project that uses this package will assign its own values to the
+design variables, and thus control its own design. Please be thoughtful when adding and using the design variables in
+your components.
+
+### 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.
+2. Changes and additions to general css variables will be documented in the @/stories/welcome.stories.mdx file
+3. Changes and additions to components specific css variables will be documented TBD
+4. Brand colors will be applied using the Vuetify theme, not through parameters. You can add values to the theme in
+   .storybook/preview.js
+
+### Using Vuetify SASS variables
+
+Changes to default SASS variable values can be made in styles/variables.scss
+
+When styling using the Vuetify SASS variables, please consider two situations:
+
+1. The styling decision you are making will be correct across all projects that use this package, in which case the
+   value can be a constant
+2. the styling decision you are making should be adjusted for different projects. In that case, use the css variables
+   option, for example:
+   ```
+   $body-font-family: var(--primary-font-family);
+   ```
+   This will allow each project to apply their own value. The css variables must be documented.
+
+### Running Storybook
+
 ```
-npm run serve
+npm run storybook
 ```
 
-### Compiles and minifies for production
+### 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 from your local project directory.
+To learn how to do this, please go  [here](https://myvcita.atlassian.net/wiki/spaces/FG/pages/2021851137/Using+the+vcita+design+system+package#Installation-for-development-purposes).
+
+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
+
+```
+npm adduser
+```
+
+Publishing beta version
+
+```
+git commit -a
+npm version [currentVersion]-beta.[NumOfBeta]
+npm run build
+npm publish --tag beta
 ```
+
+Publishing regular version
+
+```
+git commit -a
+npm version [newVersion]
 npm run build
+npm publish
 ```
 
-### Run your tests
+### Run your unit tests
+
 ```
-npm run test
+npm run test:unit
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
-### Run your unit tests
+### Initializing in your project
+
+To initialize the project
+
 ```
-npm run test:unit
+import DesignSystem from '@vcita/design-system';
+import Vue from "vue";
+
+Vue.use(DesignSystem);
+```
+
+If you need to also adjust some values, such as theme or configurations, it will look something like this:
+
+```
+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 }
+               };
+
+export default DesignSystemInit(config);
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
+

package/config/locales/ds.de.yml

@@ -0,0 +1,16 @@
+---
+de:
+  ds:
+    wizard:
+      back: Zurück
+      next: Weiter
+    modal:
+      cancel: Abbrechen
+      ok: OK
+      done: Fertig
+    progress_circular:
+      next: 'Weiter:'
+    listbox:
+      add: Neuen Kontakt hinzufügen
+    dropzone:
+      default_title: 

package/config/locales/ds.en.yml

@@ -0,0 +1,28 @@
+---
+en:
+  ds:
+    wizard:
+      back: Back
+      next: Next
+    modal:
+      cancel: Cancel
+      ok: Ok
+      done: Done
+    progress_circular:
+      next: 'Next:'
+    listbox:
+      add: Add new contact
+      empty_list: No result found
+    dropzone:
+      default_title: Submit
+    search_bar:
+      label: Search
+    time_since:
+      years: '{years} years ago'
+      months: '{months} months ago'
+      days: '{days} days ago'
+      yesterday: 'Yesterday'
+      hours: '{hours} hours ago'
+      minutes: '{minutes} minutes ago'
+      now: 'Just now'
+

package/config/locales/ds.es.yml

@@ -0,0 +1,16 @@
+---
+es:
+  ds:
+    wizard:
+      back: Atrás
+      next: Siguiente
+    modal:
+      cancel: Cancelar
+      ok: Ok
+      done: Hecho
+    progress_circular:
+      next: 'Siguiente:'
+    listbox:
+      add: Agregar nuevo contacto
+    dropzone:
+      default_title: 

package/config/locales/ds.fr.yml

@@ -0,0 +1,16 @@
+---
+fr:
+  ds:
+    wizard:
+      back: Retour
+      next: Suivant
+    modal:
+      cancel: Annuler
+      ok: Ok
+      done: C'est fait
+    progress_circular:
+      next: 'Suivant :'
+    listbox:
+      add: Ajouter nouveau contact
+    dropzone:
+      default_title: 

package/config/locales/ds.he.yml

@@ -0,0 +1,16 @@
+---
+he:
+  ds:
+    wizard:
+      back: "חזרה"
+      next: "הבא"
+    modal:
+      cancel: "ביטול"
+      ok: "אישור"
+      done: "בוצע"
+    progress_circular:
+      next: "הבא:"
+    listbox:
+      add: "הוספה של איש קשר חדש"
+    dropzone:
+      default_title: 

package/config/locales/ds.it.yml

@@ -0,0 +1,16 @@
+---
+it:
+  ds:
+    wizard:
+      back: Indietro
+      next: Avanti
+    modal:
+      cancel: Cancella
+      ok: Ok
+      done: Fatto
+    progress_circular:
+      next: 'Avanti:'
+    listbox:
+      add: Aggiungi nuovo contatto
+    dropzone:
+      default_title: 

package/config/locales/ds.keys.yml

@@ -0,0 +1,16 @@
+---
+keys:
+  ds:
+    wizard:
+      back: ds.wizard.back
+      next: ds.wizard.next
+    modal:
+      cancel: ds.modal.cancel
+      ok: ds.modal.ok
+      done: ds.modal.done
+    progress_circular:
+      next: ds.progress_circular.next
+    listbox:
+      add: ds.listbox.add
+    dropzone:
+      default_title: ds.dropzone.default_title

package/config/locales/ds.nl.yml

@@ -0,0 +1,16 @@
+---
+nl:
+  ds:
+    wizard:
+      back: Terug
+      next: Volgende
+    modal:
+      cancel: Annuleren
+      ok: Ok
+      done: Gereed
+    progress_circular:
+      next: 'Volgende:'
+    listbox:
+      add: Nieuw contact toevoegen
+    dropzone:
+      default_title: 

package/config/locales/ds.pl.yml

@@ -0,0 +1,16 @@
+---
+pl:
+  ds:
+    wizard:
+      back: Wstecz
+      next: Dalej
+    modal:
+      cancel: Anuluj
+      ok: Ok
+      done: Gotowe
+    progress_circular:
+      next: 'Dalej:'
+    listbox:
+      add: Dodaj nowy kontakt
+    dropzone:
+      default_title: 

package/config/locales/ds.pseudo.yml

@@ -0,0 +1,16 @@
+---
+pseudo:
+  ds:
+    wizard:
+      back: "ßåçk ßåç"
+      next: Néxt Néx
+    modal:
+      cancel: Cånçél Cån
+      ok: Ok Ok
+      done: Doné Don
+    progress_circular:
+      next: 'Néxt: Néx'
+    listbox:
+      add: "Ädd néw çontåçt Ädd néw"
+    dropzone:
+      default_title: Submit Sub

package/config/locales/ds.pt.yml

@@ -0,0 +1,16 @@
+---
+pt:
+  ds:
+    wizard:
+      back: Voltar
+      next: Próximo
+    modal:
+      cancel: Cancelar
+      ok: Ok
+      done: Pronto
+    progress_circular:
+      next: Próximo;
+    listbox:
+      add: Adicionar contato novo
+    dropzone:
+      default_title: 

package/config/locales/ds.ru.yml

@@ -0,0 +1,6 @@
+---
+ru:
+  ds:
+    modal:
+      ok: Ok
+      cancel: "Отменить"

package/config/locales/ds.sl.yml

@@ -0,0 +1,6 @@
+---
+sl:
+  ds:
+    modal:
+      ok: V redu
+      cancel: Prekliči

package/config/locales/ds.tr.yml

@@ -0,0 +1,6 @@
+---
+tr:
+  ds:
+    modal:
+      ok: Tamam
+      cancel: "İptal"

package/config/locales/ds.zun.yml

@@ -0,0 +1,6 @@
+---
+zun:
+  ds:
+    modal:
+      ok: words.ok
+      cancel: words.cancel