Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Steppers component #37

Merged
merged 11 commits into from
Jul 10, 2023
Merged

Add Steppers component #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f97670b
feat: add component for stepper icon, and types
tewshi Jul 6, 2023
9923b46
feat: add component for stepper
tewshi Jul 6, 2023
6389520
feat: add story for stepper
tewshi Jul 6, 2023
e8b5f93
feat: add unit and e2e tests for stepper
tewshi Jul 6, 2023
9428900
feat: add test all command, to run unit and headless e2e test
tewshi Jul 6, 2023
e2dd23a
feat: export stepper state for use outside
tewshi Jul 6, 2023
2fd6bbf
feat: register used stepper icons
tewshi Jul 6, 2023
e8b39bf
feat: use stepper in example app
tewshi Jul 6, 2023
12b84b3
feat: add custom stepper icon
tewshi Jul 6, 2023
3ec44f7
feat: add custom title color and example
tewshi Jul 7, 2023
388e726
feat: add custom title/subtitle color and update example
tewshi Jul 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions example/cypress/e2e/stepper.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
// https://docs.cypress.io/api/introduction/api.html

describe('Stepper', () => {
beforeEach(() => {
cy.visit('/');
});

it('checks for steppers and stepper text', () => {
cy.contains('h2[data-cy=steppers]', 'Steppers');

cy.get('div[class*=_stepper]').first().as('horizontalStepper');
cy.get('div[class*=_stepper][class*=_vertical]')
.first()
.as('verticalStepper');

cy.get('@horizontalStepper')
.find('div[class*=_step][class*=_inactive]')
.contains('Inactive');
cy.get('@horizontalStepper')
.find('div[class*=_step][class*=_success]')
.contains('Success');
});
});
288 changes: 287 additions & 1 deletion example/src/views/HomeView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -129,6 +135,276 @@ 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,
},
],
},
{
custom: 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,
},
],
},
{
custom: 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,
},
],
},
{
custom: true,
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,
},
],
},
{
custom: true,
iconTop: true,
titleClass: 'text-rui-primary',
subtitleClass: 'text-rui-info',
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,
},
],
},
{
custom: true,
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,
},
],
},
]);
</script>

<template>
Expand Down Expand Up @@ -173,6 +449,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>
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"test:ci": "vitest run",
"test:e2e": "pnpm --filter {example} test:e2e",
"test:e2e:dev": "pnpm --filter {example} test:e2e:dev",
"test:all": "pnpm test:run && pnpm test:e2e",
"coverage": "vitest run --coverage",
"coverage:preview": "npx vite preview --open --outDir tests/coverage",
"typecheck": "vue-tsc --noEmit",
Expand Down
35 changes: 35 additions & 0 deletions src/components/steppers/Stepper.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { describe, expect, it } from 'vitest';
import { type ComponentMountingOptions, mount } from '@vue/test-utils';
import Stepper from '@/components/steppers/Stepper.vue';
import {
StepperOrientation,
StepperState,
type StepperStep,
} from '@/types/stepper';

const createWrapper = (options: ComponentMountingOptions<typeof Stepper>) =>
mount(Stepper, options);

describe('Components/Stepper', () => {
const steps: StepperStep[] = [
{ title: 'Step', description: 'lorem ipsum', state: StepperState.done },
{ title: 'Step', description: 'lorem ipsum', state: StepperState.active },
{ title: 'Step', description: 'lorem ipsum', state: StepperState.inactive },
];

it('renders properly', () => {
const wrapper = createWrapper({ props: { steps } });
expect(wrapper.classes()).toMatch(/_stepper_/);
});

it('passes props correctly', async () => {
const wrapper = createWrapper({
props: { steps },
});
expect(wrapper.classes()).toMatch(/_horizontal_/);
await wrapper.setProps({ orientation: StepperOrientation.vertical });
expect(wrapper.classes()).toMatch(/_vertical_/);
await wrapper.setProps({ iconTop: true });
expect(wrapper.classes()).toMatch(/_icon-top_/);
});
});
Loading
Loading