@zenpatient-org/healthspan-marketing-ui 0.2.61 → 0.2.62

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.
Files changed (5) hide show
  1. package/dist/components/PriceDisplay/PriceDisplay.cjs.js +1 -1
  2. package/dist/components/PriceDisplay/PriceDisplay.d.ts +2 -0
  3. package/dist/components/PriceDisplay/PriceDisplay.es.js +29 -38
  4. package/dist/components/PriceDisplay/priceDisplay.module.css +37 -14
  5. package/package.json +1 -1
package/dist/components/PriceDisplay/PriceDisplay.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),e=require("../../src/components/PriceDisplay/priceDisplay.module.css"),l=require("../../utils/cn/cn.cjs.js"),o=require("../../utils/periodView.cjs.js"),c=({items:i})=>{if(!i||i.length===0)return null;const n=i.length>1?"double":"single";return r.jsx("div",{className:e.root,children:i.map(a=>r.jsxs("div",{className:l.cn(e.container,n==="double"?e.double:e.single),children:[r.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.description,children:a.description}),r.jsxs("div",{className:e.priceWrapper,children:[!!a.prefix&&r.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.prefix,children:a.prefix}),r.jsxs("div",{className:e.priceAmount,children:[r.jsx(s.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingLg",className:e.price,children:(a.price/100).toFixed(0)}),r.jsx(s.Typography,{as:"p",defaultVariant:"headingXs",mobileVariant:"headingXxs",className:e.currency,children:"$"}),a.period!=="none"&&r.jsxs(s.Typography,{as:"p",defaultVariant:"labelMd",className:e.period,children:["/",o.shortPeriod(a.period)]})]})]})]},a.description))})};exports.PriceDisplay=c;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),e=require("../../src/components/PriceDisplay/priceDisplay.module.css"),n=require("../../utils/cn/cn.cjs.js"),c=require("../../utils/periodView.cjs.js"),p=({items:l})=>{if(!l||l.length===0)return null;const i=l.length>1?"double":"single";return r.jsx("div",{className:e.root,children:l.map(a=>r.jsxs("div",{className:n.cn(e.container,i==="double"?e.double:e.single),children:[r.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.description,children:a.description}),r.jsxs("div",{className:e.priceWrapper,children:[a.initialPrice&&r.jsxs(s.Typography,{as:"p",defaultVariant:"labelSm",className:e.initialPrice,children:["$",(a.initialPrice/100).toFixed(0)]}),r.jsxs("div",{className:e.priceColumn,children:[a.prefix?r.jsx(s.Typography,{as:"p",defaultVariant:"bodyXs",className:e.prefix,children:a.prefix}):a.label?r.jsx(s.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:e.label,children:a.label}):null,r.jsxs("div",{className:e.priceAmount,children:[r.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.currency,children:"$"}),r.jsx(s.Typography,{as:"p",defaultVariant:"headingLg",className:e.price,children:(a.price/100).toFixed(0)}),r.jsxs("div",{className:e.periodWrapper,children:[a.prefix&&a.label&&r.jsx(s.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:e.label,children:a.label}),a.period!=="none"&&r.jsxs(s.Typography,{as:"p",defaultVariant:"labelSm",className:e.period,children:["/",c.shortPeriod(a.period)]})]})]})]})]})]},a.description))})};exports.PriceDisplay=p;
package/dist/components/PriceDisplay/PriceDisplay.d.ts CHANGED
@@ -4,6 +4,8 @@ export type PriceDisplayProps = {
4
4
  description: string;
5
5
  prefix?: string;
6
6
  price: number;
7
+ initialPrice?: number;
8
+ label?: string;
7
9
  period: 'none' | 'month' | 'year' | 'quarter';
8
10
  };
9
11
  export declare const PriceDisplay: React.FC<{
package/dist/components/PriceDisplay/PriceDisplay.es.js CHANGED
@@ -1,50 +1,41 @@
1
- import { jsx as a, jsxs as n } from "react/jsx-runtime";
2
- import { Typography as i } from "../Typography/Typography.es.js";
3
- import e from "../../components/PriceDisplay/priceDisplay.module.css";
4
- import { cn as d } from "../../utils/cn/cn.es.js";
5
- import { shortPeriod as s } from "../../utils/periodView.es.js";
6
- const f = ({ items: l }) => {
7
- if (!l || l.length === 0)
1
+ import { jsx as r, jsxs as i } from "react/jsx-runtime";
2
+ import { Typography as l } from "../Typography/Typography.es.js";
3
+ import a from "../../components/PriceDisplay/priceDisplay.module.css";
4
+ import { cn as c } from "../../utils/cn/cn.es.js";
5
+ import { shortPeriod as d } from "../../utils/periodView.es.js";
6
+ const f = ({ items: s }) => {
7
+ if (!s || s.length === 0)
8
8
  return null;
9
- const o = l.length > 1 ? "double" : "single";
10
- return /* @__PURE__ */ a("div", { className: e.root, children: l.map((r) => /* @__PURE__ */ n(
9
+ const n = s.length > 1 ? "double" : "single";
10
+ return /* @__PURE__ */ r("div", { className: a.root, children: s.map((e) => /* @__PURE__ */ i(
11
11
  "div",
12
12
  {
13
- className: d(e.container, o === "double" ? e.double : e.single),
13
+ className: c(a.container, n === "double" ? a.double : a.single),
14
14
  children: [
15
- /* @__PURE__ */ a(i, { as: "p", defaultVariant: "bodySm", className: e.description, children: r.description }),
16
- /* @__PURE__ */ n("div", { className: e.priceWrapper, children: [
17
- !!r.prefix && /* @__PURE__ */ a(i, { as: "p", defaultVariant: "bodySm", className: e.prefix, children: r.prefix }),
18
- /* @__PURE__ */ n("div", { className: e.priceAmount, children: [
19
- /* @__PURE__ */ a(
20
- i,
21
- {
22
- as: "p",
23
- defaultVariant: "headingXl",
24
- mobileVariant: "headingLg",
25
- className: e.price,
26
- children: (r.price / 100).toFixed(0)
27
- }
28
- ),
29
- /* @__PURE__ */ a(
30
- i,
31
- {
32
- as: "p",
33
- defaultVariant: "headingXs",
34
- mobileVariant: "headingXxs",
35
- className: e.currency,
36
- children: "$"
37
- }
38
- ),
39
- r.period !== "none" && /* @__PURE__ */ n(i, { as: "p", defaultVariant: "labelMd", className: e.period, children: [
40
- "/",
41
- s(r.period)
15
+ /* @__PURE__ */ r(l, { as: "p", defaultVariant: "bodySm", className: a.description, children: e.description }),
16
+ /* @__PURE__ */ i("div", { className: a.priceWrapper, children: [
17
+ e.initialPrice && /* @__PURE__ */ i(l, { as: "p", defaultVariant: "labelSm", className: a.initialPrice, children: [
18
+ "$",
19
+ (e.initialPrice / 100).toFixed(0)
20
+ ] }),
21
+ /* @__PURE__ */ i("div", { className: a.priceColumn, children: [
22
+ e.prefix ? /* @__PURE__ */ r(l, { as: "p", defaultVariant: "bodyXs", className: a.prefix, children: e.prefix }) : e.label ? /* @__PURE__ */ r(l, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: a.label, children: e.label }) : null,
23
+ /* @__PURE__ */ i("div", { className: a.priceAmount, children: [
24
+ /* @__PURE__ */ r(l, { as: "p", defaultVariant: "bodySm", className: a.currency, children: "$" }),
25
+ /* @__PURE__ */ r(l, { as: "p", defaultVariant: "headingLg", className: a.price, children: (e.price / 100).toFixed(0) }),
26
+ /* @__PURE__ */ i("div", { className: a.periodWrapper, children: [
27
+ e.prefix && e.label && /* @__PURE__ */ r(l, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: a.label, children: e.label }),
28
+ e.period !== "none" && /* @__PURE__ */ i(l, { as: "p", defaultVariant: "labelSm", className: a.period, children: [
29
+ "/",
30
+ d(e.period)
31
+ ] })
32
+ ] })
42
33
  ] })
43
34
  ] })
44
35
  ] })
45
36
  ]
46
37
  },
47
- r.description
38
+ e.description
48
39
  )) });
49
40
  };
50
41
  export {
package/dist/components/PriceDisplay/priceDisplay.module.css CHANGED
@@ -70,36 +70,59 @@
70
70
 
71
71
  .priceWrapper {
72
72
  display: flex;
73
- gap: 4px;
74
- flex-direction: column;
75
- align-items: flex-start;
76
- text-align: left;
73
+ align-items: flex-end;
77
74
  min-width: 90px;
78
75
  }
79
76
 
80
- .prefix {
81
- color: var(--color-neutral-500);
77
+ .priceColumn {
78
+ display: flex;
79
+ flex-direction: column;
80
+ gap: 6px;
82
81
  }
83
82
 
84
83
  .priceAmount {
85
84
  display: flex;
86
- align-items: baseline;
87
- line-height: 1;
85
+ align-items: stretch;
86
+ }
87
+
88
+ .periodWrapper {
89
+ display: flex;
90
+ flex-direction: column;
91
+ margin-left: 3px;
92
+ justify-content: flex-end;
93
+ align-self: stretch;
94
+ }
95
+
96
+ .periodWrapper:has(.label) {
97
+ justify-content: space-between;
98
+ }
99
+
100
+ .label {
101
+ background-color: var(--color-bg-fill-brand-indigo);
102
+ padding: 2.77px 5.54px;
103
+ font-size: 6.926px;
104
+ border-radius: var(--border-radius-xxs);
105
+ width: fit-content;
88
106
  }
89
107
 
90
108
  .price {
91
- grid-column: 1 / 2;
92
- grid-row: 1 / 3;
109
+ margin-bottom: -5px;
110
+ align-self: flex-start;
93
111
  }
94
112
 
95
113
  .currency {
96
- grid-column: 2 / 3;
97
- grid-row: 1 / 2;
98
114
  align-self: flex-start;
99
115
  }
100
116
 
101
117
  .period {
102
- grid-column: 2 / 3;
103
- grid-row: 2 / 3;
118
+ color: var(--color-neutral-500);
119
+ }
120
+
121
+ .initialPrice {
122
+ color: var(--color-neutral-300);
123
+ text-decoration: line-through;
124
+ }
125
+
126
+ .prefix {
104
127
  color: var(--color-neutral-500);
105
128
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zenpatient-org/healthspan-marketing-ui",
3
- "version": "0.2.61",
3
+ "version": "0.2.62",
4
4
  "description": "Design system",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",