@guardian/interactive-component-library 0.7.16 → 0.8.0

package/dist/components/molecules/page-section/index.js

@@ -21,7 +21,9 @@ const PageSection = forwardRef(
     const headerRef = useRef();
     useLayoutEffect(() => {
       const headerElement = headerRef.current;
-      setMinHeight(headerElement.offsetHeight);
+      if (headerElement) {
+        setMinHeight(headerElement.offsetHeight);
+      }
     }, [children]);
     return /* @__PURE__ */ jsxs(
       "section",
@@ -32,7 +34,7 @@ const PageSection = forwardRef(
         style: { "--background-color": backgroundColor, minHeight },
         children: [
           borderTop && /* @__PURE__ */ jsx("div", { className: styles.borderTop }),
-          /* @__PURE__ */ jsx(
+          children.header && /* @__PURE__ */ jsx(
             "div",
             {
               className: [styles.header, styles[layout]].join(" "),

package/dist/components/molecules/page-section/style.module.scss.js

@@ -1,8 +1,8 @@
-const borderTop = "_borderTop_1xpz0_9";
-const section = "_section_1xpz0_39";
-const fullWidth = "_fullWidth_1xpz0_39";
-const header = "_header_1xpz0_150";
-const content = "_content_1xpz0_187";
+const borderTop = "_borderTop_1v72w_9";
+const section = "_section_1v72w_39";
+const fullWidth = "_fullWidth_1v72w_39";
+const header = "_header_1v72w_150";
+const content = "_content_1v72w_187";
 const defaultStyles = {
   borderTop,
   section,

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

@@ -1,2 +1,3 @@
 export * from './coalitions-tracker';
 export * from './ticker';
+export { Ticker as Ticker2 } from './ticker-v2';

package/dist/components/organisms/ticker-v2/Gradient.d.ts

@@ -0,0 +1,3 @@
+export function Gradient({ position }: {
+    position?: string;
+}): import("preact").JSX.Element;

package/dist/components/organisms/ticker-v2/Gradient.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.scss.js";
+function Gradient({ position = "left" }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: defaultStyles.gradient,
+      "data-position": position,
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 10 10",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      preserveAspectRatio: "none",
+      children: [
+        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "url(#paint0_linear_3798_6653)" }) }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+          "linearGradient",
+          {
+            id: "paint0_linear_3798_6653",
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%",
+            children: position === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("stop", { className: defaultStyles.lastStop, offset: "1" }),
+              /* @__PURE__ */ jsx("stop", { className: defaultStyles.firstStop })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("stop", { className: defaultStyles.firstStop }),
+              /* @__PURE__ */ jsx("stop", { className: defaultStyles.lastStop, offset: "1" })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  Gradient
+};

package/dist/components/organisms/ticker-v2/index.d.ts

@@ -0,0 +1,5 @@
+export function Ticker({ buttonScrollDistance, styles, children }: {
+    buttonScrollDistance?: number;
+    styles: any;
+    children: any;
+}): import("preact").JSX.Element;

package/dist/components/organisms/ticker-v2/index.js

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { toChildArray } from "preact";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import defaultStyles from "./style.module.scss.js";
+import { Gradient } from "./Gradient.js";
+import { useState, useRef, useEffect } from "preact/hooks";
+import "../../particles/info-button/index.js";
+import "../../particles/relative-time-sentence/index.js";
+import { ArrowButton } from "../../particles/arrow-button/index.js";
+function Ticker({ buttonScrollDistance = 250, styles, children }) {
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  const [isScrolledToStart, setIsScrolledToStart] = useState(true);
+  const [isScrolledToEnd, setIsScrolledToEnd] = useState(false);
+  const [isOverflow, setIsOverflow] = useState(false);
+  const childArray = toChildArray(children);
+  const scrollContainerRef = useRef(null);
+  function scrubLeft() {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+    let newScrollLeft = scrollContainer.scrollLeft - buttonScrollDistance;
+    if (newScrollLeft < 100) {
+      newScrollLeft = 0;
+    }
+    scrollContainer.scrollTo({
+      left: newScrollLeft,
+      behavior: "smooth"
+    });
+  }
+  function scrubRight() {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+    let scrollSpace = scrollContainer.scrollWidth - scrollContainer.clientWidth;
+    let newScrollLeft = scrollContainer.scrollLeft + buttonScrollDistance;
+    if (newScrollLeft > scrollSpace - 100) {
+      newScrollLeft = scrollSpace + 1;
+    }
+    scrollContainer.scrollTo({
+      left: newScrollLeft,
+      behavior: "smooth"
+    });
+  }
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+    let scrollDebounceTimeout;
+    const handleScroll = () => {
+      clearTimeout(scrollDebounceTimeout);
+      scrollDebounceTimeout = setTimeout(() => {
+        const currentScroll = scrollContainer.scrollLeft;
+        const scrollSpace = scrollContainer.scrollWidth - scrollContainer.clientWidth - 4;
+        setIsScrolledToEnd(currentScroll > scrollSpace);
+        setIsScrolledToStart(currentScroll === 0);
+      }, 20);
+    };
+    scrollContainer.addEventListener("scroll", handleScroll);
+    return () => {
+      clearTimeout(scrollDebounceTimeout);
+      scrollContainer.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+    if (scrollContainer.scrollWidth > scrollContainer.clientWidth) {
+      setIsOverflow(true);
+    }
+  }, [children]);
+  return /* @__PURE__ */ jsxs("div", { className: styles.ticker, children: [
+    /* @__PURE__ */ jsx("div", { ref: scrollContainerRef, className: styles.scrollContainer, children: childArray.map((child, index) => {
+      var _a;
+      return /* @__PURE__ */ jsx("div", { className: styles.tickerItem, children: child }, ((_a = child.props) == null ? void 0 : _a.id) ?? index);
+    }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${styles.scrubControls} ${isOverflow ? styles.showControls : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(Gradient, { position: "right" }),
+          /* @__PURE__ */ jsx(
+            ArrowButton,
+            {
+              styles: { button: styles.arrowButton },
+              onClick: scrubRight,
+              disabled: isScrolledToEnd
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ArrowButton,
+            {
+              styles: { button: styles.arrowButton },
+              direction: "left",
+              onClick: scrubLeft,
+              disabled: isScrolledToStart
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Ticker
+};

package/dist/components/organisms/ticker-v2/style.module.scss.js

@@ -0,0 +1,32 @@
+const ticker = "_ticker_1pk9n_9";
+const scrollContainer = "_scrollContainer_1pk9n_14";
+const tickerItem = "_tickerItem_1pk9n_39";
+const scrubControls = "_scrubControls_1pk9n_43";
+const showControls = "_showControls_1pk9n_53";
+const arrowButton = "_arrowButton_1pk9n_62";
+const gradient = "_gradient_1pk9n_66";
+const firstStop = "_firstStop_1pk9n_81";
+const lastStop = "_lastStop_1pk9n_86";
+const defaultStyles = {
+  ticker,
+  scrollContainer,
+  tickerItem,
+  scrubControls,
+  showControls,
+  arrowButton,
+  gradient,
+  firstStop,
+  lastStop
+};
+export {
+  arrowButton,
+  defaultStyles as default,
+  firstStop,
+  gradient,
+  lastStop,
+  scrollContainer,
+  scrubControls,
+  showControls,
+  ticker,
+  tickerItem
+};

package/dist/index.js

@@ -61,6 +61,7 @@ import "./components/molecules/canvas-map/Map.js";
 import { OptionPicker } from "./components/molecules/option-picker/index.js";
 import { CoalitionsTracker } from "./components/organisms/coalitions-tracker/index.js";
 import { Ticker } from "./components/organisms/ticker/index.js";
+import { Ticker as Ticker2 } from "./components/organisms/ticker-v2/index.js";
 import { useContainerSize } from "./shared/hooks/useContainerSize.js";
 import { useTouchOrHover } from "./shared/hooks/useTouchOrHover.js";
 import { useWindowSize } from "./shared/hooks/useWindowSize.js";
@@ -124,6 +125,7 @@ export {
   Text,
   TextLayer,
   Ticker,
+  Ticker2,
   Tooltip,
   ToplineResult,
   VectorLayer,

package/dist/style.css

@@ -1374,8 +1374,7 @@ body {
   --undeclared: #e7e7e7;
 }
 @media (prefers-color-scheme: dark) {
-  body.ios,
-  body.android {
+  :root:not([data-color-scheme=light]) body {
     --border-divider-color: #606060;
     --primary-text-color: #dcdcdc;
     --secondary-text-color: #c8c8c8;
@@ -2186,79 +2185,79 @@ body.android {
   --top-inset: 58px;
 }
 
-._borderTop_1xpz0_9 {
+._borderTop_1v72w_9 {
   border-top: 1px solid var(--border-divider-color);
   transform: translate(-10px);
   width: calc(100% + 20px);
 }
 @media (min-width: 30em) {
-  ._borderTop_1xpz0_9 {
+  ._borderTop_1v72w_9 {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._borderTop_1xpz0_9 {
+  ._borderTop_1v72w_9 {
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 71.25em) {
-  ._borderTop_1xpz0_9 {
+  ._borderTop_1v72w_9 {
     transform: translate(-180px);
     width: calc(100% + 197px);
     background-color: transparent;
   }
 }
 @media (min-width: 81.25em) {
-  ._borderTop_1xpz0_9 {
+  ._borderTop_1v72w_9 {
     transform: translate(-260px);
     width: calc(100% + 279px);
   }
 }
 
-._section_1xpz0_39._fullWidth_1xpz0_39 ._borderTop_1xpz0_9 {
+._section_1v72w_39._fullWidth_1v72w_39 ._borderTop_1v72w_9 {
   transform: none;
   width: calc(100% - 1px);
 }
 
-._section_1xpz0_39 {
+._section_1v72w_39 {
   position: relative;
   z-index: 0;
   padding-bottom: var(--space-8);
 }
 
-._section_1xpz0_39._fullWidth_1xpz0_39 {
+._section_1v72w_39._fullWidth_1v72w_39 {
   transform: translate(-10px);
   width: calc(100% + 20px);
   margin: 0;
   padding: 0;
 }
 @media (min-width: 30em) {
-  ._section_1xpz0_39._fullWidth_1xpz0_39 {
+  ._section_1v72w_39._fullWidth_1v72w_39 {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_1xpz0_39._fullWidth_1xpz0_39 {
+  ._section_1v72w_39._fullWidth_1v72w_39 {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_1xpz0_39._fullWidth_1xpz0_39 {
+  ._section_1v72w_39._fullWidth_1v72w_39 {
     transform: translate(-180px);
     width: calc(100% + 197px);
   }
 }
 @media (min-width: 81.25em) {
-  ._section_1xpz0_39._fullWidth_1xpz0_39 {
+  ._section_1v72w_39._fullWidth_1v72w_39 {
     transform: translate(-260px);
     width: calc(100% + 280px);
   }
 }
 
-._section_1xpz0_39::before {
+._section_1v72w_39::before {
   display: block;
   content: "";
   position: absolute;
@@ -2271,29 +2270,29 @@ body.android {
   background-color: var(--background-color);
 }
 @media (min-width: 30em) {
-  ._section_1xpz0_39::before {
+  ._section_1v72w_39::before {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_1xpz0_39::before {
+  ._section_1v72w_39::before {
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_1xpz0_39::before {
+  ._section_1v72w_39::before {
     transform: translateX(-9px);
     width: calc(100% + 26px);
   }
 }
 @media (min-width: 81.25em) {
-  ._section_1xpz0_39::before {
+  ._section_1v72w_39::before {
     width: calc(100% + 27px);
   }
 }
 
-._section_1xpz0_39._fullWidth_1xpz0_39::before {
+._section_1v72w_39._fullWidth_1v72w_39::before {
   transform: none;
   width: calc(100% - 3px);
   height: 100%;
@@ -2303,38 +2302,38 @@ body.android {
   width: calc(100% + 20px);
 }
 @media (min-width: 30em) {
-  ._section_1xpz0_39._fullWidth_1xpz0_39::before {
+  ._section_1v72w_39._fullWidth_1v72w_39::before {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_1xpz0_39._fullWidth_1xpz0_39::before {
+  ._section_1v72w_39._fullWidth_1v72w_39::before {
     width: 100%;
     transform: translateX(-1px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_1xpz0_39._fullWidth_1xpz0_39::before {
+  ._section_1v72w_39._fullWidth_1v72w_39::before {
     transform: translateX(-1px);
     width: 100%;
   }
 }
 @media (min-width: 81.25em) {
-  ._section_1xpz0_39._fullWidth_1xpz0_39::before {
+  ._section_1v72w_39._fullWidth_1v72w_39::before {
     transform: none;
     width: calc(100% - 3px);
   }
 }
 
-._header_1xpz0_150 {
+._header_1v72w_150 {
   color: var(--primary-text-color);
   padding-top: var(--space-2);
   margin-bottom: var(--space-5);
 }
 
 @media (min-width: 71.25em) {
-  body:not(.ios, .android) ._header_1xpz0_150 {
+  body:not(.ios, .android) ._header_1v72w_150 {
     position: absolute;
     max-width: 160px;
     transform: translateX(-170px);
@@ -2342,13 +2341,13 @@ body.android {
   }
 }
 @media (min-width: 81.25em) {
-  body:not(.ios, .android) ._header_1xpz0_150 {
+  body:not(.ios, .android) ._header_1v72w_150 {
     max-width: 220px;
     transform: translateX(-250px);
   }
 }
 
-body ._header_1xpz0_150._fullWidth_1xpz0_39 {
+body ._header_1v72w_150._fullWidth_1v72w_39 {
   position: absolute;
   top: 0;
   left: 0;
@@ -2359,28 +2358,32 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   max-width: 100%;
 }
 @media (min-width: 71.25em) {
-  body ._header_1xpz0_150._fullWidth_1xpz0_39 {
+  body ._header_1v72w_150._fullWidth_1v72w_39 {
     margin-bottom: 0;
   }
 }
 
-._content_1xpz0_187 {
+._content_1v72w_187 {
   position: relative;
   padding-top: 0;
   z-index: 0;
   color: var(--primary-text-color);
 }
 @media (min-width: 71.25em) {
-  ._content_1xpz0_187 {
+  ._content_1v72w_187 {
     padding-top: var(--space-2);
   }
 }
 
-._content_1xpz0_187._fullWidth_1xpz0_39 {
+:not(._header_1v72w_150) + ._content_1v72w_187 {
+  padding-top: var(--space-2);
+}
+
+._content_1v72w_187._fullWidth_1v72w_39 {
   padding-top: 0;
 }
 
-._content_1xpz0_187._fullWidth_1xpz0_39::before {
+._content_1v72w_187._fullWidth_1v72w_39::before {
   display: none;
 }._text_1ci1k_1 {
   font-family: var(--text-sans);
@@ -3413,4 +3416,92 @@ body.android {
   left: 0;
   bottom: 0;
   padding-bottom: 8px;
+}body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
+._ticker_1pk9n_9 {
+  width: 100%;
+  position: relative;
+}
+
+._scrollContainer_1pk9n_14 {
+  position: relative;
+  padding: 0;
+  cursor: default;
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-2);
+  overflow-x: scroll;
+}
+@media (max-width: 29.99em) {
+  ._scrollContainer_1pk9n_14 {
+    /* Make room for bottom scroll bar */
+    padding-bottom: 8px;
+  }
+}
+@media (min-width: 30em) {
+  ._scrollContainer_1pk9n_14 {
+    /* Make room for the scrub controls */
+    padding-right: 36px;
+  }
+  ._scrollContainer_1pk9n_14::-webkit-scrollbar {
+    display: none; /* for Chrome, Safari, and Opera */
+  }
+}
+
+._tickerItem_1pk9n_39 {
+  flex-shrink: 0;
+}
+
+._scrubControls_1pk9n_43 {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  display: none;
+}
+
+._scrubControls_1pk9n_43._showControls_1pk9n_53 {
+  display: flex;
+}
+@media (max-width: 29.99em) {
+  ._scrubControls_1pk9n_43._showControls_1pk9n_53 {
+    display: none;
+  }
+}
+
+._arrowButton_1pk9n_62 {
+  z-index: 1;
+}
+
+._gradient_1pk9n_66 {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+}
+
+._gradient_1pk9n_66[data-position=left] {
+  left: 0;
+}
+
+._gradient_1pk9n_66[data-position=right] {
+  right: 0;
+}
+
+._firstStop_1pk9n_81 {
+  stop-color: var(--tertiary-bg-color);
+  stop-opacity: 0;
+}
+
+._lastStop_1pk9n_86 {
+  stop-color: var(--tertiary-bg-color);
+  stop-opacity: 1;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.7.16",
+  "version": "0.8.0",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",