From d2ced7a0a80832b588d65d8e949879a98c4ebe8d Mon Sep 17 00:00:00 2001 From: NicolasRichel Date: Fri, 15 Sep 2023 16:00:49 +0200 Subject: [PATCH] MINOR: chore(doc): update doc for v2 --- .eslintrc.json | 1 + src/assets/css/variables.css | 34 +-- src/web/router.js | 28 +- src/web/store.js | 18 +- src/web/views/GettingStarted/Designers.vue | 53 ++-- src/web/views/GettingStarted/Developpers.vue | 262 +++++++----------- src/web/views/GettingStarted/InternalDoc.vue | 67 ++--- .../views/GettingStarted/_GettingStarted.scss | 11 +- .../ColorsImplementingContent.vue | 75 ++--- .../ColorPalette/ColorsPaletteContent.vue | 78 ++---- .../ColorPalette/_ColorsPaletteContent.scss | 4 + src/web/views/Guidelines/Colors/Colors.vue | 27 +- .../Colors/GenericComponents/ColorSwatche.vue | 58 ++-- .../views/Guidelines/Colors/js/blackColors.js | 2 - .../views/Guidelines/Colors/js/highColors.js | 4 - .../Guidelines/Colors/js/neutralColors.js | 2 - .../Guidelines/Colors/js/primaryColors.js | 4 - .../Guidelines/Colors/js/secondaryColors.js | 4 - .../Guidelines/Colors/js/shadesGrayColors.js | 3 - .../Guidelines/Colors/js/successColors.js | 4 - .../Guidelines/Colors/js/warningColors.js | 4 - .../views/Guidelines/Colors/js/whiteColors.js | 1 - src/web/views/Guidelines/List/List.vue | 56 ---- src/web/views/Guidelines/Markup/Markup.vue | 41 --- .../Guidelines/Spacing/Margin/Margin.vue | 31 ++- .../Guidelines/Spacing/Padding/Padding.vue | 31 ++- src/web/views/Guidelines/Spacing/Spacing.vue | 45 +-- .../Guidelines/Typography/Typography.vue | 51 ++-- .../Guidelines/Typography/_Typography.scss | 1 + .../views/Guidelines/Utilities/Utilities.vue | 212 +++++++------- .../views/Guidelines/Variables/Variables.vue | 221 +++++++-------- 31 files changed, 573 insertions(+), 860 deletions(-) delete mode 100644 src/web/views/Guidelines/List/List.vue delete mode 100644 src/web/views/Guidelines/Markup/Markup.vue diff --git a/.eslintrc.json b/.eslintrc.json index 5f7a672f..807d5cd8 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -23,6 +23,7 @@ "quotes": ["error", "double", "avoid-escape"], "semi": ["error", "always"], "vue/multi-word-component-names": "off", + "vue/no-reserved-component-names": "off", "vue/order-in-components": [ "error", { diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css index 858fb0e2..50fd2637 100644 --- a/src/assets/css/variables.css +++ b/src/assets/css/variables.css @@ -2,54 +2,54 @@ html { /* base COLORS -------------------------------- */ /* -------------------------------- color PRIMARY & VARIANTS -------------------------------- */ - --color-primary-lighter: rgba(248, 249, 250, 1); - --color-primary-light: rgba(67, 78, 105, 1); --color-primary: rgba(47, 55, 74, 1); + --color-primary-light: rgba(67, 78, 105, 1); + --color-primary-lighter: rgba(248, 249, 250, 1); --color-primary-dark: rgba(27, 32, 43, 1); /* -------------------------------- color SECONDARY & VARIANTS -------------------------------- */ - --color-secondary-lighter: rgba(255, 252, 242, 1); - --color-secondary-light: rgba(250, 212, 94, 1); --color-secondary: rgba(249, 199, 44, 1); + --color-secondary-light: rgba(250, 212, 94, 1); + --color-secondary-lighter: rgba(255, 252, 242, 1); --color-secondary-dark: rgba(235, 180, 7, 1); /* -------------------------------- colors GREY SHADES - NEUTRAL-------------------------------- */ --color-white: rgba(255, 255, 255, 1); - --color-silver-light: rgba(247, 247, 247, 1); --color-silver: rgba(216, 216, 216, 1); + --color-silver-light: rgba(247, 247, 247, 1); --color-silver-dark: rgba(190, 190, 190, 1); - --color-granite-light: rgba(122, 122, 122, 1); --color-granite: rgba(96, 96, 96, 1); - --color-black-lighter: rgba(0, 0, 0, 0.1); + --color-granite-light: rgba(122, 122, 122, 1); --color-black: rgba(0, 0, 0, 1); - - /* -------------------------------- - color TEXT -------------------------------- */ - --color-text: rgba(47, 55, 74, 1); + --color-black-lighter: rgba(0, 0, 0, 0.1); /* -------------------------------- color SUCCESS & VARIANTS -------------------------------- */ - --color-success-lighter: rgba(226, 255, 239, 1); - --color-success-light: rgba(0, 200, 92, 1); --color-success: rgba(0, 175, 80, 1); + --color-success-light: rgba(0, 200, 92, 1); + --color-success-lighter: rgba(226, 255, 239, 1); --color-success-dark: rgba(0, 149, 68, 1); /* -------------------------------- color WARNING & VARIANTS -------------------------------- */ - --color-warning-lighter: rgba(255, 233, 204, 1); - --color-warning-light: rgba(255, 167, 51, 1); --color-warning: rgba(255, 145, 0, 1); + --color-warning-light: rgba(255, 167, 51, 1); + --color-warning-lighter: rgba(255, 233, 204, 1); --color-warning-dark: rgba(204, 116, 0, 1); /* -------------------------------- color HIGH & VARIANTS -------------------------------- */ - --color-high-lighter: rgba(255, 237, 234, 1); - --color-high-light: rgba(255, 104, 81, 1); --color-high: rgba(255, 61, 30, 1); + --color-high-light: rgba(255, 104, 81, 1); + --color-high-lighter: rgba(255, 237, 234, 1); --color-high-dark: rgba(234, 31, 0, 1); + /* -------------------------------- + color TEXT -------------------------------- */ + --color-text: rgba(47, 55, 74, 1); + /* base FONT SIZE -------------------------------- */ --font-size: 14px; diff --git a/src/web/router.js b/src/web/router.js index f6371625..a8115599 100644 --- a/src/web/router.js +++ b/src/web/router.js @@ -43,19 +43,19 @@ const routes = [ component: () => import("./views/Layout/Content.vue"), }, { - path: "colors", - name: "colors", - component: () => import("./views/Guidelines/Colors/Colors.vue"), + path: "utilities", + name: "utilities", + component: () => import("./views/Guidelines/Utilities/Utilities.vue"), }, { - path: "list", - name: "list", - component: () => import("./views/Guidelines/List/List.vue"), + path: "variables", + name: "variables", + component: () => import("./views/Guidelines/Variables/Variables.vue"), }, { - path: "markup", - name: "markup", - component: () => import("./views/Guidelines/Markup/Markup.vue"), + path: "colors", + name: "colors", + component: () => import("./views/Guidelines/Colors/Colors.vue"), }, { path: "spacing", @@ -67,16 +67,6 @@ const routes = [ name: "typography", component: () => import("./views/Guidelines/Typography/Typography.vue"), }, - { - path: "utilities", - name: "utilities", - component: () => import("./views/Guidelines/Utilities/Utilities.vue"), - }, - { - path: "variables", - name: "variables", - component: () => import("./views/Guidelines/Variables/Variables.vue"), - }, ], }, { diff --git a/src/web/store.js b/src/web/store.js index 0bbb9885..fd4b2109 100644 --- a/src/web/store.js +++ b/src/web/store.js @@ -6,8 +6,6 @@ import guidelines from "./assets/img/icon-guidelines.svg"; import utilities2 from "./assets/img/icon-utilities2.svg"; import variables from "./assets/img/icon-variables.svg"; import colors from "./assets/img/icon-colors.svg"; -import list from "./assets/img/icon-list.svg"; -import markup from "./assets/img/icon-markup.svg"; import spacing from "./assets/img/icon-spacing.svg"; import typo from "./assets/img/icon-typo.svg"; import components from "./assets/img/icon-components.svg"; @@ -60,7 +58,7 @@ export default { btn: "Get dev kit", }, { - title: "InternalDoc", + title: "Internal Doc", img: doc, path: "internal-doc", text: "Documentation, if you want to add your own components", @@ -94,20 +92,6 @@ export default { text: "BIMData uses a color palette to achieve clean interfaces.", btn: "View colors", }, - { - title: "list", - img: list, - path: "list", - text: "Minimal layout container for displaying a group of items.", - btn: "View list", - }, - { - title: "Markup & Style", - img: markup, - path: "markup", - text: "How to name your classes to respect the structure already in place.", - btn: "View markup", - }, { title: "Spacing", img: spacing, diff --git a/src/web/views/GettingStarted/Designers.vue b/src/web/views/GettingStarted/Designers.vue index ee7ebaab..d58a9fc7 100644 --- a/src/web/views/GettingStarted/Designers.vue +++ b/src/web/views/GettingStarted/Designers.vue @@ -1,34 +1,39 @@ diff --git a/src/web/views/GettingStarted/Developpers.vue b/src/web/views/GettingStarted/Developpers.vue index 5519f399..e89083e5 100644 --- a/src/web/views/GettingStarted/Developpers.vue +++ b/src/web/views/GettingStarted/Developpers.vue @@ -2,197 +2,145 @@
- {{ $route.name }} - - How to get started with BIMData's vuejs component library - 1. Install the package - BIMData’s component library is called - design-system, and it’s available on - the npm registry. + Developers + + + How to get started with BIMData's Vue components library. + + + + 1. Install the package + + + BIMData design system is available on the npm registry and can be + installed the following way: + npm i @bimdata/design-system - 2. Import component - Once you’ve installed the package you can individually import any - component available in BIMData's design system: - - 
-          import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/BIMDataButton.js";
-
- + + Note: About the design system packaging + + + Since version 2, the design system is not bundled anymore. This means + that, when the package is installed, you get the + untransformed + raw .vue files right into your + node_modules. It is thus the "host" + application responsibility to "compile/build" and bundle those + components the same way as the other components. + - Or you can import them more easily like this: - - 
-          import {
-            BIMDataIcon,
-            BIMDataPaginatedList,
-            BIMDataButton,
-          } from "@bimdata/design-system/components.js";
-
- - About Vue 2.x vs. Vue 3.x -

- The design system was originally developed with Vue 2.6+. As a result - the components imported as described above won't work in Vue 3.x - applications. -

-

- To fix this we adapted each components to be compatible with Vue 3.x and - added a new "Vue 3 ready" version of them to the design system package. -

-

- To use Vue 3 compatible components, all you need to do is adding a - vue3/ prefix before component name - in the import module name as follow: -

- + + 2. Import global styles + + + To have all design system global styles available in your application + you can use the following in your stylesheet: + + 
-          import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
-          //                                                      vue3 prefix here -> ^^^^
+          @import "@bimdata/design-system/src/assets/css/design-system.css";
- 3. Register component - into your .vue file, define your - component into - components option + + 3. Use design system Vue plugin + + + The preferred way of using design system components in your application + is to use the provided + + Vue 3 plugin + + 
-          components: {
-          BIMDataButton,
-          BIMDataSearch
-        }
-
- + import BIMDataDesignSystem from "@bimdata/design-system/vue3-plugin.js"; + ... - 4. Use component - - 
-          <BIMDataButton class="bimdata-btn__fill bimdata-btn__fill--primary bimdata-btn__radius">TEST</BIMDataButton>
-          <BIMDataSearch placeholder="Search" class="bimdata-search-bar__radius bimdata-search-bar__primary"></BIMDataSearch>
+          app.use(BIMDataDesignSystem());
+ + The plugin will register all components and directives globally so you + can easily use them across your application. + - 5. Import all components style - If you use a scss preprocessor you can import: - + + 4. Import and use components individually + + + If you don't want to use the plugin, you can also import components + individually. For example, to import + BIMDataButton component and use it + in your own code, you can do the following: + + 
-          @import "node_modules/@bimdata/design-system/dist/scss/BIMData.scss";
+          import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
- If you use a scss preprocessor you can import: - + + You can also import multiple components at once like this: + + 
-          @import "node_modules/@bimdata/design-system/dist/css/design-system.css";
+          import {
+            BIMDataButton,
+            BIMDataIcon,
+            BIMDataPaginatedList,
+          } from "@bimdata/design-system/src/BIMDataComponents/index.js";
- Notes - Scoped style & BIMDataComponents custom -
    -
  • - If you use 'scoped' for your scss or css stylesheet and you want to - customize the BIMData components, consider using the deep selector. - More information on the - Vue.js documentation. -
    • -
  • - Path for import js only : - - 
    import { BIMDataButton } from '@bimdata/design-system'
    -     -
    • -
  • - Path for import js + css style : - - 
    -import { BIMDataButton } from '@bimdata/design-system/components.js'
    -     -
    • -
+ + Note: About Vue 2 vs. Vue 3 compatibility + + + For legacy reasons most of the components are written with the "Vue 2 + style" + + Options API + + , they should thus be compatible with any Vue 2 / Vue 3 codebase. + However since Vue 2 support was dropped with version 2 some components + may not be compatible with Vue 2 applications. + - SSR & BIMDataComponents compatibility -
    -
  • - BIMDataComponents are compatible with SSR. More information on the SSR - on the - Vue.js documentation. -
    • -
  • - If you want to be SSR compatible, import: - - 
    import { BIMDataButton } from '@bimdata/design-system'
    -     - This allows you to import only the js of the components. -
    • -
  • - Don't forget to import the stylesheet globally, like this: - - 
    -import './node_modules/@bimdata/design-system/dist/css/design-system.css'
    -     -
    • -
+ + 5. Real usage example + + + You can refer to our + + platform + + app for a full example of how to use our design system in a real world + application. +
diff --git a/src/web/views/GettingStarted/InternalDoc.vue b/src/web/views/GettingStarted/InternalDoc.vue index 04ae4bbc..882feb69 100644 --- a/src/web/views/GettingStarted/InternalDoc.vue +++ b/src/web/views/GettingStarted/InternalDoc.vue @@ -2,19 +2,19 @@
- {{ $route.name }} + Internal Documentation - All the design system resources are in the directory: + + All the design system resources are in the directory: src/web/views. The following explanations concern the addition of a new component. If you want to add another element (utilities, guidelines etc), follow the same - instructions but do it in the corresponding folder. + instructions but do it in the corresponding folder. + - How to add a new component to the design system + + How to add a new component to the design system +
  1. In the Components directory create @@ -25,23 +25,27 @@ <template> <main class="article [your-custom-class]"> <div class="article-wrapper"> - <BIMDataText component="h1" color="color-primary"> {{getRouteName()}} </BIMDataText> + <BIMDataText component="h1" color="color-primary"> + {{ $route.name }} + </BIMDataText> </div> </main> </template> <script> import BIMDataText from "../../../BIMDataComponents/BIMDataText/BIMDataText.vue"; + export default { components: { BIMDataText, }, - } + setup() { + // TODO + }, + }; </script> - <style lang="scss" scoped> - @import "./_YourFileStyle.scss"; - </style> + <style scoped lang="scss" src="./YourFileStyle.scss"></style>
    2. @@ -62,59 +66,46 @@     +
  2. In the router.js file import your new .vue file and add it in the corresponding children section (getting started, guidelines or components). - import YourFileComponent from - '../views/Components/YourFolder/YourFileTitle.vue' + 
    +              import YourFileComponent from "../views/Components/YourFolder/YourFileTitle.vue";
+            
                   {
-                path: 'yourFileTitle',
-                name: 'yourFileTitle',
+                path: "yourFileTitle",
+                name: "yourFileTitle",
                 component: YourFileComponent
               }
- - - How to add a new component to the build of design system - -

- For a correct build, don't forget to add your new component in the - following 3 files: -

-
    -
  • ./rollup.config.js
    • -
  • ./components.js
    • -
  • ./src/BIMDataComponents/index.js
    • -
diff --git a/src/web/views/GettingStarted/_GettingStarted.scss b/src/web/views/GettingStarted/_GettingStarted.scss index e7d20475..b2f3e459 100644 --- a/src/web/views/GettingStarted/_GettingStarted.scss +++ b/src/web/views/GettingStarted/_GettingStarted.scss @@ -3,6 +3,7 @@ .internal-doc { .article-wrapper { max-width: 45em; + pre.language-bash { &::before { content: "$"; @@ -11,6 +12,7 @@ left: 6px; } } + a { height: 20px; display: inline-flex; @@ -18,6 +20,7 @@ position: relative; font-weight: 700; overflow: hidden; + &::after { content: ""; width: 100%; @@ -29,6 +32,7 @@ transform: translate3d(0, 0, 0); transition: transform 0.2s ease-in; } + &:hover { &::after { transform: translate3d(-100%, 0, 0); @@ -37,10 +41,3 @@ } } } - -.bimdata-ds__code { - &:nth-child(5), - &:last-child { - margin: 0; - } -} diff --git a/src/web/views/Guidelines/Colors/ColorImplementing/ColorsImplementingContent.vue b/src/web/views/Guidelines/Colors/ColorImplementing/ColorsImplementingContent.vue index 560a7066..127d9bc2 100644 --- a/src/web/views/Guidelines/Colors/ColorImplementing/ColorsImplementingContent.vue +++ b/src/web/views/Guidelines/Colors/ColorImplementing/ColorsImplementingContent.vue @@ -1,26 +1,30 @@