@designcrowd/fe-shared-lib 1.8.7 → 1.8.9-edge-fallback-0

package/.storybook-static/assets/Price.stories-gvqiKJzs.js

@@ -0,0 +1,358 @@
+import{H as c,d as W}from"./iframe-ndUd-rmt.js";import{P as t}from"./Price-DmIyQdA3.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const D={id:1,name:"United State Dollars",iso4127Code:"USD",symbol:"$",abbreviation:"US"},M={id:2,name:"Australian Dollars",iso4127Code:"AUD",symbol:"$",abbreviation:"A"},$={id:3,name:"British Pound",iso4127Code:"GBP",symbol:"£",abbreviation:"UK"},H={id:4,name:"Euro",iso4127Code:"EUR",symbol:"€",abbreviation:"EU"},I={id:5,name:"Indian Rupee",iso4127Code:"INR",symbol:"₹",abbreviation:"IN"},X={id:6,name:"Philippine Peso",iso4127Code:"PHP",symbol:"₱",abbreviation:"PH"},_={id:7,name:"Brazilian Real",iso4127Code:"BRL",symbol:"R$",abbreviation:"R"},z={id:8,name:"Mexican Peso",iso4127Code:"MXN",symbol:"MX$",abbreviation:"MX"},q={id:9,name:"South African Rand",iso4127Code:"ZAR",symbol:"R",abbreviation:"R"},a=[D,M,$,H,I,X,_,z,q],s=["en-US","fr-FR","es-ES","pt-PT","de-DE","fr-CA","pt-BR"],Y={title:"Components/Price",component:t,args:{currencyName:a[0].name,locale:s[0]},argTypes:{amount:{type:"number"},currencyName:{control:{type:"select"},options:a.map(n=>n.name)},locale:{control:{type:"select"},options:s}}},o={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)},selectedLocale(){return s.find(e=>e===this.args.locale)}},async mounted(){await c()},template:`
+      <span>
+        <price 
+            v-bind="args"
+            :currency="selectedCurrency"
+            :locale="selectedLocale"
+        />
+      </span>
+    `}),args:{amount:45}},i={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)},selectedLocale(){return s.find(e=>e===this.args.locale)}},async mounted(){await c()},template:`
+      <span>
+        <price
+            v-bind="args"
+            :currency="selectedCurrency"
+            fraction="2"
+            :locale="selectedLocale"
+        />
+      </span>
+    `}),args:{amount:22.5}},l={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)},selectedLocale(){return s.find(e=>e===this.args.locale)}},async mounted(){await c()},template:`
+      <span>
+        <price
+            v-bind="args"
+            :always-show-fraction="true"
+            :currency="selectedCurrency"
+            fraction="2"
+            :locale="selectedLocale"
+        />
+      </span>
+    `}),args:{amount:22}},u={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)}},async mounted(){await c()},template:`
+      <span>
+        <price
+            v-bind="args"
+            :always-show-fraction="false"
+            :currency="selectedCurrency"
+            fraction="2"
+            :locale="selectedLocale"
+          />
+      </span>
+    `}),args:{amount:22}},p={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)},selectedLocale(){return s.find(e=>e===this.args.locale)}},async mounted(){await c()},template:`
+      <span>
+        <price
+            v-bind="args"
+            :always-show-fraction="true"
+            :currency="selectedCurrency"
+            fraction="2"
+            :suffix="suffix"
+            :locale="selectedLocale"
+          />
+      </span>
+    `}),args:{amount:22,suffix:"/yr"}},d={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)},selectedLocale(){return s.find(e=>e===this.args.locale)}},async mounted(){await c()},template:`
+      <span>
+        <price
+            v-bind="args"
+            :currency="selectedCurrency"
+            :locale="selectedLocale"
+        />
+      </span>
+    `}),args:{amount:22}},m=(n,{argTypes:r})=>({components:{StorybookPriceComponent:G},props:Object.keys(r),data(){const e=new Array(s.length).fill(0);return e.forEach((K,y)=>{e[y]=new Array(a.length).fill(0).map((Z,B)=>({locale:s[y],currency:a[B]}))}),{variants:e}},async mounted(){await c()},template:`
+      <StorybookPriceComponent
+          :variants="variants"/>
+      <StorybookPriceComponent
+          :variants="variants"
+          :show-abbreviation="true"
+      />
+    `}),G=W({components:{Price:t},props:{variants:{type:Array,required:!0},showAbbreviation:{type:Boolean,default:!1}},template:`
+    <table class="tw-w-full">
+      <thead>
+        <tr>
+          <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Price</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="locale in variants" class="tw-bg-grayscale-200">
+          <td>{{ locale[0].locale }}</td>
+          <td v-for="item in locale" class="tw-p-4">
+            <price
+                :amount=10.00
+                :currency="item.currency"
+                :locale="item.locale"
+                :show-abbreviation="showAbbreviation"
+                fraction="2"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `});var g,b,f;o.parameters={...o.parameters,docs:{...(g=o.parameters)==null?void 0:g.docs,source:{originalSource:`{
+  render: (args, {
+    argTypes
+  }) => {
+    return {
+      components: {
+        Price
+      },
+      props: Object.keys(argTypes),
+      setup() {
+        return {
+          args
+        };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find(x => x.name === this.args.currencyName);
+        },
+        selectedLocale() {
+          return locales.find(x => x === this.args.locale);
+        }
+      },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
+      template: \`
+      <span>
+        <price 
+            v-bind="args"
+            :currency="selectedCurrency"
+            :locale="selectedLocale"
+        />
+      </span>
+    \`
+    };
+  },
+  args: {
+    amount: 45
+  }
+}`,...(f=(b=o.parameters)==null?void 0:b.docs)==null?void 0:f.source}}};var h,C,w;i.parameters={...i.parameters,docs:{...(h=i.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  render: (args, {
+    argTypes
+  }) => {
+    return {
+      components: {
+        Price
+      },
+      props: Object.keys(argTypes),
+      setup() {
+        return {
+          args
+        };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find(x => x.name === this.args.currencyName);
+        },
+        selectedLocale() {
+          return locales.find(x => x === this.args.locale);
+        }
+      },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
+      template: \`
+      <span>
+        <price
+            v-bind="args"
+            :currency="selectedCurrency"
+            fraction="2"
+            :locale="selectedLocale"
+        />
+      </span>
+    \`
+    };
+  },
+  args: {
+    amount: 22.5
+  }
+}`,...(w=(C=i.parameters)==null?void 0:C.docs)==null?void 0:w.source}}};var L,v,x;l.parameters={...l.parameters,docs:{...(L=l.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  render: (args, {
+    argTypes
+  }) => {
+    return {
+      components: {
+        Price
+      },
+      props: Object.keys(argTypes),
+      setup() {
+        return {
+          args
+        };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find(x => x.name === this.args.currencyName);
+        },
+        selectedLocale() {
+          return locales.find(x => x === this.args.locale);
+        }
+      },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
+      template: \`
+      <span>
+        <price
+            v-bind="args"
+            :always-show-fraction="true"
+            :currency="selectedCurrency"
+            fraction="2"
+            :locale="selectedLocale"
+        />
+      </span>
+    \`
+    };
+  },
+  args: {
+    amount: 22.0
+  }
+}`,...(x=(v=l.parameters)==null?void 0:v.docs)==null?void 0:x.source}}};var S,A,P;u.parameters={...u.parameters,docs:{...(S=u.parameters)==null?void 0:S.docs,source:{originalSource:`{
+  render: (args, {
+    argTypes
+  }) => {
+    return {
+      components: {
+        Price
+      },
+      props: Object.keys(argTypes),
+      setup() {
+        return {
+          args
+        };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find(x => x.name === this.args.currencyName);
+        }
+      },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
+      template: \`
+      <span>
+        <price
+            v-bind="args"
+            :always-show-fraction="false"
+            :currency="selectedCurrency"
+            fraction="2"
+            :locale="selectedLocale"
+          />
+      </span>
+    \`
+    };
+  },
+  args: {
+    amount: 22.0
+  }
+}`,...(P=(A=u.parameters)==null?void 0:A.docs)==null?void 0:P.source}}};var k,O,N;p.parameters={...p.parameters,docs:{...(k=p.parameters)==null?void 0:k.docs,source:{originalSource:`{
+  render: (args, {
+    argTypes
+  }) => {
+    return {
+      components: {
+        Price
+      },
+      props: Object.keys(argTypes),
+      setup() {
+        return {
+          args
+        };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find(x => x.name === this.args.currencyName);
+        },
+        selectedLocale() {
+          return locales.find(x => x === this.args.locale);
+        }
+      },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
+      template: \`
+      <span>
+        <price
+            v-bind="args"
+            :always-show-fraction="true"
+            :currency="selectedCurrency"
+            fraction="2"
+            :suffix="suffix"
+            :locale="selectedLocale"
+          />
+      </span>
+    \`
+    };
+  },
+  args: {
+    amount: 22.0,
+    suffix: '/yr'
+  }
+}`,...(N=(O=p.parameters)==null?void 0:O.docs)==null?void 0:N.source}}};var T,j,R;d.parameters={...d.parameters,docs:{...(T=d.parameters)==null?void 0:T.docs,source:{originalSource:`{
+  render: (args, {
+    argTypes
+  }) => {
+    return {
+      components: {
+        Price
+      },
+      props: Object.keys(argTypes),
+      setup() {
+        return {
+          args
+        };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find(x => x.name === this.args.currencyName);
+        },
+        selectedLocale() {
+          return locales.find(x => x === this.args.locale);
+        }
+      },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
+      template: \`
+      <span>
+        <price
+            v-bind="args"
+            :currency="selectedCurrency"
+            :locale="selectedLocale"
+        />
+      </span>
+    \`
+    };
+  },
+  args: {
+    amount: 22.0
+  }
+}`,...(R=(j=d.parameters)==null?void 0:j.docs)==null?void 0:R.source}}};var E,U,F;m.parameters={...m.parameters,docs:{...(E=m.parameters)==null?void 0:E.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookPriceComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      const combos = new Array(locales.length).fill(0);
+      combos.forEach((item, index) => {
+        combos[index] = new Array(currencies.length).fill(0).map((item2, index2) => ({
+          locale: locales[index],
+          currency: currencies[index2]
+        }));
+      });
+      return {
+        variants: combos
+      };
+    },
+    async mounted() {
+      await setSharedLibLocaleAsync();
+    },
+    template: \`
+      <StorybookPriceComponent
+          :variants="variants"/>
+      <StorybookPriceComponent
+          :variants="variants"
+          :show-abbreviation="true"
+      />
+    \`
+  };
+}`,...(F=(U=m.parameters)==null?void 0:U.docs)==null?void 0:F.source}}};const ee=["Sample","WithFraction","AlwaysShowFractionOn","AlwaysShowFractionOff","WithSuffix","WithLocale","AllLocalesAndCurrencies"];export{m as AllLocalesAndCurrencies,u as AlwaysShowFractionOff,l as AlwaysShowFractionOn,o as Sample,i as WithFraction,d as WithLocale,p as WithSuffix,ee as __namedExportsOrder,Y as default};

package/.storybook-static/assets/PromoCard.stories-DCqsBuOI.js

@@ -0,0 +1,299 @@
+import{d as W,q as m,c as q,e as o,b as a,h as H,t as u,o as V}from"./iframe-ndUd-rmt.js";import{B as N}from"./mediaQueryMixin-CISNqd93.js";import{B as A}from"./Button-CkyYO9sU.js";import"./ButtonPrimary-LDY_rMmo.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-B_xzgi_Q.js";const E=["src","alt"],j={class:"tw-font-bold tw-text-black tw-mb-0.5"},t=W({__name:"PromoCard",props:{title:{type:String,required:!0},description:{type:String,required:!0},imageUrl:{type:String,required:!0},altText:{type:String,default:""},buttonLabel:{type:String,required:!0},horizontalLayout:{type:Boolean,default:!1},shouldShowImageOnTop:{type:Boolean,default:!1},textLineClamp:{type:Number,default:0}},emits:["button-clicked"],setup(e,{emit:O}){const c=e,U=O,F=()=>U("button-clicked"),M=m(()=>c.textLineClamp>0?`tw-line-clamp-${c.textLineClamp}`:"tw-line-clamp-none"),D=m(()=>!(c.horizontalLayout&&window.innerWidth>=N.SMALL));return(G,R)=>(V(),q("div",{class:a(["tw-flex",e.shouldShowImageOnTop?"tw-flex-col":"tw-flex-row"])},[o("div",{class:a(["tw-flex tw-justify-center tw-items-center tw-bg-grayscale-400 tw-w-60 tw-p-1 dcom-rounded-tl dcom-rounded-bl",{"tw-w-full tw-px-8 md:tw-px-12 lg:tw-px-20 tw-py-4":e.shouldShowImageOnTop,"tw-px-4":!e.shouldShowImageOnTop}])},[o("img",{class:"tw-w-full",src:e.imageUrl,alt:e.altText},null,8,E)],2),o("div",{class:a(["tw-flex tw-bg-white tw-w-full tw-p-4 tw-grow dcom-rounded-tr dcom-rounded-br tw-flex-col tw-justify-between",{"sm:tw-flex-row sm:tw-items-center":e.horizontalLayout}])},[o("div",{class:a(["tw-text-left tw-overflow-hidden tw-text-ellipsis tw-text-base",M.value])},[o("div",j,u(e.title),1),o("p",null,u(e.description),1)],2),H(A,{variant:"primary",size:"small","full-width":D.value,class:a(["tw-text-left tw-mt-4",e.horizontalLayout?"tw-w-full tw-mr-2 sm:tw-mt-0 sm:tw-ml-2 sm:tw-w-auto":""]),label:e.buttonLabel,onOnClick:F},null,8,["full-width","class","label"])],2)],2))}});t.__docgenInfo={exportName:"default",displayName:"PromoCard",description:"",tags:{},props:[{name:"title",type:{name:"string"},required:!0},{name:"description",type:{name:"string"},required:!0},{name:"imageUrl",type:{name:"string"},required:!0},{name:"altText",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"buttonLabel",type:{name:"string"},required:!0},{name:"horizontalLayout",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"shouldShowImageOnTop",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"textLineClamp",type:{name:"number"},defaultValue:{func:!1,value:"0"}}],events:[{name:"button-clicked"}],sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/atoms/components/PromoCard/PromoCard.vue"]};const Z={title:"Components/PromoCard",component:t},n={render:e=>({components:{PromoCard:t},setup(){return{args:e}},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:!1,shouldShowImageOnTop:!1}},r={render:e=>({components:{PromoCard:t},setup(){return{args:e}},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:!0,scaleImageDown:!1,imageWidthFull:!1,shouldShowImageOnTop:!1}},l={render:e=>({components:{PromoCard:t},setup(){return{args:e}},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:!1,scaleImageDown:!1,imageWidthFull:!1,shouldShowImageOnTop:!0}},s={render:e=>({components:{PromoCard:t},setup(){return{args:e}},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:!1,scaleImageDown:!0,imageWidthFull:!1,shouldShowImageOnTop:!1}},i={render:e=>({components:{PromoCard:t},setup(){return{args:e}},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:!1,scaleImageDown:!1,imageWidthFull:!0,shouldShowImageOnTop:!1}},d={render:e=>({components:{PromoCard:t},setup(){return{args:e}},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:{}};n.story={name:"PromoCard - Standard"};r.story={name:"PromoCard - Horizontal Layout"};l.story={name:"PromoCard - Image On Top"};s.story={name:"PromoCard - Scaled Down Image"};i.story={name:"PromoCard - Full Width Image"};d.story={name:"PromoCard - All Variants"};var p,g,h;n.parameters={...n.parameters,docs:{...(p=n.parameters)==null?void 0:p.docs,source:{originalSource:`{
+  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
+  }
+}`,...(h=(g=n.parameters)==null?void 0:g.docs)==null?void 0:h.source}}};var b,w,f;r.parameters={...r.parameters,docs:{...(b=r.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  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
+  }
+}`,...(f=(w=r.parameters)==null?void 0:w.docs)==null?void 0:f.source}}};var y,C,k;l.parameters={...l.parameters,docs:{...(y=l.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  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
+  }
+}`,...(k=(C=l.parameters)==null?void 0:C.docs)==null?void 0:k.source}}};var v,L,P;s.parameters={...s.parameters,docs:{...(v=s.parameters)==null?void 0:v.docs,source:{originalSource:`{
+  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
+  }
+}`,...(P=(L=s.parameters)==null?void 0:L.docs)==null?void 0:P.source}}};var B,x,T;i.parameters={...i.parameters,docs:{...(B=i.parameters)==null?void 0:B.docs,source:{originalSource:`{
+  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
+  }
+}`,...(T=(x=i.parameters)==null?void 0:x.docs)==null?void 0:T.source}}};var S,I,z;d.parameters={...d.parameters,docs:{...(S=d.parameters)==null?void 0:S.docs,source:{originalSource:`{
+  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: {}
+}`,...(z=(I=d.parameters)==null?void 0:I.docs)==null?void 0:z.source}}};const _=["Standard","HorizontalLayout","ImageOnTop","ScaledDownImage","FullWidthImage","AllOptions"];export{d as AllOptions,i as FullWidthImage,r as HorizontalLayout,l as ImageOnTop,s as ScaledDownImage,n as Standard,_ as __namedExportsOrder,Z as default};

package/.storybook-static/assets/PublishBrandPageModal-Q9-mNG1q.css

@@ -0,0 +1 @@
+@media(max-width:640px){.desktop-cta[data-v-76a233f5]{display:none;width:100%}}@media(min-width:640px){.mobile-cta[data-v-76a233f5]{display:none;width:100%}}@media(max-width:640px){[data-v-70e87ecf] .publish-bp--modal{max-height:90vh;width:90vw}}@media(min-width:640px){[data-v-70e87ecf] .publish-bp--modal{max-height:80vh;width:90vw}}