@scrippsproduct/networks-ui-library 2.0.10 → 2.0.11-alpha.0

package/dist/assets/CarouselSlide.css

@@ -1 +1 @@
-._slide_1echy_2{scroll-snap-align:center;overflow:hidden;display:flex;flex:0 0 100%;column-gap:var(--_slide-gap);align-items:center;justify-content:var(--_cells-position);box-sizing:border-box;aspect-ratio:var(--_slide-aspect-ratio);padding-inline-end:0}._slide_1echy_2[inert]{opacity:.5}._slide--variable-height_1echy_18{aspect-ratio:unset}._slide_1echy_2>*{display:grid;flex:0 1 calc(var(--_slide-cell-size) - var(--_slide-gap));gap:var(--_slide-gap);place-items:center;aspect-ratio:var(--_cell-aspect-ratio)}._slide_1echy_2>image-card{display:flex;gap:0;place-items:flex-start}
+._slide_1msk4_2{scroll-snap-align:center;overflow:hidden;display:flex;flex:0 0 100%;column-gap:var(--_slide-gap);align-items:stretch;justify-content:var(--_cells-position);box-sizing:border-box;aspect-ratio:var(--_slide-aspect-ratio);padding-inline-end:0}._slide_1msk4_2[inert]{opacity:.5}._slide--variable-height_1msk4_18{aspect-ratio:unset}._slide_1msk4_2>*{flex:0 1 calc(var(--_slide-cell-size) - var(--_slide-gap));aspect-ratio:var(--_cell-aspect-ratio)}._slide_1msk4_2>image-card{display:flex;gap:0;place-items:flex-start}

package/dist/assets/GridList.css

@@ -1 +1 @@
-._grid-list_17klz_1{display:grid;gap:1em;list-style:none;padding:0;margin:0}._grid-list-header_17klz_9{margin:.5em 0}._grid-list--1-columns_17klz_13{grid-template-columns:repeat(1,1fr)}._grid-list--2-columns_17klz_17{grid-template-columns:repeat(2,1fr)}._grid-list--3-columns_17klz_21{grid-template-columns:repeat(3,1fr)}._grid-list--4-columns_17klz_25{grid-template-columns:repeat(4,1fr)}._grid-list--5-columns_17klz_29{grid-template-columns:repeat(5,1fr)}._grid-list--6-columns_17klz_33{grid-template-columns:repeat(6,1fr)}._grid-list--7-columns_17klz_37{grid-template-columns:repeat(7,1fr)}._grid-list--8-columns_17klz_41{grid-template-columns:repeat(8,1fr)}._grid-list--9-columns_17klz_45{grid-template-columns:repeat(9,1fr)}._grid-list--10-columns_17klz_49{grid-template-columns:repeat(10,1fr)}@media screen and (max-width:960px){._grid-list--3-columns_17klz_21,._grid-list--4-columns_17klz_25{grid-template-columns:repeat(2,1fr)}._grid-list--5-columns_17klz_29,._grid-list--6-columns_17klz_33{grid-template-columns:repeat(3,1fr)}._grid-list--7-columns_17klz_37,._grid-list--8-columns_17klz_41{grid-template-columns:repeat(4,1fr)}._grid-list--9-columns_17klz_45,._grid-list--10-columns_17klz_49{grid-template-columns:repeat(5,1fr)}}@media screen and (max-width:600px){._grid-list_17klz_1{display:block}}
+._grid-list_1iv7r_1{display:grid;margin:0;padding:0;list-style:none}._grid-list-header_1iv7r_8{margin:.5em 0}._grid-list--1-columns_1iv7r_12{grid-template-columns:repeat(1,1fr)}._grid-list--2-columns_1iv7r_16{grid-template-columns:repeat(2,1fr)}._grid-list--3-columns_1iv7r_20{grid-template-columns:repeat(3,1fr)}._grid-list--4-columns_1iv7r_24{grid-template-columns:repeat(4,1fr)}._grid-list--5-columns_1iv7r_28{grid-template-columns:repeat(5,1fr)}._grid-list--6-columns_1iv7r_32{grid-template-columns:repeat(6,1fr)}._grid-list--7-columns_1iv7r_36{grid-template-columns:repeat(7,1fr)}._grid-list--8-columns_1iv7r_40{grid-template-columns:repeat(8,1fr)}._grid-list--9-columns_1iv7r_44{grid-template-columns:repeat(9,1fr)}._grid-list--10-columns_1iv7r_48{grid-template-columns:repeat(10,1fr)}@media screen and (max-width:960px){._grid-list--3-columns_1iv7r_20,._grid-list--4-columns_1iv7r_24{grid-template-columns:repeat(2,1fr)}._grid-list--5-columns_1iv7r_28,._grid-list--6-columns_1iv7r_32{grid-template-columns:repeat(3,1fr)}._grid-list--7-columns_1iv7r_36,._grid-list--8-columns_1iv7r_40{grid-template-columns:repeat(4,1fr)}._grid-list--9-columns_1iv7r_44,._grid-list--10-columns_1iv7r_48{grid-template-columns:repeat(5,1fr)}}@media screen and (max-width:600px){._grid-list_1iv7r_1{display:block}}

package/dist/assets/HighlightGrid.css

@@ -0,0 +1 @@
+._highlight-grid_14d9z_1{--gap: 2rem;display:grid;gap:var(--gap);box-sizing:border-box;margin:0}._highlight-grid__item_14d9z_9{display:contents;min-width:0}._highlight-grid__highlighted-items_14d9z_14{display:grid;grid-template-columns:minmax(200px,1fr) minmax(200px,1fr);gap:var(--gap)}._highlight-grid__highlighted-items_14d9z_14>._highlight-grid__item_14d9z_9{flex:1 1 50%}

package/dist/assets/LogoCard.css

@@ -1 +1 @@
-logo-card{--logo-box-width: "100%";--logo-box-height: "auto";display:flex;flex-direction:column;gap:1.5rem;box-sizing:border-box;margin:0}._logo-card__logo-box_6at8h_11{overflow:hidden;flex:0 0 auto;width:100%;height:var(--logo-box-height)}._logo-card__logo_6at8h_11{display:block;width:100%;height:100%}._logo-card__logo_6at8h_11>img{display:block;width:auto;max-width:100%;height:100%;max-height:100%;object-fit:contain;object-position:left center}._logo-card__body_6at8h_34{display:flex;flex:1 1 auto;flex-direction:column;gap:1rem;min-width:0}._logo-card__content_6at8h_42{text-align:left}._logo-card__content_6at8h_42>:first-child{margin-top:0}._logo-card__content_6at8h_42>:last-child{margin-bottom:0}._logo-card__cta-wrapper_6at8h_52{margin-top:auto}._logo-card__cta_6at8h_52{color:var(--base-anchor-color);text-align:left}._logo-card--inline_6at8h_61{flex-direction:row;gap:2.5rem;align-items:center}._logo-card--inline_6at8h_61 ._logo-card__logo-box_6at8h_11{width:var(--logo-box-width);max-width:100%;height:auto}._logo-card--inline_6at8h_61 ._logo-card__logo_6at8h_11{height:auto}._logo-card--inline_6at8h_61 ._logo-card__logo_6at8h_11>img{width:100%;height:auto;max-height:none}._logo-card--inline_6at8h_61 ._logo-card__body_6at8h_34{justify-content:center}._logo-card--inline_6at8h_61 ._logo-card__cta-wrapper_6at8h_52{margin-top:0}
+logo-card{--logo-box-width: "100%";--logo-box-height: "auto";display:flex;flex-direction:column;gap:1.5rem;box-sizing:border-box;margin:0}._logo-card__logo-box_otu2k_11{overflow:hidden;display:grid;grid-template-areas:"stack";place-content:center;width:100%;height:var(--logo-box-height)}._logo-card__logo_otu2k_11{display:block;grid-area:stack;width:100%;height:100%}._logo-card__logo_otu2k_11>img{display:block;width:auto;max-width:100%;height:100%;max-height:100%;object-fit:contain;object-position:left center}._logo-card__body_otu2k_37{display:flex;flex:1 1 auto;flex-direction:column;gap:1rem;min-width:0}._logo-card__content_otu2k_45{text-align:left}._logo-card__content_otu2k_45>:first-child{margin-top:0}._logo-card__content_otu2k_45>:last-child{margin-bottom:0}._logo-card__cta-wrapper_otu2k_55{margin-top:auto}._logo-card__cta_otu2k_55{color:var(--base-anchor-color);text-align:left}._logo-card--inline_otu2k_64{flex-direction:row;gap:2.5rem;align-items:center}._logo-card--inline_otu2k_64 ._logo-card__logo-box_otu2k_11{width:var(--logo-box-width);max-width:100%;height:auto}._logo-card--inline_otu2k_64 ._logo-card__logo_otu2k_11{height:auto}._logo-card--inline_otu2k_64 ._logo-card__logo_otu2k_11>img{width:100%;height:auto;max-height:none}._logo-card--inline_otu2k_64 ._logo-card__body_otu2k_37{justify-content:center}._logo-card--inline_otu2k_64 ._logo-card__cta-wrapper_otu2k_55{margin-top:0}

package/dist/components/CarouselSlide/CarouselSlide.js

@@ -1,22 +1,22 @@
-import { jsx as r, Fragment as m } from "react/jsx-runtime";
-import { useMemo as n, createElement as u } from "react";
+import { jsx as r, Fragment as n } from "react/jsx-runtime";
+import { useMemo as u, createElement as c } from "react";
 import { classes as d } from "../../utils/helpers.js";
-import { slideLayoutsMap as h } from "../../settings.js";
-import '../../assets/CarouselSlide.css';const p = "_slide_1echy_2", i = {
-  slide: p,
-  "slide--variable-height": "_slide--variable-height_1echy_18"
+import { slideLayoutsMap as p } from "../../settings.js";
+import '../../assets/CarouselSlide.css';const h = "_slide_1msk4_2", i = {
+  slide: h,
+  "slide--variable-height": "_slide--variable-height_1msk4_18"
 };
 function g({
   slide: e,
   index: l,
-  currentIndex: t,
-  variableHeight: s = !1
+  currentIndex: s,
+  variableHeight: t = !1
 }) {
-  const a = n(
-    () => h.get(e.layout) ?? null,
+  const a = u(
+    () => p.get(e.layout) ?? null,
     [e.layout]
   );
-  return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(
     "li",
     {
       "aria-label": e.ariaLabel,
@@ -24,11 +24,11 @@ function g({
       className: d([
         i.slide,
         "slide",
-        s ? i["slide--variable-height"] : ""
+        t ? i["slide--variable-height"] : ""
       ]),
       "data-index": l,
-      ...t !== l ? { inert: !0 } : {},
-      children: a !== null && e.cells.map((o, c) => /* @__PURE__ */ u(a, { ...o.props, key: `slide${l}-cell${c}` }))
+      ...s !== l ? { inert: !0 } : {},
+      children: a !== null && e.cells.map((o, m) => /* @__PURE__ */ c(a, { ...o.props, key: `slide${l}-cell${m}` }))
     }
   ) });
 }

package/dist/components/GridList/GridList.js

@@ -1,32 +1,40 @@
-import { jsxs as c, Fragment as g, jsx as r } from "react/jsx-runtime";
+import { jsxs as g, Fragment as o, jsx as r } from "react/jsx-runtime";
 import { classes as t } from "../../utils/helpers.js";
-import '../../assets/GridList.css';const i = {
-  "grid-list": "_grid-list_17klz_1",
-  "grid-list-header": "_grid-list-header_17klz_9",
-  "grid-list--1-columns": "_grid-list--1-columns_17klz_13",
-  "grid-list--2-columns": "_grid-list--2-columns_17klz_17",
-  "grid-list--3-columns": "_grid-list--3-columns_17klz_21",
-  "grid-list--4-columns": "_grid-list--4-columns_17klz_25",
-  "grid-list--5-columns": "_grid-list--5-columns_17klz_29",
-  "grid-list--6-columns": "_grid-list--6-columns_17klz_33",
-  "grid-list--7-columns": "_grid-list--7-columns_17klz_37",
-  "grid-list--8-columns": "_grid-list--8-columns_17klz_41",
-  "grid-list--9-columns": "_grid-list--9-columns_17klz_45",
-  "grid-list--10-columns": "_grid-list--10-columns_17klz_49"
+import '../../assets/GridList.css';const s = {
+  "grid-list": "_grid-list_1iv7r_1",
+  "grid-list-header": "_grid-list-header_1iv7r_8",
+  "grid-list--1-columns": "_grid-list--1-columns_1iv7r_12",
+  "grid-list--2-columns": "_grid-list--2-columns_1iv7r_16",
+  "grid-list--3-columns": "_grid-list--3-columns_1iv7r_20",
+  "grid-list--4-columns": "_grid-list--4-columns_1iv7r_24",
+  "grid-list--5-columns": "_grid-list--5-columns_1iv7r_28",
+  "grid-list--6-columns": "_grid-list--6-columns_1iv7r_32",
+  "grid-list--7-columns": "_grid-list--7-columns_1iv7r_36",
+  "grid-list--8-columns": "_grid-list--8-columns_1iv7r_40",
+  "grid-list--9-columns": "_grid-list--9-columns_1iv7r_44",
+  "grid-list--10-columns": "_grid-list--10-columns_1iv7r_48"
 };
-function m({
+function u({
   children: d,
-  numberOfColumns: l = 2,
-  headerText: s = ""
+  numberOfColumns: i = 2,
+  headerText: l = "",
+  gap: _ = "1em"
 }) {
-  l > 10 && (l = 10);
-  const _ = `grid-list--${l}-columns`;
-  return /* @__PURE__ */ c(g, { children: [
-    s !== "" && /* @__PURE__ */ r("h3", { className: t([i["grid-list-header"], "grid-list-header"]), children: s }),
-    /* @__PURE__ */ r("ul", { className: t([i["grid-list"], "grid-list", i[_]]), children: d })
+  i > 10 && (i = 10);
+  const c = `grid-list--${i}-columns`;
+  return /* @__PURE__ */ g(o, { children: [
+    l !== "" && /* @__PURE__ */ r("h3", { className: t([s["grid-list-header"], "grid-list-header"]), children: l }),
+    /* @__PURE__ */ r(
+      "ul",
+      {
+        className: t([s["grid-list"], "grid-list", s[c]]),
+        style: { gap: _ },
+        children: d
+      }
+    )
   ] });
 }
 export {
-  m as GridList,
-  m as default
+  u as GridList,
+  u as default
 };

package/dist/components/HighlightGrid/HighlightGrid.js

@@ -0,0 +1,54 @@
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { Fragment as o } from "react";
+import { GridList as a } from "../GridList/GridList.js";
+import { classes as t } from "../../utils/helpers.js";
+import '../../assets/HighlightGrid.css';const r = {
+  "highlight-grid": "_highlight-grid_14d9z_1",
+  "highlight-grid__item": "_highlight-grid__item_14d9z_9",
+  "highlight-grid__highlighted-items": "_highlight-grid__highlighted-items_14d9z_14"
+}, z = ({
+  list: e,
+  numberOfColumns: l = 3,
+  gap: d = "2rem",
+  classname: s = "",
+  ref: m
+}) => {
+  const _ = () => {
+    const h = e.slice(0, 2);
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        className: t([
+          r["highlight-grid__highlighted-items"],
+          "highlight-grid__highlighted-items"
+        ]),
+        children: h.map((g, c) => /* @__PURE__ */ i(o, { children: g }, `highlight-grid-item-${c}`))
+      }
+    );
+  };
+  return /* @__PURE__ */ n(
+    "highlight-grid",
+    {
+      class: t([r["highlight-grid"], s]),
+      ref: m,
+      style: { "--gap": d },
+      children: [
+        _(),
+        /* @__PURE__ */ i(a, { gap: d, numberOfColumns: l, children: e.slice(2).map(
+          (h, g) => /* @__PURE__ */ i(
+            "div",
+            {
+              className: t([r["highlight-grid__item"], "highlight-grid__item"]),
+              children: h
+            },
+            `highlight-grid-item-${g + 2}`
+          )
+        ) })
+      ]
+    }
+  );
+};
+export {
+  z as HighlightGrid,
+  z as default
+};

package/dist/components/HighlightGrid/HighlightGrid.test.js

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import { d as a, i as o, r as i, g as e, s as r } from "../../react.esm-CX7MGXBg.mjs";
+import { HighlightGrid as n } from "./HighlightGrid.js";
+a("HighlightGrid", () => {
+  o("renders the first two items as highlighted items and the rest in the grid", () => {
+    const { container: t } = i(/* @__PURE__ */ s(n, { list: ["One", "Two", "Three", "Four"] })), h = t.querySelector(".highlight-grid__highlighted-items");
+    e(h).toHaveTextContent("OneTwo"), e(h).not.toHaveTextContent("Three"), e(r.getByText("Three")).toBeInTheDocument(), e(r.getByText("Four")).toBeInTheDocument();
+  }), o("renders what it can when the list has fewer than two items", () => {
+    i(/* @__PURE__ */ s(n, { list: ["Only"] })), e(r.getByText("Only")).toBeInTheDocument();
+  }), o("does not mutate the list prop", () => {
+    const t = ["One", "Two", "Three"];
+    i(/* @__PURE__ */ s(n, { list: t })), e(t).toEqual(["One", "Two", "Three"]);
+  }), o("applies a custom classname", () => {
+    const { container: t } = i(/* @__PURE__ */ s(n, { classname: "custom-class", list: [] }));
+    e(t.querySelector("highlight-grid")).toHaveClass("custom-class");
+  });
+});

package/dist/components/HighlightGrid/index.js

@@ -0,0 +1,5 @@
+import { HighlightGrid as h, HighlightGrid as r } from "./HighlightGrid.js";
+export {
+  h as HighlightGrid,
+  r as default
+};

package/dist/components/LogoCard/LogoCard.js

@@ -5,13 +5,13 @@ import { AnchorTag as d } from "../AnchorTag/AnchorTag.js";
 import { ButtonAnchor as _ } from "../ButtonAnchor/ButtonAnchor.js";
 import { ResponsiveImage as I } from "../ResponsiveImage/ResponsiveImage.js";
 import '../../assets/LogoCard.css';const r = {
-  "logo-card__logo-box": "_logo-card__logo-box_6at8h_11",
-  "logo-card__logo": "_logo-card__logo_6at8h_11",
-  "logo-card__body": "_logo-card__body_6at8h_34",
-  "logo-card__content": "_logo-card__content_6at8h_42",
-  "logo-card__cta-wrapper": "_logo-card__cta-wrapper_6at8h_52",
-  "logo-card__cta": "_logo-card__cta_6at8h_52",
-  "logo-card--inline": "_logo-card--inline_6at8h_61"
+  "logo-card__logo-box": "_logo-card__logo-box_otu2k_11",
+  "logo-card__logo": "_logo-card__logo_otu2k_11",
+  "logo-card__body": "_logo-card__body_otu2k_37",
+  "logo-card__content": "_logo-card__content_otu2k_45",
+  "logo-card__cta-wrapper": "_logo-card__cta-wrapper_otu2k_55",
+  "logo-card__cta": "_logo-card__cta_otu2k_55",
+  "logo-card--inline": "_logo-card--inline_otu2k_64"
 }, u = (e) => typeof e == "number" ? `${e}px` : e, m = /* @__PURE__ */ new Map([
   ["play-video", { label: "View Video", component: _ }],
   ["internal-link", { label: "View More", component: d }],
@@ -20,8 +20,8 @@ import '../../assets/LogoCard.css';const r = {
   ["show-modal", { label: "See More", component: _ }]
 ]), S = ({
   logo: e = { url: "", altText: "", aspectRatio: 1, sources: [] },
-  logoBoxWidth: h = "100%",
-  logoBoxHeight: y = "auto",
+  logoBoxWidth: y = "100%",
+  logoBoxHeight: b = "auto",
   content: n = "",
   cta: o = {
     label: "",
@@ -30,14 +30,14 @@ import '../../assets/LogoCard.css';const r = {
     relatedResourceId: "",
     relatedResourceType: ""
   },
-  displayCTA: b = !0,
+  displayCTA: h = !0,
   displayInline: f = !1,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   handleClicks: x = (c) => {
   },
-  lazyLoad: T = !0,
-  decoding: w = "async",
-  classname: k = "",
+  lazyLoad: k = !0,
+  decoding: T = "async",
+  classname: w = "",
   ref: C
 }) => {
   var s;
@@ -65,15 +65,15 @@ import '../../assets/LogoCard.css';const r = {
       }
     );
   }, A = {
-    "--logo-box-width": u(h),
-    "--logo-box-height": u(y)
+    "--logo-box-width": u(y),
+    "--logo-box-height": u(b)
   };
   return /* @__PURE__ */ p(
     "logo-card",
     {
       class: a([
         f ? r["logo-card--inline"] : null,
-        k
+        w
       ]),
       ref: C,
       style: A,
@@ -83,15 +83,15 @@ import '../../assets/LogoCard.css';const r = {
           {
             altText: e.altText,
             classname: r["logo-card__logo"],
-            decoding: w,
+            decoding: T,
             fullSizeUrl: e.url,
-            loading: T ? "lazy" : void 0,
+            loading: k ? "lazy" : void 0,
             sources: e.sources
           }
         ) }),
         /* @__PURE__ */ p("div", { className: a([r["logo-card__body"], "logo-card__body"]), children: [
           n !== "" && /* @__PURE__ */ t("div", { className: a([r["logo-card__content"], "logo-card__content"]), children: typeof n == "string" ? M(n) : n }),
-          b && o.type && /* @__PURE__ */ t("div", { className: a([r["logo-card__cta-wrapper"], "logo-card__cta-wrapper"]), children: v() })
+          h && o.type && /* @__PURE__ */ t("div", { className: a([r["logo-card__cta-wrapper"], "logo-card__cta-wrapper"]), children: v() })
         ] })
       ]
     }

package/dist/src/components/GridList/GridList.d.ts

@@ -2,6 +2,7 @@ type GridListProps = {
     children: React.ReactNode;
     numberOfColumns?: number;
     headerText?: string;
+    gap?: string;
 };
-export declare function GridList({ children, numberOfColumns, headerText, }: GridListProps): JSX.Element;
+export declare function GridList({ children, numberOfColumns, headerText, gap, }: GridListProps): JSX.Element;
 export default GridList;

package/dist/src/components/HighlightGrid/HighlightGrid.d.ts

@@ -0,0 +1,9 @@
+export type HighlightGridProps = {
+    list: (React.ReactNode | string)[];
+    numberOfColumns?: number;
+    gap?: string;
+    classname?: string;
+    ref?: React.Ref<HTMLElement>;
+};
+export declare const HighlightGrid: ({ list, numberOfColumns, gap, classname, ref, }: HighlightGridProps) => JSX.Element;
+export default HighlightGrid;

package/dist/src/components/HighlightGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { HighlightGrid } from './HighlightGrid';
+export { HighlightGrid as default } from './HighlightGrid';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.10",
+  "version": "2.0.11-alpha.0",
   "name": "@scrippsproduct/networks-ui-library",
   "description": "React Component Library for use in Scripps Networks external applications",
   "author": {