Use lux-styleguidist

.circleci/config.yml

@@ -76,7 +76,6 @@ jobs:
           keys:
             - approvals-yarn-v1-{{ checksum "yarn.lock" }}
             - approvals-yarn-v1-
-
       - run:
           name: Yarn Install
           command: yarn install --cache-folder ~/.cache/yarn

.eslintrc.yml

@@ -9,7 +9,7 @@ globals:
   Atomics: readonly
   SharedArrayBuffer: readonly
 parserOptions:
-  ecmaVersion: 2018
+  ecmaVersion: 2020
   sourceType: module
 parser: vue-eslint-parser
 plugins:

.gitignore

@@ -52,3 +52,5 @@ node_modules
 # https://vitejs.dev/guide/env-and-mode.html#env-files
 *.local
 
+.vscode/
+

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;
   }
 }

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;
   }
 }

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;

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;

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;
 }

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";
@@ -50,17 +49,5 @@
  }
 
  article.full-width {
-   width: 100%;
-   display: flex;
-   align-items: flex-start;
-   flex-flow: row wrap;
-   box-sizing: border-box;
-   margin: 24px 0 24px 0;
-   font-family: franklin-gothic-urw,Helvetica,Arial,sans-serif;
-   line-height: 1.6;
-   background: #fff;
-   box-shadow: 0 0 0 1px rgba(92,106,196,.1);
-   color: #001123;
-   position: relative;
-   margin-bottom: 0;
+   margin: 24px 0 0;
  }

app/javascript/components/eventDateModal.vue

@@ -15,22 +15,22 @@
             </slot>
           </div>
           <div class="modal-footer">
-            <input-button
+            <lux-input-button
               type="button"
               variation="solid"
               size="small"
               @button-clicked="submit"
             >
               Continue
-            </input-button>
-            <input-button
+            </lux-input-button>
+            <lux-input-button
               type="button"
               variation="outline"
               size="small"
               @button-clicked="$emit('closeModal')"
             >
               Go Back
-            </input-button>
+            </lux-input-button>
           </div>
         </div>
       </div>

app/javascript/components/eventTitleInputWrapper.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="event-title-container">
-    <input-autocomplete
+    <lux-autocomplete-input
       id="travel_request_event_requests_attributes_0_recurring_event_id"
       required
       name="travel_request[event_requests_attributes][0][recurring_event_id]"

app/javascript/components/hoursCalculator.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <date-picker
+    <lux-date-picker
       id="absence_request_date"
       name="absence_request[start_date]"
       label="Date range"
@@ -26,15 +26,15 @@
       :value="localEndDate"
     >
 
-    <input-text
+    <lux-input-text
       id="absence_request_hours_requested"
       name="absence_request[hours_requested]"
       width="expand"
       label="Total hours requested"
       :helper="helperCaption"
       :value="localHoursRequested"
       required
-      @input="updateCaption($event)"
+      @inputvaluechange="updateCaption($event)"
     />
   </div>
 </template>