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

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

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

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

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

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

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

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

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

@@ -1,59 +0,0 @@
-import { jsx } from "preact/jsx-runtime";
-import { useRef, useCallback, useEffect } from "preact/hooks";
-import { CSSTransition } from "preact-transitioning";
-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(
-    CSSTransition,
-    {
-      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

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

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

package/dist/components/molecules/page-section/index.js

@@ -1,52 +0,0 @@
-import { jsxs, jsx } from "preact/jsx-runtime";
-import { forwardRef } from "preact/compat";
-import { useState, useRef, useLayoutEffect } from "preact/hooks";
-import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
-import defaultStyles from "./style.module.scss.js";
-const SectionLayout = {
-  default: "default",
-  fullWidth: "fullWidth"
-};
-const PageSection = forwardRef(
-  ({
-    id,
-    children,
-    layout = SectionLayout.default,
-    styles,
-    borderTop = false,
-    backgroundColor = "transparent"
-  }, ref) => {
-    styles = mergeStyles({ ...defaultStyles }, styles);
-    const [minHeight, setMinHeight] = useState("auto");
-    const headerRef = useRef();
-    useLayoutEffect(() => {
-      const headerElement = headerRef.current;
-      setMinHeight(headerElement.offsetHeight);
-    }, [children]);
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        id,
-        ref,
-        className: [styles.section, styles[layout]].join(" "),
-        style: { "--background-color": backgroundColor, minHeight },
-        children: [
-          borderTop && /* @__PURE__ */ jsx("div", { className: styles.borderTop }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: [styles.header, styles[layout]].join(" "),
-              ref: headerRef,
-              children: children.header
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: [styles.content, styles[layout]].join(" "), children: children.content })
-        ]
-      }
-    );
-  }
-);
-export {
-  PageSection,
-  SectionLayout
-};

package/dist/components/molecules/page-section/style.module.scss.js

@@ -1,20 +0,0 @@
-const borderTop = "_borderTop_1xpz0_9";
-const section = "_section_1xpz0_39";
-const fullWidth = "_fullWidth_1xpz0_39";
-const header = "_header_1xpz0_150";
-const content = "_content_1xpz0_187";
-const defaultStyles = {
-  borderTop,
-  section,
-  fullWidth,
-  header,
-  content
-};
-export {
-  borderTop,
-  content,
-  defaultStyles as default,
-  fullWidth,
-  header,
-  section
-};

package/dist/components/molecules/party-profile/index.d.ts

@@ -1,10 +0,0 @@
-export function PartyProfile({ title, subtitle, subtitleStyle, blurb, footnote, imgSrc, imgAltText, styles, }: {
-    title: any;
-    subtitle: any;
-    subtitleStyle?: string;
-    blurb: any;
-    footnote: any;
-    imgSrc: any;
-    imgAltText: any;
-    styles: any;
-}): import("preact").JSX.Element;

package/dist/components/molecules/party-profile/index.js

@@ -1,29 +0,0 @@
-import { jsxs, jsx } from "preact/jsx-runtime";
-import defaultStyles from "./style.module.css.js";
-import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
-const SubtitleStyle = {
-  small: "small",
-  large: "large"
-};
-const PartyProfile = ({
-  title,
-  subtitle,
-  subtitleStyle = SubtitleStyle.large,
-  blurb,
-  footnote,
-  imgSrc,
-  imgAltText,
-  styles
-}) => {
-  styles = mergeStyles({ ...defaultStyles }, styles);
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    /* @__PURE__ */ jsx("img", { src: imgSrc, className: styles.img, alt: imgAltText }),
-    /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
-    /* @__PURE__ */ jsx("div", { className: [styles.subtitle, styles[subtitleStyle]].join(" "), children: subtitle }),
-    /* @__PURE__ */ jsx("div", { className: styles.blurb, children: blurb }),
-    /* @__PURE__ */ jsx("div", { className: styles.footnote, children: footnote })
-  ] });
-};
-export {
-  PartyProfile
-};

package/dist/components/molecules/party-profile/style.module.css.js

@@ -1,26 +0,0 @@
-const container = "_container_hbk39_1";
-const img = "_img_hbk39_5";
-const title = "_title_hbk39_13";
-const subtitle = "_subtitle_hbk39_29";
-const small = "_small_hbk39_39";
-const blurb = "_blurb_hbk39_49";
-const footnote = "_footnote_hbk39_57";
-const defaultStyles = {
-  container,
-  img,
-  title,
-  subtitle,
-  small,
-  blurb,
-  footnote
-};
-export {
-  blurb,
-  container,
-  defaultStyles as default,
-  footnote,
-  img,
-  small,
-  subtitle,
-  title
-};

package/dist/components/molecules/refresh-indicator/index.d.ts

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

package/dist/components/molecules/refresh-indicator/index.js

@@ -1,18 +0,0 @@
-import { jsxs, jsx } from "preact/jsx-runtime";
-import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
-import "preact/hooks";
-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.scss.js";
-function RefreshIndicator({ text, styles }) {
-  styles = mergeStyles(defaultStyles, styles);
-  return /* @__PURE__ */ jsxs("div", { className: styles.refreshIndicator, children: [
-    /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(CircleIcon, { pulse: true }) }),
-    /* @__PURE__ */ jsx("span", { className: styles.liveText, children: "LIVE" }),
-    /* @__PURE__ */ jsx("span", { className: styles.refreshText, children: text })
-  ] });
-}
-export {
-  RefreshIndicator
-};

package/dist/components/molecules/refresh-indicator/style.module.scss.js

@@ -1,17 +0,0 @@
-const refreshIndicator = "_refreshIndicator_3z0ji_9";
-const icon = "_icon_3z0ji_17";
-const liveText = "_liveText_3z0ji_26";
-const refreshText = "_refreshText_3z0ji_27";
-const defaultStyles = {
-  refreshIndicator,
-  icon,
-  liveText,
-  refreshText
-};
-export {
-  defaultStyles as default,
-  icon,
-  liveText,
-  refreshIndicator,
-  refreshText
-};

package/dist/components/molecules/responsive-grid/index.d.ts

@@ -1,10 +0,0 @@
-export function ResponsiveGrid({ type, children, styles }: {
-    type?: string;
-    children: any;
-    styles: any;
-}): import("preact").JSX.Element;
-export namespace GridType {
-    let small: string;
-    let medium: string;
-    let large: string;
-}

package/dist/components/molecules/responsive-grid/index.js

@@ -1,19 +0,0 @@
-import { jsx } from "preact/jsx-runtime";
-import { toChildArray } from "preact";
-import defaultStyles from "./style.module.scss.js";
-import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
-const GridType = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
-function ResponsiveGrid({ type = GridType.medium, children, styles }) {
-  styles = mergeStyles({ ...defaultStyles }, styles);
-  return /* @__PURE__ */ jsx("div", { className: styles.grid, "data-grid-type": type, children: toChildArray(children).map((child, index) => {
-    return /* @__PURE__ */ jsx("div", { className: styles.gridItem, children: child }, index);
-  }) });
-}
-export {
-  GridType,
-  ResponsiveGrid
-};

package/dist/components/molecules/responsive-grid/style.module.scss.js

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

package/dist/components/molecules/result-summary/index.d.ts

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

package/dist/components/molecules/result-summary/index.js

@@ -1,38 +0,0 @@
-import { jsxs, jsx } from "preact/jsx-runtime";
-import "preact/hooks";
-import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
-import "preact/compat";
-import { ControlChange } from "../control-change/index.js";
-import "../topline-result/index.js";
-import "../page-section/index.js";
-import "d3-scale";
-import "../../particles/info-button/index.js";
-import { RelativeTimeSentence } from "../../particles/relative-time-sentence/index.js";
-import defaultStyles from "./style.module.css.js";
-import "preact";
-import "preact-transitioning";
-import "../svg-map/index.js";
-import "../canvas-map/Map.js";
-import "d3-geo";
-import "../canvas-map/lib/projection/index.js";
-import "rbush";
-import "rbush-knn";
-import "../canvas-map/context/MapContext.js";
-function ResultSummary({
-  previous,
-  next,
-  title,
-  text,
-  timestamp,
-  styles
-}) {
-  styles = mergeStyles({ ...defaultStyles }, styles);
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    /* @__PURE__ */ jsx(ControlChange, { previous, next, text: title }),
-    /* @__PURE__ */ jsx("p", { className: styles.paragraph, children: text }),
-    /* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
-  ] });
-}
-export {
-  ResultSummary
-};