refactor: wt-stepper colors [WTEL-3957]

webitel · Nov 28, 2023 · b15dd32 · b15dd32
1 parent cd6ae60
commit b15dd32
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 40 deletions.
diff --git a/docs/pages/webitel-ui/components/wt-stepper/Readme.md b/docs/pages/webitel-ui/components/wt-stepper/Readme.md
@@ -0,0 +1,20 @@
+<script setup>
+import Docs from './wt-stepper-docs.vue';
+import ExampleStepper from './examples/example-stepper.vue';
+</script>
+
+# WtStepper
+
+## Props
+::: raw
+<Docs />
+:::
+
+## Example Stepper
+::: raw
+<ExampleStepper />
+:::
+
+::: details Code
+<<< ./examples/example-stepper.vue
+:::
diff --git a/docs/pages/webitel-ui/components/wt-stepper/examples/example-stepper.vue b/docs/pages/webitel-ui/components/wt-stepper/examples/example-stepper.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue';
+
+const steps = [
+  { name: 'Step 1' },
+  { name: 'Step 2' },
+  { name: 'Step 3' },
+];
+
+const active = ref(1);
+</script>
+
+<template>
+  <wt-stepper
+    :active-step="active"
+    :steps="steps"
+  />
+
+  <wt-button
+    @click="active < 3 ? active++ : active = 1"
+  >
+    Next step
+  </wt-button>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/docs/pages/webitel-ui/components/wt-stepper/wt-stepper-docs.vue b/docs/pages/webitel-ui/components/wt-stepper/wt-stepper-docs.vue
@@ -1,32 +1,10 @@
 <template>
-  <section>
-    <h2>Stepper</h2>
-    <article>
-      <div class="example-wrapper">
-        <wt-stepper
-          :steps="[
-            { name: 'Step 1' },
-            { name: 'Step 2' },
-          ]"
-          :active-step="1"
-        />
-        <pre><code class="language-html">
-          &lt;wt-stepper
-          :steps="[
-            { name: 'Step 1' },
-            { name: 'Step 2' },
-          ]"
-          :active-step="1"&gt;&lt;/wt-stepper&gt;
-        </code></pre>
-      </div>
-    </article>
-    <component-props
-      :properties="properties"
-    />
-    <component-slots
-      :slots="slots"
-    />
-  </section>
+  <component-props
+    :properties="properties"
+  />
+  <component-slots
+    :slots="slots"
+  />
 </template>
 
 <script>
@@ -40,14 +18,14 @@ export default {
         value: 'steps',
         code: '<wt-stepper :steps="[{ name: \'Step 1\' }]"></wt-stepper>',
         type: 'Array',
-        description: 'An array of displayed steps. May include "name", "description", "completed"'
+        description: 'An array of displayed steps. May include "name", "description", "completed"',
       },
       {
         value: 'active-step',
         code: '<wt-stepper :active-step="1"></wt-stepper>',
         type: ['String', 'Number'],
         default: '1',
-        description: 'All past and active steps are marked with "accent-secondary-color"'
+        description: 'All past and active steps are marked with "accent-secondary-color"',
       },
     ],
     slots: [

diff --git a/src/components/wt-chip/_variables.scss b/src/components/wt-chip/_variables.scss
@@ -9,8 +9,8 @@
   --wt-chip-primary-background-color: var(--primary-color);
   --wt-chip-primary-text-color: var(--primary-on-color);
 
-  --wt-chip-secondary-background-color: var(--dp-14-surface-color);
-  --wt-chip-secondary-text-color: var(--grey-darken-4);
+  --wt-chip-secondary-background-color: var(--secondary-color);
+  --wt-chip-secondary-text-color: var(--secondary-on-color);
 
   --wt-chip-success-background-color: var(--success-color);
   --wt-chip-success-text-color: var(--success-on-color);
@@ -24,7 +24,3 @@
   --wt-chip-transfer-background-color: var(--transfer-color);
   --wt-chip-transfer-text-color: var(--transfer-on-color);
 }
-
-:root.theme--dark {
-  --wt-chip-secondary-text-color: var(--grey-lighten-4);
-}
diff --git a/src/components/wt-stepper/_variables.scss b/src/components/wt-stepper/_variables.scss
@@ -0,0 +1,5 @@
+
+:root {
+  --wt-stepper-divider-background-color: var(--secondary-color);
+  --wt-stepper-divider-background-completed-color: var(--primary-color);
+}
diff --git a/src/components/wt-stepper/wt-stepper.vue b/src/components/wt-stepper/wt-stepper.vue
@@ -15,7 +15,7 @@
           />
           <wt-chip
             class="wt-stepper-steps__item"
-            :color="!completed && 'secondary'"
+            :color="completed ? 'primary' : 'secondary'"
           >
             {{ name }}
           </wt-chip>
@@ -53,6 +53,10 @@ const stepWithCompleted = computed(() => props.steps.map((item, idx) => ({
   })));
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
 .wt-stepper {
   width: 100%;
@@ -76,10 +80,10 @@ const stepWithCompleted = computed(() => props.steps.map((item, idx) => ({
   &__divider {
     flex: 1 1 auto;
     height: 1px;
-    background: var(--secondary-color);
+    background: var(--wt-stepper-divider-background-color);
 
     &--completed {
-      background-color: var(--chip-bg-color);
+      background-color: var(--wt-stepper-divider-background-completed-color);
     }
   }
 }

diff --git a/src/components/wt-switcher/_variables.scss b/src/components/wt-switcher/_variables.scss
@@ -11,7 +11,7 @@
   // circle
   --wt-switcher-circle-background-color-on: var(--grey-darken-3);
   --wt-switcher-circle-background-color-on-hover: var(--grey-darken-4);
-  --wt-switcher-circle-background-color-on-disabled: var(--grey-darken-3);
+  --wt-switcher-circle-background-color-on-disabled: var(--grey-lighten-3);
 
   --wt-switcher-circle-background-color-off: var(--grey-lighten-4);
   --wt-switcher-circle-background-color-off-hover: var(--grey-lighten-5);

diff --git a/src/css/styleguide/colors/_colors.scss b/src/css/styleguide/colors/_colors.scss
@@ -80,6 +80,12 @@
   --primary-light-color: var(--amber-lighten-4);
   --primary-on-color: var(--black);
 
+  // secondary colors
+  --secondary-color: var(--dp-10-surface-color);
+  --secondary-hover-color: var(--dp-14-surface-color);
+  --secondary-light-color: var(--dp-16-surface-color);
+  --secondary-on-color: var(--grey-darken-4);
+
   // accent colors
   --accent-color: var(--purple-lighten-1);
   --sub-accent-color: var(--indigo-darken-3);
@@ -169,6 +175,9 @@
   --primary-light-color: var(--amber-lighten-4);
   --primary-on-color: var(--black);
 
+  // secondary colors
+  --secondary-on-color: var(--grey-lighten-4);
+
   // accent colors
   --accent-color: var(--purple-lighten-1);
   --sub-accent-color: var(--indigo-darken-3);