@bikdotai/bik-component-library 0.0.119 → 0.0.120
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/plans/SubscriptionPlan.d.ts +1 -0
- package/dist/cjs/components/plans/SubscriptionPlan.js +1 -1
- package/dist/cjs/components/stepper/WorkingStepper.d.ts +1 -0
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/plans/SubscriptionPlan.d.ts +1 -0
- package/dist/esm/components/plans/SubscriptionPlan.js +1 -1
- package/dist/esm/components/stepper/WorkingStepper.d.ts +1 -0
- package/package.json +1 -1
|
@@ -22,6 +22,7 @@ export interface SubscriptionPlanProps {
|
|
|
22
22
|
onPlanSelect: (code: string) => void;
|
|
23
23
|
bottomDescription?: string;
|
|
24
24
|
freeTrialMessages?: string;
|
|
25
|
+
extraBlockMessage?: string;
|
|
25
26
|
}
|
|
26
27
|
type Props = SubscriptionPlanProps;
|
|
27
28
|
export declare const SubscriptionPlan: FunctionComponent<Props>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/check.svg.js"),t=require("../button/Button.js"),i=require("./SubscriptionPlanStyled.js"),a=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");exports.SubscriptionPlan=r=>{const c=r.showMonthly?r.monthlyPlan:r.yearlyPlan,l=!r.isDisabled&&r.isMostPopular;return e.jsxs(i.SubscriptionPlanStyled,Object.assign({isSelected:r.isSelected||!1,style:{marginTop:l?0:24}},{children:[l&&e.jsx("div",Object.assign({className:"most-popular"},{children:e.jsx(a.Caption,Object.assign({className:"text"},{children:"Most popular ⭐️"}))})),e.jsxs("div",Object.assign({className:`box ${r.isSelected?"selected":""} ${r.isDisabled?"disabled":""} ${l?"":"rounded-corners"}\n\t\t\t\t`},{children:[e.jsxs("div",{children:[e.jsx(a.TitleRegular,Object.assign({style:{color:n.COLORS.content.secondary,marginBottom:4}},{children:r.planName})),e.jsxs("div",Object.assign({className:"price-block"},{children:[e.jsxs(a.TitleLarge,Object.assign({style:{color:n.COLORS.content.primary}},{children:["$ ",c.price]})),e.jsxs(a.BodyPrimary,Object.assign({style:{color:n.COLORS.content.secondary,marginLeft:4}},{children:["/ ",r.showMonthly?"month":"year"]}))]})),e.jsxs("div",Object.assign({className:"per-message-price"},{children:[e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.content.secondary}},{children:r.planDescription})),e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.background.positive.vibrant,marginLeft:4}},{children:r.planDescriptionDiscount}))]})),r.showTrialOptions&&e.jsxs(a.Caption,Object.assign({className:"trial "+(r.isSelected?"selected":"")},{children:["7 day free trial with ",r.freeTrialMessages," messages"]})),e.jsx("div",Object.assign({className:"features"},{children:r.features.map(((t,i)=>e.jsxs("div",Object.assign({className:"feature"},{children:[e.jsx(s.default,{height:16,width:16,color:n.COLORS.content.primary}),e.jsx(a.BodyPrimary,Object.assign({className:"feature-text"},{children:t.detail}),i)]}),t.detail)))}))]}),e.jsxs("div",Object.assign({className:"button-box"},{children:[r.isSelected&&e.jsx(t.Button,{LeadingIcon:s.default,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:"Selected Plan",disabled:!1}),r.isDisabled&&e.jsx(t.Button,{disabled:!0,buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Choose plan"}),!r.isSelected&&!r.isDisabled&&e.jsx(t.Button,{buttonType:"primary",size:"medium",onClick:()=>r.onPlanSelect(r.code),matchParentWidth:!0,buttonText:"Choose plan"})]}))]})),e.jsx("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${r.isDisabled?"disabled":""}\n\t\t\t\t\t${r.isSelected?"selected":""}\n\t\t\t\t`},{children:e.jsx(a.Caption,Object.assign({className:"text",style:{color:n.COLORS.background.inverse}},{children:r.bottomDescription}))}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/check.svg.js"),t=require("../button/Button.js"),i=require("./SubscriptionPlanStyled.js"),a=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");exports.SubscriptionPlan=r=>{const c=r.showMonthly?r.monthlyPlan:r.yearlyPlan,l=!r.isDisabled&&r.isMostPopular;return e.jsxs(i.SubscriptionPlanStyled,Object.assign({isSelected:r.isSelected||!1,style:{marginTop:l?0:24}},{children:[l&&e.jsx("div",Object.assign({className:"most-popular"},{children:e.jsx(a.Caption,Object.assign({className:"text"},{children:"Most popular ⭐️"}))})),e.jsxs("div",Object.assign({className:`box ${r.isSelected?"selected":""} ${r.isDisabled?"disabled":""} ${l?"":"rounded-corners"}\n\t\t\t\t`},{children:[e.jsxs("div",{children:[e.jsx(a.TitleRegular,Object.assign({style:{color:n.COLORS.content.secondary,marginBottom:4}},{children:r.planName})),e.jsxs("div",Object.assign({className:"price-block"},{children:[e.jsxs(a.TitleLarge,Object.assign({style:{color:n.COLORS.content.primary}},{children:["$ ",c.price]})),e.jsxs(a.BodyPrimary,Object.assign({style:{color:n.COLORS.content.secondary,marginLeft:4}},{children:["/ ",r.showMonthly?"month":"year"]}))]})),e.jsxs("div",Object.assign({className:"per-message-price"},{children:[e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.content.secondary}},{children:r.planDescription})),e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.background.positive.vibrant,marginLeft:4}},{children:r.planDescriptionDiscount}))]})),r.showTrialOptions&&e.jsxs(a.Caption,Object.assign({className:"trial "+(r.isSelected?"selected":"")},{children:["7 day free trial with ",r.freeTrialMessages," messages"]})),r.extraBlockMessage&&e.jsx(a.Caption,Object.assign({className:"trial "+(r.isSelected?"selected":"")},{children:r.extraBlockMessage})),e.jsx("div",Object.assign({className:"features"},{children:r.features.map(((t,i)=>e.jsxs("div",Object.assign({className:"feature"},{children:[e.jsx(s.default,{height:16,width:16,color:n.COLORS.content.primary}),e.jsx(a.BodyPrimary,Object.assign({className:"feature-text"},{children:t.detail}),i)]}),t.detail)))}))]}),e.jsxs("div",Object.assign({className:"button-box"},{children:[r.isSelected&&e.jsx(t.Button,{LeadingIcon:s.default,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:"Selected Plan",disabled:!1}),r.isDisabled&&e.jsx(t.Button,{disabled:!0,buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Choose plan"}),!r.isSelected&&!r.isDisabled&&e.jsx(t.Button,{buttonType:"primary",size:"medium",onClick:()=>r.onPlanSelect(r.code),matchParentWidth:!0,buttonText:"Choose plan"})]}))]})),e.jsx("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${r.isDisabled?"disabled":""}\n\t\t\t\t\t${r.isSelected?"selected":""}\n\t\t\t\t`},{children:e.jsx(a.Caption,Object.assign({className:"text",style:{color:n.COLORS.background.inverse}},{children:r.bottomDescription}))}))]}))};
|
|
@@ -22,6 +22,7 @@ export interface SubscriptionPlanProps {
|
|
|
22
22
|
onPlanSelect: (code: string) => void;
|
|
23
23
|
bottomDescription?: string;
|
|
24
24
|
freeTrialMessages?: string;
|
|
25
|
+
extraBlockMessage?: string;
|
|
25
26
|
}
|
|
26
27
|
type Props = SubscriptionPlanProps;
|
|
27
28
|
export declare const SubscriptionPlan: FunctionComponent<Props>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import s from"../../assets/icons/check.svg.js";import{Button as i}from"../button/Button.js";import{SubscriptionPlanStyled as a}from"./SubscriptionPlanStyled.js";import{Caption as n,TitleRegular as c,TitleLarge as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import s from"../../assets/icons/check.svg.js";import{Button as i}from"../button/Button.js";import{SubscriptionPlanStyled as a}from"./SubscriptionPlanStyled.js";import{Caption as n,TitleRegular as c,TitleLarge as l,BodyPrimary as r,BodyCaption as o}from"../TypographyStyle.js";import{COLORS as d}from"../../constants/Theme.js";const m=m=>{const b=m.showMonthly?m.monthlyPlan:m.yearlyPlan,h=!m.isDisabled&&m.isMostPopular;return e(a,Object.assign({isSelected:m.isSelected||!1,style:{marginTop:h?0:24}},{children:[h&&t("div",Object.assign({className:"most-popular"},{children:t(n,Object.assign({className:"text"},{children:"Most popular ⭐️"}))})),e("div",Object.assign({className:`box ${m.isSelected?"selected":""} ${m.isDisabled?"disabled":""} ${h?"":"rounded-corners"}\n\t\t\t\t`},{children:[e("div",{children:[t(c,Object.assign({style:{color:d.content.secondary,marginBottom:4}},{children:m.planName})),e("div",Object.assign({className:"price-block"},{children:[e(l,Object.assign({style:{color:d.content.primary}},{children:["$ ",b.price]})),e(r,Object.assign({style:{color:d.content.secondary,marginLeft:4}},{children:["/ ",m.showMonthly?"month":"year"]}))]})),e("div",Object.assign({className:"per-message-price"},{children:[t(o,Object.assign({style:{color:d.content.secondary}},{children:m.planDescription})),t(o,Object.assign({style:{color:d.background.positive.vibrant,marginLeft:4}},{children:m.planDescriptionDiscount}))]})),m.showTrialOptions&&e(n,Object.assign({className:"trial "+(m.isSelected?"selected":"")},{children:["7 day free trial with ",m.freeTrialMessages," messages"]})),m.extraBlockMessage&&t(n,Object.assign({className:"trial "+(m.isSelected?"selected":"")},{children:m.extraBlockMessage})),t("div",Object.assign({className:"features"},{children:m.features.map(((i,a)=>e("div",Object.assign({className:"feature"},{children:[t(s,{height:16,width:16,color:d.content.primary}),t(r,Object.assign({className:"feature-text"},{children:i.detail}),a)]}),i.detail)))}))]}),e("div",Object.assign({className:"button-box"},{children:[m.isSelected&&t(i,{LeadingIcon:s,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:"Selected Plan",disabled:!1}),m.isDisabled&&t(i,{disabled:!0,buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Choose plan"}),!m.isSelected&&!m.isDisabled&&t(i,{buttonType:"primary",size:"medium",onClick:()=>m.onPlanSelect(m.code),matchParentWidth:!0,buttonText:"Choose plan"})]}))]})),t("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${m.isDisabled?"disabled":""}\n\t\t\t\t\t${m.isSelected?"selected":""}\n\t\t\t\t`},{children:t(n,Object.assign({className:"text",style:{color:d.background.inverse}},{children:m.bottomDescription}))}))]}))};export{m as SubscriptionPlan};
|