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

package/dist/components/particles/container/style.module.scss.js

@@ -0,0 +1,11 @@
+const pageContainer = "_pageContainer_1s0yq_9";
+const sideBorders = "_sideBorders_1s0yq_42";
+const defaultStyles = {
+  pageContainer,
+  sideBorders
+};
+export {
+  defaultStyles as default,
+  pageContainer,
+  sideBorders
+};

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

@@ -0,0 +1 @@
+export function GradientIcon(props: any): import("preact").JSX.Element;

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

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { useId } from "preact/hooks";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+const GradientIcon = (props) => {
+  let { previous, next, styles } = props;
+  styles = mergeStyles(defaultStyles, styles);
+  const gradientId = useId();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: styles.svg,
+      width: "24",
+      height: "11",
+      viewBox: "0 0 24 11",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: gradientId,
+            x1: "5.5",
+            y1: "5.5",
+            x2: "12",
+            y2: "5.5",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx("stop", { className: `${styles == null ? void 0 : styles.previous} stop-color--${previous}` }),
+              /* @__PURE__ */ jsx("stop", { className: `${styles == null ? void 0 : styles.next} stop-color--${next}`, offset: "1" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M0 5.434C0 2.43288 2.43288 0 5.434 0H5.69626C6.85818 0 7.9797 0.426401 8.84813 1.19834C10.6456 2.79612 13.3544 2.79612 15.1519 1.19834C16.0203 0.426401 17.1418 0 18.3037 0L18.566 0C21.5671 0 24 2.43288 24 5.434V5.566C24 8.56712 21.5671 11 18.566 11H18.3037C17.1418 11 16.0203 10.5736 15.1519 9.80166C13.3544 8.20388 10.6456 8.20388 8.84813 9.80166C7.9797 10.5736 6.85818 11 5.69626 11H5.434C2.43288 11 0 8.56712 0 5.566V5.434Z",
+            fill: `url(#${gradientId})`
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  GradientIcon
+};

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

@@ -0,0 +1,14 @@
+const svg = "_svg_8bh9o_6";
+const previous = "_previous_8bh9o_12";
+const next = "_next_8bh9o_16";
+const defaultStyles = {
+  svg,
+  previous,
+  next
+};
+export {
+  defaultStyles as default,
+  next,
+  previous,
+  svg
+};

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

@@ -0,0 +1,18 @@
+export * from './chevron';
+export * from './legend-item';
+export * from './stacked-bar';
+export * from './gradient-icon';
+export * from './waffle';
+export * from './info-button';
+export * from './circle-icon';
+export * from './relative-time-sentence';
+export * from './container';
+export * from './change-bar';
+export * from './square-cut-corner-icon';
+export * from './stacked-grid';
+export * from './square-icon';
+export * from './arrow-button';
+export * from './button';
+export * from './close-button';
+export * from './ad-slot';
+export * from './aspect-ratio-box';

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

@@ -0,0 +1,3 @@
+export const InfoButton: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<{}> & {
+    ref?: import('preact').Ref<any>;
+}>;

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

@@ -0,0 +1,19 @@
+import { jsx } from "preact/jsx-runtime";
+import { forwardRef } from "preact/compat";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import defaultStyles from "./style.module.css.js";
+const InfoButton = forwardRef(({ onClick, styles }, ref) => {
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  return /* @__PURE__ */ jsx("button", { ref, className: styles.button, onClick, children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: styles.svg,
+      viewBox: "0 0 5 13",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx("path", { d: "m3.72905 10.8229v.5256c-.11944.0955-.28666.1672-.45388.2628-.16723.0716-.35834.1433-.54945.215-.19111.0716-.38222.1194-.57333.1433s-.38222.0478-.54945.0478c-.38222 0-.621109-.0717-.764442-.215-.167222-.1434-.238889-.3106-.238889-.4778 0-.1911.023889-.3822.047778-.5733s.071667-.3823.119445-.6211l1.003328-4.56282-.931662-.215v-.50167c.143333-.04777.334442-.11944.597222-.19111.23889-.07166.50167-.11944.78833-.16722.28667-.04778.54945-.09556.81223-.11944.26277-.02389.50166-.04778.71666-.04778l.26278.16722-1.33778 6.33052zm.45389-8.02663c-.215.19111-.52555.28667-.88389.28667-.33444 0-.62111-.09556-.86-.28667-.215-.19111-.33444-.43-.33444-.74056 0-.33444.11944-.59722.33444-.78833s.50167-.286667.86-.286667c.38223 0 .66889.095557.88389.286667s.33445.45389.33445.78833c-.02389.31056-.11945.54945-.33445.74056z" })
+    }
+  ) });
+});
+export {
+  InfoButton
+};

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

@@ -0,0 +1,11 @@
+const button = "_button_oqopj_1";
+const svg = "_svg_oqopj_15";
+const defaultStyles = {
+  button,
+  svg
+};
+export {
+  button,
+  defaultStyles as default,
+  svg
+};

package/dist/components/particles/legend-item/index.d.ts

@@ -0,0 +1,6 @@
+export function LegendItem({ dotType, text, styles, abbreviation, }: {
+    dotType?: string;
+    text: any;
+    styles: any;
+    abbreviation: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/legend-item/index.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+const DOT_TYPE = {
+  round: "round",
+  square: "square"
+};
+const LegendItem = ({
+  dotType = DOT_TYPE.round,
+  text,
+  styles,
+  abbreviation
+}) => {
+  const defaultStylesCopy = { ...defaultStyles };
+  if (dotType === DOT_TYPE.round) {
+    defaultStylesCopy.dot = mergeStyles(defaultStyles.dot, defaultStyles.circle);
+  }
+  styles = mergeStyles(defaultStylesCopy, styles);
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsx("span", { className: `${styles.dot} bg-color--${abbreviation}` }),
+    /* @__PURE__ */ jsx("p", { className: styles.text, children: text })
+  ] });
+};
+export {
+  LegendItem
+};

package/dist/components/particles/legend-item/style.module.css.js

@@ -0,0 +1,17 @@
+const container = "_container_jzalm_1";
+const dot = "_dot_jzalm_6";
+const circle = "_circle_jzalm_13";
+const text = "_text_jzalm_17";
+const defaultStyles = {
+  container,
+  dot,
+  circle,
+  text
+};
+export {
+  circle,
+  container,
+  defaultStyles as default,
+  dot,
+  text
+};

package/dist/components/particles/relative-time-sentence/index.d.ts

@@ -0,0 +1,4 @@
+export function RelativeTimeSentence({ timeStamp, styles }: {
+    timeStamp: any;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/relative-time-sentence/index.js

@@ -0,0 +1,14 @@
+import { jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+dayjs.extend(relativeTime);
+const RelativeTimeSentence = ({ timeStamp, styles }) => {
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  let timeSince = dayjs(timeStamp).fromNow();
+  return /* @__PURE__ */ jsx("span", { className: styles.dateStampText, children: timeSince });
+};
+export {
+  RelativeTimeSentence
+};

package/dist/components/particles/relative-time-sentence/style.module.css.js

@@ -0,0 +1,8 @@
+const dateStampText = "_dateStampText_wczs5_1";
+const defaultStyles = {
+  dateStampText
+};
+export {
+  dateStampText,
+  defaultStyles as default
+};

package/dist/components/particles/square-cut-corner-icon/index.d.ts

@@ -0,0 +1,6 @@
+export function SquareCutCornerIcon({ cornerColor, squareColor, squareSize, styles, }: {
+    cornerColor: any;
+    squareColor: any;
+    squareSize: any;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/square-cut-corner-icon/index.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.scss.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+const SquareCutCornerIcon = ({
+  cornerColor,
+  squareColor,
+  squareSize,
+  styles
+}) => {
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  let cornerSize = squareSize * 0.625;
+  let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: squareSize,
+      height: squareSize,
+      className: styles.svg,
+      viewBox: `0 0 ${squareSize} ${squareSize}`,
+      children: /* @__PURE__ */ jsxs("g", { id: "square-cutoff-corner-icon", children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            id: "square",
+            fill: squareColor,
+            className: styles.square,
+            width: squareSize,
+            height: squareSize
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { id: "corner", children: [
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              id: "cornerTriangleBg",
+              className: styles.dividingLineColor,
+              points: `0,0 0,${cornerSize} ${cornerSize},0`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              id: "cornerTriangle",
+              fill: cornerColor,
+              className: styles.corner,
+              points: `0,0 0,${cornerSize - cornerMargin} ${cornerSize - cornerMargin},0`
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  SquareCutCornerIcon
+};

package/dist/components/particles/square-cut-corner-icon/style.module.scss.js

@@ -0,0 +1,17 @@
+const svg = "_svg_886i1_9";
+const dividingLineColor = "_dividingLineColor_886i1_16";
+const square = "_square_886i1_20";
+const corner = "_corner_886i1_24";
+const defaultStyles = {
+  svg,
+  dividingLineColor,
+  square,
+  corner
+};
+export {
+  corner,
+  defaultStyles as default,
+  dividingLineColor,
+  square,
+  svg
+};

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

@@ -0,0 +1,5 @@
+export function SquareIcon({ color, size, styles }: {
+    color: any;
+    size: any;
+    styles: any;
+}): import("preact").JSX.Element;

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

@@ -0,0 +1,28 @@
+import { jsx } from "preact/jsx-runtime";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import defaultStyles from "./style.module.scss.js";
+const SquareIcon = ({ color, size, styles }) => {
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      className: styles.svg,
+      viewBox: `0 0 ${size} ${size}`,
+      children: /* @__PURE__ */ jsx(
+        "rect",
+        {
+          id: "square",
+          fill: color,
+          className: styles.squareFill,
+          width: size,
+          height: size
+        }
+      )
+    }
+  );
+};
+export {
+  SquareIcon
+};

package/dist/components/particles/square-icon/style.module.scss.js

@@ -0,0 +1,11 @@
+const svg = "_svg_l2fsl_9";
+const squareFill = "_squareFill_l2fsl_16";
+const defaultStyles = {
+  svg,
+  squareFill
+};
+export {
+  defaultStyles as default,
+  squareFill,
+  svg
+};

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

@@ -0,0 +1,23 @@
+export function StackedBar({ stack, width, height, hideLabels, labelType, showBackgroundRect, createSVG, labelOverlapConfig, border, styles, }: {
+    stack: any;
+    width: any;
+    height: any;
+    hideLabels?: boolean;
+    labelType?: string;
+    showBackgroundRect?: boolean;
+    createSVG?: boolean;
+    labelOverlapConfig?: {
+        labelSize: number;
+        moveBothLabels: boolean;
+    };
+    border?: boolean;
+    styles: any;
+}): import("preact").JSX.Element;
+export namespace LabelType {
+    let hanging: string;
+    let inline: string;
+}
+export namespace LabelOverlapConfig {
+    let labelSize: number;
+    let moveBothLabels: boolean;
+}

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

@@ -0,0 +1,140 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { useRef, useMemo } from "preact/hooks";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import { preventOverlap } from "../../../shared/helpers/labelsUtil.js";
+const LabelType = {
+  hanging: "hanging",
+  inline: "inline"
+};
+const LabelOverlapConfig = {
+  labelSize: 20,
+  moveBothLabels: false
+};
+function StackedBar({
+  stack,
+  width,
+  height,
+  hideLabels = false,
+  labelType = LabelType.inline,
+  showBackgroundRect = false,
+  createSVG = true,
+  labelOverlapConfig = LabelOverlapConfig,
+  border = false,
+  styles
+}) {
+  const rectElements = useRef([]);
+  const textElements = useRef([]);
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  const svgHeight = labelType === LabelType.hanging && !hideLabels ? height + 20 : height;
+  const cleanBorderAbbr = (abbrText) => abbrText.split("-")[0];
+  const renderLabel = (config, i) => /* @__PURE__ */ jsx(
+    "text",
+    {
+      ref: (element) => textElements.current[i] = element,
+      textRendering: "optimizeLegibility",
+      className: `${styles.label} ${config.hasStroke ? styles.labelStroke : ""}`,
+      style: { display: "visible" },
+      x: config.x,
+      y: config.y,
+      textAnchor: config.textAnchor,
+      dominantBaseline: config.dominantBaseline,
+      children: config.value
+    },
+    `label-${i}`
+  );
+  let totalWidth = 0;
+  const content = stack.map((d, index) => {
+    const itemWidth = d.fraction * width;
+    const labelConfig = {
+      value: d.label,
+      x: itemWidth - 4,
+      y: height / 2,
+      textAnchor: "end",
+      dominantBaseline: "middle"
+    };
+    const value = /* @__PURE__ */ jsxs("g", { transform: `translate(${totalWidth}, 0)`, children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          ref: (element) => rectElements.current[index] = element,
+          width: itemWidth,
+          height,
+          className: `${styles.bar} fill-color--${d.abbreviation} ${border && "stroke-color--" + cleanBorderAbbr(d.abbreviation)}`,
+          style: { fill: d.fill },
+          shapeRendering: "crispEdges"
+        }
+      ),
+      labelType === LabelType.inline && !hideLabels && renderLabel(labelConfig, index)
+    ] }, index);
+    totalWidth += itemWidth;
+    return value;
+  });
+  const hangingLabelConfig = useMemo(() => {
+    let totalW = 0;
+    let labels = stack.map((d) => {
+      const itemWidth = d.fraction * width;
+      const labelConfig = {
+        x: itemWidth + totalW,
+        y: height + 4,
+        value: d.label,
+        textAnchor: "end",
+        dominantBaseline: "hanging"
+      };
+      totalW += itemWidth;
+      return labelConfig;
+    });
+    return preventOverlap(
+      labels,
+      0,
+      labelOverlapConfig.labelSize,
+      "x",
+      labelOverlapConfig.moveBothLabels
+    );
+  }, [stack, height, width, labelOverlapConfig]);
+  const strokedHangingLabelConfig = useMemo(
+    () => [...hangingLabelConfig].map((l) => ({ ...l, hasStroke: true })),
+    [hangingLabelConfig]
+  );
+  const backgroundRect = /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x: "0",
+      y: "0",
+      height,
+      width,
+      className: styles.backgroundRect
+    }
+  ) });
+  if (createSVG) {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        overflow: "hidden",
+        width,
+        height: svgHeight,
+        viewBox: `0 0 ${width} ${svgHeight}`,
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          showBackgroundRect && backgroundRect,
+          /* @__PURE__ */ jsxs("g", { children: [
+            content,
+            labelType === LabelType.hanging && !hideLabels && strokedHangingLabelConfig.map(
+              (config, i) => renderLabel(config, i)
+            ),
+            labelType === LabelType.hanging && !hideLabels && hangingLabelConfig.map((config, i) => renderLabel(config, i))
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("g", { children: [
+    content,
+    labelType === LabelType.hanging && !hideLabels && hangingLabelConfig.map((config, i) => renderLabel(config, i))
+  ] });
+}
+export {
+  LabelOverlapConfig,
+  LabelType,
+  StackedBar
+};

package/dist/components/particles/stacked-bar/style.module.css.js

@@ -0,0 +1,17 @@
+const bar = "_bar_1b3uz_1";
+const label = "_label_1b3uz_5";
+const labelStroke = "_labelStroke_1b3uz_12";
+const backgroundRect = "_backgroundRect_1b3uz_18";
+const defaultStyles = {
+  bar,
+  label,
+  labelStroke,
+  backgroundRect
+};
+export {
+  backgroundRect,
+  bar,
+  defaultStyles as default,
+  label,
+  labelStroke
+};

package/dist/components/particles/stacked-grid/index.d.ts

@@ -0,0 +1,6 @@
+export function StackedGrid({ fromLeft, fromBottom, children, styles }: {
+    fromLeft: any;
+    fromBottom: any;
+    children: any;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/stacked-grid/index.js

@@ -0,0 +1,35 @@
+import { jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+const getItemRotate = (fromBottom, fromLeft) => {
+  if (fromBottom && fromLeft) {
+    return "stackedGridRotateItems270";
+  } else if (fromBottom && !fromLeft) {
+    return "stackedGridRotateItems180";
+  } else if (!fromBottom && !fromLeft) {
+    return "stackedGridRotateItems90";
+  } else if (!fromBottom && fromLeft) {
+    return "stackedGridRotateItems0";
+  }
+};
+const getContainerFlip = (fromBottom, fromLeft) => {
+  let scaleX = fromLeft ? 1 : -1;
+  let scaleY = fromBottom ? -1 : 1;
+  return `scale(${scaleX}, ${scaleY})`;
+};
+const StackedGrid = ({ fromLeft, fromBottom, children, styles }) => {
+  let containerFlip = getContainerFlip(fromBottom, fromLeft);
+  let itemRotateClass = getItemRotate(fromBottom, fromLeft);
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { transform: containerFlip },
+      className: `${styles.stackedGridContainer} ${styles[itemRotateClass]}`,
+      children
+    }
+  );
+};
+export {
+  StackedGrid
+};

package/dist/components/particles/stacked-grid/style.module.css.js

@@ -0,0 +1,20 @@
+const stackedGridContainer = "_stackedGridContainer_6whof_1";
+const stackedGridRotateItems0 = "_stackedGridRotateItems0_6whof_11";
+const stackedGridRotateItems90 = "_stackedGridRotateItems90_6whof_17";
+const stackedGridRotateItems180 = "_stackedGridRotateItems180_6whof_23";
+const stackedGridRotateItems270 = "_stackedGridRotateItems270_6whof_29";
+const defaultStyles = {
+  stackedGridContainer,
+  stackedGridRotateItems0,
+  stackedGridRotateItems90,
+  stackedGridRotateItems180,
+  stackedGridRotateItems270
+};
+export {
+  defaultStyles as default,
+  stackedGridContainer,
+  stackedGridRotateItems0,
+  stackedGridRotateItems180,
+  stackedGridRotateItems270,
+  stackedGridRotateItems90
+};

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

@@ -0,0 +1,14 @@
+export namespace WaffleType {
+    let circle: string;
+    let square: string;
+}
+export function Waffle({ units, numberOfRows, type, idAccessor, onMouseOver, onClick, styles, svgId, }: {
+    units: any;
+    numberOfRows: any;
+    type?: string;
+    idAccessor: any;
+    onMouseOver?: () => void;
+    onClick?: () => void;
+    styles: any;
+    svgId: any;
+}): import("preact").JSX.Element;