@guardian/interactive-component-library 0.2.0-rc4 → 0.3.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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