feat(wizard): improve docs wizard, steps, and progress

privy-open-source · Sep 20, 2022 · 98c3c71 · 98c3c71
1 parent 4a8f58d
commit 98c3c71
Show file tree

Hide file tree

Showing 5 changed files with 346 additions and 25 deletions.
diff --git a/src/components/progress/Progress.vue b/src/components/progress/Progress.vue
@@ -113,10 +113,8 @@ export default defineComponent({
   }
 
   &__bar {
-    background: linear-gradient(to right, theme(colors.primary.100) 50%, theme(colors.secondary.25) 50%);
-    transition: background-position 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
-
-    @apply bg-[length:210%_100%] bg-right absolute rounded-tn;
+    @apply absolute rounded-tn transition-[background-position] ease-linear duration-150;
+    @apply from-[theme(colors.primary.100)_50%] to-[theme(colors.secondary.25)_50%];
   }
 
   &__title {
@@ -131,12 +129,6 @@ export default defineComponent({
     .progress__point {
       @apply bg-primary-100 text-white;
     }
-
-    & + & {
-      .progress__bar {
-        @apply bg-left;
-      }
-    }
   }
 
   &--horizontal {
@@ -152,6 +144,13 @@ export default defineComponent({
 
     .progress__bar {
       @apply w-[calc(100%_-_3rem)] h-1 top-3 right-[calc(50%_+_1.5rem)];
+      @apply bg-gradient-to-r bg-[length:210%_100%] bg-right;
+    }
+
+    .progress--active + .progress--active {
+      .progress__bar {
+        @apply bg-left;
+      }
     }
   }
 
@@ -172,6 +171,13 @@ export default defineComponent({
 
     .progress__bar {
       @apply h-[calc(100%_-_4.25rem)] w-1 bottom-[calc(50%_+_2.25rem)] left-1/2 -translate-x-1/2;
+      @apply bg-gradient-to-b bg-bottom bg-[length:100%_210%];
+    }
+
+    .progress--active + .progress--active {
+      .progress__bar {
+        @apply bg-top;
+      }
     }
   }
 
@@ -184,9 +190,10 @@ export default defineComponent({
   &--counter {
     counter-reset: progress;
 
-    .progress__point-item {
-      &::before {
-        counter-increment: progress;
+    .progress__point {
+      counter-increment: progress;
+
+      &-item::before {
         content: counter(progress);
 
         @apply text-sm font-medium;

diff --git a/src/components/progress/index.md b/src/components/progress/index.md
@@ -168,7 +168,7 @@ import IconDocument from '@carbon/icons-vue/lib/document/16'
 <preview>
   <div class="h-96">
     <p-progress vertical>
-      <p-progress-item title="Step 1" />
+      <p-progress-item title="Step 1" active />
       <p-progress-item title="Step 2" active />
       <p-progress-item title="Step 3" />
       <p-progress-item title="Step 4" />
@@ -179,7 +179,7 @@ import IconDocument from '@carbon/icons-vue/lib/document/16'
 ```vue
 <template>
   <p-progress vertical>
-    <p-progress-item title="Step 1" />
+    <p-progress-item title="Step 1" active />
     <p-progress-item title="Step 2" active />
     <p-progress-item title="Step 3" />
     <p-progress-item title="Step 4" />
@@ -224,7 +224,7 @@ import IconDocument from '@carbon/icons-vue/lib/document/16'
 
 | Props    |   Type    | Default | Description                |
 |----------|:---------:|:-------:|----------------------------|
-| `title`  | `String`  |   `-`   | Progress Item label        |
+| `title`  | `String`  |   `-`   | Progress Item title        |
 | `active` | `Boolean` | `false` | Progress Item active state |
 
 ### Slots `<p-progress-item>`
@@ -250,3 +250,7 @@ import IconDocument from '@carbon/icons-vue/lib/document/16'
     </tr>
   </tbody>
 </table>
+
+## See Also
+- [Steps](/components/steps/)
+- [Wizard](/components/wizard/)
diff --git a/src/components/steps/index.md b/src/components/steps/index.md
@@ -446,11 +446,10 @@ You can binding current step with v-model
 
 ### Props `<p-step>`
 
-| Props            |    Type    | Default | Description                                                       |
-|------------------|:----------:|:-------:|-------------------------------------------------------------------|
-| `on-before-next` | `Function` |   `-`   | Hook which run before navigate to next page                       |
-| `on-before-prev` | `Function` |   `-`   | Hook which run before navigate to previous page                   |
-| `on-finished`    | `Function` |   `-`   | Hook which run on last step, after `on-before-next` hook resolved |
+| Props            |    Type    | Default | Description                                     |
+|------------------|:----------:|:-------:|-------------------------------------------------|
+| `on-before-next` | `Function` |   `-`   | Hook which run before navigate to next page     |
+| `on-before-prev` | `Function` |   `-`   | Hook which run before navigate to previous page |
 
 ### Slots `<p-step>`
 
@@ -475,5 +474,8 @@ You can binding current step with v-model
   </tbody>
 </table>
 
+## See Also
+- [Wizard](/components/wizard/)
+- [Progress](/components/progress/)
 
 [KeepAlive]: https://vuejs.org/guide/built-ins/keep-alive.html
diff --git a/src/components/wizard/Wizard.vue b/src/components/wizard/Wizard.vue
@@ -5,6 +5,7 @@
     <div class="wizard__header">
       <WizardHeader
         :active="model - 1"
+        :variant="variant"
         :title-variant="titleVariant">
         <slot />
       </WizardHeader>
@@ -29,7 +30,7 @@ import WizardBody from './WizardBody.vue'
 import { noop } from 'lodash-es'
 import { TravelHook, FinishedHook } from '../steps/use-steps'
 import { useVModel } from '../input/use-input'
-import { TitleVariant } from '../progress/Progress.vue'
+import { TitleVariant, IconVariant } from '../progress/Progress.vue'
 
 export default defineComponent({
   components: {
@@ -41,6 +42,10 @@ export default defineComponent({
       type   : Number,
       default: 1,
     },
+    variant: {
+      type   : String as PropType<IconVariant>,
+      default: 'dot',
+    },
     titleVariant: {
       type   : String as PropType<TitleVariant>,
       default: 'specific',