@designcrowd/fe-shared-lib 1.5.27 → 1.5.28-ast-jy-2

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

@@ -1,299 +0,0 @@
-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-Dd7cBPzL.js";import{B as N}from"./mediaQueryMixin-CISNqd93.js";import{B as A}from"./Button-DUOSTNbh.js";import"./ButtonPrimary-C1HLT2L3.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-BKxOWZPO.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

@@ -1 +0,0 @@
-@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}}