@guardian/interactive-component-library 0.2.0-rc3 → 0.2.0

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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,102 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,40 +0,0 @@
-/**
- * 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

@@ -1,34 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-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

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

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

@@ -1,6 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,35 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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
-};