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

package/dist/components/molecules/canvas-map/lib/util/zoomLevel.js

@@ -0,0 +1,14 @@
+const BASE_RESOLUTION = 156543.03392;
+function zoomLevelToZoomScale(zoomLevel, initialResolution) {
+  const resolution = BASE_RESOLUTION / Math.pow(2, zoomLevel);
+  const zoomScale = initialResolution / resolution;
+  return zoomScale;
+}
+function zoomLevelForResolution(currentResolution) {
+  const zoomLevel = Math.log2(BASE_RESOLUTION / currentResolution);
+  return zoomLevel;
+}
+export {
+  zoomLevelForResolution,
+  zoomLevelToZoomScale
+};

package/dist/components/molecules/canvas-map/style.module.scss.js

@@ -0,0 +1,20 @@
+const mapContainer = "_mapContainer_1ogf3_9";
+const helpTextContainer = "_helpTextContainer_1ogf3_15";
+const helpText = "_helpText_1ogf3_15";
+const desktopHelpText = "_desktopHelpText_1ogf3_40";
+const mobileHelpText = "_mobileHelpText_1ogf3_48";
+const styles = {
+  mapContainer,
+  helpTextContainer,
+  helpText,
+  desktopHelpText,
+  mobileHelpText
+};
+export {
+  styles as default,
+  desktopHelpText,
+  helpText,
+  helpTextContainer,
+  mapContainer,
+  mobileHelpText
+};

package/dist/components/molecules/column-chart/column-chart-example.d.ts

@@ -0,0 +1,35 @@
+export namespace example {
+    namespace sop {
+        let numResults: string;
+        let numCouncils: string;
+        let parties: ({
+            paId: number;
+            name: string;
+            abbreviation: string;
+            totalCouncils: number;
+            changeInControl: number;
+            seatsWon: number;
+            netChangeInSeats: number;
+            heldCouncils: string[];
+            lostCouncils: string[];
+            gainedCouncils: string[];
+            totalGainedCouncils: number;
+            totalLostCouncils: number;
+            totalHeldCouncils: number;
+        } | {
+            name: string;
+            abbreviation: string;
+            totalCouncils: number;
+            changeInControl: number;
+            seatsWon: number;
+            netChangeInSeats: number;
+            heldCouncils: string[];
+            lostCouncils: string[];
+            gainedCouncils: string[];
+            totalGainedCouncils: number;
+            totalLostCouncils: number;
+            totalHeldCouncils: number;
+            paId?: undefined;
+        })[];
+    }
+}

package/dist/components/molecules/column-chart/column-chart-util.d.ts

@@ -0,0 +1 @@
+export function scaleLinear(domain: any, range: any): (x: any) => number;

package/dist/components/molecules/column-chart/index.d.ts

@@ -0,0 +1,11 @@
+export function ColumnChart({ columns, maxValue, minValue, chartHeight, chartWidth, columnWidth, columnPadding, styles, }: {
+    columns: any;
+    maxValue: any;
+    minValue: any;
+    chartHeight: any;
+    chartWidth: any;
+    columnWidth: any;
+    columnPadding: any;
+    styles: any;
+}): import("preact").JSX.Element;
+export default ColumnChart;

package/dist/components/molecules/column-chart/index.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import { scaleLinear } from "d3-scale";
+const ColumnChart = ({
+  columns,
+  maxValue,
+  minValue,
+  chartHeight,
+  chartWidth,
+  columnWidth,
+  columnPadding,
+  styles
+}) => {
+  styles = mergeStyles(defaultStyles, styles);
+  const yScale = scaleLinear([maxValue, minValue], [0, chartHeight]);
+  const totalColumnWidth = Number(columnWidth) + Number(columnPadding.left) + Number(columnPadding.right);
+  let marginBottom = minValue < 0 ? 0 : 40;
+  return /* @__PURE__ */ jsxs("svg", { width: chartWidth, height: chartHeight + marginBottom, children: [
+    columns.map((column, index) => {
+      const getHeight = (input) => {
+        return yScale(0) - yScale(input);
+      };
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: index * totalColumnWidth,
+            height: getHeight(Math.abs(column.value)),
+            width: columnWidth,
+            y: column.value > 0 ? yScale(column.value) : yScale(0),
+            fill: column.color,
+            className: `${styles.bar} fill-color--${column.id}`,
+            id: column.id
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: styles.text,
+            x: index * totalColumnWidth + 2,
+            y: column.value < 0 ? yScale(0) - 6 : yScale(0) + 20,
+            children: column.label
+          }
+        )
+      ] }, index);
+    }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        className: styles.axis,
+        x: 0,
+        y: yScale(0),
+        width: chartWidth,
+        height: 1
+      }
+    )
+  ] });
+};
+export {
+  ColumnChart,
+  ColumnChart as default
+};

package/dist/components/molecules/column-chart/style.module.css.js

@@ -0,0 +1,14 @@
+const text = "_text_1ci1k_1";
+const axis = "_axis_1ci1k_6";
+const bar = "_bar_1ci1k_10";
+const defaultStyles = {
+  text,
+  axis,
+  bar
+};
+export {
+  axis,
+  bar,
+  defaultStyles as default,
+  text
+};

package/dist/components/molecules/control-change/index.d.ts

@@ -0,0 +1,6 @@
+export function ControlChange({ previous, next, text, styles }: {
+    previous: any;
+    next: any;
+    text: any;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/control-change/index.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import "preact/hooks";
+import { GradientIcon } from "../../particles/gradient-icon/index.js";
+import "../../particles/info-button/index.js";
+import { CircleIcon } from "../../particles/circle-icon/index.js";
+import "../../particles/relative-time-sentence/index.js";
+import defaultStyles from "./style.module.css.js";
+const ControlChange = ({ previous, next, text, styles }) => {
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  let hasChanged = next !== previous;
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    hasChanged ? /* @__PURE__ */ jsx(
+      GradientIcon,
+      {
+        previous,
+        next,
+        styles: {
+          previous: styles.previous,
+          next: styles.next
+        }
+      }
+    ) : /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } }),
+    /* @__PURE__ */ jsx("strong", { className: styles.text, children: text })
+  ] });
+};
+export {
+  ControlChange
+};

package/dist/components/molecules/control-change/style.module.css.js

@@ -0,0 +1,11 @@
+const text = "_text_1b8t2_1";
+const container = "_container_1b8t2_10";
+const defaultStyles = {
+  text,
+  container
+};
+export {
+  container,
+  defaultStyles as default,
+  text
+};

package/dist/components/molecules/dropdown/index.d.ts

@@ -0,0 +1,11 @@
+export function Dropdown({ title, hint, options, onSelect, multipleSelect, iconForSelectedIndexPaths, collapseOnSelect, expandByDefault, styles, }: {
+    title: any;
+    hint: any;
+    options: any;
+    onSelect: any;
+    multipleSelect?: boolean;
+    iconForSelectedIndexPaths: any;
+    collapseOnSelect?: boolean;
+    expandByDefault?: boolean;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/dropdown/index.js

@@ -0,0 +1,191 @@
+import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
+import { useMemo, useState, useCallback } from "preact/hooks";
+import { Chevron } from "../../particles/chevron/index.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import "../../particles/info-button/index.js";
+import "../../particles/relative-time-sentence/index.js";
+import defaultStyles from "./style.module.css.js";
+function Dropdown({
+  title,
+  hint,
+  options,
+  onSelect,
+  multipleSelect = false,
+  iconForSelectedIndexPaths,
+  collapseOnSelect = false,
+  expandByDefault = true,
+  styles
+}) {
+  styles = mergeStyles(defaultStyles, styles);
+  const optionGroups = useMemo(() => {
+    const containsOptionGroups = "options" in options[0];
+    if (!containsOptionGroups) {
+      options.forEach((option, index) => {
+        option.index = index;
+        option.group = 0;
+      });
+      return [{ group: 0, options }];
+    }
+    for (const [groupIndex, group] of options.entries()) {
+      for (const [optionIndex, option] of group.options.entries()) {
+        option.group = groupIndex;
+        option.index = optionIndex;
+      }
+      group.index = groupIndex;
+    }
+    return options;
+  }, [options]);
+  const [expanded, setExpanded] = useState(expandByDefault);
+  const [selectedIndexPaths, setSelectedIndexPaths] = useState(
+    () => createInitialIndexPaths(optionGroups, multipleSelect)
+  );
+  const onOptionClick = useCallback(
+    (option, index) => {
+      const indexPath = [option.group, index];
+      if (multipleSelect) {
+        setSelectedIndexPaths((selectedIndexPaths2) => {
+          selectedIndexPaths2[option.group] = indexPath;
+          return [...selectedIndexPaths2];
+        });
+      } else {
+        setSelectedIndexPaths([indexPath]);
+      }
+      if (onSelect) onSelect(option, indexPath);
+      if (collapseOnSelect) setExpanded(false);
+    },
+    [onSelect, collapseOnSelect, multipleSelect]
+  );
+  const iconForSelectedOption = useMemo(() => {
+    if (multipleSelect && iconForSelectedIndexPaths) {
+      return iconForSelectedIndexPaths(selectedIndexPaths);
+    }
+    const firstSelectedIndexPath = selectedIndexPaths[0];
+    const selectedOption = optionGroups[firstSelectedIndexPath[0]].options[firstSelectedIndexPath[1]];
+    return selectedOption.icon;
+  }, [
+    optionGroups,
+    selectedIndexPaths,
+    iconForSelectedIndexPaths,
+    multipleSelect
+  ]);
+  const selectedIndexForGroup = useCallback(
+    (groupIndex) => {
+      if (multipleSelect) {
+        return selectedIndexPaths[groupIndex][1];
+      } else if (selectedIndexPaths[0][0] === groupIndex) {
+        return selectedIndexPaths[0][1];
+      }
+      return -1;
+    },
+    [selectedIndexPaths, multipleSelect]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: styles.button,
+        onClick: () => setExpanded((current) => !current),
+        children: [
+          /* @__PURE__ */ jsx("img", { src: iconForSelectedOption, className: styles.icon }),
+          /* @__PURE__ */ jsx("span", { className: styles.title, children: title }),
+          /* @__PURE__ */ jsx(
+            Chevron,
+            {
+              active: true,
+              size: "large",
+              direction: expanded ? "up" : "down"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.clearFix }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.popout,
+        style: { visibility: expanded ? "visible" : "hidden" },
+        children: [
+          hint && /* @__PURE__ */ jsx("p", { className: styles.hint, children: hint }),
+          optionGroups.map((group, index) => {
+            return /* @__PURE__ */ jsx(
+              OptionGroup,
+              {
+                ...group,
+                selectedIndex: selectedIndexForGroup(index),
+                onOptionClick,
+                styles
+              },
+              index
+            );
+          })
+        ]
+      }
+    )
+  ] });
+}
+function OptionGroup({
+  title,
+  className,
+  options,
+  selectedIndex,
+  onOptionClick,
+  styles
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx("span", { className: styles.groupHeader, children: title }),
+    options.map((option) => {
+      const isSelected = option.index === selectedIndex;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: [
+            styles.option,
+            className,
+            isSelected ? styles.selected : ""
+          ].join(" "),
+          onClick: () => onOptionClick(option, option.index),
+          children: [
+            /* @__PURE__ */ jsx("img", { src: option.icon, className: styles.optionIcon }),
+            /* @__PURE__ */ jsxs("div", { className: styles.optionText, children: [
+              /* @__PURE__ */ jsx("h4", { className: styles.optionTitle, children: option.title }),
+              /* @__PURE__ */ jsx("p", { className: styles.optionDescription, children: option.description })
+            ] }),
+            isSelected && /* @__PURE__ */ jsx("div", { className: styles.checkmark, children: /* @__PURE__ */ jsx(Checkmark, {}) })
+          ]
+        },
+        option.title
+      );
+    })
+  ] });
+}
+function Checkmark() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "11",
+      height: "9",
+      viewBox: "0 0 11 9",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M0.631814 4.43687L0.0839844 4.9847L2.82313 8.8195H3.08335L10.9173 0.711624L10.3695 0.17749L3.08335 6.77884L0.631814 4.43687Z",
+          className: defaultStyles.checkmarkPath
+        }
+      )
+    }
+  );
+}
+function createInitialIndexPaths(groups, multipleSelect) {
+  if (multipleSelect) {
+    return groups.map((group) => [group.index, 0]);
+  }
+  return [[0, 0]];
+}
+export {
+  Dropdown
+};

package/dist/components/molecules/dropdown/style.module.css.js

@@ -0,0 +1,50 @@
+const container = "_container_6u92g_1";
+const button = "_button_6u92g_5";
+const icon = "_icon_6u92g_22";
+const title = "_title_6u92g_27";
+const clearFix = "_clearFix_6u92g_34";
+const popout = "_popout_6u92g_38";
+const hint = "_hint_6u92g_55";
+const groupHeader = "_groupHeader_6u92g_62";
+const option = "_option_6u92g_69";
+const selected = "_selected_6u92g_85";
+const optionIcon = "_optionIcon_6u92g_94";
+const optionTitle = "_optionTitle_6u92g_99";
+const optionDescription = "_optionDescription_6u92g_107";
+const checkmark = "_checkmark_6u92g_114";
+const checkmarkPath = "_checkmarkPath_6u92g_120";
+const defaultStyles = {
+  container,
+  button,
+  icon,
+  title,
+  clearFix,
+  popout,
+  hint,
+  groupHeader,
+  option,
+  selected,
+  optionIcon,
+  optionTitle,
+  optionDescription,
+  checkmark,
+  checkmarkPath
+};
+export {
+  button,
+  checkmark,
+  checkmarkPath,
+  clearFix,
+  container,
+  defaultStyles as default,
+  groupHeader,
+  hint,
+  icon,
+  option,
+  optionDescription,
+  optionIcon,
+  optionTitle,
+  popout,
+  selected,
+  title
+};

package/dist/components/molecules/first-past-the-post-waffle/index.d.ts

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

package/dist/components/molecules/first-past-the-post-waffle/index.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+const FirstPastThePostWaffle = ({ styles, children, lineOverHang }) => {
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ jsx("p", { style: { height: lineOverHang + 20 }, className: styles.halfLineText, children: children.halfLineText }),
+    /* @__PURE__ */ jsx("div", { className: styles.line, children: " " }),
+    children.waffle
+  ] });
+};
+export {
+  FirstPastThePostWaffle
+};

package/dist/components/molecules/first-past-the-post-waffle/style.module.css.js

@@ -0,0 +1,14 @@
+const wrapper = "_wrapper_kh25l_1";
+const line = "_line_kh25l_5";
+const halfLineText = "_halfLineText_kh25l_15";
+const defaultStyles = {
+  wrapper,
+  line,
+  halfLineText
+};
+export {
+  defaultStyles as default,
+  halfLineText,
+  line,
+  wrapper
+};

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

@@ -0,0 +1,17 @@
+export * from './table';
+export * from './slope-chart';
+export * from './tooltip';
+export * from './control-change';
+export * from './first-past-the-post-waffle';
+export * from './topline-result';
+export * from './page-section';
+export * from './column-chart';
+export * from './party-profile';
+export * from './result-summary';
+export * from './search-input';
+export * from './refresh-indicator';
+export * from './responsive-grid';
+export * from './modal';
+export * from './dropdown';
+export * from './svg-map';
+export * from './canvas-map';

package/dist/components/molecules/modal/index.d.ts

@@ -0,0 +1,8 @@
+export function Modal({ visible, blurBackground, alwaysMounted, styles, children, onClickOutside, }: {
+    visible?: boolean;
+    blurBackground?: boolean;
+    alwaysMounted?: boolean;
+    styles: any;
+    children: any;
+    onClickOutside: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/modal/index.js

@@ -0,0 +1,59 @@
+import { jsx } from "preact/jsx-runtime";
+import { useRef, useCallback, useEffect } from "preact/hooks";
+import { CSSTransition as d } from "../../../node_modules/.pnpm/preact-transitioning@1.4.1_preact@10.21.0/node_modules/preact-transitioning/lib/preact-transitioning.modern.js";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+function Modal({
+  visible = false,
+  blurBackground = true,
+  alwaysMounted = false,
+  styles,
+  children,
+  onClickOutside
+}) {
+  styles = mergeStyles(defaultStyles, styles);
+  const modalBoxRef = useRef();
+  const onClick = useCallback(
+    (event) => {
+      if (!modalBoxRef.current.contains(event.target)) {
+        if (onClickOutside && visible) onClickOutside(event);
+      }
+    },
+    [onClickOutside, visible]
+  );
+  useEffect(() => {
+    if (visible) {
+      window.addEventListener("scroll", onClick, { once: true });
+    }
+    return () => {
+      if (visible) {
+        window.removeEventListener("scroll", onClick);
+      }
+    };
+  }, [onClick, visible]);
+  if (typeof document === "undefined") return;
+  return /* @__PURE__ */ jsx(
+    d,
+    {
+      in: visible,
+      duration: 300,
+      classNames: styles,
+      alwaysMounted,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: [
+            styles.transitionContainer,
+            blurBackground && styles.blur,
+            visible && styles.visible
+          ].join(" "),
+          onClick,
+          children: /* @__PURE__ */ jsx("div", { ref: modalBoxRef, className: styles.modalBox, children })
+        }
+      )
+    }
+  );
+}
+export {
+  Modal
+};

package/dist/components/molecules/modal/style.module.css.js

@@ -0,0 +1,26 @@
+const transitionContainer = "_transitionContainer_11twd_1";
+const blur = "_blur_11twd_11";
+const modalBox = "_modalBox_11twd_16";
+const enter = "_enter_11twd_25";
+const exitDone = "_exitDone_11twd_26";
+const enterActive = "_enterActive_11twd_37";
+const exit = "_exit_11twd_26";
+const defaultStyles = {
+  transitionContainer,
+  blur,
+  modalBox,
+  enter,
+  exitDone,
+  enterActive,
+  exit
+};
+export {
+  blur,
+  defaultStyles as default,
+  enter,
+  enterActive,
+  exit,
+  exitDone,
+  modalBox,
+  transitionContainer
+};

package/dist/components/molecules/page-section/index.d.ts

@@ -0,0 +1,8 @@
+export namespace SectionLayout {
+    let _default: string;
+    export { _default as default };
+    export let fullWidth: string;
+}
+export const PageSection: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<{}> & {
+    ref?: import('preact').Ref<any>;
+}>;