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

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;

package/dist/components/particles/waffle/index.js

@@ -0,0 +1,76 @@
+import { jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import { useContainerSize } from "../../../shared/hooks/useContainerSize.js";
+import { useRef } from "preact/hooks";
+const WaffleType = {
+  circle: "circle",
+  square: "square"
+};
+const WaffleUnit = ({ type, attributes }) => type === WaffleType.square ? /* @__PURE__ */ jsx("rect", { ...attributes }) : /* @__PURE__ */ jsx("circle", { ...attributes });
+const Waffle = ({
+  units,
+  numberOfRows,
+  type = WaffleType.circle,
+  idAccessor,
+  onMouseOver = () => {
+  },
+  onClick = () => {
+  },
+  styles,
+  svgId
+}) => {
+  const containerRef = useRef();
+  const containerSize = useContainerSize(containerRef);
+  const width = containerSize ? containerSize.width : 0;
+  const total = units.length;
+  const columns = Math.ceil(total / numberOfRows);
+  const unitWidth = width / columns;
+  const unitHeight = unitWidth;
+  const height = numberOfRows * unitHeight;
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: styles.container, children: containerSize && /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      className: styles.svg,
+      id: svgId,
+      children: /* @__PURE__ */ jsx("g", { children: units.map((unit, j) => {
+        let attributes;
+        if (type === WaffleType.square) {
+          attributes = {
+            id: unit[idAccessor] || `w-${j}`,
+            onMouseOver: (e) => onMouseOver(unit, e),
+            onClick: (e) => onClick(unit, e),
+            class: `${styles.unit} ${unit.class}`,
+            height: unitHeight,
+            width: unitWidth,
+            x: unitWidth * Math.floor(j / numberOfRows),
+            y: unitHeight * (j % numberOfRows)
+          };
+        } else {
+          attributes = {
+            id: unit[idAccessor] || `w-${j}`,
+            onMouseOver: (e) => onMouseOver(unit, e),
+            onClick: (e) => onClick(unit, e),
+            class: `${styles.unit} ${unit.class}`,
+            r: unitWidth / 2,
+            transform: `translate(${unitWidth * Math.floor(j / numberOfRows) + unitWidth / 2}, ${unitHeight * (j % numberOfRows) + unitHeight / 2})`
+          };
+        }
+        return /* @__PURE__ */ jsx(
+          WaffleUnit,
+          {
+            type,
+            attributes
+          },
+          `wu-${j}`
+        );
+      }) })
+    }
+  ) });
+};
+export {
+  Waffle,
+  WaffleType
+};

package/dist/components/particles/waffle/style.module.css.js

@@ -0,0 +1,11 @@
+const unit = "_unit_1jxth_1";
+const container = "_container_1jxth_6";
+const defaultStyles = {
+  unit,
+  container
+};
+export {
+  container,
+  defaultStyles as default,
+  unit
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './shared/hooks';

package/dist/index.js

@@ -0,0 +1,128 @@
+/* empty css                 */
+import { Chevron } from "./components/particles/chevron/index.js";
+import { LegendItem } from "./components/particles/legend-item/index.js";
+import { LabelOverlapConfig, LabelType, StackedBar } from "./components/particles/stacked-bar/index.js";
+import { GradientIcon } from "./components/particles/gradient-icon/index.js";
+import { Waffle, WaffleType } from "./components/particles/waffle/index.js";
+import { InfoButton } from "./components/particles/info-button/index.js";
+import { CircleIcon } from "./components/particles/circle-icon/index.js";
+import { RelativeTimeSentence } from "./components/particles/relative-time-sentence/index.js";
+import { Container } from "./components/particles/container/index.js";
+import { ChangeBar } from "./components/particles/change-bar/index.js";
+import { SquareCutCornerIcon } from "./components/particles/square-cut-corner-icon/index.js";
+import { StackedGrid } from "./components/particles/stacked-grid/index.js";
+import { SquareIcon } from "./components/particles/square-icon/index.js";
+import { ArrowButton } from "./components/particles/arrow-button/index.js";
+import { Button } from "./components/particles/button/index.js";
+import { CloseButton } from "./components/particles/close-button/index.js";
+import { AdSlot } from "./components/particles/ad-slot/index.js";
+import { AspectRatioBox } from "./components/particles/aspect-ratio-box/index.js";
+import { Table } from "./components/molecules/table/index.js";
+import { SlopeChart } from "./components/molecules/slope-chart/index.js";
+import { Tooltip } from "./components/molecules/tooltip/index.js";
+import { ControlChange } from "./components/molecules/control-change/index.js";
+import { FirstPastThePostWaffle } from "./components/molecules/first-past-the-post-waffle/index.js";
+import { ToplineResult } from "./components/molecules/topline-result/index.js";
+import { PageSection, SectionLayout } from "./components/molecules/page-section/index.js";
+import { ColumnChart } from "./components/molecules/column-chart/index.js";
+import { PartyProfile } from "./components/molecules/party-profile/index.js";
+import { ResultSummary } from "./components/molecules/result-summary/index.js";
+import { SearchInput } from "./components/molecules/search-input/index.js";
+import { RefreshIndicator } from "./components/molecules/refresh-indicator/index.js";
+import { GridType, ResponsiveGrid } from "./components/molecules/responsive-grid/index.js";
+import { Modal } from "./components/molecules/modal/index.js";
+import { Dropdown } from "./components/molecules/dropdown/index.js";
+import { MapConfiguration, SVGMap, _Projection } from "./components/molecules/svg-map/index.js";
+import { Map } from "./components/molecules/canvas-map/Map.js";
+import { ZoomControl } from "./components/molecules/canvas-map/controls/ZoomControl.js";
+import { Feature } from "./components/molecules/canvas-map/lib/Feature.js";
+import { FeatureCollection } from "./components/molecules/canvas-map/lib/FeatureCollection.js";
+import { Dispatcher } from "./components/molecules/canvas-map/lib/events/Dispatcher.js";
+import { MapEvent } from "./components/molecules/canvas-map/lib/events/MapEvent.js";
+import { Projection } from "./components/molecules/canvas-map/lib/projection/index.js";
+import { TextLayer } from "./components/molecules/canvas-map/lib/layers/TextLayer.js";
+import { VectorLayer } from "./components/molecules/canvas-map/lib/layers/VectorLayer.js";
+import { Style } from "./components/molecules/canvas-map/lib/styles/Style.js";
+import { Stroke } from "./components/molecules/canvas-map/lib/styles/Stroke.js";
+import { Fill } from "./components/molecules/canvas-map/lib/styles/Fill.js";
+import { Text } from "./components/molecules/canvas-map/lib/styles/Text.js";
+import { interpolateFeatures } from "./components/molecules/canvas-map/lib/interpolators/interpolateFeatures.js";
+import { interpolateFill, interpolateStroke, interpolateStyles } from "./components/molecules/canvas-map/lib/interpolators/interpolateStyles.js";
+import { VectorSource } from "./components/molecules/canvas-map/lib/sources/VectorSource.js";
+import { GeoJSON } from "./components/molecules/canvas-map/lib/formats/GeoJSON.js";
+import { bboxFeature } from "./components/molecules/canvas-map/lib/util/bboxFeature.js";
+import { CoalitionsTracker } from "./components/organisms/coalitions-tracker/index.js";
+import { Ticker } from "./components/organisms/ticker/index.js";
+import { useContainerSize } from "./shared/hooks/useContainerSize.js";
+import { useTouchOrHover } from "./shared/hooks/useTouchOrHover.js";
+import { useWindowSize } from "./shared/hooks/useWindowSize.js";
+import * as index from "./components/molecules/svg-map/layers/index.js";
+export {
+  AdSlot,
+  ArrowButton,
+  AspectRatioBox,
+  Button,
+  ChangeBar,
+  Chevron,
+  CircleIcon,
+  CloseButton,
+  CoalitionsTracker,
+  ColumnChart,
+  Container,
+  ControlChange,
+  Dispatcher,
+  Dropdown,
+  Feature,
+  FeatureCollection,
+  Fill,
+  FirstPastThePostWaffle,
+  GeoJSON,
+  GradientIcon,
+  GridType,
+  InfoButton,
+  LabelOverlapConfig,
+  LabelType,
+  LegendItem,
+  Map,
+  MapConfiguration,
+  MapEvent,
+  index as MapLayers,
+  Modal,
+  PageSection,
+  PartyProfile,
+  Projection,
+  RefreshIndicator,
+  RelativeTimeSentence,
+  ResponsiveGrid,
+  ResultSummary,
+  SVGMap,
+  SearchInput,
+  SectionLayout,
+  SlopeChart,
+  SquareCutCornerIcon,
+  SquareIcon,
+  StackedBar,
+  StackedGrid,
+  Stroke,
+  Style,
+  Table,
+  Text,
+  TextLayer,
+  Ticker,
+  Tooltip,
+  ToplineResult,
+  VectorLayer,
+  VectorSource,
+  Waffle,
+  WaffleType,
+  ZoomControl,
+  _Projection,
+  bboxFeature,
+  interpolateFeatures,
+  interpolateFill,
+  interpolateStroke,
+  interpolateStyles,
+  useContainerSize,
+  useTouchOrHover,
+  useWindowSize
+};