@guardian/interactive-component-library 0.3.1 → 0.3.2-rc1

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

@@ -0,0 +1,14 @@
+const gradient = "_gradient_plpaq_9";
+const firstStop = "_firstStop_plpaq_24";
+const lastStop = "_lastStop_plpaq_29";
+const styles = {
+  gradient,
+  firstStop,
+  lastStop
+};
+export {
+  styles as default,
+  firstStop,
+  gradient,
+  lastStop
+};

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

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

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

@@ -0,0 +1,102 @@
+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 styles from "./style.module.scss.js";
+function Ticker({ maxItems = 20, onStateChange, children }) {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageWidth, setPageWidth] = 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();
+  const controlsRef = useRef();
+  const [hideButtons, setHideButtons] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const childArray = toChildArray(children);
+  useLayoutEffect(() => {
+    const tickerItemsContainer = tickerItemsRef.current;
+    const pageWidth2 = tickerItemsContainer.clientWidth * 0.75;
+    setPageWidth(pageWidth2);
+    const numberOfPages2 = Math.ceil(
+      tickerScrollRef.current.scrollWidth / pageWidth2
+    );
+    setNumberOfPages(numberOfPages2);
+  }, [childArray]);
+  useLayoutEffect(() => {
+    const hideButtons2 = childArray.length < 4;
+    setHideButtons(hideButtons2);
+  }, [childArray]);
+  function toggleExpandedState() {
+    if (expanded) {
+      tickerRef.current.scrollIntoView({ behavior: "smooth", alignToTop: true });
+    }
+    setExpanded((expanded2) => {
+      const newState = !expanded2;
+      if (onStateChange) onStateChange({ expanded: newState });
+      return newState;
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: tickerRef,
+      className: 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(
+          "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`
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Ticker
+};

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

@@ -0,0 +1,32 @@
+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 styles = {
+  ticker,
+  tickerItems,
+  tickerScroll,
+  tickerItem,
+  controls,
+  gradient,
+  buttons,
+  button,
+  buttonInner
+};
+export {
+  button,
+  buttonInner,
+  buttons,
+  controls,
+  styles as default,
+  gradient,
+  ticker,
+  tickerItem,
+  tickerItems,
+  tickerScroll
+};

package/dist/components/particles/ad-slot/index.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Array of available breakpoints.
+ * @typedef {"mobile" | "phablet" | "tablet" | "desktop"} Breakpoint
+ *
+ * Type representing an ad size, defined as a tuple of two numbers in the format [width, height].
+ * @typedef {[number, number]} AdSize
+ *
+ * Type representing a size mapping for different breakpoints,
+ * the breakpoints cascade from the smallest to the largest.
+ * AKA if only mobile and desktop are defined, the mobile size will be used for phablet and tablet.
+ *
+ * @typedef {Partial<Record<Breakpoint, AdSize[]>>} SizeMapping
+ *
+ * @interface AdSlotProps
+ * @property {string} name - The unique name of the ad slot.
+ * @property {SizeMapping} sizeMapping - The size mapping for the ad slot.
+ * @property {Object} styles - The styles for the ad slot.
+ */
+/**
+ * A placeholder for an ad slot, the commercial bundle will fill this slot with an ad,
+ * matching the size mapping.
+ *
+ * @param {AdSlotProps} props
+ * @returns {React.ComponentElement<AdSlotProps, null>}
+ */
+export function AdSlot({ name, sizeMapping, styles }: AdSlotProps): React.ComponentElement<AdSlotProps, null>;
+/**
+ * Type representing an ad size, defined as a tuple of two numbers in the format [width, height].
+ */
+export type Breakpoint = "mobile" | "phablet" | "tablet" | "desktop";
+/**
+ * Type representing a size mapping for different breakpoints,
+ * the breakpoints cascade from the smallest to the largest.
+ * AKA if only mobile and desktop are defined, the mobile size will be used for phablet and tablet.
+ */
+export type AdSize = [number, number];
+/**
+ * Array of available breakpoints.
+ */
+export type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;

package/dist/components/particles/ad-slot/index.js

@@ -0,0 +1,34 @@
+import { jsx } from "preact/jsx-runtime";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import defaultStyles from "./style.module.css.js";
+function AdSlot({ name, sizeMapping, styles }) {
+  var _a, _b, _c;
+  const slotId = `dfp-ad--${name}`;
+  styles = mergeStyles(defaultStyles, styles);
+  const mobileSizes = (_a = sizeMapping.mobile) == null ? void 0 : _a.map((size) => size.join(",")).join("|");
+  const tabletSizes = (_b = sizeMapping.tablet) == null ? void 0 : _b.map((size) => size.join(",")).join("|");
+  const desktopSizes = (_c = sizeMapping.desktop) == null ? void 0 : _c.map((size) => size.join(",")).join("|");
+  return /* @__PURE__ */ jsx("div", { className: ["ad-slot-container", styles.container].join(" "), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: slotId,
+      className: [
+        "js-ad-slot",
+        "ad-slot",
+        "interactive-ad-slot",
+        styles.slot
+      ].join(" "),
+      "data-link-name": `ad slot ${name}`,
+      "data-name": `${name}`,
+      "data-label-show": "true",
+      "ad-label-text": "Advertisement",
+      "aria-hidden": "true",
+      "data-mobile": mobileSizes,
+      "data-tablet": tabletSizes,
+      "data-desktop": desktopSizes
+    }
+  ) });
+}
+export {
+  AdSlot
+};

package/dist/components/particles/ad-slot/style.module.css.js

@@ -0,0 +1,11 @@
+const container = "_container_tq3ke_1";
+const slot = "_slot_tq3ke_5";
+const defaultStyles = {
+  container,
+  slot
+};
+export {
+  container,
+  defaultStyles as default,
+  slot
+};

package/dist/components/particles/arrow-button/index.d.ts

@@ -0,0 +1,6 @@
+export function ArrowButton({ direction, disabled, styles, onClick, }: {
+    direction?: string;
+    disabled?: boolean;
+    styles: any;
+    onClick: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/arrow-button/index.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+function ArrowButton({
+  direction = "right",
+  disabled = false,
+  styles,
+  onClick
+}) {
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsx("button", { className: styles.button, disabled, onClick, children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: [styles.icon, direction].join(" "),
+      viewBox: "0 0 28 28",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: 14, cy: 14, r: "13", fillRule: "nonzero" }),
+        /* @__PURE__ */ jsx("g", { transform: "translate(6 7)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M0.667319 7.63692L12.8497 7.63692L8.07231 13.3539L8.69338 13.975L15.334 7.31842L15.334 6.68143L8.69338 0.0249018L8.07231 0.645966L12.8497 6.36294L0.667319 6.36294L0.667319 7.63692Z",
+            fill: "#121212"
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+export {
+  ArrowButton
+};

package/dist/components/particles/arrow-button/style.module.css.js

@@ -0,0 +1,11 @@
+const button = "_button_1kqfn_1";
+const icon = "_icon_1kqfn_6";
+const defaultStyles = {
+  button,
+  icon
+};
+export {
+  button,
+  defaultStyles as default,
+  icon
+};

package/dist/components/particles/aspect-ratio-box/index.d.ts

@@ -0,0 +1,4 @@
+export function AspectRatioBox({ heightAsProportionOfWidth, children }: {
+    heightAsProportionOfWidth: any;
+    children: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/aspect-ratio-box/index.js

@@ -0,0 +1,15 @@
+import { jsx } from "preact/jsx-runtime";
+import style from "./style.module.css.js";
+function AspectRatioBox({ heightAsProportionOfWidth, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: style["aspect-ratio-box"],
+      style: { "--aspect-ratio": heightAsProportionOfWidth },
+      children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", width: "100%", height: "100%" }, children })
+    }
+  );
+}
+export {
+  AspectRatioBox
+};

package/dist/components/particles/aspect-ratio-box/style.module.css.js

@@ -0,0 +1,6 @@
+const style = {
+  "aspect-ratio-box": "_aspect-ratio-box_1e5oy_1"
+};
+export {
+  style as default
+};

package/dist/components/particles/button/index.d.ts

@@ -0,0 +1,6 @@
+export function Button({ type, onClick, styles, children }: {
+    type?: string;
+    onClick: any;
+    styles: any;
+    children: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/button/index.js

@@ -0,0 +1,10 @@
+import { jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+function Button({ type = "regular", onClick, styles, children }) {
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsx("button", { className: styles.button, "data-type": type, onClick, children: /* @__PURE__ */ jsx("div", { className: styles.buttonInner, children }) });
+}
+export {
+  Button
+};

package/dist/components/particles/button/style.module.css.js

@@ -0,0 +1,11 @@
+const button = "_button_s6ell_1";
+const buttonInner = "_buttonInner_s6ell_6";
+const defaultStyles = {
+  button,
+  buttonInner
+};
+export {
+  button,
+  buttonInner,
+  defaultStyles as default
+};

package/dist/components/particles/change-bar/index.d.ts

@@ -0,0 +1,8 @@
+export function ChangeBar({ fraction, positive, party, width, height, styles, }: {
+    fraction: any;
+    positive: any;
+    party: any;
+    width: any;
+    height: any;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/change-bar/index.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.scss.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+function ChangeBar({
+  fraction,
+  positive,
+  party,
+  width,
+  height,
+  styles
+}) {
+  let centre = parseFloat(width) / 2;
+  let barwidth = parseFloat(fraction) * (parseFloat(width) / 2);
+  let negleft = `${centre - barwidth}px`;
+  let posleft = `${centre}px`;
+  let thisStyles = ` height: ${height}; width: ${barwidth}px; ${positive ? `left: ${posleft}` : `left: ${negleft}`}`;
+  let thisColor = ` bg-color--${party}`;
+  let zeroStyles = ` height: ${height};`;
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, style: `width: ${width}px`, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.bar.concat(thisColor), style: thisStyles }),
+    /* @__PURE__ */ jsx("div", { className: styles.zero, style: zeroStyles })
+  ] });
+}
+export {
+  ChangeBar
+};

package/dist/components/particles/change-bar/style.module.scss.js

@@ -0,0 +1,14 @@
+const wrapper = "_wrapper_5oj1x_9";
+const bar = "_bar_5oj1x_14";
+const zero = "_zero_5oj1x_19";
+const defaultStyles = {
+  wrapper,
+  bar,
+  zero
+};
+export {
+  bar,
+  defaultStyles as default,
+  wrapper,
+  zero
+};

package/dist/components/particles/chevron/index.d.ts

@@ -0,0 +1,6 @@
+export function Chevron({ active, direction, size, styles, }: {
+    active?: boolean;
+    direction?: string;
+    size?: string;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/chevron/index.js

@@ -0,0 +1,78 @@
+import { jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+const DIRECTION = {
+  up: "up",
+  down: "down"
+};
+const SIZE = {
+  small: "small",
+  large: "large"
+};
+function Chevron({
+  active = false,
+  direction = DIRECTION.down,
+  size = SIZE.small,
+  styles
+}) {
+  const defaultStylesCopy = { ...defaultStyles };
+  if (active) {
+    defaultStylesCopy.path = mergeStyles(
+      defaultStyles.path,
+      defaultStyles.active
+    );
+  }
+  if (direction === DIRECTION.up) {
+    defaultStylesCopy.group = mergeStyles(
+      defaultStyles.group,
+      defaultStyles.rotated
+    );
+  }
+  styles = mergeStyles(defaultStylesCopy, styles);
+  return size === SIZE.small ? /* @__PURE__ */ jsx(SmallChevron, { styles }) : /* @__PURE__ */ jsx(LargeChevron, { styles });
+}
+function SmallChevron({ styles }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "24",
+      viewBox: "0 0 16 24",
+      className: styles.svg,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx("g", { className: styles.group, style: "transform-box: fill-box;", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M7.80569 10.7123L11.6344 15H12.365L16.1938 10.7123L15.4997 10L11.9997 13L8.49976 10L7.80569 10.7123Z",
+          className: styles.path
+        }
+      ) })
+    }
+  );
+}
+function LargeChevron({ styles }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "15",
+      height: "19",
+      className: styles.svg,
+      viewBox: "0 0 15 19",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx("g", { className: styles.group, children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.667809 7.5L6.81507 12.1053L8.18493 12.1053L14.3322 7.5L15 8.09868L7.84247 14.5L7.15753 14.5L-2.61693e-08 8.09868L0.667809 7.5Z",
+          className: styles.path
+        }
+      ) })
+    }
+  );
+}
+export {
+  Chevron
+};

package/dist/components/particles/chevron/style.module.css.js

@@ -0,0 +1,20 @@
+const svg = "_svg_b5io0_1";
+const group = "_group_b5io0_5";
+const rotated = "_rotated_b5io0_10";
+const path = "_path_b5io0_14";
+const active = "_active_b5io0_18";
+const defaultStyles = {
+  svg,
+  group,
+  rotated,
+  path,
+  active
+};
+export {
+  active,
+  defaultStyles as default,
+  group,
+  path,
+  rotated,
+  svg
+};

package/dist/components/particles/circle-icon/index.d.ts

@@ -0,0 +1,6 @@
+export function CircleIcon({ color, pulse, diameter, styles }: {
+    color: any;
+    pulse?: boolean;
+    diameter?: number;
+    styles: any;
+}): import("preact").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+const CircleIcon = ({ color, pulse = false, diameter = 11, styles }) => {
+  styles = mergeStyles(defaultStyles, styles);
+  let radius = diameter / 2;
+  let padding = 2;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: styles.svg,
+      fill: "none",
+      height: diameter + padding,
+      viewBox: `0 0 ${diameter + padding} ${diameter + padding}`,
+      width: diameter + padding,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: [styles.circle, pulse && styles.pulse].join(" "),
+          style: { fill: color },
+          r: radius,
+          cx: radius + padding / 2,
+          cy: radius + padding / 2
+        }
+      )
+    }
+  );
+};
+export {
+  CircleIcon
+};

package/dist/components/particles/circle-icon/style.module.css.js

@@ -0,0 +1,14 @@
+const svg = "_svg_1v49v_1";
+const circle = "_circle_1v49v_5";
+const pulse = "_pulse_1v49v_9";
+const defaultStyles = {
+  svg,
+  circle,
+  pulse
+};
+export {
+  circle,
+  defaultStyles as default,
+  pulse,
+  svg
+};

package/dist/components/particles/close-button/index.d.ts

@@ -0,0 +1,5 @@
+export function CloseButton({ border, onClick, styles }: {
+    border?: boolean;
+    onClick: any;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/close-button/index.js

@@ -0,0 +1,35 @@
+import { jsx } from "preact/jsx-runtime";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import defaultStyles from "./style.module.css.js";
+function CloseButton({ border = true, onClick, styles }) {
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: [styles.button, border && styles.buttonBorder].join(" "),
+      onClick,
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: styles.svg,
+          viewBox: "0 0 17 17",
+          fill: "none",
+          preserveAspectRatio: "xMidYMid meet",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: styles.path,
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M8.32497 10.025L15.5499 16.6499L16.6249 15.5749L10.025 8.32497L16.6249 1.075L15.5499 0L8.32497 6.62498L1.075 0.0249999L0 1.1L6.62498 8.32497L0 15.5499L1.075 16.6249L8.32497 10.025Z"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  CloseButton
+};

package/dist/components/particles/close-button/style.module.css.js

@@ -0,0 +1,17 @@
+const button = "_button_1bibm_1";
+const buttonBorder = "_buttonBorder_1bibm_14";
+const svg = "_svg_1bibm_22";
+const path = "_path_1bibm_29";
+const defaultStyles = {
+  button,
+  buttonBorder,
+  svg,
+  path
+};
+export {
+  button,
+  buttonBorder,
+  defaultStyles as default,
+  path,
+  svg
+};

package/dist/components/particles/container/index.d.ts

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

package/dist/components/particles/container/index.js

@@ -0,0 +1,13 @@
+import { jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.scss.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+function Container({ children, sideBorders = false, styles }) {
+  const { pageContainer, sideBorders: sideBordersStyle } = mergeStyles(
+    defaultStyles,
+    styles
+  );
+  return /* @__PURE__ */ jsx("div", { className: [pageContainer, sideBorders && sideBordersStyle].join(" "), children });
+}
+export {
+  Container
+};