@guardian/interactive-component-library 0.2.0-rc1 → 0.2.0-rc2

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
+};

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 "../../../node_modules/.pnpm/dayjs@1.11.12/node_modules/dayjs/dayjs.min.js";
+import relativeTime from "../../../node_modules/.pnpm/dayjs@1.11.12/node_modules/dayjs/plugin/relativeTime.js";
+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;