PATCH: chore: add neutral utility classes + update deps

bimdata · Sep 18, 2023 · ac454d2 · ac454d2
1 parent 60017c7
commit ac454d2
Show file tree

Hide file tree

Showing 9 changed files with 1,725 additions and 996 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,26 +17,25 @@
     "semantic-release": "semantic-release"
   },
   "devDependencies": {
-    "@bimdata/typescript-fetch-api-client": "9.11.0",
     "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/commit-analyzer": "^10.0.1",
+    "@semantic-release/commit-analyzer": "^10.0.4",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^9.0.3",
-    "@semantic-release/npm": "^10.0.4",
-    "@semantic-release/release-notes-generator": "^11.0.3",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "conventional-changelog-eslint": "^4.0.0",
-    "eslint": "^8.43.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.15.1",
-    "prettier": "^2.8.8",
+    "@semantic-release/github": "^9.0.6",
+    "@semantic-release/npm": "^11.0.0",
+    "@semantic-release/release-notes-generator": "^11.0.7",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "conventional-changelog-eslint": "^5.0.0",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "prettier": "^3.0.3",
     "prismjs": "^1.29.0",
-    "sass": "^1.63.6",
-    "semantic-release": "^21.0.5",
-    "vite": "^4.3.9",
+    "sass": "^1.67.0",
+    "semantic-release": "^22.0.0",
+    "vite": "^4.4.9",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.2",
+    "vue-router": "^4.2.4",
     "vue3-clipboard": "^1.0.0"
   }
 }
diff --git a/src/BIMDataComponents/BIMDataIcon/Icon.vue b/src/BIMDataComponents/BIMDataIcon/Icon.vue
@@ -31,13 +31,6 @@ const sizeToPixel = {
 export default {
   name: "BIMDataIcon",
   props: {
-    // name: {
-    // type: String,
-    // required: true,
-    // validator(value) {
-    //   return Object.keys(icons).includes(value);
-    // },
-    // },
     color: {
       type: String,
       default: "default",

diff --git a/src/BIMDataComponents/BIMDataIcon/_BIMDataIcon.scss b/src/BIMDataComponents/BIMDataIcon/_BIMDataIcon.scss
@@ -12,6 +12,9 @@
     &--high {
       fill: var(--color-high);
     }
+    &--neutral {
+      fill: var(--color-neutral);
+    }
     &--primary {
       fill: var(--color-primary);
     }

diff --git a/src/assets/css/utilities/_colors.css b/src/assets/css/utilities/_colors.css
@@ -2,29 +2,36 @@
 .bg-primary {
   background-color: var(--color-primary);
 }
+
 .bg-secondary {
   background-color: var(--color-secondary);
 }
 
-/* background GREY SHADES - NEUTRAL */
+/* background GREY SHADES */
 .bg-white {
   background-color: var(--color-white);
 }
+
 .bg-silver-light {
   background-color: var(--color-silver-light);
 }
+
 .bg-silver {
   background-color: var(--color-silver);
 }
+
 .bg-silver-dark {
   background-color: var(--color-silver-dark);
 }
+
 .bg-granite-light {
   background-color: var(--color-granite-light);
 }
+
 .bg-granite {
   background-color: var(--color-granite);
 }
+
 .bg-black {
   background-color: var(--color-black);
 }
@@ -33,40 +40,53 @@
 .bg-success {
   background-color: var(--color-success);
 }
+
 .bg-warning {
   background-color: var(--color-warning);
 }
+
 .bg-high {
   background-color: var(--color-high);
 }
 
+.bg-neutral {
+  background-color: var(--color-neutral);
+}
+
 /* color BRAND COLORS */
 .color-primary {
   color: var(--color-primary);
 }
+
 .color-secondary {
   color: var(--color-secondary);
 }
 
-/* color GREY SHADES - NEUTRAL */
+/* color GREY SHADES */
 .color-white {
   color: var(--color-white);
 }
+
 .color-silver-light {
   color: var(--color-silver-light);
 }
+
 .color-silver {
   color: var(--color-silver);
 }
+
 .color-silver-dark {
   color: var(--color-silver-dark);
 }
+
 .color-granite-light {
   color: var(--color-granite-light);
 }
+
 .color-granite {
   color: var(--color-granite);
 }
+
 .color-black {
   color: var(--color-black);
 }
@@ -75,40 +95,53 @@
 .color-success {
   color: var(--color-success);
 }
+
 .color-warning {
   color: var(--color-warning);
 }
+
 .color-high {
   color: var(--color-high);
 }
 
+.color-neutral {
+  color: var(--color-neutral);
+}
+
 /* fill BRAND COLORS */
 .fill-primary {
   fill: var(--color-primary);
 }
+
 .fill-secondary {
   fill: var(--color-secondary);
 }
 
-/* fill GREY SHADES - NEUTRAL */
+/* fill GREY SHADES */
 .fill-white {
   fill: var(--color-white);
 }
+
 .fill-silver-light {
   fill: var(--color-silver-light);
 }
+
 .fill-silver {
   fill: var(--color-silver);
 }
+
 .fill-silver-dark {
   fill: var(--color-silver-dark);
 }
+
 .fill-granite-light {
   fill: var(--color-granite-light);
 }
+
 .fill-granite {
   fill: var(--color-granite);
 }
+
 .fill-black {
   fill: var(--color-black);
 }
@@ -117,48 +150,61 @@
 .fill-success {
   fill: var(--color-success);
 }
+
 .fill-warning {
   fill: var(--color-warning);
 }
+
 .fill-high {
   fill: var(--color-high);
 }
 
+.fill-neutral {
+  fill: var(--color-neutral);
+}
+
 /* stroke BRAND COLORS */
 .stroke-primary {
   fill: transparent;
   stroke: var(--color-primary);
 }
+
 .stroke-secondary {
   fill: transparent;
   stroke: var(--color-secondary);
 }
 
-/* stroke GREY SHADES - NEUTRAL */
+/* stroke GREY SHADES */
 .stroke-white {
   fill: transparent;
   stroke: var(--color-white);
 }
+
 .stroke-silver-light {
   fill: transparent;
   stroke: var(--color-silver-light);
 }
+
 .stroke-silver {
   fill: transparent;
   stroke: var(--color-silver);
 }
+
 .stroke-silver-dark {
   fill: transparent;
   stroke: var(--color-silver-dark);
 }
+
 .stroke-granite-light {
   fill: transparent;
   stroke: var(--color-granite-light);
 }
+
 .stroke-granite {
   fill: transparent;
   stroke: var(--color-granite);
 }
+
 .stroke-black {
   fill: transparent;
   stroke: var(--color-black);
@@ -169,11 +215,18 @@
   fill: transparent;
   stroke: var(--color-success);
 }
+
 .stroke-warning {
   fill: transparent;
   stroke: var(--color-warning);
 }
+
 .stroke-high {
   fill: transparent;
   stroke: var(--color-high);
 }
+
+.stroke-neutral {
+  fill: transparent;
+  stroke: var(--color-neutral);
+}
diff --git a/src/assets/iconsColors.js b/src/assets/iconsColors.js
@@ -4,6 +4,7 @@ export default Object.freeze([
   "granite",
   "granite-light",
   "high",
+  "neutral",
   "primary",
   "secondary",
   "success",

diff --git a/src/web/views/Components/Icons/Icons.vue b/src/web/views/Components/Icons/Icons.vue
@@ -1,12 +1,12 @@
 <template>
   <main class="article article-icons">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
-      <BIMDataText component="h3" color="color-primary" margin="10px 0"
-        >Size usage for designers</BIMDataText
-      >
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
+      <BIMDataText component="h3" color="color-primary" margin="10px 0">
+        Size usage for designers
+      </BIMDataText>
       <BIMDataText>Use a 23px box for icons of 23px.</BIMDataText>
       <div>
         <img src="../../../assets/img/design-system__icon-plus.jpg" alt="" />
@@ -44,30 +44,39 @@
         </template>
 
         <template #parameters>
-          <BIMDataText component="h5" color="color-primary" margin="15px 0 10px"
-            >margin</BIMDataText
+          <BIMDataText
+            component="h5"
+            color="color-primary"
+            margin="15px 0 10px"
           >
+            margin
+          </BIMDataText>
           <BIMDataInput
             v-model="marginIcon"
             placeholder="margin around icon (in px)"
             min="0"
-          ></BIMDataInput>
-          <BIMDataText component="h5" color="color-primary" margin="15px 0 10px"
-            >rotate</BIMDataText
+          />
+          <BIMDataText
+            component="h5"
+            color="color-primary"
+            margin="15px 0 10px"
           >
+            rotate
+          </BIMDataText>
           <BIMDataInput
             v-model="rotationDeg"
             placeholder="Degree of rotation"
             type="number"
             min="0"
-          ></BIMDataInput>
+          />
           <div v-for="[key, values] in Object.entries(iconOptions)" :key="key">
             <BIMDataText
               component="h5"
               color="color-primary"
               margin="15px 0 10px"
-              >{{ key }}</BIMDataText
             >
+              {{ key }}
+            </BIMDataText>
             <BIMDataRadio
               v-for="value in values"
               :key="value"
@@ -103,16 +112,16 @@
       </ComponentCode>
 
       <div class="m-t-12">
-        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px"
-          >Props:</BIMDataText
-        >
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px">
+          Props:
+        </BIMDataText>
         <BIMDataTable :columns="propsData[0]" :rows="propsData.slice(1)" />
       </div>
 
       <div class="m-t-12">
-        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px"
-          >Summary icons size:</BIMDataText
-        >
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px">
+          Summary icons size:
+        </BIMDataText>
         <BIMDataTable
           :columns="iconsSizeData[0]"
           :rows="iconsSizeData.slice(1)"