@zenpatient-org/healthspan-marketing-ui 0.2.38 → 0.2.40

package/dist/modules/FeaturedIn/FeaturedIn.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),l=require("../../utils/cn/cn.cjs.js"),a=require("../../src/modules/FeaturedIn/featuredIn.module.css"),u=require("./components/CtaFeaturedIn.cjs.js"),s=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js");function m({media:n}){return e.jsx("div",{className:a.mediaFeaturedInBlock,children:n.filter(r=>!!r.logo).map(({logo:r,url:t},o)=>{const i=t?"a":"div";return e.jsx(i,{href:t,target:"_blank",rel:"noopener noreferrer",className:a.mediaFeaturedInImageContainer,children:e.jsx("div",{className:a.mediaFeaturedInImage,style:{backgroundImage:`url(${r})`}})},`${t}_${o}`)})})}function p({quote:n}){return e.jsx("div",{className:a.quoteFeaturedInBlock,children:e.jsxs(s.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingXxs",className:a.quoteFeaturedInText,children:["“",n,"”"]})})}function I({label:n,content:r}){return e.jsxs("section",{className:a.container,children:[e.jsx("p",{className:l.cn(a.title,a.customTitle),children:"(Featured In)"}),e.jsx(s.Typography,{as:"p",defaultVariant:"displayMd",className:l.cn(a.title,a.defaultTitle),children:"(Featured In)"}),e.jsx(s.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.label,children:n}),e.jsx(d.InfiniteScroll,{items:r,contentClassName:a.content,itemClassName:a.item,rootClassName:a.scrollRoot,renderItem:t=>e.jsxs(c.Fragment,{children:[t.type==="media"&&e.jsx(m,{media:t.media}),t.type==="quote"&&e.jsx(p,{quote:t.quote}),t.type==="cta"&&e.jsx(u.CtaFeaturedIn,{button_label:t.button_label})]},t.type)})]})}exports.FeaturedIn=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),i=require("../../utils/cn/cn.cjs.js"),u=require("./components/CtaFeaturedIn.cjs.js"),a=require("../../src/modules/FeaturedIn/featuredIn.module.css"),l=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js");function m({media:r}){return e.jsx("div",{className:a.mediaFeaturedInBlock,children:r.filter(t=>!!t.logo).map(({logo:t,url:s},o)=>{const n=s?"a":"div";return e.jsx(n,{href:s,target:"_blank",rel:"noopener noreferrer",className:a.mediaFeaturedInImageContainer,children:e.jsx("div",{className:a.mediaFeaturedInImage,style:{backgroundImage:`url(${t})`}})},`${s}_${o}`)})})}function p({quote:r,source:t}){return e.jsxs("div",{className:a.quoteFeaturedInBlock,children:[e.jsxs(l.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingXxs",className:a.quoteFeaturedInText,children:["“",r,"”"]}),t&&e.jsxs(l.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.quoteFeaturedInSource,children:["— ",t]})]})}function h({label:r,title:t,content:s,colorScheme:o="light"}){return e.jsxs("section",{className:i.cn(a.container,a[o]),children:[e.jsx(l.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.label,children:r}),t&&e.jsxs(e.Fragment,{children:[e.jsx("p",{className:i.cn(a.title,a.customTitle),children:t}),e.jsx(l.Typography,{as:"p",defaultVariant:"displayMd",className:i.cn(a.title,a.defaultTitle),children:t})]}),e.jsx(d.InfiniteScroll,{items:s,contentClassName:a.content,itemClassName:a.item,rootClassName:a.scrollRoot,renderItem:n=>e.jsxs(c.Fragment,{children:[n.type==="media"&&e.jsx(m,{media:n.media}),n.type==="quote"&&e.jsx(p,{quote:n.quote,source:n.source}),n.type==="cta"&&e.jsx(u.CtaFeaturedIn,{button_label:n.button_label})]},n.type)})]})}exports.FeaturedIn=h;

package/dist/modules/FeaturedIn/FeaturedIn.d.ts

@@ -1,3 +1,5 @@
+import { TColorScheme } from '../../types/common';
+
 type TMediaView = {
     type: 'media';
     media: Array<{
@@ -8,6 +10,7 @@ type TMediaView = {
 type TFeaturedQuoteView = {
     type: 'quote';
     quote: string;
+    source?: string;
 };
 type TFeaturedButtonView = {
     type: 'cta';
@@ -15,7 +18,9 @@ type TFeaturedButtonView = {
 };
 export type FeaturedInProps = {
     label: string;
+    title?: string;
     content: Array<TMediaView | TFeaturedQuoteView | TFeaturedButtonView>;
+    colorScheme?: TColorScheme;
 };
-export declare function FeaturedIn({ label, content }: FeaturedInProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedIn({ label, title, content, colorScheme }: FeaturedInProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modules/FeaturedIn/FeaturedIn.es.js

@@ -1,60 +1,68 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { Fragment as d } from "react";
-import { cn as i } from "../../utils/cn/cn.es.js";
+import { jsxs as n, jsx as t, Fragment as d } from "react/jsx-runtime";
+import { Fragment as c } from "react";
+import { cn as m } from "../../utils/cn/cn.es.js";
+import { CtaFeaturedIn as u } from "./components/CtaFeaturedIn.es.js";
 import e from "../../modules/FeaturedIn/featuredIn.module.css";
-import { CtaFeaturedIn as s } from "./components/CtaFeaturedIn.es.js";
-import { Typography as o } from "../../components/Typography/Typography.es.js";
-import { InfiniteScroll as c } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
-function u({ media: r }) {
-  return /* @__PURE__ */ t("div", { className: e.mediaFeaturedInBlock, children: r.filter((n) => !!n.logo).map(({ logo: n, url: a }, m) => /* @__PURE__ */ t(
-    a ? "a" : "div",
+import { Typography as i } from "../../components/Typography/Typography.es.js";
+import { InfiniteScroll as p } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
+function f({ media: l }) {
+  return /* @__PURE__ */ t("div", { className: e.mediaFeaturedInBlock, children: l.filter((a) => !!a.logo).map(({ logo: a, url: o }, s) => /* @__PURE__ */ t(
+    o ? "a" : "div",
     {
-      href: a,
+      href: o,
       target: "_blank",
       rel: "noopener noreferrer",
       className: e.mediaFeaturedInImageContainer,
-      children: /* @__PURE__ */ t("div", { className: e.mediaFeaturedInImage, style: { backgroundImage: `url(${n})` } })
+      children: /* @__PURE__ */ t("div", { className: e.mediaFeaturedInImage, style: { backgroundImage: `url(${a})` } })
     },
-    `${a}_${m}`
+    `${o}_${s}`
   )) });
 }
-function p({ quote: r }) {
-  return /* @__PURE__ */ t("div", { className: e.quoteFeaturedInBlock, children: /* @__PURE__ */ l(
-    o,
-    {
-      as: "p",
-      defaultVariant: "headingSm",
-      mobileVariant: "headingXxs",
-      className: e.quoteFeaturedInText,
-      children: [
-        "“",
-        r,
-        "”"
-      ]
-    }
-  ) });
+function h({ quote: l, source: a }) {
+  return /* @__PURE__ */ n("div", { className: e.quoteFeaturedInBlock, children: [
+    /* @__PURE__ */ n(
+      i,
+      {
+        as: "p",
+        defaultVariant: "headingSm",
+        mobileVariant: "headingXxs",
+        className: e.quoteFeaturedInText,
+        children: [
+          "“",
+          l,
+          "”"
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ n(i, { as: "p", defaultVariant: "labelXs", emphasis: !0, className: e.quoteFeaturedInSource, children: [
+      "— ",
+      a
+    ] })
+  ] });
 }
-function q({ label: r, content: n }) {
-  return /* @__PURE__ */ l("section", { className: e.container, children: [
-    /* @__PURE__ */ t("p", { className: i(e.title, e.customTitle), children: "(Featured In)" }),
-    /* @__PURE__ */ t(o, { as: "p", defaultVariant: "displayMd", className: i(e.title, e.defaultTitle), children: "(Featured In)" }),
-    /* @__PURE__ */ t(o, { as: "p", defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: r }),
+function V({ label: l, title: a, content: o, colorScheme: s = "light" }) {
+  return /* @__PURE__ */ n("section", { className: m(e.container, e[s]), children: [
+    /* @__PURE__ */ t(i, { as: "p", defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: l }),
+    a && /* @__PURE__ */ n(d, { children: [
+      /* @__PURE__ */ t("p", { className: m(e.title, e.customTitle), children: a }),
+      /* @__PURE__ */ t(i, { as: "p", defaultVariant: "displayMd", className: m(e.title, e.defaultTitle), children: a })
+    ] }),
     /* @__PURE__ */ t(
-      c,
+      p,
       {
-        items: n,
+        items: o,
         contentClassName: e.content,
         itemClassName: e.item,
         rootClassName: e.scrollRoot,
-        renderItem: (a) => /* @__PURE__ */ l(d, { children: [
-          a.type === "media" && /* @__PURE__ */ t(u, { media: a.media }),
-          a.type === "quote" && /* @__PURE__ */ t(p, { quote: a.quote }),
-          a.type === "cta" && /* @__PURE__ */ t(s, { button_label: a.button_label })
-        ] }, a.type)
+        renderItem: (r) => /* @__PURE__ */ n(c, { children: [
+          r.type === "media" && /* @__PURE__ */ t(f, { media: r.media }),
+          r.type === "quote" && /* @__PURE__ */ t(h, { quote: r.quote, source: r.source }),
+          r.type === "cta" && /* @__PURE__ */ t(u, { button_label: r.button_label })
+        ] }, r.type)
       }
     )
   ] });
 }
 export {
-  q as FeaturedIn
+  V as FeaturedIn
 };

package/dist/modules/FeaturedIn/featuredIn.module.css

@@ -2,16 +2,18 @@
     width: 100%;
     display: flex;
     flex-direction: column;
+    gap: var(--spacing-24, 24px);
     padding: var(--spacing-120) 0;
     position: relative;
 }
 
-.label {
-    text-align: center;
+.container.dark {
+    background-color: var(--color-bg-fill-alpha-black-5);
+    color: var(--color-text-primary-inverted);
 }
 
-.scrollRoot {
-    margin-top: 67px;
+.label {
+    text-align: center;
 }
 
 .label + .scrollRoot {
@@ -25,15 +27,21 @@
     border-right: var(--border-width-sm) solid var(--color-bg-fill-alpha-black-10);
 }
 
+.container.dark .item {
+    border-color: var(--color-bg-fill-alpha-white-20);
+}
+
 .title {
-    position: absolute;
     color: var(--color-text-primary);
     text-align: center;
     opacity: 0.2;
-    margin-top: 48px;
     width: 100%;
 }
 
+.container.dark .title {
+    color: var(--color-text-primary-inverted);
+}
+
 .customTitle {
     font-family: var(--font-default);
     font-size: 144px;
@@ -55,6 +63,10 @@
     border-top: var(--border-width-sm) solid var(--color-bg-fill-alpha-black-10);
 }
 
+.container.dark .content {
+    border-color: var(--color-bg-fill-alpha-white-20);
+}
+
 .mediaFeaturedInBlock {
     display: flex;
     align-items: center;
@@ -76,6 +88,10 @@
     padding: 25px;
 }
 
+.container.dark .mediaFeaturedInImageContainer {
+    background: var(--background-fill-alpha-white-20, rgba(255, 255, 255, 0.20))
+}
+
 .mediaFeaturedInImage {
     height: 100%;
     width: 100%;
@@ -86,10 +102,28 @@
 
 .quoteFeaturedInBlock {
     display: flex;
+    flex-direction: column;
+    gap: var(--spacing-24, 24px);
     align-items: center;
     width: 320px;
 }
 
+.quoteFeaturedInSource {
+    width: 100%;
+    text-align: center;
+    color: var(--color-text-secondary-disabled);
+}
+
+.container.dark .quoteFeaturedInSource {
+    color: var(--color-text-secondary-inverted);
+}
+
+.container.dark {
+    .label, .quoteFeaturedInBlock {
+        color: var(--color-text-primary-brand-solar);
+    }
+}
+
 .quoteFeaturedInText {
     white-space: normal;
     text-align: center;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.38",
+    "version": "0.2.40",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",