@designcrowd/fe-shared-lib 1.0.0-test-publish

package/.storybook-static/assets/Dropdown.stories-URhoPzyZ.js

@@ -0,0 +1,154 @@
+import{D as n,a as r}from"./DropdownItem-DhJH7ViO.js";import{P as a}from"./Pill-C7qxntuo.js";import{B as M}from"./Button-C9BkIo_w.js";import"./Icon-CLd6chSw.js";import"./vue.esm-bundler-BuzEyh6o.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-BD3XC-26.js";const k={title:"Components/Dropdown",component:n},e=()=>({components:{Dropdown:n,DropdownItem:r,Pill:a},template:`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right">
+          <DropdownItem>
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `}),t=()=>({components:{Dropdown:n,DropdownItem:r},template:`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" disabled>
+          <DropdownItem>
+            <span>Menu item 1</span>
+          </DropdownItem>
+          <DropdownItem>
+            <span>Menu item 2</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `}),o=()=>({components:{Dropdown:n,DropdownItem:r,Pill:a},template:`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto">
+          <DropdownItem v-for="(item, i) in items" :key="i">
+            <span class="tw-grow">{{ item.display }}</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `,setup(){return{items:[{display:"Menu 1"},{display:"Menu 2"},{display:"Menu 3"},{display:"Menu 4"},{display:"Menu 5"},{display:"Menu 6"},{display:"Menu 7"},{display:"Menu 8"},{display:"Menu 9"},{display:"Menu 10"}]}}}),s=()=>({components:{Dropdown:n,DropdownItem:r,Button:M,Pill:a},template:`
+      <div class="tw-flex tw-gap-2 tw-m-4">
+        <Dropdown menu-align="right" element-classes="tw-h-12">
+          <DropdownItem>
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+        <Button label="Submit" variant="primary">Button</Button>
+      </div>
+    `});var p,l,i;e.parameters={...e.parameters,docs:{...(p=e.parameters)==null?void 0:p.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Pill
+    },
+    template: \`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right">
+          <DropdownItem>
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    \`
+  };
+}`,...(i=(l=e.parameters)==null?void 0:l.docs)==null?void 0:i.source}}};var d,w,m;t.parameters={...t.parameters,docs:{...(d=t.parameters)==null?void 0:d.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem
+    },
+    template: \`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" disabled>
+          <DropdownItem>
+            <span>Menu item 1</span>
+          </DropdownItem>
+          <DropdownItem>
+            <span>Menu item 2</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    \`
+  };
+}`,...(m=(w=t.parameters)==null?void 0:w.docs)==null?void 0:m.source}}};var u,c,D;o.parameters={...o.parameters,docs:{...(u=o.parameters)==null?void 0:u.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Pill
+    },
+    template: \`
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto">
+          <DropdownItem v-for="(item, i) in items" :key="i">
+            <span class="tw-grow">{{ item.display }}</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    \`,
+    setup() {
+      return {
+        items: [{
+          display: 'Menu 1'
+        }, {
+          display: 'Menu 2'
+        }, {
+          display: 'Menu 3'
+        }, {
+          display: 'Menu 4'
+        }, {
+          display: 'Menu 5'
+        }, {
+          display: 'Menu 6'
+        }, {
+          display: 'Menu 7'
+        }, {
+          display: 'Menu 8'
+        }, {
+          display: 'Menu 9'
+        }, {
+          display: 'Menu 10'
+        }]
+      };
+    }
+  };
+}`,...(D=(c=o.parameters)==null?void 0:c.docs)==null?void 0:D.source}}};var g,y,I;s.parameters={...s.parameters,docs:{...(g=s.parameters)==null?void 0:g.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Button,
+      Pill
+    },
+    template: \`
+      <div class="tw-flex tw-gap-2 tw-m-4">
+        <Dropdown menu-align="right" element-classes="tw-h-12">
+          <DropdownItem>
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+        <Button label="Submit" variant="primary">Button</Button>
+      </div>
+    \`
+  };
+}`,...(I=(y=s.parameters)==null?void 0:y.docs)==null?void 0:I.source}}};const S=["Sample","Disabled","LongListFixedHeight","SampleElementClasses"];export{t as Disabled,o as LongListFixedHeight,e as Sample,s as SampleElementClasses,S as __namedExportsOrder,k as default};

package/.storybook-static/assets/DropdownItem-BQ0eJTHo.css

@@ -0,0 +1 @@
+.drop-down-item[data-v-8a394163]:hover{background-color:#eee}

package/.storybook-static/assets/DropdownItem-DhJH7ViO.js

@@ -0,0 +1 @@
+import{I as p}from"./Icon-CLd6chSw.js";import{c as r,a as l,r as o,i as g,n as i,x as h,y as b,g as y,o as d,j as v,t as _}from"./vue.esm-bundler-BuzEyh6o.js";import{_ as u}from"./_plugin-vue_export-helper-DlAUqK2U.js";const c={components:{Icon:p},props:{menuAlign:{type:String,default:"right"},title:{type:String,required:!1,default:void 0},elementClasses:{type:String,required:!1,default:""},menuElementClasses:{type:String,required:!1,default:""},disabled:{type:Boolean,required:!1,default:!1}},data:()=>({isMenuVisible:!1}),computed:{menuItems(){return(this.$slots.default||[]).filter(e=>e.tag)}},methods:{onToggleMenu(){this.isMenuVisible=!this.isMenuVisible},hideMenu(){this.isMenuVisible=!1},showMenu(){this.isMenuVisible=!0}}},V={class:"tw-relative tw-inline-block tw-w-full"},k={class:"tw-text-left tw-flex-auto tw-pl-3"},C={class:"tw-py-1"};function x(e,s,t,f,w,n){const a=y("Icon");return d(),r("div",V,[l("div",{class:i(["tw-bg-white tw-border tw-border-grayscale-500 tw-border-solid tw-h-10 tw-flex tw-items-center tw-rounded tw-text-md tw-w-full",[t.elementClasses,t.disabled&&"tw-opacity-40 tw-cursor-not-allowed"]]),onClick:s[0]||(s[0]=()=>!t.disabled&&n.onToggleMenu())},[l("div",k,[o(e.$slots,"title",{},()=>[v(_(t.title),1)])]),g(a,{name:e.isMenuVisible?"chevron-up":"chevron-down",class:"tw-pt-1 tw-pr-2 tw-flex-none",color:"secondary-500",size:"sm"},null,8,["name"])],2),h(l("div",{class:i(["tw-origin-top-right tw-absolute tw-left-0 tw-mt-2 tw-w-full tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5",[t.menuElementClasses,{"tw-right-0":t.menuAlign==="right","tw-left-0":t.menuAlign!=="right"}]])},[l("div",C,[o(e.$slots,"default")])],2),[[b,e.isMenuVisible]])])}const N=u(c,[["render",x]]);c.__docgenInfo={exportName:"default",displayName:"Dropdown",description:"",tags:{},props:[{name:"menuAlign",type:{name:"string"},defaultValue:{func:!1,value:"'right'"}},{name:"title",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"elementClasses",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"menuElementClasses",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"disabled",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],slots:[{name:"title"},{name:"default"}],sourceFiles:["/Users/brooke.couchman/Projects/bc-shared-experience-library/src/atoms/components/Dropdown/Dropdown.vue"]};const m={methods:{onClick(){this.$emit("click")}}};function D(e,s,t,f,w,n){return d(),r("div",{class:"tw-flex tw-items-center tw-px-2 tw-py-2 drop-down-item tw-cursor-pointer",onClick:s[0]||(s[0]=(...a)=>n.onClick&&n.onClick(...a))},[o(e.$slots,"default",{},void 0,!0)])}const S=u(m,[["render",D],["__scopeId","data-v-8a394163"]]);m.__docgenInfo={exportName:"default",displayName:"DropdownItem",description:"",tags:{},events:[{name:"click"}],slots:[{name:"default"}],sourceFiles:["/Users/brooke.couchman/Projects/bc-shared-experience-library/src/atoms/components/Dropdown/DropdownItem.vue"]};export{N as D,S as a};

package/.storybook-static/assets/FormControl.mixin-BBDP7qRp.js

@@ -0,0 +1 @@
+import{I as a}from"./Icon-CLd6chSw.js";const l=32,i={components:{Icon:a},props:{attrs:{type:Object,required:!1,default:()=>{}},modelValue:{type:[String,Number],required:!1,default:""},id:{type:String,required:!1,default:void 0},placeholder:{type:String,required:!1,default:void 0},size:{type:String,required:!1,default:"sm"},label:{type:String,required:!1,default:void 0},showLabelScreenReaderOnly:{type:Boolean,required:!1,default:!1},icon:{type:String,required:!1,default:void 0},required:{type:Boolean,required:!1,default:!1},error:{type:Boolean,required:!1,default:!1},warning:{type:Boolean,required:!1,default:!1},success:{type:Boolean,required:!1,default:!1},disabled:{type:Boolean,required:!1,default:!1},readonly:{type:Boolean,required:!1,default:!1},name:{type:String,required:!1,default:void 0},maxlength:{type:Number,required:!1,default:void 0},minlength:{type:Number,required:!1,default:void 0},isSpaceDisabled:{type:Boolean,required:!1,default:!1}},methods:{input(e){this.$emit("update:modelValue",e),this.$emit("input",e)},keyup(e){this.$emit("keyup",e)},keydown(e,t){if(this.isSpaceDisabled&&t.which===l){t.preventDefault();return}this.$emit("keydown",e)},focus(e){this.$emit("focus",e)},blur(e){this.$emit("blur",e)},enterKeyUp(e){this.$emit("enter-key-up",e)}}};export{i as F};

package/.storybook-static/assets/HashRouteModal.stories-DRXQEHa8.js

@@ -0,0 +1,64 @@
+import{D as k,b as V,C as n,g as q,o as B,r as l}from"./vue.esm-bundler-BuzEyh6o.js";import{M as S}from"./Modal-BLdvoK5M.js";import{_ as x}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{B as _}from"./Button-C9BkIo_w.js";import"./Icon-CLd6chSw.js";import"./ButtonPrimary-BD3XC-26.js";/*!
+  * vue-router v4.2.5
+  * (c) 2023 Eduardo San Martin Morote
+  * @license MIT
+  */var u;(function(e){e.pop="pop",e.push="push"})(u||(u={}));var d;(function(e){e.back="back",e.forward="forward",e.unknown=""})(d||(d={}));var c;(function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"})(c||(c={}));const C=Symbol("");function g(){return k(C)}const z="#",r="|",j=/[#|]/,E=(e,a)=>`#${e.replace(z,"").split(r).filter(o=>o).concat(a).join(r)}`,O={props:{isHashRouteEnabled:{type:Boolean,required:!1,default:!1}},data:()=>({removeHookFunc:void 0}),mounted(){!this.isHashRouteEnabled||!this.$router||typeof this.onHashRouteChange!="function"||(this.removeHookFunc=this.$router.afterEach((e,a)=>{const o=a.hash.split(e.hash).join("").replace(j,"");this.onHashRouteChange(o)}))},unmounted(){this.removeHookFunc&&(this.removeHookFunc(),this.removeHookFunc=void 0)},methods:{hashRoutePush(e){if(!this.isHashRouteEnabled||!this.$router)return;const a=E(this.$router.currentRoute.value.hash,e);this.$router.push({hash:a})},hashRouteBack(e){!this.isHashRouteEnabled||!this.$router||this.$router.currentRoute.value.hash.split(r).filter(a=>a.indexOf(e)>-1).length!==0&&this.$router.back()}}},y={components:{Modal:S},mixins:[O],props:{simple:{type:Boolean,required:!1,default:!1},removeHorizontalMargin:{type:Boolean,required:!1,default:!1},visible:{type:Boolean,required:!1,default:!1},mandatory:{type:Boolean,required:!1,default:!1},mode:{type:String,required:!1,default:void 0},classes:{type:[String,Object],required:!1,default:""},size:{type:String,required:!1,default:void 0},fullScreenBreakpoint:{type:String,required:!1,default:void 0},closeOnEsc:{type:Boolean,required:!1,default:!1},hideScrollbar:{type:Boolean,required:!1,default:!0}},computed:{modalTag(){return`modal-${this.$.uid}`}},watch:{visible(e){e&&!this.mandatory&&this.hashRoutePush(this.modalTag)}},mounted(){this.visible&&!this.mandatory&&this.hashRoutePush(this.modalTag)},methods:{onHashRouteChange(e){e!==this.modalTag||!this.visible||this.$emit("close-modal",{})},onCloseModal(e){this.hashRouteBack(this.modalTag),this.$emit("close-modal",e)}}};function $(e,a,o,L,P,R){const H=q("Modal");return B(),V(H,{simple:o.simple,"remove-horizontal-margin":o.removeHorizontalMargin,visible:o.visible,mandatory:o.mandatory,mode:o.mode,classes:o.classes,size:o.size,"full-screen-breakpoint":o.fullScreenBreakpoint,"close-on-esc":o.closeOnEsc,"hide-scrollbar":o.hideScrollbar,onCloseModal:R.onCloseModal},{header:n(()=>[l(e.$slots,"header")]),default:n(()=>[l(e.$slots,"default")]),footer:n(()=>[l(e.$slots,"footer")]),_:3},8,["simple","remove-horizontal-margin","visible","mandatory","mode","classes","size","full-screen-breakpoint","close-on-esc","hide-scrollbar","onCloseModal"])}const i=x(y,[["render",$]]);y.__docgenInfo={exportName:"default",displayName:"HashRouteModal",description:"",tags:{},props:[{name:"isHashRouteEnabled",mixin:{name:"hash-router-mixin",path:"../../mixin/hash-router-mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"simple",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"removeHorizontalMargin",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"visible",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"mandatory",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"mode",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"classes",type:{name:"string|object"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"size",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"fullScreenBreakpoint",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"closeOnEsc",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"hideScrollbar",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}}],events:[{name:"close-modal",type:{names:["undefined"]}}],slots:[{name:"header"},{name:"default"},{name:"footer"}],sourceFiles:["/Users/brooke.couchman/Projects/bc-shared-experience-library/src/atoms/components/Modal/HashRouteModal.vue","/Users/brooke.couchman/Projects/bc-shared-experience-library/src/atoms/mixin/hash-router-mixin.js"]};const A={title:"Components/Hash Router Modal",component:i},M={isVisible:!0},s=(e,{argTypes:a})=>{const o=g();return{components:{HashRouteModal:i},props:Object.keys(a),template:`
+      <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
+      Your component goes here
+      </HashRouteModal>
+    `,methods:{closeLoginModal(){this.isVisible=!1}},router:o}};s.args=M;const t=()=>{const e=g();return{components:{HashRouteModal:i,Button:_},data(){return{isVisible:!1}},template:`
+      <div>
+        <Button size="medium" variant="primary" label="Click Me" @on-click="isVisible = true" />
+        <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+        </HashRouteModal>
+      </div>
+    `,methods:{closeLoginModal(){this.isVisible=!1}},router:e}};t.args=M;var m,f,h;s.parameters={...s.parameters,docs:{...(m=s.parameters)==null?void 0:m.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  const router = useRouter();
+  return {
+    components: {
+      HashRouteModal
+    },
+    props: Object.keys(argTypes),
+    template: \`
+      <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
+      Your component goes here
+      </HashRouteModal>
+    \`,
+    methods: {
+      closeLoginModal() {
+        this.isVisible = false;
+      }
+    },
+    router
+  };
+}`,...(h=(f=s.parameters)==null?void 0:f.docs)==null?void 0:h.source}}};var p,b,v;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`() => {
+  const router = useRouter();
+  return {
+    components: {
+      HashRouteModal,
+      Button
+    },
+    data() {
+      return {
+        isVisible: false
+      };
+    },
+    template: \`
+      <div>
+        <Button size="medium" variant="primary" label="Click Me" @on-click="isVisible = true" />
+        <HashRouteModal :visible="isVisible" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+        </HashRouteModal>
+      </div>
+    \`,
+    methods: {
+      closeLoginModal() {
+        this.isVisible = false;
+      }
+    },
+    router
+  };
+}`,...(v=(b=t.parameters)==null?void 0:b.docs)==null?void 0:v.source}}};const D=["Sample","OpenWithButton"];export{t as OpenWithButton,s as Sample,D as __namedExportsOrder,A as default};

package/.storybook-static/assets/HelloBar-DtIRdNgP.js

@@ -0,0 +1 @@
+import{I as g}from"./Icon-CLd6chSw.js";import{c as l,a as w,b as i,n as r,e as n,t as u,F as o,f as y,r as v,g as b,o as a}from"./vue.esm-bundler-BuzEyh6o.js";import{_ as x}from"./_plugin-vue_export-helper-DlAUqK2U.js";const m={components:{Icon:g},props:{label:{type:[String,Array],required:!0},description:{type:String,required:!1,default:void 0},variant:{type:String,required:!1,default:"success"},fontSize:{type:String,required:!1,default:"base"}},computed:{hasCtaSlot(){return!!this.$slots.cta},fontSizeClass(){return`tw-text-${this.fontSize}`}},methods:{isArray(c){return c instanceof Array}}},h={class:"lg:tw-mr-8"},S={key:0,class:"tw-flex-none"};function _(c,k,e,z,A,t){const s=b("Icon");return a(),l("div",{class:r(["tw-font-sans tw-py-3 tw-px-6 tw-rounded",{"tw-bg-info-500":e.variant==="info","tw-bg-error-500":e.variant==="error","tw-bg-success-500":e.variant==="success","tw-bg-warning-500":e.variant==="warning","tw-text-white":e.variant!=="warning","tw-text-grayscale-800":e.variant==="warning"}])},[w("div",{class:r(["tw-flex",{"tw-items-start":e.description||t.isArray(e.label),"tw-items-center":!e.description&&!t.isArray(e.label)}])},[e.variant==="success"?(a(),i(s,{key:0,name:"callout-success",size:"md",class:r(["tw-mr-4 tw-flex tw-items-center",{"tw-mt-1":t.isArray(e.label)}])},null,8,["class"])):n("",!0),e.variant==="warning"?(a(),i(s,{key:1,name:"callout-warning",size:"md",class:r(["tw-mr-4 tw-flex tw-items-center",{"tw-mt-1":t.isArray(e.label)}])},null,8,["class"])):n("",!0),e.variant==="error"?(a(),i(s,{key:2,name:"callout-error",size:"md",class:r(["tw-mr-4 tw-flex tw-items-center",{"tw-mt-1":t.isArray(e.label)}])},null,8,["class"])):n("",!0),e.variant==="info"?(a(),i(s,{key:3,name:"callout-info",size:"md",class:r(["tw-mr-4 tw-flex tw-items-center",{"tw-mt-1":t.isArray(e.label)}])},null,8,["class"])):n("",!0),w("div",{class:r(["tw-w-full tw-flex tw-flex-col lg:tw-flex-row",{"lg:tw-items-center tw-justify-between":t.hasCtaSlot}])},[w("div",h,[t.isArray(e.label)?n("",!0):(a(),l("p",{key:0,class:r(["tw-m-0 tw-leading-tight",[t.fontSizeClass,{"tw-font-bold tw-mb-1":e.description,"tw-text-grayscale-800":e.variant==="warning","tw-text-white":e.variant!=="warning"}]])},u(e.label),3)),t.isArray(e.label)?(a(),l("ul",{key:1,class:r(["tw-m-0 tw-leading-tight tw-ml-4 tw-pl-0",[t.fontSizeClass,{"tw-text-grayscale-800":e.variant==="warning","tw-text-white":e.variant!=="warning"}]])},[(a(!0),l(o,null,y(e.label,(d,f)=>(a(),l("li",{key:f},u(d),1))),128))],2)):n("",!0),e.description?(a(),l("p",{key:2,class:r(["tw-m-0 tw-leading-tight tw-mb-2 lg:tw-mb-0",[t.fontSizeClass,{"tw-text-white":e.variant!=="warning","tw-text-grayscale-600":e.variant==="warning"}]])},u(e.description),3)):n("",!0)]),t.hasCtaSlot?(a(),l("div",S,[v(c.$slots,"cta")])):n("",!0)],2)],2)],2)}const H=x(m,[["render",_]]);m.__docgenInfo={exportName:"default",displayName:"HelloBar",description:"",tags:{},props:[{name:"label",type:{name:"string|array"},required:!0},{name:"description",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"variant",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'success'"}},{name:"fontSize",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'base'"}}],slots:[{name:"cta"}],sourceFiles:["/Users/brooke.couchman/Projects/bc-shared-experience-library/src/atoms/components/HelloBar/HelloBar.vue"]};export{H};

package/.storybook-static/assets/HelloBar.stories-DC9quWiP.js

@@ -0,0 +1,342 @@
+import{B as w}from"./Button-C9BkIo_w.js";import{H as o}from"./HelloBar-DtIRdNgP.js";import"./ButtonPrimary-BD3XC-26.js";import"./vue.esm-bundler-BuzEyh6o.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-CLd6chSw.js";const f={title:"Components/HelloBar",component:o},t=()=>({components:{Button:w,HelloBar:o},methods:{doSomething(){alert("I'm doing something")}},template:`
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">HelloBar</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="info" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="error" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="error" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" label="Lorem ipsum dolor sit amet" description="consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" label="" description="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="warning" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="warning" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar
+                variant="warning"
+                label="Logo image is low quality"
+                description="Your file is too small, make sure to upload at least 1000 x 1000px file to ensure the quality of your design."
+              >
+                <template v-slot:cta>
+                  <Button
+                    label="Replace logo"
+                    size="small"
+                    variant="secondary"
+                    @on-click="doSomething"
+                  />
+                </template>
+              </HelloBar>
+            </td>
+            <td class="tw-p-4" width="200">
+              <pre class="tw-block tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+&#x3C;HelloBar
+  variant=&#x22;warning&#x22;
+  label=&#x22;Logo image is low quality&#x22;
+  description=&#x22;Your file is too small.&#x22;
+&#x3E;
+  &#x3C;template v-slot:cta&#x3E;
+    &#x3C;Button
+      label=&#x22;Replace logo&#x22;
+      size=&#x22;small&#x22;
+      variant=&#x22;secondary&#x22;
+      @on-click=&#x22;doSomething&#x22;
+    /&#x3E;
+  &#x3C;/template&#x3E;
+&#x3C;/HelloBar&#x3E;</pre>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar label="Small font" font-size="sm" variant="info" description="This hello bar has smaller font." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" label="Small font" description="This hello bar has smaller font." /&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `}),e=()=>({components:{Button:w,HelloBar:o},data(){return{messages:["This is the first message","This is the second message","This is the third message"]}},template:`
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">HelloBar</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="info" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="error" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="error" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="warning" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="warning" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `});var a,r,l;t.parameters={...t.parameters,docs:{...(a=t.parameters)==null?void 0:a.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Button,
+      HelloBar
+    },
+    methods: {
+      doSomething() {
+        // eslint-disable-next-line no-alert
+        alert("I'm doing something");
+      }
+    },
+    template: \`
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">HelloBar</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="info" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="error" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="error" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" label="Lorem ipsum dolor sit amet" description="consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" label="" description="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="warning" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="warning" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar
+                variant="warning"
+                label="Logo image is low quality"
+                description="Your file is too small, make sure to upload at least 1000 x 1000px file to ensure the quality of your design."
+              >
+                <template v-slot:cta>
+                  <Button
+                    label="Replace logo"
+                    size="small"
+                    variant="secondary"
+                    @on-click="doSomething"
+                  />
+                </template>
+              </HelloBar>
+            </td>
+            <td class="tw-p-4" width="200">
+              <pre class="tw-block tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+&#x3C;HelloBar
+  variant=&#x22;warning&#x22;
+  label=&#x22;Logo image is low quality&#x22;
+  description=&#x22;Your file is too small.&#x22;
+&#x3E;
+  &#x3C;template v-slot:cta&#x3E;
+    &#x3C;Button
+      label=&#x22;Replace logo&#x22;
+      size=&#x22;small&#x22;
+      variant=&#x22;secondary&#x22;
+      @on-click=&#x22;doSomething&#x22;
+    /&#x3E;
+  &#x3C;/template&#x3E;
+&#x3C;/HelloBar&#x3E;</pre>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar label="Small font" font-size="sm" variant="info" description="This hello bar has smaller font." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" label="Small font" description="This hello bar has smaller font." /&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    \`
+  };
+}`,...(l=(r=t.parameters)==null?void 0:r.docs)==null?void 0:l.source}}};var s,n,d;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Button,
+      HelloBar
+    },
+    data() {
+      return {
+        messages: ['This is the first message', 'This is the second message', 'This is the third message']
+      };
+    },
+    template: \`
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">HelloBar</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="info" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="error" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="error" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="warning" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="warning" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    \`
+  };
+}`,...(d=(n=e.parameters)==null?void 0:n.docs)==null?void 0:d.source}}};const u=["Sample","SampleWithArrayMessages"];export{t as Sample,e as SampleWithArrayMessages,u as __namedExportsOrder,f as default};