@designcrowd/fe-shared-lib 1.5.8 → 1.5.9-dbc-1

package/src/atoms/components/PromoCard/PromoCard.stories.ts

@@ -1,263 +1,263 @@
-import PromoCard from './PromoCard.vue';
-
-export default {
-  title: 'Components/PromoCard',
-  component: PromoCard,
-};
-
-export const Standard = {
-  render: (args) => {
-    return {
-      components: {
-        PromoCard,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-        <PromoCard
-          v-bind="args"
-          @button-clicked="handleButtonClick"
-        />
-      `,
-      methods: {
-        handleButtonClick() {
-          console.log('Button clicked!');
-        },
-      },
-    };
-  },
-  args: {
-    title: 'Special Offer',
-    description: 'Get 20% off your next purchase. Limited time offer!',
-    imageUrl: 'https://bcassetcdn.com/assets/images/promo/legalzoom-symbol.svg',
-    altText: 'Promotional image',
-    buttonLabel: 'Learn More',
-    horizontalLayout: false,
-    shouldShowImageOnTop: false,
-  },
-};
-
-export const HorizontalLayout = {
-  render: (args) => {
-    return {
-      components: {
-        PromoCard,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-        <PromoCard
-          v-bind="args"
-          @button-clicked="handleButtonClick"
-        />
-      `,
-      methods: {
-        handleButtonClick() {
-          console.log('Button clicked!');
-        },
-      },
-    };
-  },
-  args: {
-    title: 'Premium Package',
-    description: 'Upgrade to premium and unlock exclusive features today.',
-    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
-    altText: 'Premium package image',
-    buttonLabel: 'Upgrade Now',
-    horizontalLayout: true,
-    scaleImageDown: false,
-    imageWidthFull: false,
-    shouldShowImageOnTop: false,
-  },
-};
-
-export const ImageOnTop = {
-  render: (args) => {
-    return {
-      components: {
-        PromoCard,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-        <PromoCard
-          v-bind="args"
-          @button-clicked="handleButtonClick"
-        />
-      `,
-      methods: {
-        handleButtonClick() {
-          console.log('Button clicked!');
-        },
-      },
-    };
-  },
-  args: {
-    title: 'Mobile Friendly',
-    description: 'This layout works great on mobile devices with the image displayed on top.',
-    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
-    altText: 'Mobile friendly layout',
-    buttonLabel: 'Try It',
-    horizontalLayout: false,
-    scaleImageDown: false,
-    imageWidthFull: false,
-    shouldShowImageOnTop: true,
-  },
-};
-
-export const ScaledDownImage = {
-  render: (args) => {
-    return {
-      components: {
-        PromoCard,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-        <PromoCard
-          v-bind="args"
-          @button-clicked="handleButtonClick"
-        />
-      `,
-      methods: {
-        handleButtonClick() {
-          console.log('Button clicked!');
-        },
-      },
-    };
-  },
-  args: {
-    title: 'Logo Showcase',
-    description: 'Display your logo with proper spacing and scaling.',
-    imageUrl: 'https://via.placeholder.com/120x120',
-    altText: 'Logo showcase',
-    buttonLabel: 'View More',
-    horizontalLayout: false,
-    scaleImageDown: true,
-    imageWidthFull: false,
-    shouldShowImageOnTop: false,
-  },
-};
-
-export const FullWidthImage = {
-  render: (args) => {
-    return {
-      components: {
-        PromoCard,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-        <PromoCard
-          v-bind="args"
-          @button-clicked="handleButtonClick"
-        />
-      `,
-      methods: {
-        handleButtonClick() {
-          console.log('Button clicked!');
-        },
-      },
-    };
-  },
-  args: {
-    title: 'Full Width Banner',
-    description: 'Images that stretch to fill the available space.',
-    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
-    altText: 'Full width banner',
-    buttonLabel: 'Explore',
-    horizontalLayout: false,
-    scaleImageDown: false,
-    imageWidthFull: true,
-    shouldShowImageOnTop: false,
-  },
-};
-
-export const AllOptions = {
-  render: (args) => {
-    return {
-      components: {
-        PromoCard,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-        <div class="tw-space-y-4">
-          <div>
-            <h3 class="tw-mb-2 tw-font-bold">Standard Layout</h3>
-            <PromoCard
-              title="Standard Promo"
-              description="This is the default vertical layout with image on the left."
-              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
-              altText="Standard layout"
-              buttonLabel="Click Me"
-              @button-clicked="handleButtonClick"
-            />
-          </div>
-          
-          <div>
-            <h3 class="tw-mb-2 tw-font-bold">Horizontal Layout</h3>
-            <PromoCard
-              title="Horizontal Promo"
-              description="This layout is better for desktop with content side by side."
-              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
-              altText="Horizontal layout"
-              buttonLabel="Click Me"
-              :horizontal-layout="true"
-              @button-clicked="handleButtonClick"
-            />
-          </div>
-          
-          <div>
-            <h3 class="tw-mb-2 tw-font-bold">Image On Top</h3>
-            <PromoCard
-              title="Mobile Optimized"
-              description="Perfect for mobile views with image stacked on top."
-              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
-              altText="Image on top"
-              buttonLabel="Click Me"
-              :should-show-image-on-top="true"
-              @button-clicked="handleButtonClick"
-            />
-          </div>
-        </div>
-      `,
-      methods: {
-        handleButtonClick() {
-          console.log('Button clicked!');
-        },
-      },
-    };
-  },
-  args: {},
-};
-
-Standard.story = {
-  name: 'PromoCard - Standard',
-};
-
-HorizontalLayout.story = {
-  name: 'PromoCard - Horizontal Layout',
-};
-
-ImageOnTop.story = {
-  name: 'PromoCard - Image On Top',
-};
-
-ScaledDownImage.story = {
-  name: 'PromoCard - Scaled Down Image',
-};
-
-FullWidthImage.story = {
-  name: 'PromoCard - Full Width Image',
-};
-
-AllOptions.story = {
-  name: 'PromoCard - All Variants',
-};
+import PromoCard from './PromoCard.vue';
+
+export default {
+  title: 'Components/PromoCard',
+  component: PromoCard,
+};
+
+export const Standard = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Special Offer',
+    description: 'Get 20% off your next purchase. Limited time offer!',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/legalzoom-symbol.svg',
+    altText: 'Promotional image',
+    buttonLabel: 'Learn More',
+    horizontalLayout: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const HorizontalLayout = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Premium Package',
+    description: 'Upgrade to premium and unlock exclusive features today.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Premium package image',
+    buttonLabel: 'Upgrade Now',
+    horizontalLayout: true,
+    scaleImageDown: false,
+    imageWidthFull: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const ImageOnTop = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Mobile Friendly',
+    description: 'This layout works great on mobile devices with the image displayed on top.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Mobile friendly layout',
+    buttonLabel: 'Try It',
+    horizontalLayout: false,
+    scaleImageDown: false,
+    imageWidthFull: false,
+    shouldShowImageOnTop: true,
+  },
+};
+
+export const ScaledDownImage = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Logo Showcase',
+    description: 'Display your logo with proper spacing and scaling.',
+    imageUrl: 'https://via.placeholder.com/120x120',
+    altText: 'Logo showcase',
+    buttonLabel: 'View More',
+    horizontalLayout: false,
+    scaleImageDown: true,
+    imageWidthFull: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const FullWidthImage = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Full Width Banner',
+    description: 'Images that stretch to fill the available space.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Full width banner',
+    buttonLabel: 'Explore',
+    horizontalLayout: false,
+    scaleImageDown: false,
+    imageWidthFull: true,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const AllOptions = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <div class="tw-space-y-4">
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Standard Layout</h3>
+            <PromoCard
+              title="Standard Promo"
+              description="This is the default vertical layout with image on the left."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Standard layout"
+              buttonLabel="Click Me"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+          
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Horizontal Layout</h3>
+            <PromoCard
+              title="Horizontal Promo"
+              description="This layout is better for desktop with content side by side."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Horizontal layout"
+              buttonLabel="Click Me"
+              :horizontal-layout="true"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+          
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Image On Top</h3>
+            <PromoCard
+              title="Mobile Optimized"
+              description="Perfect for mobile views with image stacked on top."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Image on top"
+              buttonLabel="Click Me"
+              :should-show-image-on-top="true"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+        </div>
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {},
+};
+
+Standard.story = {
+  name: 'PromoCard - Standard',
+};
+
+HorizontalLayout.story = {
+  name: 'PromoCard - Horizontal Layout',
+};
+
+ImageOnTop.story = {
+  name: 'PromoCard - Image On Top',
+};
+
+ScaledDownImage.story = {
+  name: 'PromoCard - Scaled Down Image',
+};
+
+FullWidthImage.story = {
+  name: 'PromoCard - Full Width Image',
+};
+
+AllOptions.story = {
+  name: 'PromoCard - All Variants',
+};