feat: use stepper in example app

rotki · Jul 6, 2023 · e8b39bf · e8b39bf
1 parent 2fd6bbf
commit e8b39bf
Showing 1 changed file with 180 additions and 1 deletion.
diff --git a/example/src/views/HomeView.vue b/example/src/views/HomeView.vue
@@ -1,5 +1,11 @@
 <script lang="ts" setup>
-import { RuiButton, RuiCheckbox, RuiIcon } from '@rotki/ui-library';
+import {
+  RuiButton,
+  RuiCheckbox,
+  RuiIcon,
+  RuiStepper,
+  StepperState,
+} from '@rotki/ui-library';
 import { ref, useCssModule } from 'vue';
 
 const css = useCssModule();
@@ -129,6 +135,169 @@ const checkboxes = ref([
   { value: false, color: 'info', errorMessages: ['Checkbox error message'] },
   { value: false, color: 'success', errorMessages: ['Checkbox error message'] },
 ]);
+
+const steppers = ref([
+  {
+    steps: [
+      {
+        title: 'Inactive',
+        description: 'Lorem ipsum',
+        state: StepperState.inactive,
+      },
+      {
+        title: 'Active',
+        description: 'Lorem ipsum',
+        state: StepperState.active,
+      },
+      {
+        title: 'Done',
+        description: 'Lorem ipsum',
+        state: StepperState.done,
+      },
+      {
+        title: 'Error',
+        description: 'Lorem ipsum',
+        state: StepperState.error,
+      },
+      {
+        title: 'Warning',
+        description: 'Lorem ipsum',
+        state: StepperState.warning,
+      },
+      {
+        title: 'Info',
+        description: 'Lorem ipsum',
+        state: StepperState.info,
+      },
+      {
+        title: 'Success',
+        description: 'Lorem ipsum',
+        state: StepperState.success,
+      },
+    ],
+  },
+  {
+    orientation: 'vertical',
+    steps: [
+      {
+        title: 'Inactive',
+        description: 'Lorem ipsum',
+        state: StepperState.inactive,
+      },
+      {
+        title: 'Active',
+        description: 'Lorem ipsum',
+        state: StepperState.active,
+      },
+      {
+        title: 'Done',
+        description: 'Lorem ipsum',
+        state: StepperState.done,
+      },
+      {
+        title: 'Error',
+        description: 'Lorem ipsum',
+        state: StepperState.error,
+      },
+      {
+        title: 'Warning',
+        description: 'Lorem ipsum',
+        state: StepperState.warning,
+      },
+      {
+        title: 'Info',
+        description: 'Lorem ipsum',
+        state: StepperState.info,
+      },
+      {
+        title: 'Success',
+        description: 'Lorem ipsum',
+        state: StepperState.success,
+      },
+    ],
+  },
+  {
+    iconTop: true,
+    steps: [
+      {
+        title: 'Inactive',
+        description: 'Lorem ipsum',
+        state: StepperState.inactive,
+      },
+      {
+        title: 'Active',
+        description: 'Lorem ipsum',
+        state: StepperState.active,
+      },
+      {
+        title: 'Done',
+        description: 'Lorem ipsum',
+        state: StepperState.done,
+      },
+      {
+        title: 'Error',
+        description: 'Lorem ipsum',
+        state: StepperState.error,
+      },
+      {
+        title: 'Warning',
+        description: 'Lorem ipsum',
+        state: StepperState.warning,
+      },
+      {
+        title: 'Info',
+        description: 'Lorem ipsum',
+        state: StepperState.info,
+      },
+      {
+        title: 'Success',
+        description: 'Lorem ipsum',
+        state: StepperState.success,
+      },
+    ],
+  },
+  {
+    iconTop: true,
+    orientation: 'vertical',
+    steps: [
+      {
+        title: 'Inactive',
+        description: 'Lorem ipsum',
+        state: StepperState.inactive,
+      },
+      {
+        title: 'Active',
+        description: 'Lorem ipsum',
+        state: StepperState.active,
+      },
+      {
+        title: 'Done',
+        description: 'Lorem ipsum',
+        state: StepperState.done,
+      },
+      {
+        title: 'Error',
+        description: 'Lorem ipsum',
+        state: StepperState.error,
+      },
+      {
+        title: 'Warning',
+        description: 'Lorem ipsum',
+        state: StepperState.warning,
+      },
+      {
+        title: 'Info',
+        description: 'Lorem ipsum',
+        state: StepperState.info,
+      },
+      {
+        title: 'Success',
+        description: 'Lorem ipsum',
+        state: StepperState.success,
+      },
+    ],
+  },
+]);
 </script>
 
 <template>
@@ -173,6 +342,16 @@ const checkboxes = ref([
       </rui-checkbox>
     </div>
   </div>
+
+  <div :class="css.section">
+    <h2 class="text-h4 mb-6" data-cy="steppers">Steppers</h2>
+    <rui-stepper
+      v-for="(stepper, i) in steppers"
+      :key="i"
+      v-bind="stepper"
+      class="mb-6"
+    />
+  </div>
 </template>
 
 <style lang="scss" module>