Use lux-styleguidist

Update vue and vue dependencies to vue3 Co-authored-by: Jane Sandberg <[email protected]>
pulibrary · Jan 3, 2024 · ccb5961 · ccb5961
1 parent 7fdccf8
commit ccb5961
Show file tree

Hide file tree

Showing 10 changed files with 209 additions and 749 deletions.
diff --git a/app/assets/stylesheets/_base.scss b/app/assets/stylesheets/_base.scss
@@ -10,8 +10,8 @@ $green: #c3ed79;
 }
 
 body {
-  background-color: $color-grayscale-warm-lighter;
-  font-family: $font-family-system;
+  background-color: var(--color-grayscale-warm-lighter);
+  font-family: var(--font-family-system);
 }
 
 // Adds space to main-content of page
@@ -31,19 +31,19 @@ body {
 
 .current-delegate span {
   display: block;
-  font-weight: $font-weight-bold;
+  font-weight: var(--font-weight-bold);
   line-height: 40px;
   margin: 0 auto;
   max-width: 1400px;
 
   .lux-link.button.outline {
-    background-color: $color-white;
+    background-color: var(--color-white);
     border: 0;
     line-height: 1;
 
     &:hover,
     &:focus {
-      color: $color-bleu-de-france-darker;
+      color: var(--color-bleu-de-france-darker);
     }
 
     @media (max-width: 899px) {
@@ -57,7 +57,7 @@ body {
 
   p {
     line-height: 1.6;
-    font-weight: $font-weight-regular;
+    font-weight: var(--font-weight-regular);
     margin-top: 1rem;
   }
 }

diff --git a/app/assets/stylesheets/_card.scss b/app/assets/stylesheets/_card.scss
@@ -85,7 +85,7 @@
 
 .help {
   a {
-    color: $color-rich-black;
+    color: var(--color-rich-black);
     font-weight: bold;
     text-decoration: none;
 
@@ -140,19 +140,19 @@
 }
 
 .tip-card {
-  background: $color-white;
+  background: var(--color-white);
   border-color: transparent;
-  border-left: 4px solid $color-bleu-de-france;
+  border-left: 4px solid var(--color-bleu-de-france);
   border-radius: 0;
-  box-shadow: $box-shadow-small;
-  color: $color-rich-black;
+  box-shadow: var(--box-shadow-small);
+  color: var(--color-rich-black);
   line-height: 1.6;
   padding: 12px 24px 12px 30px;
   position: relative;
 
   &::before {
     content: "i";
-    background-color: $color-bleu-de-france;
+    background-color: var(--color-bleu-de-france);
 
     position: absolute;
     top: 14px;
@@ -163,7 +163,7 @@
     border-radius: 100%;
     text-align: center;
     line-height: 20px;
-    font-weight: $font-weight-bold;
+    font-weight: var(--font-weight-bold);
     font-size: 14px;
   }
 }
diff --git a/app/assets/stylesheets/_estimates.scss b/app/assets/stylesheets/_estimates.scss
@@ -103,7 +103,7 @@
     }
 
     td {
-      border: 1px solid $color-grayscale-light;
+      border: 1px solid var(--color-grayscale-light);
       margin: 0 0 -1px 0;
       padding-top: 2.25rem;
       position: relative;
@@ -122,10 +122,10 @@
       &:nth-of-type(5):before { content: "Total"; } 
 
       &:before {
-        background: $color-grayscale-warm-lighter;
-        border-bottom: 1px solid $color-grayscale-light;
-        border-right: 1px solid $color-grayscale-light;
-        color: $color-grayscale-dark;
+        background: var(--color-grayscale-warm-lighter);
+        border-bottom: 1px solid var(--color-grayscale-light);
+        border-right: 1px solid var(--color-grayscale-light);
+        color: var(--color-grayscale-dark);
         font-size: 10px;
         font-weight: bold;
         padding: 5px;

diff --git a/app/assets/stylesheets/_notes.scss b/app/assets/stylesheets/_notes.scss
@@ -6,7 +6,7 @@
 .notes li {
   padding-bottom: 1rem;
   margin: 1rem 0;
-  border-bottom: 1px solid $color-grayscale-light;
+  border-bottom: 1px solid var(--color-grayscale-light);
   display: flex;
   overflow-wrap: break-word;
   word-break: break-word;

diff --git a/app/assets/stylesheets/_parameters.scss b/app/assets/stylesheets/_parameters.scss
@@ -1,7 +1,7 @@
 .search-filter-sort.lux-card {
-  border: 1px solid $color-grayscale-warm-light;
+  border: 1px solid var(--color-grayscale-warm-light);
   box-shadow: none;
-  background: lighten($color-grayscale-warm-light, 17%);
+  background: lighten(rgb(210, 202, 173), 17%);
 }
 
 .lux-col .lux-search-box,
@@ -11,15 +11,15 @@
 }
 
 .filter-applied {
-  border-top: 1px solid $color-grayscale-warm-light;
+  border-top: 1px solid var(--color-grayscale-warm-light);
   margin-top: 1rem;
   padding-top: 1rem;
 }
 
 .filter-label {
-  color: $color-grayscale-darker;
+  color: var(--color-grayscale-darker);
   display: block;
-  font-size: $font-size-small;
+  font-size: var(--font-size-small);
   margin: 0 0 0.5rem 1rem;
 }
 
@@ -54,7 +54,7 @@
 .lux-search-box .lux-button,
 .lux-search-box .lux-button.text {
   width: auto;
-  background-color: lighten($color-grayscale-warm-light, 20%);
+  background-color: lighten(rgb(210, 202, 173), 20%);
 }
 
 .date-filter form {
@@ -74,29 +74,29 @@
 }
 
 .pagination a {
-  box-shadow: $box-shadow-small;
-  border-radius: $border-radius-default;
-  background-color: $color-white;
-  padding: $space-x-small $space-small;
-  margin-left: $space-xx-small;
+  box-shadow: var(--box-shadow-small);
+  border-radius: var(--border-radius-default);
+  background-color: var(--color-white);
+  padding: var(--space-x-small) var(--space-small);
+  margin-left: var(--space-xx-small);
   text-decoration: none;
-  color: $color-rich-black;
+  color: var(--color-rich-black);
   display: inline-block;
 
   @media (max-width: 599px) {
-    margin-bottom: $space-x-small;
+    margin-bottom: var(--space-x-small);
   }
 
   &:hover,
   &:focus {
-    box-shadow: $box-shadow-selected;
+    box-shadow: var(--box-shadow-selected);
     outline: 0;
   }
 }
 
 .page.current {
   background-color: initial;
   box-shadow: none;
-  padding: $space-xx-small;
+  padding: var(--space-xx-small);
   text-align: center;
 }
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -13,8 +13,7 @@
  *= require_self
  */
 
-@import "lux-design-system/dist/system/tokens/tokens";
-@import "lux-design-system/dist/system/system.utils.scss";
+@import "lux-design-system/dist/style.css";
 
 @import "base";
 @import "card";

diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
@@ -15,10 +15,9 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-import Vue from "vue/dist/vue.esm";
+import Vue from "vue";
 import system from "lux-design-system";
-import "lux-design-system/dist/system/system.css";
-import "lux-design-system/dist/system/tokens/tokens.scss";
+import "lux-design-system/dist/style.css";
 import eventDateModal from "../components/eventDateModal.vue";
 import eventTitleInputWrapper from "../components/eventTitleInputWrapper.vue";
 import hoursCalculator from "../components/hoursCalculator.vue";

diff --git a/package.json b/package.json
@@ -2,10 +2,10 @@
   "name": "approvals",
   "private": true,
   "dependencies": {
+    "postcss-import": "^15.1.0",
     "@rails/ujs": "6.1.7-6",
-    "lux-design-system": "~3.0.1",
-    "vue": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "lux-design-system": "5.0.0-alpha.10",
+    "vue": "^3.4.0"
   },
   "scripts": {
     "lint": "eslint app/javascript/**/*.{js,vue}",
@@ -15,6 +15,7 @@
     "@babel/plugin-transform-runtime": "^7.23.4",
     "@babel/preset-env": "^7.23.3",
     "@happy-dom/jest-environment": "^12.10.3",
+    "@vitejs/plugin-vue": "^5.0.1",
     "@vue/test-utils": "^1.0.0-beta.25",
     "babel-core": "^7.0.0-bridge",
     "babel-plugin-dynamic-import-node": "^2.3.3",
@@ -29,7 +30,6 @@
     "sass": "^1.69.5",
     "vite": "^5.0.5",
     "vite-plugin-ruby": "^5.0.0",
-    "vite-plugin-vue2": "^2.0.3",
     "vue-eslint-parser": "^9.3.2",
     "vue-jest": "^3.0.0"
   },

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,10 +1,10 @@
 import { defineConfig } from 'vite'
 import RubyPlugin from 'vite-plugin-ruby'
-import { createVuePlugin } from 'vite-plugin-vue2'
+import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   plugins: [
     RubyPlugin(),
-    createVuePlugin()
+    vue()
   ],
 })