@designcrowd/fe-shared-lib 1.7.0 → 1.8.0

package/.storybook-static/assets/ButtonGroup.stories-DlrYMRSk.js

@@ -0,0 +1,504 @@
+import{I as V}from"./Icon-C17LFvsP.js";import{c as n,F as x,r as N,n as O,a as z,o,b as y,e as _,f as I,m as G,t as f,g as k,h as A}from"./iframe-B3A6OXQU.js";import{_ as L}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-PPVm8Dsz.js";const q={components:{Icon:V},props:{options:{type:Array,required:!0},variant:{type:String,required:!1,default:void 0},btnStyleVariant:{type:String,validator(t){return["compressed"].includes(t)},required:!1,default:void 0},columns:{type:Number,required:!1,default:void 0},padding:{type:Number,required:!1,default:void 0},lineHeight:{type:Number,required:!1,default:void 0}},computed:{isGridDisplay(){return!!this.columns},buttonGroupStyle(){return this.isGridDisplay?{display:"grid",gap:"0.5rem",gridTemplateColumns:`repeat(${this.options.length===3&&this.columns===2?this.options.length:this.columns}, minmax(0, 1fr))`}:{}}}},D=["disabled","onClick"],T={key:0,class:"tw-w-full tw-text-center tw-font-bold tw-font-sans tw-text-xs tw-mb-0 tw-mt-2"},E=["disabled","onClick"],M={key:0,class:"tw-w-full tw-text-center tw-font-bold"},H=["disabled","onClick"],R=["src","alt"],F={key:2,class:"tw-w-full tw-text-center tw-font-bold tw-font-sans tw-text-xs tw-mb-0 tw-mt-2"},P=["disabled","onClick"];function U(t,j,l,$,J,s){const C=z("Icon");return l.variant==="custom"?(o(),n("div",{key:0,class:"button-group",style:O(s.buttonGroupStyle)},[(o(!0),n(x,null,N(l.options,(e,i)=>(o(),n("div",{key:`button-${e.value}`,class:y({"tw-ml-2":i>0&&!s.isGridDisplay,"tw-w-full":e.title||e.label})},[_("button",G({class:["button-group-item tw-text-xs tw-shadow-inner tw-w-full tw-py-2",{"!tw-shadow-[0_0_0_2px] !tw-shadow-info-500":e.isSelected&&!e.disabled,"!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200":!e.isSelected&&!e.disabled,"hover:!tw-shadow-info-500":!e.isSelected&&!e.disabled,"tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200":e.disabled}],disabled:e.disabled},{ref_for:!0},e.dataAttribute?{[e.dataAttribute]:""}:{},{onClick:h=>!e.disabled&&t.$emit("on-select",e)}),[I(t.$slots,"content",{option:e},void 0,!0)],16,D),e.title?(o(),n("p",T,f(e.title),1)):k("",!0)],2))),128))],4)):l.variant==="icon"||l.variant==="image"?(o(),n("div",{key:1,class:"button-group",style:O(s.buttonGroupStyle)},[(o(!0),n(x,null,N(l.options,(e,i)=>(o(),n("div",{key:`button-${e.value}`,class:y({"tw-ml-2":i>0&&!s.isGridDisplay,"tw-w-full":e.title})},[l.variant==="icon"?(o(),n("button",G({key:0,class:[{"!tw-shadow-[0_0_0_2px] !tw-shadow-info-500":e.isSelected&&!e.disabled,"!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200":!e.isSelected&&!e.disabled,"hover:!tw-shadow-info-500":!e.isSelected&&!e.disabled,"tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200":e.disabled,"tw-px-2":!e.iconViewBox,"tw-px-px":e.iconViewBox&&!e.isSelected&&!e.iconName.includes("display-style")&&l.btnStyleVariant,"tw-px-0.5":e.iconViewBox&&e.isSelected,"tw-py-2":!e.iconName.includes("display-style")&&!l.btnStyleVariant,"tw-px-0 tw-py-0":e.iconName.includes("display-style")||l.btnStyleVariant==="compressed"},"tw-text-xs button-group-icon-button tw-shadow-inner"],style:e.iconName.includes("display-style")?{lineHeight:0}:{},disabled:e.disabled},{ref_for:!0},e.dataAttribute?{[e.dataAttribute]:""}:{},{onClick:h=>!e.disabled&&t.$emit("on-select",e)}),[_("div",{class:y({"tw-flex tw-flex-cols-2 tw-gap-4 tw-items-center tw-justify-center":e.iconName.includes("column-")})},[e.iconName.includes("column-")?(o(),n("p",M,f(e.label),1)):k("",!0),A(C,{name:e.iconName,size:e.iconSize?e.iconSize:e.iconViewBox,"view-box":e.iconViewBox},null,8,["name","size","view-box"])],2)],16,E)):(o(),n("button",G({key:1,class:[{"!tw-shadow-[0_0_0_2px] !tw-shadow-info-500":e.isSelected&&!e.disabled,"!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200":!e.isSelected&&!e.disabled,"hover:!tw-shadow-info-500":!e.isSelected&&!e.disabled,"tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200":e.disabled},"tw-text-xs button-group-image-button tw-shadow-inner"],disabled:e.disabled},{ref_for:!0},e.dataAttribute?{[e.dataAttribute]:""}:{},{onClick:h=>!e.disabled&&t.$emit("on-select",e)}),[_("img",{src:e.src,alt:e.alt,class:"tw-w-full tw-h-full"},null,8,R)],16,H)),e.title?(o(),n("p",F,f(e.title),1)):k("",!0)],2))),128))],4)):(o(),n("div",{key:2,class:"button-group",style:O(s.buttonGroupStyle)},[(o(!0),n(x,null,N(l.options,(e,i)=>(o(),n("button",{key:`button-${e.value}`,class:y([{"tw-ml-2":i>0&&!l.columns,"!tw-shadow-[0_0_0_2px] !tw-shadow-info-500":e.isSelected&&!e.disabled,"!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200":!e.isSelected&&!e.disabled,"hover:!tw-shadow-info-500":!e.isSelected&&!e.disabled,"tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200":e.disabled},"tw-text-xs button-group-button tw-shadow-inner"]),disabled:e.disabled,onClick:h=>!e.disabled&&t.$emit("on-select",e)},f(e.label),11,P))),128))],4))}const a=L(q,[["render",U],["__scopeId","data-v-1fdbe03f"]]);q.__docgenInfo={exportName:"default",displayName:"ButtonGroup",description:"",tags:{},props:[{name:"options",type:{name:"array"},required:!0},{name:"variant",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"btnStyleVariant",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"},values:["compressed"]},{name:"columns",type:{name:"number"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"padding",type:{name:"number"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"lineHeight",type:{name:"number"},required:!1,defaultValue:{func:!1,value:"undefined"}}],events:[{name:"on-select"}],slots:[{name:"content",scoped:!0,bindings:[{name:"option",title:"binding"}]}],sourceFiles:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/ButtonGroup/ButtonGroup.vue"]};const Y={title:"Components/ButtonGroup",component:a},c=()=>({components:{ButtonGroup:a},data:()=>({options:[{label:"Small",value:"small",isSelected:!0},{label:"Medium",value:"medium",disabled:!0},{label:"Large",value:"large"}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+      <div class="tw-w-1/3">
+        <ButtonGroup :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `});c.story={name:"Sample (3 buttons)"};const r=()=>({components:{ButtonGroup:a},data:()=>({options:[{label:"Option 1",value:"option1",isSelected:!0},{label:"Option 2",value:"option2"}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+      <div class="tw-w-1/3">
+        <ButtonGroup :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `});r.story={name:"Sample (2 buttons)"};const d=()=>({components:{ButtonGroup:a},data:()=>({options:[{value:"left",iconName:"maker-align-left",isSelected:!0},{value:"center",iconName:"maker-align-center"},{value:"right",iconName:"maker-align-right"}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+      <div class="tw-w-1/3">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `});d.story={name:"Sample (icons - alignment)"};const u=()=>({components:{ButtonGroup:a},data:()=>({options:[{value:"bold",iconName:"maker-bold",isSelected:!0},{value:"italic",iconName:"maker-italic"},{value:"underline",iconName:"maker-underline"},{value:"strikethrough",iconName:"maker-strikethrough"},{value:"spacing",iconName:"maker-spacing"},{value:"text color",iconName:"maker-text-color"},{value:"text background color",iconName:"maker-text-background-color"}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+      <div class="tw-w-1/3">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `});u.story={name:"Sample (icons - text style)"};const m=()=>({components:{ButtonGroup:a},data:()=>({options:[{value:"grid",iconName:"image-gallery-grid",isSelected:!0,title:"Grid",iconViewBox:"0 0 94 24"},{value:"carousel",iconName:"image-gallery-carousel",title:"Carousel",iconViewBox:"0 0 94 24"},{value:"masonry",iconName:"image-gallery-masonry",title:"Masonry",iconViewBox:"0 0 94 24"}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `});m.story={name:"Sample (icons - carousel style)"};const p=()=>({components:{ButtonGroup:a},data:()=>({options:[{value:"none",iconName:"icon-style-no-bg",isSelected:!0,title:"None",iconViewBox:"0 0 94 24"},{value:"square",iconName:"icon-style-square-bg",title:"Square",iconViewBox:"0 0 94 24"},{value:"circle",iconName:"icon-style-circle-bg",title:"Circle",iconViewBox:"0 0 94 24"}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `});p.story={name:"Sample (icons - display style)"};const w=()=>({components:{ButtonGroup:a},data:()=>({options:[{value:"centered",iconName:"banner-centered",title:"Centered",iconViewBox:"0 0 94 24",dataAttribute:"data-test-centered"},{value:"left",iconName:"banner-left",title:"Left aligned",iconViewBox:"0 0 94 24",dataAttribute:"data-test-left"}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `});w.story={name:"Sample (banner)"};const S=()=>({components:{ButtonGroup:a},data:()=>({options:[{value:"left",iconName:"text-image-left",isSelected:!0,title:"Left aligned",iconViewBox:"0 0 94 24"},{value:"right",iconName:"text-image-right",title:"Right aligned",iconViewBox:"0 0 94 24"},{value:"centered",iconName:"text-image-center",title:"Centered",iconViewBox:"0 0 94 24"},{value:"image-only",iconName:"text-image-only",title:"Image Only",iconViewBox:"0 0 94 24"}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" :columns="2" />
+      </div>
+    `});S.story={name:"Sample (text image)"};const v=()=>({components:{ButtonGroup:a},data:()=>({options:[{value:"left-aligned",iconName:"header-left",title:"Left Aligned",iconViewBox:"0 0 94 24"},{value:"centered",iconName:"header-centered",title:"Centered",iconViewBox:"0 0 94 24"}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `});v.story={name:"Sample (header align)"};const g=()=>({components:{ButtonGroup:a},data:()=>({options:[{src:"https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a-a1.svg",alt:"qrcode style a-a1",value:"line_a_a1",title:"a-a1",isSelected:!0},{src:"https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a-b1.svg",alt:"qrcode style a-b1",value:"dot_a_b1",title:"a-b1"},{src:"https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a2.svg",alt:"qrcode style a2",value:"dot_a2",title:"a2"}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+      <div class="tw-w-1/3">
+        <ButtonGroup variant="image" :options="options" @on-select="onButtonOptionSelected" :columns="3"/>
+      </div>
+    `});g.story={name:"Sample (3 images)"};const b=()=>({components:{ButtonGroup:a,Icon:V},data:()=>({options:[{value:"url",iconName:"globe",label:"URL",iconSize:"md",isSelected:!0},{value:"email",iconName:"maker-email",label:"Email",iconSize:"md",isSelected:!1},{value:"phone",iconName:"phone",label:"Phone",iconSize:"md",isSelected:!1},{value:"sms",iconName:"sms",label:"SMS",iconSize:"md",isSelected:!1},{value:"vCard",iconName:"business-card-filled",label:"VCard",iconSize:"md",isSelected:!1},{value:"calendar",iconName:"calendar",label:"Event",iconSize:"md",isSelected:!1}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="custom" :options="options" @on-select="onButtonOptionSelected" :columns="3">
+          <template #content="{ option }">
+          <div class="tw-text-secondary-500">
+            <Icon :name="option.iconName" :size="option.iconSize" />
+            <p
+              v-if="option.label"
+              class="tw-w-full tw-text-center tw-font-bold tw-font-sans tw-text-sm tw-mb-0 tw-mt-1"
+            >
+              {{ option.label }}
+            </p>
+          </div>
+        </template>
+        </ButtonGroup>
+      </div>
+    `});b.story={name:"Sample Custom"};const B=()=>({components:{ButtonGroup:a,Icon:V},data:()=>({options:[{value:"url",iconName:"column-1",label:"1",iconSize:"md",isSelected:!0},{value:"email",iconName:"column-2",label:"2",iconSize:"md",isSelected:!1},{value:"phone",iconName:"column-3",label:"3",iconSize:"md",isSelected:!1},{value:"sms",iconName:"column-4",label:"4",iconSize:"md",isSelected:!1}]}),methods:{onButtonOptionSelected(t){console.log("Button Option Selected",t)}},template:`
+    <div class="tw-w-full">
+      <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+    </div>
+    `});B.story={name:"Sample Column"};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup
+    },
+    data: () => ({
+      options: [{
+        label: 'Small',
+        value: 'small',
+        isSelected: true
+      }, {
+        label: 'Medium',
+        value: 'medium',
+        disabled: true
+      }, {
+        label: 'Large',
+        value: 'large'
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+      <div class="tw-w-1/3">
+        <ButtonGroup :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    \`
+  };
+}`,...c.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup
+    },
+    data: () => ({
+      options: [{
+        label: 'Option 1',
+        value: 'option1',
+        isSelected: true
+      }, {
+        label: 'Option 2',
+        value: 'option2'
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+      <div class="tw-w-1/3">
+        <ButtonGroup :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    \`
+  };
+}`,...r.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup
+    },
+    data: () => ({
+      options: [{
+        value: 'left',
+        iconName: 'maker-align-left',
+        isSelected: true
+      }, {
+        value: 'center',
+        iconName: 'maker-align-center'
+      }, {
+        value: 'right',
+        iconName: 'maker-align-right'
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+      <div class="tw-w-1/3">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    \`
+  };
+}`,...d.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup
+    },
+    data: () => ({
+      options: [{
+        value: 'bold',
+        iconName: 'maker-bold',
+        isSelected: true
+      }, {
+        value: 'italic',
+        iconName: 'maker-italic'
+      }, {
+        value: 'underline',
+        iconName: 'maker-underline'
+      }, {
+        value: 'strikethrough',
+        iconName: 'maker-strikethrough'
+      }, {
+        value: 'spacing',
+        iconName: 'maker-spacing'
+      }, {
+        value: 'text color',
+        iconName: 'maker-text-color'
+      }, {
+        value: 'text background color',
+        iconName: 'maker-text-background-color'
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+      <div class="tw-w-1/3">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    \`
+  };
+}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup
+    },
+    data: () => ({
+      options: [{
+        value: 'grid',
+        iconName: 'image-gallery-grid',
+        isSelected: true,
+        title: 'Grid',
+        iconViewBox: '0 0 94 24'
+      }, {
+        value: 'carousel',
+        iconName: 'image-gallery-carousel',
+        title: 'Carousel',
+        iconViewBox: '0 0 94 24'
+      }, {
+        value: 'masonry',
+        iconName: 'image-gallery-masonry',
+        title: 'Masonry',
+        iconViewBox: '0 0 94 24'
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    \`
+  };
+}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup
+    },
+    data: () => ({
+      options: [{
+        value: 'none',
+        iconName: 'icon-style-no-bg',
+        isSelected: true,
+        title: 'None',
+        iconViewBox: '0 0 94 24'
+      }, {
+        value: 'square',
+        iconName: 'icon-style-square-bg',
+        title: 'Square',
+        iconViewBox: '0 0 94 24'
+      }, {
+        value: 'circle',
+        iconName: 'icon-style-circle-bg',
+        title: 'Circle',
+        iconViewBox: '0 0 94 24'
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    \`
+  };
+}`,...p.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup
+    },
+    data: () => ({
+      options: [{
+        value: 'centered',
+        iconName: 'banner-centered',
+        title: 'Centered',
+        iconViewBox: '0 0 94 24',
+        dataAttribute: 'data-test-centered'
+      }, {
+        value: 'left',
+        iconName: 'banner-left',
+        title: 'Left aligned',
+        iconViewBox: '0 0 94 24',
+        dataAttribute: 'data-test-left'
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    \`
+  };
+}`,...w.parameters?.docs?.source}}};S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup
+    },
+    data: () => ({
+      options: [{
+        value: 'left',
+        iconName: 'text-image-left',
+        isSelected: true,
+        title: 'Left aligned',
+        iconViewBox: '0 0 94 24'
+      }, {
+        value: 'right',
+        iconName: 'text-image-right',
+        title: 'Right aligned',
+        iconViewBox: '0 0 94 24'
+      }, {
+        value: 'centered',
+        iconName: 'text-image-center',
+        title: 'Centered',
+        iconViewBox: '0 0 94 24'
+      }, {
+        value: 'image-only',
+        iconName: 'text-image-only',
+        title: 'Image Only',
+        iconViewBox: '0 0 94 24'
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" :columns="2" />
+      </div>
+    \`
+  };
+}`,...S.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup
+    },
+    data: () => ({
+      options: [{
+        value: 'left-aligned',
+        iconName: 'header-left',
+        title: 'Left Aligned',
+        iconViewBox: '0 0 94 24'
+      }, {
+        value: 'centered',
+        iconName: 'header-centered',
+        title: 'Centered',
+        iconViewBox: '0 0 94 24'
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    \`
+  };
+}`,...v.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup
+    },
+    data: () => ({
+      options: [{
+        src: 'https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a-a1.svg',
+        alt: 'qrcode style a-a1',
+        value: 'line_a_a1',
+        title: 'a-a1',
+        isSelected: true
+      }, {
+        src: 'https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a-b1.svg',
+        alt: 'qrcode style a-b1',
+        value: 'dot_a_b1',
+        title: 'a-b1'
+      }, {
+        src: 'https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a2.svg',
+        alt: 'qrcode style a2',
+        value: 'dot_a2',
+        title: 'a2'
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+      <div class="tw-w-1/3">
+        <ButtonGroup variant="image" :options="options" @on-select="onButtonOptionSelected" :columns="3"/>
+      </div>
+    \`
+  };
+}`,...g.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup,
+      Icon
+    },
+    data: () => ({
+      options: [{
+        value: 'url',
+        iconName: 'globe',
+        label: 'URL',
+        iconSize: 'md',
+        isSelected: true
+      }, {
+        value: 'email',
+        iconName: 'maker-email',
+        label: 'Email',
+        iconSize: 'md',
+        isSelected: false
+      }, {
+        value: 'phone',
+        iconName: 'phone',
+        label: 'Phone',
+        iconSize: 'md',
+        isSelected: false
+      }, {
+        value: 'sms',
+        iconName: 'sms',
+        label: 'SMS',
+        iconSize: 'md',
+        isSelected: false
+      }, {
+        value: 'vCard',
+        iconName: 'business-card-filled',
+        label: 'VCard',
+        iconSize: 'md',
+        isSelected: false
+      }, {
+        value: 'calendar',
+        iconName: 'calendar',
+        label: 'Event',
+        iconSize: 'md',
+        isSelected: false
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="custom" :options="options" @on-select="onButtonOptionSelected" :columns="3">
+          <template #content="{ option }">
+          <div class="tw-text-secondary-500">
+            <Icon :name="option.iconName" :size="option.iconSize" />
+            <p
+              v-if="option.label"
+              class="tw-w-full tw-text-center tw-font-bold tw-font-sans tw-text-sm tw-mb-0 tw-mt-1"
+            >
+              {{ option.label }}
+            </p>
+          </div>
+        </template>
+        </ButtonGroup>
+      </div>
+    \`
+  };
+}`,...b.parameters?.docs?.source}}};B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      ButtonGroup,
+      Icon
+    },
+    data: () => ({
+      options: [{
+        value: 'url',
+        iconName: 'column-1',
+        label: '1',
+        iconSize: 'md',
+        isSelected: true
+      }, {
+        value: 'email',
+        iconName: 'column-2',
+        label: '2',
+        iconSize: 'md',
+        isSelected: false
+      }, {
+        value: 'phone',
+        iconName: 'column-3',
+        label: '3',
+        iconSize: 'md',
+        isSelected: false
+      }, {
+        value: 'sms',
+        iconName: 'column-4',
+        label: '4',
+        iconSize: 'md',
+        isSelected: false
+      }]
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      }
+    },
+    template: \`
+    <div class="tw-w-full">
+      <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+    </div>
+    \`
+  };
+}`,...B.parameters?.docs?.source}}};const Z=["Sample","SampleTwoButtons","SampleIconsAlignment","SampleIconsTextStyle","SampleIconsCarouselStyle","SampleIconsDisplayStyle","SampleIconsBanner","SampleIconsTextImage","SampleHeaderAlign","SampleImages","SampleCustom","SampleColumn"];export{c as Sample,B as SampleColumn,b as SampleCustom,v as SampleHeaderAlign,d as SampleIconsAlignment,w as SampleIconsBanner,m as SampleIconsCarouselStyle,p as SampleIconsDisplayStyle,S as SampleIconsTextImage,u as SampleIconsTextStyle,g as SampleImages,r as SampleTwoButtons,Z as __namedExportsOrder,Y as default};

package/.storybook-static/assets/ButtonPrimary-Bu6bXb_c.css

@@ -0,0 +1 @@
+.no-rounded-l[data-v-838c2b9b]{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.no-rounded-r[data-v-838c2b9b]{border-top-right-radius:0!important;border-bottom-right-radius:0!important}

package/.storybook-static/assets/ButtonPrimary-BvWW6Duz.js

@@ -0,0 +1 @@
+import{c as n,f as l,m as u,o as r}from"./iframe-B3A6OXQU.js";import{_ as o}from"./_plugin-vue_export-helper-DlAUqK2U.js";const i={props:{attrs:{type:Object,required:!1,default:()=>({})},classes:{type:[String,Object],required:!1,default:""},disabled:{type:Boolean,required:!1,default:!1},isBusy:{type:Boolean,required:!1,default:!1},download:{type:String,required:!1,default:void 0},size:{type:String,required:!1,default:null},url:{type:String,required:!1,default:null},icon:{type:String,required:!1,default:null},iconViewBox:{type:String,required:!1,default:null},fullWidth:{type:Boolean,required:!1,default:!1},fullHeight:{type:Boolean,required:!1,default:!1},onClick:{type:Function,required:!1,default:null},rounded:{type:Boolean,required:!0},roundedLeft:{type:Boolean,required:!0},roundedRight:{type:Boolean,required:!0},roundedSmall:{type:Boolean,required:!1,default:!1},active:{type:Boolean,required:!1,default:!1},target:{type:String,required:!1,default:"_self"},type:{type:String,required:!1,default:void 0}},data(){return{commonUrlButtonClasses:""}},computed:{computedUrl(){return this.disabled?"javascript:":this.url},computedClasses(){return{"tw-text-xs tw-py-1 tw-px-2":this.size==="small","tw-text-xs tw-py-2 tw-px-5":this.size==="small-wide","tw-text-sm tw-py-1.5 tw-px-4":this.size==="small-medium","tw-text-sm tw-py-3 tw-px-4":!this.size||this.size==="medium","tw-text-base tw-py-4 tw-px-8":this.size==="large","tw-w-full":this.fullWidth,"tw-h-full":this.fullHeight,"tw-rounded":this.rounded&&!this.roundedSmall,"tw-rounded-l":this.roundedLeft,"tw-rounded-r":this.roundedRight,"tw-rounded-sm":this.roundedSmall,"tw-rounded-l-none":!this.rounded&&!this.roundedLeft,"tw-rounded-r-none":!this.rounded&&!this.roundedRight}}}};i.__docgenInfo={exportName:"default",displayName:"ButtonVariant.mixin",description:"",tags:{},props:[{name:"attrs",type:{name:"object"},required:!1,defaultValue:{func:!1,value:"{}"}},{name:"classes",type:{name:"string|object"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"disabled",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"isBusy",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"download",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"size",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"url",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"icon",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"iconViewBox",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"fullWidth",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"fullHeight",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"onClick",type:{name:"func"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"rounded",type:{name:"boolean"},required:!0},{name:"roundedLeft",type:{name:"boolean"},required:!0},{name:"roundedRight",type:{name:"boolean"},required:!0},{name:"roundedSmall",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"active",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"target",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'_self'"}},{name:"type",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}}],sourceFiles:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/Button/ButtonVariant.mixin.vue"]};const s={mixins:[i]},d=["disabled","type"],f=["href","download","target"];function m(e,a,p,y,w,c){return e.url?(r(),n("a",u({key:1,href:e.computedUrl,class:["tw-justify-center tw-font-sans tw-inline-flex tw-border-2 tw-font-bold tw-text-white tw-uppercase tw-border-solid tw-transition-colors tw-duration-300 tw-no-underline",[e.commonUrlButtonClasses,e.classes,e.computedClasses,{"no-rounded-l":!e.rounded&&!e.roundedLeft,"no-rounded-r":!e.rounded&&!e.roundedRight,"tw-cursor-pointer tw-bg-primary-500 tw-border-primary-500 hover:tw-border-primary-700 hover:tw-bg-primary-600":!e.disabled,"tw-bg-primary-300 tw-border-primary-300 tw-cursor-not-allowed":e.disabled,"tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600":e.isBusy}]],download:e.download},e.attrs,{target:e.target,onClick:a[1]||(a[1]=(...t)=>e.onClick&&e.onClick(...t))}),[l(e.$slots,"default",{},void 0,!0)],16,f)):(r(),n("button",u({key:0,class:["tw-font-sans tw-border-2 tw-font-bold tw-text-white tw-uppercase tw-border-solid tw-transition-colors tw-duration-300",[e.classes,e.computedClasses,{"no-rounded-l":!e.rounded&&!e.roundedLeft,"no-rounded-r":!e.rounded&&!e.roundedRight,"tw-cursor-pointer tw-bg-primary-500 tw-border-primary-500 hover:tw-border-primary-700 hover:tw-bg-primary-600":!e.disabled,"tw-bg-primary-300 tw-border-primary-300 tw-cursor-not-allowed":e.disabled,"tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600":e.isBusy}]],disabled:e.disabled,type:e.type},e.attrs,{onClick:a[0]||(a[0]=(...t)=>e.onClick&&e.onClick(...t))}),[l(e.$slots,"default",{},void 0,!0)],16,d))}const B=o(s,[["render",m],["__scopeId","data-v-838c2b9b"]]);s.__docgenInfo={exportName:"default",displayName:"ButtonPrimary",description:"",tags:{},props:[{name:"attrs",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"object"},required:!1,defaultValue:{func:!1,value:"{}"}},{name:"classes",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"string|object"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"disabled",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"isBusy",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"download",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"size",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"url",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"icon",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"iconViewBox",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"fullWidth",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"fullHeight",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"onClick",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"func"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"rounded",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"boolean"},required:!0},{name:"roundedLeft",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"boolean"},required:!0},{name:"roundedRight",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"boolean"},required:!0},{name:"roundedSmall",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"active",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"target",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'_self'"}},{name:"type",mixin:{name:"ButtonVariant.mixin",path:"../ButtonVariant.mixin.vue"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"default"}],sourceFiles:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/Button/ButtonVariant.mixin.vue","/home/zknowles/repos/fe-shared-lib/src/atoms/components/Button/variants/ButtonPrimary.vue"]};export{B,i as _};