@zenpatient-org/healthspan-marketing-ui 0.2.73 → 0.2.74
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../Icon/constants.cjs.js"),a=require("../../src/components/HighlightCard/highlightCard.module.css"),s=require("../Typography/Typography.cjs.js"),m=require("../IconButton/IconButton.cjs.js"),u=({image:g,eyebrow:i,title:r,description:o,link:t,colorScheme:n="light"})=>{const c=n==="light"?"muted-invert":"muted",l=e.jsxs(e.Fragment,{children:[i&&e.jsx(s.Typography,{as:"p",defaultVariant:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../Icon/constants.cjs.js"),a=require("../../src/components/HighlightCard/highlightCard.module.css"),s=require("../Typography/Typography.cjs.js"),m=require("../IconButton/IconButton.cjs.js"),u=({image:g,eyebrow:i,title:r,description:o,link:t,colorScheme:n="light"})=>{const c=n==="light"?"muted-invert":"muted",l=e.jsxs(e.Fragment,{children:[i&&e.jsx(s.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.eyebrow,children:i}),e.jsxs("div",{className:a.bottomContainer,children:[e.jsxs("div",{className:a.titleContainer,children:[r&&e.jsx(s.Typography,{as:"p",defaultVariant:"headingLg",mobileVariant:"headingLg",className:a.title,children:r}),t&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.desktop,children:e.jsx(m.IconButton,{variant:c,size:"lg",iconName:h.EIconName.ARROW_FORWARD})}),e.jsx("div",{className:a.mobile,children:e.jsx(m.IconButton,{variant:c,size:"md",iconName:h.EIconName.ARROW_FORWARD})})]})]}),o&&e.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:a.description,children:o})]})]}),d={backgroundImage:`url(${g})`,backgroundSize:"cover",backgroundPosition:"center"};return t?e.jsx("a",{href:t,className:a.highlightCard,style:d,"data-scheme":n,children:l}):e.jsx("div",{className:a.highlightCard,style:d,"data-scheme":n,children:l})};exports.HighlightCard=u;
|
|
@@ -6,23 +6,23 @@ import { IconButton as p } from "../IconButton/IconButton.es.js";
|
|
|
6
6
|
const y = ({
|
|
7
7
|
image: u,
|
|
8
8
|
eyebrow: s,
|
|
9
|
-
title:
|
|
10
|
-
description:
|
|
9
|
+
title: d,
|
|
10
|
+
description: l,
|
|
11
11
|
link: i,
|
|
12
12
|
colorScheme: r = "light"
|
|
13
13
|
}) => {
|
|
14
14
|
const c = r === "light" ? "muted-invert" : "muted", o = /* @__PURE__ */ t(h, { children: [
|
|
15
|
-
s && /* @__PURE__ */ a(n, { as: "p", defaultVariant: "
|
|
15
|
+
s && /* @__PURE__ */ a(n, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: e.eyebrow, children: s }),
|
|
16
16
|
/* @__PURE__ */ t("div", { className: e.bottomContainer, children: [
|
|
17
17
|
/* @__PURE__ */ t("div", { className: e.titleContainer, children: [
|
|
18
|
-
|
|
18
|
+
d && /* @__PURE__ */ a(
|
|
19
19
|
n,
|
|
20
20
|
{
|
|
21
21
|
as: "p",
|
|
22
|
-
defaultVariant: "
|
|
22
|
+
defaultVariant: "headingLg",
|
|
23
23
|
mobileVariant: "headingLg",
|
|
24
24
|
className: e.title,
|
|
25
|
-
children:
|
|
25
|
+
children: d
|
|
26
26
|
}
|
|
27
27
|
),
|
|
28
28
|
i && /* @__PURE__ */ t(h, { children: [
|
|
@@ -30,7 +30,7 @@ const y = ({
|
|
|
30
30
|
/* @__PURE__ */ a("div", { className: e.mobile, children: /* @__PURE__ */ a(p, { variant: c, size: "md", iconName: g.ARROW_FORWARD }) })
|
|
31
31
|
] })
|
|
32
32
|
] }),
|
|
33
|
-
|
|
33
|
+
l && /* @__PURE__ */ a(n, { as: "p", defaultVariant: "bodySm", className: e.description, children: l })
|
|
34
34
|
] })
|
|
35
35
|
] }), m = { backgroundImage: `url(${u})`, backgroundSize: "cover", backgroundPosition: "center" };
|
|
36
36
|
return i ? /* @__PURE__ */ a("a", { href: i, className: e.highlightCard, style: m, "data-scheme": r, children: o }) : /* @__PURE__ */ a("div", { className: e.highlightCard, style: m, "data-scheme": r, children: o });
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
justify-content: space-between;
|
|
8
8
|
padding: 32px;
|
|
9
9
|
border-radius: var(--border-radius-lg);
|
|
10
|
-
aspect-ratio:
|
|
10
|
+
aspect-ratio: 309 / 383;
|
|
11
11
|
color: var(--primary-inverted);
|
|
12
12
|
text-decoration: none;
|
|
13
13
|
}
|
|
@@ -58,19 +58,21 @@
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
@media (width <= 1200px) {
|
|
61
|
-
.highlightCard {
|
|
62
|
-
padding: 24px;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
61
|
.bottomContainer {
|
|
66
62
|
max-width: 321px;
|
|
67
|
-
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@media (width <= 930px) {
|
|
67
|
+
.highlightCard {
|
|
68
|
+
aspect-ratio: 380 / 397;
|
|
68
69
|
}
|
|
69
70
|
}
|
|
70
71
|
|
|
71
72
|
@media (width <= 768px) {
|
|
72
73
|
.highlightCard {
|
|
73
74
|
padding: 24px;
|
|
75
|
+
aspect-ratio: 309 / 383;
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
.bottomContainer {
|
|
@@ -74,17 +74,15 @@
|
|
|
74
74
|
width: 100%;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
@media (min-width: 900px) and (max-width: 1200px) {
|
|
78
|
-
.cardGridItem {
|
|
79
|
-
max-width: 290px;
|
|
80
|
-
width: 100%;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
77
|
@media (min-width: 769px) and (max-width: 1200px) {
|
|
84
78
|
.cardGrid {
|
|
85
79
|
max-width: 100%;
|
|
86
80
|
}
|
|
87
81
|
|
|
82
|
+
.cardGridItem {
|
|
83
|
+
max-width: 309px;
|
|
84
|
+
}
|
|
85
|
+
|
|
88
86
|
.title {
|
|
89
87
|
font-size: 56px;
|
|
90
88
|
letter-spacing: -2.24px;
|
|
@@ -96,15 +94,18 @@
|
|
|
96
94
|
|
|
97
95
|
.container {
|
|
98
96
|
padding: 64px 17px;
|
|
99
|
-
gap: 32px;
|
|
100
97
|
}
|
|
101
98
|
}
|
|
102
99
|
|
|
103
|
-
@media (max-width:
|
|
100
|
+
@media (max-width: 930px) {
|
|
104
101
|
.cardGrid {
|
|
105
102
|
flex-direction: column;
|
|
106
103
|
align-items: center;
|
|
107
104
|
}
|
|
105
|
+
|
|
106
|
+
.cardGridItem {
|
|
107
|
+
max-width: 389px;
|
|
108
|
+
}
|
|
108
109
|
}
|
|
109
110
|
|
|
110
111
|
@media (max-width: 768px) {
|