@shopify/shop-minis-react 0.0.25 → 0.0.26

package/src/stories/ProductVariantPrice.stories.tsx

@@ -0,0 +1,73 @@
+import {ProductVariantPrice} from '../components/atoms/product-variant-price'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+type ProductVariantPriceProps = React.ComponentProps<typeof ProductVariantPrice>
+
+const meta = {
+  title: 'Atoms/ProductVariantPrice',
+  component: ProductVariantPrice,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    amount: {
+      control: 'text',
+    },
+    currencyCode: {
+      control: 'select',
+      options: ['USD', 'CAD', 'EUR', 'GBP', 'JPY'],
+    },
+    compareAtPriceAmount: {
+      control: 'text',
+    },
+    compareAtPriceCurrencyCode: {
+      control: 'select',
+      options: ['USD', 'CAD', 'EUR', 'GBP', 'JPY'],
+    },
+    className: {
+      control: 'text',
+    },
+    currentPriceClassName: {
+      control: 'text',
+    },
+    originalPriceClassName: {
+      control: 'text',
+    },
+    containerClassName: {
+      control: 'text',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<ProductVariantPriceProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    amount: '29.99',
+    currencyCode: 'USD',
+  },
+}
+
+export const WithDiscount: Story = {
+  name: 'With Discount',
+  args: {
+    amount: '24.99',
+    currencyCode: 'USD',
+    compareAtPriceAmount: '39.99',
+  },
+}
+
+export const CustomStyling: Story = {
+  name: 'Custom Styling',
+  args: {
+    amount: '89.99',
+    currencyCode: 'USD',
+    compareAtPriceAmount: '119.99',
+    currentPriceClassName: 'text-2xl font-bold text-green-600',
+    originalPriceClassName: 'text-lg text-red-500 line-through',
+    containerClassName: 'gap-3 p-4 bg-gray-50 rounded-lg',
+  },
+}

package/src/stories/Toaster.stories.tsx

@@ -26,7 +26,7 @@ type Story = StoryObj<typeof meta>
 
 export const SuccessToast: Story = {
   decorators: [
-    Story => (
+    () => (
       <Button onClick={() => toast.success('Success toast!')}>
         Show success Toast
       </Button>
@@ -37,7 +37,7 @@ export const SuccessToast: Story = {
 
 export const ErrorToast: Story = {
   decorators: [
-    Story => (
+    () => (
       <Button onClick={() => toast.error('Error toast!')}>
         Show error Toast
       </Button>