@zenpatient-org/healthspan-marketing-ui 0.2.26 → 0.2.28

package/dist/components/HighlightCard/HighlightCard.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../Icon/constants.cjs.js"),a=require("../../src/components/HighlightCard/highlightCard.module.css"),s=require("../Typography/Typography.cjs.js"),d=require("../IconButton/IconButton.cjs.js"),m=({image:h,eyebrow:t,title:r,description:i,link:n})=>{const o=e.jsxs(e.Fragment,{children:[t&&e.jsx(s.Typography,{as:"p",defaultVariant:"labelSm",emphasis:!0,className:a.eyebrow,children:t}),e.jsxs("div",{className:a.bottomContainer,children:[e.jsxs("div",{className:a.titleContainer,children:[r&&e.jsx(s.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingLg",className:a.title,children:r}),n&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.desktop,children:e.jsx(d.IconButton,{variant:"muted-invert",size:"lg",iconName:l.EIconName.ARROW_FORWARD})}),e.jsx("div",{className:a.mobile,children:e.jsx(d.IconButton,{variant:"muted-invert",size:"md",iconName:l.EIconName.ARROW_FORWARD})})]})]}),i&&e.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:a.description,children:i})]})]}),c={backgroundImage:`url(${h})`,backgroundSize:"cover",backgroundPosition:"center"};return n?e.jsx("a",{href:n,className:a.highlightCard,style:c,children:o}):e.jsx("div",{className:a.highlightCard,style:c,children:o})};exports.HighlightCard=m;

package/dist/components/HighlightCard/HighlightCard.d.ts

@@ -0,0 +1,8 @@
+export type HighlightCardProps = {
+    image: string;
+    eyebrow?: string;
+    title?: string;
+    description?: string;
+    link?: string;
+};
+export declare const HighlightCard: ({ image, eyebrow, title, description, link }: HighlightCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/HighlightCard/HighlightCard.es.js

@@ -0,0 +1,33 @@
+import { jsxs as i, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { EIconName as m } from "../Icon/constants.es.js";
+import a from "../../components/HighlightCard/highlightCard.module.css";
+import { Typography as t } from "../Typography/Typography.es.js";
+import { IconButton as h } from "../IconButton/IconButton.es.js";
+const b = ({ image: g, eyebrow: n, title: s, description: l, link: r }) => {
+  const o = /* @__PURE__ */ i(d, { children: [
+    n && /* @__PURE__ */ e(t, { as: "p", defaultVariant: "labelSm", emphasis: !0, className: a.eyebrow, children: n }),
+    /* @__PURE__ */ i("div", { className: a.bottomContainer, children: [
+      /* @__PURE__ */ i("div", { className: a.titleContainer, children: [
+        s && /* @__PURE__ */ e(
+          t,
+          {
+            as: "p",
+            defaultVariant: "headingXl",
+            mobileVariant: "headingLg",
+            className: a.title,
+            children: s
+          }
+        ),
+        r && /* @__PURE__ */ i(d, { children: [
+          /* @__PURE__ */ e("div", { className: a.desktop, children: /* @__PURE__ */ e(h, { variant: "muted-invert", size: "lg", iconName: m.ARROW_FORWARD }) }),
+          /* @__PURE__ */ e("div", { className: a.mobile, children: /* @__PURE__ */ e(h, { variant: "muted-invert", size: "md", iconName: m.ARROW_FORWARD }) })
+        ] })
+      ] }),
+      l && /* @__PURE__ */ e(t, { as: "p", defaultVariant: "bodySm", className: a.description, children: l })
+    ] })
+  ] }), c = { backgroundImage: `url(${g})`, backgroundSize: "cover", backgroundPosition: "center" };
+  return r ? /* @__PURE__ */ e("a", { href: r, className: a.highlightCard, style: c, children: o }) : /* @__PURE__ */ e("div", { className: a.highlightCard, style: c, children: o });
+};
+export {
+  b as HighlightCard
+};

package/dist/components/HighlightCard/highlightCard.module.css

@@ -0,0 +1,73 @@
+.highlightCard {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 32px;
+    border-radius: var(--border-radius-lg);
+    height: 483px;
+    color: var(--color-text-primary-inverted);
+    text-decoration: none;
+}
+
+.eyebrow {
+    width: 100%;
+    color: var(--color-text-secondary-inverted);
+    align-self: flex-start;
+}
+
+.bottomContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    margin-top: auto;
+    max-width: 325px;
+}
+
+.titleContainer {
+    display: flex;
+    width: 100%;
+    gap: 24px;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 0;
+}
+
+.desktop {
+    display: block;
+}
+
+.mobile {
+    display: none;
+}
+
+@media (width <= 1200px) {
+    .highlightCard {
+        height: 477px;
+        padding: 24px;
+    }
+
+    .bottomContainer {
+        max-width: 321px;
+        gap: 8px;
+    }
+}
+
+@media (width <= 768px) {
+    .highlightCard {
+        height: 415.5px;
+        padding: 24px;
+    }
+
+    .bottomContainer {
+        max-width: 287px;
+    }
+
+    .desktop {
+        display: none;
+    }
+
+    .mobile {
+        display: block;
+    }
+}

package/dist/components/HighlightCard/index.d.ts

@@ -0,0 +1,2 @@
+export { HighlightCard } from './HighlightCard';
+export type { HighlightCardProps } from './HighlightCard';

package/dist/components/TypeBadge/typeBadge.module.css

@@ -36,7 +36,7 @@
 }
 
 .typeBadge[data-type='hormone'] {
-    background-color: var(--color-lilac-300);
+    background-color: var(--color-bg-fill-brand-lilac);
 }
 
 .badgeIcon {

package/dist/modules/Highlight/Highlight.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("swiper/modules"),o=require("swiper/react"),_=require("../../utils/useSwiper/useSwiper.cjs.js"),s=require("../../src/modules/Highlight/highlight.module.css");;/* empty css                                        */;/* empty css                                                    */const c=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/HighlightCard/HighlightCard.cjs.js"),q=require("../../components/ProgressButton/ProgressButton.cjs.js"),P=[v.Navigation],k=({title:r,subtitle:t,highlightCards:n})=>{const h=_.useSwiper(),a=n.length===3,g=n.length>3,{isEnd:p,isBeginning:m,hideNav:u,handleSlideChange:w,handlePrevClick:x,handleNextClick:y,onSwiperInit:j,handleSwiperResize:S,handleReachEnd:N,handleReachBeginning:b}=h;return e.jsx("section",{className:s.root,children:e.jsxs("div",{className:s.container,children:[(r||t)&&e.jsxs("div",{className:s.textContent,children:[r&&e.jsx(c.Typography,{as:"h2",defaultVariant:"displayMd",mobileVariant:"headingLg",className:s.title,children:r}),t&&e.jsx(c.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",className:s.subtitle,children:t})]}),a&&e.jsx("div",{className:s.cardGrid,children:n.map((i,l)=>e.jsx("div",{className:s.cardGridItem,children:e.jsx(d.HighlightCard,{image:i.image,eyebrow:i.eyebrow,title:i.title,description:i.description,link:i.link})},`${i.title}_${l}`))}),!a&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.carouselArea,children:e.jsx(o.Swiper,{onSwiper:j,onResize:S,onSlideChange:w,onReachEnd:N,onReachBeginning:b,modules:P,spaceBetween:16,slidesPerView:3,breakpoints:{0:{slidesPerView:1},769:{slidesPerView:2},1201:{slidesPerView:3}},className:s.swiper,children:n.map((i,l)=>e.jsx(o.SwiperSlide,{className:s.swiperSlide,children:e.jsx(d.HighlightCard,{image:i.image,eyebrow:i.eyebrow,title:i.title,description:i.description,link:i.link})},`${i.title}_${l}`))})}),g&&!u&&e.jsx("div",{className:s.navigation,children:e.jsx(q.ProgressButton,{left:{disabled:m,onClick:x},right:{disabled:p,onClick:y}})})]})]})})};exports.Highlight=k;

package/dist/modules/Highlight/Highlight.d.ts

@@ -0,0 +1,8 @@
+import { HighlightCardProps } from '../../components/HighlightCard';
+
+export type HighlightProps = {
+    title?: string;
+    subtitle?: string;
+    highlightCards: Array<HighlightCardProps>;
+};
+export declare const Highlight: ({ title, subtitle, highlightCards }: HighlightProps) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/Highlight/Highlight.es.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as i, jsxs as o, Fragment as V } from "react/jsx-runtime";
+import { Navigation as u } from "swiper/modules";
+import { Swiper as P, SwiperSlide as R } from "swiper/react";
+import { useSwiper as x } from "../../utils/useSwiper/useSwiper.es.js";
+import n from "../../modules/Highlight/highlight.module.css";
+/* empty css                                      */
+/* empty css                                                  */
+import { Typography as d } from "../../components/Typography/Typography.es.js";
+import { HighlightCard as m } from "../../components/HighlightCard/HighlightCard.es.js";
+import { ProgressButton as E } from "../../components/ProgressButton/ProgressButton.es.js";
+const B = [u], T = ({ title: l, subtitle: r, highlightCards: s }) => {
+  const c = x(), t = s.length === 3, p = s.length > 3, {
+    isEnd: h,
+    isBeginning: g,
+    hideNav: w,
+    handleSlideChange: N,
+    handlePrevClick: S,
+    handleNextClick: f,
+    onSwiperInit: v,
+    handleSwiperResize: y,
+    handleReachEnd: b,
+    handleReachBeginning: k
+  } = c;
+  return /* @__PURE__ */ i("section", { className: n.root, children: /* @__PURE__ */ o("div", { className: n.container, children: [
+    (l || r) && /* @__PURE__ */ o("div", { className: n.textContent, children: [
+      l && /* @__PURE__ */ i(
+        d,
+        {
+          as: "h2",
+          defaultVariant: "displayMd",
+          mobileVariant: "headingLg",
+          className: n.title,
+          children: l
+        }
+      ),
+      r && /* @__PURE__ */ i(
+        d,
+        {
+          as: "p",
+          defaultVariant: "bodyLg",
+          mobileVariant: "bodyMd",
+          className: n.subtitle,
+          children: r
+        }
+      )
+    ] }),
+    t && /* @__PURE__ */ i("div", { className: n.cardGrid, children: s.map((e, a) => /* @__PURE__ */ i("div", { className: n.cardGridItem, children: /* @__PURE__ */ i(
+      m,
+      {
+        image: e.image,
+        eyebrow: e.eyebrow,
+        title: e.title,
+        description: e.description,
+        link: e.link
+      }
+    ) }, `${e.title}_${a}`)) }),
+    !t && /* @__PURE__ */ o(V, { children: [
+      /* @__PURE__ */ i("div", { className: n.carouselArea, children: /* @__PURE__ */ i(
+        P,
+        {
+          onSwiper: v,
+          onResize: y,
+          onSlideChange: N,
+          onReachEnd: b,
+          onReachBeginning: k,
+          modules: B,
+          spaceBetween: 16,
+          slidesPerView: 3,
+          breakpoints: {
+            0: {
+              slidesPerView: 1
+            },
+            769: {
+              slidesPerView: 2
+            },
+            1201: {
+              slidesPerView: 3
+            }
+          },
+          className: n.swiper,
+          children: s.map((e, a) => /* @__PURE__ */ i(R, { className: n.swiperSlide, children: /* @__PURE__ */ i(
+            m,
+            {
+              image: e.image,
+              eyebrow: e.eyebrow,
+              title: e.title,
+              description: e.description,
+              link: e.link
+            }
+          ) }, `${e.title}_${a}`))
+        }
+      ) }),
+      p && !w && /* @__PURE__ */ i("div", { className: n.navigation, children: /* @__PURE__ */ i(
+        E,
+        {
+          left: {
+            disabled: g,
+            onClick: S
+          },
+          right: {
+            disabled: h,
+            onClick: f
+          }
+        }
+      ) })
+    ] })
+  ] }) });
+};
+export {
+  T as Highlight
+};

package/dist/modules/Highlight/highlight.module.css

@@ -0,0 +1,127 @@
+.root {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.container {
+    width: 100%;
+    max-width: var(--content-max-width);
+    display: flex;
+    flex-direction: column;
+    padding: 64px 0;
+    gap: 64px;
+    overflow: hidden;
+}
+
+.textContent {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+    align-items: center;
+}
+
+.title {
+    max-width: 692px;
+}
+
+.subtitle {
+    max-width: 648px;
+}
+
+.cardGrid {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    width: 100%;
+    flex-direction: row;
+}
+
+.cardGridItem {
+    flex-shrink: 0;
+}
+
+.carouselArea {
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+}
+
+.swiper {
+    max-width: calc((390px * 3) + (16px * 2));
+    /* max width of each card + gap between cards */
+}
+
+.swiperSlide {
+    max-width: 390px;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.navigation {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    margin-top: 32px;
+}
+
+.cardGridItem {
+    max-width: 389px;
+    width: 100%;
+}
+
+@media (min-width: 769px) and (max-width: 1200px) {
+    .cardGrid {
+        max-width: 100%;
+    }
+
+    .cardGridItem {
+        max-width: 335px;
+        width: 100%;
+    }
+
+    .title {
+        font-size: 56px;
+        letter-spacing: -2.24px;
+    }
+
+    .swiper {
+        max-width: calc((390px * 2) + 16px);
+    }
+
+    .container {
+        padding: 64px 17px;
+        gap: 32px;
+    }
+}
+
+@media (max-width: 979px) {
+    .cardGrid {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+@media (max-width: 768px) {
+    .cardGridItem {
+        max-width: 335px;
+        width: 100%;
+    }
+    .container {
+        padding: 64px 20px 32px 20px;
+    }
+
+    .swiper {
+        max-width: 335px;
+    }
+    .navigation {
+        margin-top: 24px;
+    }
+    .subtitle {
+        max-width: 576px;
+    }
+}

package/dist/modules/Highlight/index.d.ts

@@ -0,0 +1,2 @@
+export { Highlight } from './Highlight';
+export type { HighlightProps } from './Highlight';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.26",
+    "version": "0.2.28",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -371,6 +371,11 @@
             "import": "./dist/components/PlainFeaturesGroup/PlainFeaturesGroup.es.js",
             "require": "./dist/components/PlainFeaturesGroup/PlainFeaturesGroup.cjs.js"
         },
+        "./HighlightCard": {
+            "types": "./dist/components/HighlightCard/HighlightCard.d.ts",
+            "import": "./dist/components/HighlightCard/HighlightCard.es.js",
+            "require": "./dist/components/HighlightCard/HighlightCard.cjs.js"
+        },
         "./Claims": {
             "types": "./dist/modules/Claims/Claims.d.ts",
             "import": "./dist/modules/Claims/Claims.es.js",
@@ -601,6 +606,11 @@
             "import": "./dist/modules/HomepageHeroV2/HomepageHeroV2.es.js",
             "require": "./dist/modules/HomepageHeroV2/HomepageHeroV2.cjs.js"
         },
+        "./Highlight": {
+            "types": "./dist/modules/Highlight/Highlight.d.ts",
+            "import": "./dist/modules/Highlight/Highlight.es.js",
+            "require": "./dist/modules/Highlight/Highlight.cjs.js"
+        },
         "./Bubbles": {
             "types": "./dist/pageComponents/Bubbles/Bubbles.d.ts",
             "import": "./dist/pageComponents/Bubbles/Bubbles.es.js",