diff --git a/apps/web/src/assets/styles/global.scss b/apps/web/src/assets/styles/global.scss index 35d4b15..f201145 100644 --- a/apps/web/src/assets/styles/global.scss +++ b/apps/web/src/assets/styles/global.scss @@ -53,6 +53,8 @@ h1 { max-width: 760px; margin: var(--space-3) 0 var(--space-4); font-size: var(- .admin-page { max-width: 880px; } .admin-workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-8) 0; } .admin-workspace-grid form { display: grid; gap: var(--space-3); } +.admin-wizard { display: grid; gap: var(--space-4); margin: var(--space-8) 0; } +.admin-wizard__nav { display: flex; justify-content: space-between; gap: var(--space-3); } .admin-list { margin-top: var(--space-8); } .admin-list h2 { margin-bottom: var(--space-3); font-size: var(--text-xl); } .admin-list ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } diff --git a/apps/web/src/components/molecules/InventoryWorkflowStepper.scss b/apps/web/src/components/molecules/InventoryWorkflowStepper.scss index 9c92804..16af8c8 100644 --- a/apps/web/src/components/molecules/InventoryWorkflowStepper.scss +++ b/apps/web/src/components/molecules/InventoryWorkflowStepper.scss @@ -24,19 +24,28 @@ border-right: 0; } -.inventory-workflow__step a { +.inventory-workflow__link { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 76px; + width: 100%; padding: var(--space-3); + border: 0; + background: none; color: var(--color-text-subtle); - text-decoration: none; + text-align: left; + font: inherit; + cursor: pointer; } -.inventory-workflow__step a:hover, -.inventory-workflow__step a:focus-visible { - background: var(--color-surface-muted); +.inventory-workflow__link:hover, +.inventory-workflow__link:focus-visible { + box-shadow: inset 3px 0 0 var(--color-interactive); +} + +.inventory-workflow__step--active .inventory-workflow__link { + box-shadow: inset 3px 0 0 var(--color-interactive); } .inventory-workflow__index { diff --git a/apps/web/src/components/molecules/InventoryWorkflowStepper.stories.js b/apps/web/src/components/molecules/InventoryWorkflowStepper.stories.js index 81f3469..3c19d78 100644 --- a/apps/web/src/components/molecules/InventoryWorkflowStepper.stories.js +++ b/apps/web/src/components/molecules/InventoryWorkflowStepper.stories.js @@ -1,9 +1,12 @@ +import { expect, fn, userEvent, within } from '@storybook/test'; + import InventoryWorkflowStepper from './InventoryWorkflowStepper.vue'; export default { title: 'Molecules/InventoryWorkflowStepper', component: InventoryWorkflowStepper }; export const InProgress = { args: { + activeStepId: 'workflow-mapping', steps: [ { id: 'workflow-product', label: 'Product', description: 'Identify item', status: 'complete' }, { id: 'workflow-mapping', label: 'Sources', description: 'Link markets', status: 'current' }, @@ -17,6 +20,7 @@ export const InProgress = { export const Complete = { args: { + activeStepId: 'workflow-listing', steps: [ { id: 'workflow-product', label: 'Product', description: 'Identify item', status: 'complete' }, { id: 'workflow-mapping', label: 'Sources', description: 'Link markets', status: 'complete' }, @@ -27,3 +31,12 @@ export const Complete = { ], }, }; + +export const SelectStepWithKeyboard = { + args: { ...InProgress.args, onSelect: fn() }, + play: async ({ args, canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole('button', { name: /Copy/ })); + await expect(args.onSelect).toHaveBeenCalledWith('workflow-inventory'); + }, +}; diff --git a/apps/web/src/components/molecules/InventoryWorkflowStepper.vue b/apps/web/src/components/molecules/InventoryWorkflowStepper.vue index c444667..ffcd7b2 100644 --- a/apps/web/src/components/molecules/InventoryWorkflowStepper.vue +++ b/apps/web/src/components/molecules/InventoryWorkflowStepper.vue @@ -4,20 +4,25 @@ defineProps({ type: Array, required: true, }, + activeStepId: { + type: String, + default: '', + }, }); +defineEmits(['select']);