diff --git a/apps/web/src/components/molecules/InventoryCopyStep.scss b/apps/web/src/components/molecules/InventoryCopyStep.scss new file mode 100644 index 0000000..3fc9370 --- /dev/null +++ b/apps/web/src/components/molecules/InventoryCopyStep.scss @@ -0,0 +1,9 @@ +.inventory-copy-step { + align-content: start; +} + +.inventory-copy-step__intro { + margin: var(--space-2) 0 0; + color: var(--color-text-muted); + font-size: var(--text-sm); +} diff --git a/apps/web/src/components/molecules/InventoryCopyStep.stories.js b/apps/web/src/components/molecules/InventoryCopyStep.stories.js new file mode 100644 index 0000000..0de3b4a --- /dev/null +++ b/apps/web/src/components/molecules/InventoryCopyStep.stories.js @@ -0,0 +1,12 @@ +import InventoryCopyStep from './InventoryCopyStep.vue'; + +export default { title: 'Molecules/InventoryCopyStep', component: InventoryCopyStep }; + +const products = [{ id: 'product-1', name: 'Charizard ex #199/165' }]; +const conditions = [ + { id: 'condition-1', name: 'Near Mint', code: 'NM' }, + { id: 'condition-2', name: 'Lightly Played', code: 'LP' }, +]; + +export const Empty = { args: { productId: '', conditionId: '', products, conditions } }; +export const Selected = { args: { productId: 'product-1', conditionId: 'condition-1', products, conditions } }; diff --git a/apps/web/src/components/molecules/InventoryCopyStep.vue b/apps/web/src/components/molecules/InventoryCopyStep.vue new file mode 100644 index 0000000..e50da3e --- /dev/null +++ b/apps/web/src/components/molecules/InventoryCopyStep.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/apps/web/src/pages/AdminHomePage.vue b/apps/web/src/pages/AdminHomePage.vue index 1b1e4d4..2967582 100644 --- a/apps/web/src/pages/AdminHomePage.vue +++ b/apps/web/src/pages/AdminHomePage.vue @@ -7,6 +7,7 @@ import AdminListingStatus from "@/components/molecules/AdminListingStatus.vue"; import InventoryWorkflowStepper from "@/components/molecules/InventoryWorkflowStepper.vue"; import ProductIdentityStep from "@/components/molecules/ProductIdentityStep.vue"; import ProviderMappingStep from "@/components/molecules/ProviderMappingStep.vue"; +import InventoryCopyStep from "@/components/molecules/InventoryCopyStep.vue"; import { createAdminInventory, createAdminProduct, @@ -702,48 +703,16 @@ onMounted(load); @product-change="loadProviderMappings($event)" @submit="createProviderMapping" /> -
-

Add inventory copy

- - - - - -
+

Create listing draft