@guardian/interactive-component-library 0.4.2 → 0.4.4

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

@@ -1,5 +1,6 @@
-export function Ticker({ maxItems, onStateChange, children }: {
+export function Ticker({ maxItems, onStateChange, verticalAtMobile, children, }: {
     maxItems?: number;
     onStateChange: any;
+    verticalAtMobile?: boolean;
     children: any;
 }): import("preact").JSX.Element;

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

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from "preact/jsx-runtime";
 import { toChildArray } from "preact";
-import { useState, useMemo, useRef, useLayoutEffect } from "preact/hooks";
-import { Gradient } from "./gradient/index.js";
-import "../../particles/info-button/index.js";
-import "../../particles/relative-time-sentence/index.js";
-import { ArrowButton } from "../../particles/arrow-button/index.js";
-import { Button } from "../../particles/button/index.js";
+import { useState, useRef, useLayoutEffect, useMemo, useEffect, useCallback } from "preact/hooks";
+import { useContainerSize } from "../../../shared/hooks/useContainerSize.js";
+import { TickerControlsDesktop } from "./lib/TickerControlsDesktop.js";
+import { TickerControlsMobileVertical } from "./lib/TickerControlsMobileVertical.js";
+import { getOffsetDistance } from "./lib/helpers/tickerHelper.js";
 import styles from "./style.module.scss.js";
-function Ticker({ maxItems = 20, onStateChange, children }) {
+function Ticker({
+  maxItems = 20,
+  onStateChange,
+  verticalAtMobile = false,
+  children
+}) {
   const [pageIndex, setPageIndex] = useState(0);
-  const [pageWidth, setPageWidth] = useState(0);
+  const [scrollElWidth, setScrollElWidth] = useState(0);
   const [numberOfPages, setNumberOfPages] = useState(0);
-  const offsetWidth = useMemo(() => {
-    return -pageIndex * (pageWidth || 0);
-  }, [pageIndex, pageWidth]);
   const tickerRef = useRef();
   const tickerItemsRef = useRef();
   const tickerScrollRef = useRef();
@@ -21,20 +22,33 @@ function Ticker({ maxItems = 20, onStateChange, children }) {
   const [hideButtons, setHideButtons] = useState(false);
   const [expanded, setExpanded] = useState(false);
   const childArray = toChildArray(children);
+  const containerSize = useContainerSize(tickerRef);
+  const mobLandscapeW = 480;
+  const containerWidth = containerSize ? containerSize.width : 600;
+  const isMobile = containerWidth < mobLandscapeW;
+  const pageWidthModifier = 0.75;
   useLayoutEffect(() => {
     const tickerItemsContainer = tickerItemsRef.current;
-    const pageWidth2 = tickerItemsContainer.clientWidth * 0.75;
-    setPageWidth(pageWidth2);
-    const numberOfPages2 = Math.ceil(
-      tickerScrollRef.current.scrollWidth / pageWidth2
-    );
+    const containerWidth2 = tickerItemsContainer.clientWidth * pageWidthModifier;
+    const tickerScrollEl = tickerScrollRef.current;
+    setScrollElWidth(tickerScrollEl.scrollWidth);
+    const numberOfPages2 = tickerScrollEl.scrollWidth / containerWidth2;
     setNumberOfPages(numberOfPages2);
   }, [childArray]);
-  useLayoutEffect(() => {
+  const offsetWidth = useMemo(() => {
+    let res = getOffsetDistance(
+      pageIndex,
+      numberOfPages,
+      scrollElWidth,
+      pageWidthModifier
+    );
+    return res;
+  }, [pageIndex, numberOfPages, scrollElWidth]);
+  useEffect(() => {
     const hideButtons2 = childArray.length < 4;
     setHideButtons(hideButtons2);
   }, [childArray]);
-  function toggleExpandedState() {
+  const toggleExpandedState = useCallback(() => {
     if (expanded) {
       tickerRef.current.scrollIntoView({ behavior: "smooth", alignToTop: true });
     }
@@ -43,54 +57,44 @@ function Ticker({ maxItems = 20, onStateChange, children }) {
       if (onStateChange) onStateChange({ expanded: newState });
       return newState;
     });
-  }
+  }, [expanded, onStateChange]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: tickerRef,
-      className: styles.ticker,
+      className: verticalAtMobile ? styles.tickerVertical : styles.ticker,
       style: `--ticker-offset: ${offsetWidth}px;`,
       "data-expanded": expanded,
       children: [
-        /* @__PURE__ */ jsx("div", { ref: tickerItemsRef, className: styles.tickerItems, children: /* @__PURE__ */ jsx("div", { ref: tickerScrollRef, className: styles.tickerScroll, children: childArray.map((child, index) => {
-          var _a;
-          return /* @__PURE__ */ jsx("div", { className: styles.tickerItem, children: child }, ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.id) ?? index);
-        }) }) }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { ref: tickerItemsRef, className: styles.tickerItems, children: /* @__PURE__ */ jsx(
           "div",
           {
-            ref: controlsRef,
-            className: styles.controls,
-            style: hideButtons && { display: "none" },
-            children: [
-              /* @__PURE__ */ jsx("div", { className: styles.gradient, children: /* @__PURE__ */ jsx(Gradient, {}) }),
-              /* @__PURE__ */ jsxs("div", { className: styles.buttons, children: [
-                /* @__PURE__ */ jsx(
-                  ArrowButton,
-                  {
-                    onClick: () => setPageIndex((d) => d + 1),
-                    disabled: pageIndex >= numberOfPages - 2
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  ArrowButton,
-                  {
-                    direction: "left",
-                    onClick: () => setPageIndex((d) => d - 1),
-                    disabled: pageIndex <= 0
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: styles.button, children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "regular",
-                  styles: { buttonInner: styles.buttonInner },
-                  onClick: toggleExpandedState,
-                  children: expanded ? "Show fewer" : `Show ${maxItems} most recent`
-                }
-              ) })
-            ]
+            ref: tickerScrollRef,
+            className: verticalAtMobile ? styles.tickerScrollVertical : styles.tickerScroll,
+            children: childArray.map((child, index) => {
+              var _a;
+              return /* @__PURE__ */ jsx("div", { className: styles.tickerItem, children: child }, ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.id) ?? index);
+            })
+          }
+        ) }),
+        isMobile && !verticalAtMobile && /* @__PURE__ */ jsx("div", { className: styles.gradientHorizontal }),
+        isMobile && verticalAtMobile && /* @__PURE__ */ jsx(
+          TickerControlsMobileVertical,
+          {
+            hideButtons,
+            controlsRef,
+            toggleExpandedState,
+            buttonText: expanded ? "Show fewer" : `Show ${maxItems} most recent`
+          }
+        ),
+        !isMobile && /* @__PURE__ */ jsx(
+          TickerControlsDesktop,
+          {
+            hideButtons,
+            controlsRef,
+            setPageIndex,
+            pageIndex,
+            numberOfPages
           }
         )
       ]

package/dist/components/organisms/ticker/lib/TickerControlsDesktop.d.ts

@@ -0,0 +1,7 @@
+export function TickerControlsDesktop({ hideButtons, controlsRef, setPageIndex, pageIndex, numberOfPages, }: {
+    hideButtons: any;
+    controlsRef: any;
+    setPageIndex: any;
+    pageIndex: any;
+    numberOfPages: any;
+}): import("preact").JSX.Element;

package/dist/components/organisms/ticker/lib/TickerControlsDesktop.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { Gradient } from "../gradient/index.js";
+import "preact/hooks";
+import "../../../particles/info-button/index.js";
+import "../../../particles/relative-time-sentence/index.js";
+import { ArrowButton } from "../../../particles/arrow-button/index.js";
+import styles from "../style.module.scss.js";
+const TickerControlsDesktop = ({
+  hideButtons,
+  controlsRef,
+  setPageIndex,
+  pageIndex,
+  numberOfPages
+}) => {
+  const getDisabled = (indx, numPages) => {
+    if (indx === 0 && numPages > 1) {
+      return false;
+    }
+    return indx >= Math.floor(numPages) - 1;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: controlsRef,
+      className: styles.controls,
+      style: hideButtons && { display: "none" },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.gradient, children: /* @__PURE__ */ jsx(Gradient, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.buttons, children: [
+          /* @__PURE__ */ jsx(
+            ArrowButton,
+            {
+              onClick: () => setPageIndex((d) => d + 1),
+              disabled: getDisabled(pageIndex, numberOfPages)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ArrowButton,
+            {
+              direction: "left",
+              onClick: () => setPageIndex((d) => d - 1),
+              disabled: pageIndex <= 0
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  TickerControlsDesktop
+};

package/dist/components/organisms/ticker/lib/TickerControlsMobileVertical.d.ts

@@ -0,0 +1,6 @@
+export function TickerControlsMobileVertical({ hideButtons, controlsRef, toggleExpandedState, buttonText, }: {
+    hideButtons: any;
+    controlsRef: any;
+    toggleExpandedState: any;
+    buttonText: any;
+}): import("preact").JSX.Element;

package/dist/components/organisms/ticker/lib/TickerControlsMobileVertical.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { Gradient } from "../gradient/index.js";
+import "preact/hooks";
+import "../../../particles/info-button/index.js";
+import "../../../particles/relative-time-sentence/index.js";
+import { Button } from "../../../particles/button/index.js";
+import styles from "../style.module.scss.js";
+const TickerControlsMobileVertical = ({
+  hideButtons,
+  controlsRef,
+  toggleExpandedState,
+  buttonText
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: controlsRef,
+      className: styles.controls,
+      style: hideButtons && { display: "none" },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.gradient, children: /* @__PURE__ */ jsx(Gradient, {}) }),
+        /* @__PURE__ */ jsx("div", { className: styles.button, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "regular",
+            styles: { buttonInner: styles.buttonInner },
+            onClick: toggleExpandedState,
+            children: buttonText
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  TickerControlsMobileVertical
+};

package/dist/components/organisms/ticker/lib/helpers/tickerHelper.d.ts

@@ -0,0 +1 @@
+export function getOffsetDistance(pageIndex: any, numberOfPages: any, scrollElWidth: any, pageWidthModifier: any): number;

package/dist/components/organisms/ticker/lib/helpers/tickerHelper.js

@@ -0,0 +1,17 @@
+const getOffsetDistance = (pageIndex, numberOfPages, scrollElWidth, pageWidthModifier) => {
+  const onlyOnePush = numberOfPages > 1 && numberOfPages <= 2;
+  const defaultPushDistance = onlyOnePush ? scrollElWidth / numberOfPages * pageWidthModifier : scrollElWidth / Math.floor(numberOfPages);
+  const finalPushDistance = defaultPushDistance * (numberOfPages % 1);
+  if (pageIndex === 0) {
+    return 0;
+  } else if (pageIndex === 1 && onlyOnePush) {
+    return -finalPushDistance;
+  } else if (pageIndex === Math.floor(numberOfPages) - 1) {
+    return -pageIndex * defaultPushDistance + finalPushDistance;
+  } else if (pageIndex < Math.floor(numberOfPages)) {
+    return -pageIndex * defaultPushDistance;
+  }
+};
+export {
+  getOffsetDistance
+};

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

@@ -1,19 +1,25 @@
-const ticker = "_ticker_15ezr_9";
-const tickerItems = "_tickerItems_15ezr_21";
-const tickerScroll = "_tickerScroll_15ezr_26";
-const tickerItem = "_tickerItem_15ezr_21";
-const controls = "_controls_15ezr_48";
-const gradient = "_gradient_15ezr_63";
-const buttons = "_buttons_15ezr_75";
-const button = "_button_15ezr_75";
-const buttonInner = "_buttonInner_15ezr_101";
+const tickerVertical = "_tickerVertical_ozku7_9";
+const ticker = "_ticker_ozku7_9";
+const tickerItems = "_tickerItems_ozku7_27";
+const tickerScrollVertical = "_tickerScrollVertical_ozku7_32";
+const tickerScroll = "_tickerScroll_ozku7_32";
+const tickerItem = "_tickerItem_ozku7_27";
+const controls = "_controls_ozku7_75";
+const gradient = "_gradient_ozku7_90";
+const gradientHorizontal = "_gradientHorizontal_ozku7_102";
+const buttons = "_buttons_ozku7_116";
+const button = "_button_ozku7_116";
+const buttonInner = "_buttonInner_ozku7_142";
 const styles = {
+  tickerVertical,
   ticker,
   tickerItems,
+  tickerScrollVertical,
   tickerScroll,
   tickerItem,
   controls,
   gradient,
+  gradientHorizontal,
   buttons,
   button,
   buttonInner
@@ -25,8 +31,11 @@ export {
   controls,
   styles as default,
   gradient,
+  gradientHorizontal,
   ticker,
   tickerItem,
   tickerItems,
-  tickerScroll
+  tickerScroll,
+  tickerScrollVertical,
+  tickerVertical
 };

package/dist/components/particles/circle-icon/index.js

@@ -14,7 +14,7 @@ const CircleIcon = ({
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      style: styles.svg,
+      className: styles.svg,
       fill: "none",
       height: diameter + padding,
       viewBox: `0 0 ${diameter + padding} ${diameter + padding}`,

package/dist/style.css

@@ -3199,24 +3199,30 @@ body.android {
   --top-inset: 58px;
 }
 
-._ticker_15ezr_9 {
+._tickerVertical_ozku7_9 {
   position: relative;
   padding-bottom: 44px;
   --ticker-item-width: 100%;
 }
 @media (min-width: 30em) {
-  ._ticker_15ezr_9 {
-    --ticker-item-width: 200px;
+  ._tickerVertical_ozku7_9 {
+    --ticker-item-width: auto;
     padding: 0;
   }
 }
 
-._tickerItems_15ezr_21 {
+._ticker_ozku7_9 {
+  position: relative;
+  --ticker-item-width: 200px;
+  padding: 0;
+}
+
+._tickerItems_ozku7_27 {
   width: 100%;
   overflow: clip;
 }
 
-._tickerScroll_15ezr_26 {
+._tickerScrollVertical_ozku7_32 {
   display: flex;
   flex-direction: column;
   row-gap: var(--space-2);
@@ -3225,7 +3231,7 @@ body.android {
   overflow: visible;
 }
 @media (min-width: 30em) {
-  ._tickerScroll_15ezr_26 {
+  ._tickerScrollVertical_ozku7_32 {
     flex-direction: row;
     column-gap: var(--space-2);
     transform: translateX(var(--ticker-offset));
@@ -3233,19 +3239,40 @@ body.android {
   }
 }
 
-._tickerItem_15ezr_21 {
+._tickerScroll_ozku7_32 {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  scrollbar-width: none;
+  overflow-x: scroll;
+  column-gap: var(--space-2);
+  transform: translateX(var(--ticker-offset));
+  transition: transform 0.5s ease-in-out;
+  width: auto;
+  padding-right: 50px;
+}
+._tickerScroll_ozku7_32:-webkit-scrollbar {
+  display: none; /* for Chrome, Safari, and Opera */
+}
+@media (min-width: 30em) {
+  ._tickerScroll_ozku7_32 {
+    width: fit-content;
+  }
+}
+
+._tickerItem_ozku7_27 {
   width: var(--ticker-item-width);
   flex-shrink: 0;
 }
 
-._controls_15ezr_48 {
+._controls_ozku7_75 {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 130px;
 }
 @media (min-width: 30em) {
-  ._controls_15ezr_48 {
+  ._controls_ozku7_75 {
     top: 0;
     right: 0;
     width: 86px;
@@ -3253,23 +3280,37 @@ body.android {
   }
 }
 
-._gradient_15ezr_63 {
+._gradient_ozku7_90 {
   width: 100%;
   height: 86px;
 }
 @media (min-width: 30em) {
-  ._gradient_15ezr_63 {
+  ._gradient_ozku7_90 {
     width: auto;
     height: 100%;
     right: 0;
   }
 }
 
-._buttons_15ezr_75 {
+._gradientHorizontal_ozku7_102 {
+  width: 60px;
+  height: 100%;
+  right: 0;
+  top: 0;
+  position: absolute;
+  background: linear-gradient(to right, transparent 0%, var(--tertiary-bg-color) 80%, var(--tertiary-bg-color));
+}
+@media (min-width: 30em) {
+  ._gradientHorizontal_ozku7_102 {
+    width: auto;
+  }
+}
+
+._buttons_ozku7_116 {
   display: none;
 }
 @media (min-width: 30em) {
-  ._buttons_15ezr_75 {
+  ._buttons_ozku7_116 {
     position: absolute;
     top: 0;
     right: var(--space-5);
@@ -3280,36 +3321,36 @@ body.android {
   }
 }
 
-._button_15ezr_75 {
+._button_ozku7_116 {
   min-height: 40px;
   background-color: var(--tertiary-bg-color);
   padding-bottom: 20px;
 }
 @media (min-width: 30em) {
-  ._button_15ezr_75 {
+  ._button_ozku7_116 {
     display: none;
   }
 }
 
-._buttonInner_15ezr_101 {
+._buttonInner_ozku7_142 {
   background-color: var(--tertiary-bg-color);
 }
 
-._ticker_15ezr_9[data-expanded=true] {
+._tickerVertical_ozku7_9[data-expanded=true] {
   padding-bottom: 0;
 }
 
-._ticker_15ezr_9[data-expanded=true] ._tickerScroll_15ezr_26 {
+._tickerVertical_ozku7_9[data-expanded=true] ._tickerScrollVertical_ozku7_32 {
   max-height: fit-content;
   margin-bottom: -40px;
 }
 
-._ticker_15ezr_9[data-expanded=true] ._controls_15ezr_48 {
+._tickerVertical_ozku7_9[data-expanded=true] ._controls_ozku7_75 {
   position: sticky;
   margin-top: -40px;
 }
 
-._ticker_15ezr_9[data-expanded=true] ._button_15ezr_75 {
+._tickerVertical_ozku7_9[data-expanded=true] ._button_ozku7_116 {
   position: absolute;
   width: 100%;
   left: 0;

package/package.json

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