@biggive/components 0.0.15 → 0.0.18

package/dist/biggive/biggive.esm.js

@@ -1 +1 @@
-import{p as a,b as i}from"./p-ce3d5ebc.js";(()=>{const i=import.meta.url,n={};return""!==i&&(n.resourcesUrl=new URL(".",i).href),a(n)})().then((a=>i([["p-59970be1",[[1,"demo-campaign-cards"],[1,"biggive-campaign-card",{banner:[1],daysRemaining:[2,"days-remaining"],currencyCode:[1,"currency-code"],target:[2],organisationName:[1,"organisation-name"],campaignTitle:[1,"campaign-title"],campaignType:[1,"campaign-type"],beneficiaries:[16],categories:[16],matchFundsRemaining:[2,"match-funds-remaining"],totalFundsRaised:[2,"total-funds-raised"],callToActionUrl:[1,"call-to-action-url"],callToActionLabel:[1,"call-to-action-label"]}],[1,"biggive-grid"]]]],a)));
+import{p as a,b as i}from"./p-ce3d5ebc.js";(()=>{const i=import.meta.url,n={};return""!==i&&(n.resourcesUrl=new URL(".",i).href),a(n)})().then((a=>i([["p-b6653b6d",[[1,"demo-campaign-cards"],[1,"biggive-campaign-card",{banner:[1],daysRemaining:[2,"days-remaining"],currencyCode:[1,"currency-code"],target:[2],organisationName:[1,"organisation-name"],campaignTitle:[1,"campaign-title"],campaignType:[1,"campaign-type"],beneficiaries:[16],categories:[16],matchFundsRemaining:[2,"match-funds-remaining"],totalFundsRaised:[2,"total-funds-raised"],callToActionUrl:[1,"call-to-action-url"],callToActionLabel:[1,"call-to-action-label"]}],[1,"biggive-grid"]]]],a)));

package/dist/biggive/{p-59970be1.entry.js → p-b6653b6d.entry.js}

@@ -8,4 +8,4 @@ import{r as e,h as c,g as a}from"./p-ce3d5ebc.js";
  * Font Awesome Free 6.1.2 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2022 Fonticons, Inc.
- */class A{static getBeneficiaries(){return[{name:"Children (3-18)",icon:s},{name:"General Public/Humankind",icon:V},{name:"Infants (<2)",icon:n},{name:"LGBTQAI",icon:L},{name:"Minority Groups",icon:N},{name:"Older People",icon:M},{name:"People With Disabilities",icon:i},{name:"Refugees/Asylum Seekers",icon:l},{name:"Women & Girls",icon:S},{name:"Young People (18-30)",icon:w},{name:"Other",icon:b}]}static getCategories(){return[{name:"Animals",icon:z},{name:"Armed Forces/Emergency Services",icon:h},{name:"Arts/Culture/Heritage",icon:p},{name:"Cancer",icon:v},{name:"Community Support & Development",icon:x},{name:"Disaster Relief",icon:g},{name:"Education/Training/Employment",icon:t},{name:"Environment/Conservation",icon:y},{name:"Health/Wellbeing",icon:C},{name:"Homeless/Refuge",icon:F},{name:"Hospitals/Hospices",icon:m},{name:"Human Rights/Advocacy",icon:H},{name:"Information/Advice",icon:o},{name:"Medical Research",icon:f},{name:"Mental Health",icon:k},{name:"Poverty Alleviation/Relief",icon:d},{name:"Religious",icon:u},{name:"Sports/Recreation",icon:r},{name:"Other",icon:b}]}static getBeneficiaryIcon(e){return A.getBeneficiaries().filter((c=>c.name===e))[0].icon||b}static getCategoryIcon(e){var c;return(null===(c=A.getCategories().filter((c=>c.name===e))[0])||void 0===c?void 0:c.icon)||b}}const R=class{constructor(c){e(this,c),this.banner="",this.daysRemaining=null,this.target=null,this.organisationName=null,this.campaignTitle=null,this.campaignType=null,this.beneficiaries=[],this.categories=[],this.matchFundsRemaining=null,this.totalFundsRaised=null,this.callToActionUrl=null,this.callToActionLabel=null}getBeneficiaryIcons(){return this.beneficiaries.map((e=>A.getBeneficiaryIcon(e)))}getCategoryIcons(){return this.categories.map((e=>A.getCategoryIcon(e)))}formatCurrency(e,c){return null===c||isNaN(c)?"–":Intl.NumberFormat("en-GB",{style:"currency",currency:e,currencyDisplay:"symbol",maximumFractionDigits:0}).format(c)}render(){return c("div",{class:"container"},c("div",{class:"sleeve"},c("div",{class:"campaign-type"},c("span",null,this.campaignType)),this.banner.length>0?c("div",{class:"image-wrap banner",style:{"background-image":"url("+this.banner+")"}},c("img",{src:this.banner,class:"banner"})):null,c("div",{class:"content"},c("div",{class:"meta-wrap style-1"},c("div",{class:"meta-item"},c("span",{class:"label"},"Days Remaining:")," ",c("span",{class:"text"},this.daysRemaining)),c("div",{class:"meta-item"},c("span",{class:"label"},"Target:")," ",c("span",{class:"text"},this.formatCurrency(this.currencyCode,this.target)))),c("header",null,c("div",{class:"slug"},this.organisationName),c("h3",null,this.campaignTitle)),c("div",{class:"meta-wrap style-2"},c("div",{class:"meta-item"},c("span",{class:"label"},"Categories"),c("span",{class:"text"},this.getCategoryIcons().map((e=>c("svg",{width:"512",height:"512",xmlns:"http://www.w3.org/2000/svg",class:"icon",viewBox:"0 0 512 512"},c("path",{d:e.icon[4].toString()})))))),c("div",{class:"meta-item"},c("span",{class:"label"},"Helping"),c("span",{class:"text"},this.getBeneficiaryIcons().map((e=>c("svg",{width:"512",height:"512",xmlns:"http://www.w3.org/2000/svg",class:"icon",viewBox:"0 0 512 512"},c("path",{d:e.icon[4].toString()}))))))),c("div",{class:"meta-wrap style-3"},c("div",{class:"meta-item"},c("span",{class:"label"},"Match",c("br",null),"Funds Remaining"),c("span",{class:"text"},this.formatCurrency(this.currencyCode,this.matchFundsRemaining))),c("div",{class:"meta-item"},c("span",{class:"label"},"Total",c("br",null),"Funds Received"),c("span",{class:"text"},this.formatCurrency(this.currencyCode,this.totalFundsRaised)))),c("div",{class:"button-wrap"},c("a",{href:this.callToActionUrl,class:"call-to-action"},this.callToActionLabel)))))}};R.style=':host{display:block;margin-bottom:30px}.container{font-family:"Euclid Triangle", sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.25))}.sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%, 0 90%)}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:85px 45px 0 45px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-85px;left:-25px;position:relative;width:45px;height:45px;margin:0;color:#2C089B;font-size:0.9rem}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-0.125rem}';const B=class{constructor(c){e(this,c)}render(){return c("div",{class:"grid"},c("slot",null))}};B.style=":host{display:block}.grid{display:flex;flex-flow:row wrap;justify-content:space-between}";const T=class{constructor(c){e(this,c)}render(){return c("biggive-grid",null,[...Array(12)].map((()=>c("biggive-campaign-card",{banner:a("/assets/images/banner.png"),daysRemaining:50,currencyCode:"GBP",target:5e4,organisationName:"Ardent Theatre Company",campaignType:"Match Funded",campaignTitle:"Strike! A play by Tracy Ryan",categories:["Arts/Culture/Heritage","Environment/Conservation","Health/Wellbeing"],beneficiaries:["General Public/Humankind"],matchFundsRemaining:17424,totalFundsRaised:15424,callToActionUrl:"#",callToActionLabel:"Donate"}))))}};T.style=":host{display:block}";export{R as biggive_campaign_card,B as biggive_grid,T as demo_campaign_cards}
+ */class A{static getBeneficiaries(){return[{name:"Children (3-18)",icon:s},{name:"General Public/Humankind",icon:V},{name:"Infants (<2)",icon:n},{name:"LGBTQAI",icon:L},{name:"Minority Groups",icon:N},{name:"Older People",icon:M},{name:"People With Disabilities",icon:i},{name:"Refugees/Asylum Seekers",icon:l},{name:"Women & Girls",icon:S},{name:"Young People (18-30)",icon:w},{name:"Other",icon:b}]}static getCategories(){return[{name:"Animals",icon:z},{name:"Armed Forces/Emergency Services",icon:h},{name:"Arts/Culture/Heritage",icon:p},{name:"Cancer",icon:v},{name:"Community Support & Development",icon:x},{name:"Disaster Relief",icon:g},{name:"Education/Training/Employment",icon:t},{name:"Environment/Conservation",icon:y},{name:"Health/Wellbeing",icon:C},{name:"Homeless/Refuge",icon:F},{name:"Hospitals/Hospices",icon:m},{name:"Human Rights/Advocacy",icon:H},{name:"Information/Advice",icon:o},{name:"Medical Research",icon:f},{name:"Mental Health",icon:k},{name:"Poverty Alleviation/Relief",icon:d},{name:"Religious",icon:u},{name:"Sports/Recreation",icon:r},{name:"Other",icon:b}]}static getBeneficiaryIcon(e){return A.getBeneficiaries().filter((c=>c.name===e))[0].icon||b}static getCategoryIcon(e){var c;return(null===(c=A.getCategories().filter((c=>c.name===e))[0])||void 0===c?void 0:c.icon)||b}}const R=class{constructor(c){e(this,c),this.banner="",this.daysRemaining=null,this.target=null,this.organisationName=null,this.campaignTitle=null,this.campaignType=null,this.beneficiaries=[],this.categories=[],this.matchFundsRemaining=null,this.totalFundsRaised=null,this.callToActionUrl=null,this.callToActionLabel=null}getBeneficiaryIcons(){return this.beneficiaries.map((e=>A.getBeneficiaryIcon(e)))}getCategoryIcons(){return this.categories.map((e=>A.getCategoryIcon(e)))}formatCurrency(e,c){return null===c||isNaN(c)?"–":Intl.NumberFormat("en-GB",{style:"currency",currency:e,currencyDisplay:"symbol",maximumFractionDigits:0}).format(c)}render(){return c("div",{class:"container"},c("div",{class:"sleeve"},c("div",{class:"campaign-type"},c("span",null,this.campaignType)),this.banner.length>0?c("div",{class:"image-wrap banner",style:{"background-image":"url("+this.banner+")"}},c("img",{src:this.banner,class:"banner"})):null,c("div",{class:"content"},c("div",{class:"meta-wrap style-1"},c("div",{class:"meta-item"},c("span",{class:"label"},"Days Remaining:")," ",c("span",{class:"text"},this.daysRemaining)),c("div",{class:"meta-item"},c("span",{class:"label"},"Target:")," ",c("span",{class:"text"},this.formatCurrency(this.currencyCode,this.target)))),c("header",null,c("div",{class:"slug"},this.organisationName),c("h3",null,this.campaignTitle)),c("div",{class:"meta-wrap style-2"},c("div",{class:"meta-item"},c("span",{class:"label"},"Categories"),c("span",{class:"text"},this.getCategoryIcons().map((e=>c("svg",{width:"512",height:"512",xmlns:"http://www.w3.org/2000/svg",class:"icon",viewBox:"0 0 512 512"},c("path",{d:e.icon[4].toString()})))))),c("div",{class:"meta-item"},c("span",{class:"label"},"Helping"),c("span",{class:"text"},this.getBeneficiaryIcons().map((e=>c("svg",{width:"512",height:"512",xmlns:"http://www.w3.org/2000/svg",class:"icon",viewBox:"0 0 512 512"},c("path",{d:e.icon[4].toString()}))))))),c("div",{class:"meta-wrap style-3"},c("div",{class:"meta-item"},c("span",{class:"label"},"Match",c("br",null),"Funds Remaining"),c("span",{class:"text"},this.formatCurrency(this.currencyCode,this.matchFundsRemaining))),c("div",{class:"meta-item"},c("span",{class:"label"},"Total",c("br",null),"Funds Received"),c("span",{class:"text"},this.formatCurrency(this.currencyCode,this.totalFundsRaised)))),c("div",{class:"button-wrap"},c("a",{href:this.callToActionUrl,class:"call-to-action"},this.callToActionLabel)))))}};R.style=':host{display:block;margin-bottom:30px;flex-grow:1;margin:1rem}.container{font-family:"Euclid Triangle", sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.25))}.sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%, 0 90%)}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:85px 45px 0 45px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-85px;left:-25px;position:relative;width:45px;height:45px;margin:0;color:#2C089B;font-size:0.9rem}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-0.125rem}';const B=class{constructor(c){e(this,c)}render(){return c("div",{class:"grid"},c("slot",null))}};B.style=":host{display:block}.grid{display:flex;flex-flow:row wrap;justify-content:space-between}";const T=class{constructor(c){e(this,c)}render(){return c("biggive-grid",null,[...Array(12)].map((()=>c("biggive-campaign-card",{banner:a("/assets/images/banner.png"),daysRemaining:50,currencyCode:"GBP",target:5e4,organisationName:"Ardent Theatre Company",campaignType:"Match Funded",campaignTitle:"Strike! A play by Tracy Ryan",categories:["Arts/Culture/Heritage","Environment/Conservation","Health/Wellbeing"],beneficiaries:["General Public/Humankind"],matchFundsRemaining:17424,totalFundsRaised:15424,callToActionUrl:"#",callToActionLabel:"Donate"}))))}};T.style=":host{display:block}";export{R as biggive_campaign_card,B as biggive_grid,T as demo_campaign_cards}

package/dist/cjs/biggive-campaign-card_3.cjs.entry.js

@@ -322,7 +322,7 @@ class CampaignGroupsService {
   }
 }
 
-const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px}.container{font-family:\"Euclid Triangle\", sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.25))}.sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%, 0 90%)}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:85px 45px 0 45px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-85px;left:-25px;position:relative;width:45px;height:45px;margin:0;color:#2C089B;font-size:0.9rem}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-0.125rem}";
+const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px;flex-grow:1;margin:1rem}.container{font-family:\"Euclid Triangle\", sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.25))}.sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%, 0 90%)}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:85px 45px 0 45px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-85px;left:-25px;position:relative;width:45px;height:45px;margin:0;color:#2C089B;font-size:0.9rem}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-0.125rem}";
 
 const BiggiveCampaignCard = class {
   constructor(hostRef) {

package/dist/collection/components/biggive-campaign-card/biggive-campaign-card.css

@@ -1,6 +1,8 @@
 :host {
   display: block;
   margin-bottom: 30px;
+  flex-grow: 1;
+  margin: 1rem;
 }
 
 .container {

package/dist/collection/components/demo-campaign-cards/demo-campaign-cards.stories.js

@@ -0,0 +1,5 @@
+export default {
+  title: 'Components/Demos',
+};
+const Template = () => `<demo-campaign-cards></demo-campaign-cards>`;
+export const DemoCampaignCards = Template.bind({});

package/dist/components/biggive-campaign-card2.js

@@ -318,7 +318,7 @@ class CampaignGroupsService {
   }
 }
 
-const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px}.container{font-family:\"Euclid Triangle\", sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.25))}.sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%, 0 90%)}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:85px 45px 0 45px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-85px;left:-25px;position:relative;width:45px;height:45px;margin:0;color:#2C089B;font-size:0.9rem}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-0.125rem}";
+const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px;flex-grow:1;margin:1rem}.container{font-family:\"Euclid Triangle\", sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.25))}.sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%, 0 90%)}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:85px 45px 0 45px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-85px;left:-25px;position:relative;width:45px;height:45px;margin:0;color:#2C089B;font-size:0.9rem}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-0.125rem}";
 
 const BiggiveCampaignCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/esm/biggive-campaign-card_3.entry.js

@@ -318,7 +318,7 @@ class CampaignGroupsService {
   }
 }
 
-const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px}.container{font-family:\"Euclid Triangle\", sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.25))}.sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%, 0 90%)}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:85px 45px 0 45px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-85px;left:-25px;position:relative;width:45px;height:45px;margin:0;color:#2C089B;font-size:0.9rem}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-0.125rem}";
+const biggiveCampaignCardCss = ":host{display:block;margin-bottom:30px;flex-grow:1;margin:1rem}.container{font-family:\"Euclid Triangle\", sans-serif;filter:drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.25))}.sleeve{clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%, 0 90%)}.content{padding:15px;background-color:#FFFFFF}.campaign-type{margin-left:15px;width:0;height:0;border-style:inset;border-width:85px 45px 0 45px;border-color:#2AF135 transparent transparent transparent;float:left;transform:rotate(360deg)}.campaign-type span{display:block;text-align:center;top:-85px;left:-25px;position:relative;width:45px;height:45px;margin:0;color:#2C089B;font-size:0.9rem}.banner{padding-bottom:30%;background-repeat:no-repeat;background-position:center center;background-size:cover}.banner img{display:none}.meta-wrap.style-1{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-1 .meta-item{width:50%}.meta-wrap.style-1 .meta-item .label{font-weight:bold}.meta-wrap.style-1 .meta-item .text{color:#2C089B}header{margin-bottom:20px}header .slug{text-transform:uppercase;font-size:12px;line-height:14px}header h3{margin:0;padding:0;font-size:24px;line-height:28px}.meta-wrap.style-2{display:flex;font-size:12px;line-height:14px;margin-bottom:40px}.meta-wrap.style-2 .meta-item{width:50%}.meta-wrap.style-2 .meta-item .label{font-weight:bold;display:block;margin-bottom:10px}.meta-wrap.style-2 .meta-item .text{display:block;font-size:16px;line-height:18px}.meta-wrap.style-2 .meta-item .text i{margin-right:10px}.meta-wrap.style-3{display:flex;font-size:16px;line-height:20px;margin-bottom:20px}.meta-wrap.style-3 .meta-item{margin-right:60px}.meta-wrap.style-3 .meta-item .label{font-weight:bold;display:block;font-size:12px;line-height:14px;margin-bottom:10px}.meta-wrap.style-3 .meta-item .text{display:block;font-size:36px;line-height:40px;font-weight:bold}.meta-wrap.style-3 .meta-item:last-child .text{color:#2C089B}.button-wrap{text-align:right}.button-wrap a{display:inline-block;padding:15px 30px;color:#FFFFFF;background-color:#2C089B;cursor:pointer;text-transform:uppercase;font-size:12px;text-decoration:none}.icon{height:1rem;width:2rem;vertical-align:-0.125rem}";
 
 const BiggiveCampaignCard = class {
   constructor(hostRef) {

package/dist/types/components/demo-campaign-cards/demo-campaign-cards.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+  title: string;
+};
+export default _default;
+export declare const DemoCampaignCards: any;

package/dist/types/interfaces.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@biggive/components",
-  "version": "0.0.15",
+  "version": "0.0.18",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/types/interfaces.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/biggive/biggive.esm.js",
@@ -27,7 +27,9 @@
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "prepare": "husky install",
-    "pre-commit": "lint-staged"
+    "pre-commit": "lint-staged",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
@@ -38,10 +40,20 @@
     "@stencil/core": "^2.13.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.18.9",
     "@stencil/angular-output-target": "^0.4.0",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack4": "^6.5.9",
+    "@storybook/html": "^6.5.9",
+    "@storybook/manager-webpack4": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
     "@types/jest": "^27.0.3",
+    "babel-loader": "^8.2.5",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.0",

package/readme.md

@@ -100,8 +100,15 @@ This directory contains the distribtion files
 ### www directory - https://stenciljs.com/docs/www
 This directory contains a static version of the web components which can be used for testing and inclusion in simple web apps. Due to CORS restrictions, the index.html file needs to be run from a webserver (not as a local file).
 
+### Storybook
 
+We've followed [this guide](https://ionicframework.com/blog/how-to-use-storybook-with-stencil/) to
+provide sample usage of key components: a living style guide.
 
+CI automatically publishes the Storybook preview:
+* to [its Staging site](https://components-staging.thebiggivetest.org.uk) on *any* push to `main`; and
+* to [its Production site](https://components-production.thebiggive.org.uk) on *tagged* pushes
+  (typically also on `main`) – intended for tested, new versions which are also to be npm published.
 
 ## Publish to NPM
 
@@ -112,9 +119,17 @@ npm add_user
 
 ### Publish
 
-Continuous Integration will automatically publish `main` to NPM, but you can also do it manually if necessary.
+Continuous Integration will automatically publish `main` to npm when you push a `v*` tag.
 
-(Once this repo gets closer to being stable, we can update the configuration to just publish new version tags.)
+Versioning is manual currently. To prepare a release for publishing:
+
+* Update the root `package.json`'s `version` field.
+* `npm install` to update `package-lock.json` to match.
+* Update `angular/projects/components/package.json`'s `version` field so that `@biggive/components-angular` matches too.
+* `git tag v0.0.1` (replace with your new version)
+* `git push --tags`
+
+You can also do it manually if necessary:
 
 ```bash
 npm publish --access=public