@ultraviolet/ui 1.51.1 → 1.51.2

package/dist/components/Banner/index.js

@@ -0,0 +1,191 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useTheme, css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useState } from "react";
+import { Button } from "../Button/index.js";
+import { Link } from "../Link/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import defaultIllustrationSmall from "./assets/default-image-small.svg.js";
+import defaultIllustration from "./assets/default-image.svg.js";
+const styles = ({
+  theme,
+  variant,
+  size
+}) => {
+  if (size === "small") {
+    if (variant === "intro") {
+      return css`
+        background: ${theme.colors.primary.background};
+        background-position: left, right;
+        background-repeat: no-repeat, no-repeat;
+        background-size: contain, contain;
+      `;
+    }
+    if (variant === "promotional") {
+      return css`
+        background-position: left, right;
+        background-image: ${theme.colors.other.gradients.background.linear.aqua};
+        background-repeat: no-repeat, no-repeat;
+        background-size: contain, contain;
+      `;
+    }
+  }
+  if (size === "medium") {
+    if (variant === "intro") {
+      return css`
+        background: ${theme.colors.primary.background};
+        background-position: right;
+        background-repeat: no-repeat;
+        background-size: contain;
+      `;
+    }
+    if (variant === "promotional") {
+      return css`
+        background-image: ${theme.colors.other.gradients.background.linear.aqua};
+        background-position: right;
+        background-repeat: no-repeat;
+        background-size: contain;
+      `;
+    }
+  }
+  return null;
+};
+const Container = styled("div", {
+  shouldForwardProp: (prop) => !["variant", "size", "padding"].includes(prop)
+})`
+  padding: ${({ theme, size }) => theme.space[size === "small" ? "2" : "3"]};
+  border-radius: ${({ theme }) => theme.radii.large};
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.space["2"]};
+  ${({ theme, variant, size }) => styles({ theme, variant, size })};
+
+  > svg:first-child,
+  > img {
+    height: ${({ size }) => size === "medium" ? "140px" : "100px"};
+    align-self: center;
+  }
+
+  button[name='close'] {
+    background: none;
+
+    &:hover {
+      background: none;
+    }
+  }
+`;
+const ImageStack = styled(Stack, {
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  width: ${({ size }) => size === "medium" ? "140px" : "74px"};
+`;
+const Banner = ({
+  variant = "intro",
+  size = "medium",
+  title,
+  children,
+  direction = "column",
+  onClose,
+  buttonText,
+  onClickButton,
+  linkText,
+  linkHref,
+  image,
+  className,
+  closable = true,
+  "data-testid": dataTestId
+}) => {
+  const { theme } = useTheme();
+  const defaultImage = size === "small" ? defaultIllustrationSmall : defaultIllustration;
+  const [opened, setOpened] = useState(true);
+  if (!opened)
+    return null;
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      variant,
+      size,
+      className,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsx(ImageStack, { size, justifyContent: "center", children: image ?? /* @__PURE__ */ jsx("img", { src: defaultImage, alt: "" }) }),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction,
+            gap: 2,
+            justifyContent: "space-between",
+            alignItems: direction === "column" ? "start" : "center",
+            style: { flex: 1 },
+            children: [
+              /* @__PURE__ */ jsxs(Stack, { gap: 0.5, style: { flex: 1 }, justifyContent: "center", children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "p",
+                    variant: size === "medium" ? "headingSmall" : "bodyStronger",
+                    sentiment: variant === "promotional" && theme !== "light" ? "neutral" : "primary",
+                    prominence: variant === "intro" ? "default" : "strong",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "p",
+                    variant: "body",
+                    sentiment: "neutral",
+                    prominence: variant === "intro" || variant === "promotional" && theme !== "light" ? "default" : "stronger",
+                    children
+                  }
+                )
+              ] }),
+              buttonText || linkText ? /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, alignItems: "center", children: [
+                buttonText ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "medium",
+                    sentiment: variant === "intro" ? "primary" : "neutral",
+                    variant: "filled",
+                    onClick: onClickButton,
+                    children: buttonText
+                  }
+                ) : null,
+                linkText ? /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    sentiment: theme !== "light" ? "neutral" : "primary",
+                    size: "small",
+                    target: "_blank",
+                    href: linkHref ?? "",
+                    prominence: variant === "intro" || theme !== "light" ? "default" : "strong",
+                    children: linkText
+                  }
+                ) : null
+              ] }) : null
+            ]
+          }
+        ),
+        closable ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: "close",
+            size: "small",
+            name: "close",
+            variant: variant === "intro" ? "ghost" : "filled",
+            sentiment: variant === "intro" || variant === "promotional" && theme !== "light" ? "neutral" : "primary",
+            onClick: () => {
+              setOpened(false);
+              onClose?.();
+            }
+          }
+        ) : null
+      ]
+    }
+  );
+};
+export {
+  Banner
+};

package/dist/components/BarChart/Tooltip.d.ts

@@ -0,0 +1,9 @@
+type BarChartToolTipProps = {
+    color: string;
+    indexValue: string;
+    formattedValue: string;
+    className?: string;
+    'data-testid'?: string;
+};
+declare const BarChartToolTip: ({ formattedValue, indexValue, color, className, "data-testid": dataTestId, }: BarChartToolTipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default BarChartToolTip;

package/dist/components/BarChart/Tooltip.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Text } from "../Text/index.js";
+const BarToolTipContainer = styled.div`
+  display: flex;
+  background: ${({ theme }) => theme.colors.neutral.backgroundWeakElevated};
+  border-radius: ${({ theme }) => theme.radii.small};
+  box-shadow: ${({ theme }) => theme.shadows.tooltip};
+  padding: 5px 9px;
+  align-items: center;
+`;
+const BarColorSquare = styled("span", {
+  shouldForwardProp: (prop) => !["color"].includes(prop)
+})`
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: ${({ color }) => color};
+  margin-right: 12px;
+`;
+const BarChartToolTip = ({
+  formattedValue,
+  indexValue,
+  color,
+  className,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsxs(BarToolTipContainer, { className, "data-testid": dataTestId, children: [
+  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(BarColorSquare, { color }) }),
+  /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Text, { variant: "bodyStronger", as: "p", sentiment: "primary", children: formattedValue }),
+    /* @__PURE__ */ jsx(Text, { variant: "bodySmall", as: "p", children: indexValue })
+  ] })
+] });
+export {
+  BarChartToolTip as default
+};

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

@@ -0,0 +1,27 @@
+import type { BarDatum, BarSvgProps, BarTooltipProps } from '@nivo/bar';
+import { ResponsiveBar } from '@nivo/bar';
+import type { Box, DatumValue, ValueFormat } from '@nivo/core';
+import type { ComponentProps } from 'react';
+import BarChartTooltip from './Tooltip';
+type Formatter = ValueFormat<DatumValue>;
+type TickSpec = NonNullable<ComponentProps<typeof ResponsiveBar>['axisBottom']>['tickValues'];
+type BarChartProps = {
+    height?: string | number;
+    margin?: Box;
+    data?: BarDatum[];
+    axisFormatters?: Partial<Record<'bottom' | 'left' | 'right' | 'top', Formatter>>;
+    pointFormatters?: Partial<Record<'x' | 'y', Formatter>>;
+    tickValues?: Partial<Record<'bottom' | 'left' | 'right' | 'top', TickSpec>>;
+    keys?: string[];
+    className?: string;
+    tooltipFunction?: (props: BarTooltipProps<BarDatum>) => ComponentProps<typeof BarChartTooltip>;
+    chartProps?: Partial<BarSvgProps<BarDatum>>;
+    'data-testid'?: string;
+};
+/**
+ * BarChart component is used to display data in a bar chart format. It uses the Nivo library under the hood.
+ * See https://nivo.rocks/bar/ for more information.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+export declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, }: BarChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/BarChart/index.js

@@ -0,0 +1,82 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import { ResponsiveBar } from "@nivo/bar";
+import { useCallback } from "react";
+import { getLegendColor } from "../../helpers/legend.js";
+import BarChartToolTip from "./Tooltip.js";
+const DEFAULT_MARGIN = { bottom: 50, left: 60, right: 25, top: 50 };
+const DEFAULT_DATA = [];
+const DEFAULT_AXISFORMATTER = {};
+const DEFAULT_KEYS = ["value"];
+const BarChart = ({
+  height = "537px",
+  // to maintain aspect ratio based on our standard 1074px width,
+  margin = DEFAULT_MARGIN,
+  data = DEFAULT_DATA,
+  axisFormatters = DEFAULT_AXISFORMATTER,
+  tickValues,
+  keys = DEFAULT_KEYS,
+  tooltipFunction,
+  chartProps,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const theme = useTheme();
+  const chartTheme = {
+    axis: {
+      ticks: {
+        line: {
+          stroke: theme.colors.neutral.backgroundStrong,
+          strokeWidth: 1
+        }
+      }
+    },
+    fontFamily: theme.typography.body.fontFamily,
+    fontSize: 12,
+    textColor: theme.colors.neutral.textWeak
+  };
+  const tooltip = useCallback(
+    (props) => {
+      const { indexValue, formattedValue, color } = tooltipFunction ? tooltipFunction(props) : props;
+      return /* @__PURE__ */ jsx(
+        BarChartToolTip,
+        {
+          formattedValue,
+          indexValue: indexValue.toString(),
+          color
+        }
+      );
+    },
+    [tooltipFunction]
+  );
+  return /* @__PURE__ */ jsx("div", { style: { height }, className, "data-testid": dataTestId, children: /* @__PURE__ */ jsx(
+    ResponsiveBar,
+    {
+      colors: getLegendColor(theme),
+      data,
+      margin,
+      axisBottom: {
+        format: axisFormatters?.bottom,
+        tickPadding: 5,
+        tickRotation: 0,
+        tickSize: 5,
+        tickValues: tickValues?.bottom
+      },
+      axisLeft: {
+        format: axisFormatters?.left,
+        tickPadding: 5,
+        tickRotation: 0,
+        tickSize: 5,
+        tickValues: tickValues?.left
+      },
+      theme: chartTheme,
+      tooltip,
+      keys,
+      enableLabel: false,
+      ...chartProps
+    }
+  ) });
+};
+export {
+  BarChart
+};

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

@@ -0,0 +1,36 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+type BarProps = {
+    /**
+     * Unique id of the bar
+     */
+    id: string;
+    /**
+     * The value of the bar
+     */
+    value: number;
+    /**
+     * Text to display inside the bar
+     */
+    text?: string;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    onDoubleClick?: MouseEventHandler<HTMLDivElement>;
+    onMouseDown?: MouseEventHandler<HTMLDivElement>;
+    onMouseUp?: MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * A tooltip to display when hovering the bar
+     */
+    tooltip?: ReactNode;
+};
+type BarStackProps = {
+    data: BarProps[];
+    total?: number;
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * BarStack is a graphic component that is used to show data in one dimension.
+ */
+export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, }: BarStackProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/BarStack/index.js

@@ -0,0 +1,188 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useMemo } from "react";
+import { Tooltip } from "../Tooltip/index.js";
+const StyledBarWrapper = styled.div`
+  width: 0px;
+  transition: width 500ms;
+  background-color: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+`;
+const StyledBar = styled.div`
+  height: 50px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  padding: ${({ theme }) => theme.space[1]};
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-shadow:
+    -1px 0 ${({ theme }) => theme.colors.neutral.backgroundStronger}B3,
+    0 1px ${({ theme }) => theme.colors.neutral.backgroundStronger}B3,
+    1px 0 ${({ theme }) => theme.colors.neutral.backgroundStronger}B3,
+    0 -1px ${({ theme }) => theme.colors.neutral.backgroundStronger}B3;
+`;
+const StyledContainer = styled.div`
+  width: 100%;
+  display: flex;
+  background-color: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+  border-radius: ${({ theme }) => theme.radii.default};
+  box-shadow: ${({ theme }) => theme.shadows.defaultShadow};
+  overflow: hidden;
+
+  ${StyledBarWrapper}:nth-child(5n+1) {
+    ${({
+  theme
+}) => `background: linear-gradient(-45deg, ${theme.colors.neutral.backgroundWeak}1A 25%,
+      ${theme.colors.primary.backgroundStrong} 25%, ${theme.colors.primary.backgroundStrong} 50%,
+      ${theme.colors.neutral.backgroundWeak}1A 50%, ${theme.colors.neutral.backgroundWeak}1A 75%, ${theme.colors.primary.backgroundStrong}
+       75%);`}
+    background-size: 30px 30px;
+    background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
+  }
+
+  ${StyledBarWrapper}:nth-child(5n+2) {
+    background-color: ${({ theme }) => theme.colors.primary.backgroundStrong}D9;
+
+    background-image: linear-gradient(
+        135deg,
+        ${({ theme }) => theme.colors.neutral.backgroundStrong}33 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        225deg,
+        ${({ theme }) => theme.colors.neutral.backgroundStrong}33 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        45deg,
+        ${({ theme }) => theme.colors.neutral.backgroundStrong}33 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        315deg,
+        ${({ theme }) => theme.colors.neutral.backgroundStrong}33 25%,
+        ${({ theme }) => theme.colors.primary.backgroundStrong}12 25%
+      );
+    background-position:
+      10px 0,
+      10px 0,
+      0 0,
+      0 0;
+    background-size: 10px 10px;
+    background-repeat: repeat;
+  }
+
+  ${StyledBarWrapper}:nth-child(5n+3) {
+    ${({
+  theme
+}) => `background: linear-gradient(-45deg, ${theme.colors.neutral.backgroundWeak}1A 25%,
+      ${theme.colors.primary.backgroundStrong}4D 25%, ${theme.colors.primary.backgroundStrong}4D 50%,
+      ${theme.colors.neutral.backgroundWeak}1A 50%, ${theme.colors.neutral.backgroundWeak}1A 75%, ${theme.colors.primary.backgroundStrong}4D
+       75%);`}
+    background-size: 30px 30px;
+    background-color: ${({ theme }) => theme.colors.secondary.backgroundStrong};
+  }
+
+  ${StyledBarWrapper}:nth-child(5n+4) {
+    background-color: ${({ theme }) => theme.colors.secondary.backgroundStrong};
+
+    background-image: linear-gradient(
+        135deg,
+        ${({ theme }) => theme.colors.neutral.backgroundWeak}33 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        225deg,
+        ${({ theme }) => theme.colors.neutral.backgroundWeak}33 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        45deg,
+        ${({ theme }) => theme.colors.neutral.backgroundWeak}33 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        315deg,
+        ${({ theme }) => theme.colors.neutral.backgroundWeak}33 25%,
+        ${({ theme }) => theme.colors.secondary.backgroundStrong} 25%
+      );
+    background-position:
+      10px 0,
+      10px 0,
+      0 0,
+      0 0;
+    background-size: 10px 10px;
+    background-repeat: repeat;
+  }
+
+  ${StyledBarWrapper}:nth-child(5n+5) {
+    ${({
+  theme
+}) => `background: linear-gradient(-45deg, ${theme.colors.neutral.backgroundWeak}40 25%,
+      ${theme.colors.secondary.backgroundStrong}40 25%, ${theme.colors.secondary.backgroundStrong}40 50%,
+      ${theme.colors.neutral.backgroundWeak}40 50%, ${theme.colors.neutral.backgroundWeak}40 75%, ${theme.colors.secondary.backgroundStrong}40
+       75%);`}
+    background-size: 30px 30px;
+    background-color: ${({ theme }) => theme.colors.secondary.backgroundStrong}BF;
+  }
+`;
+const BarStack = ({
+  data,
+  total,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const computedTotal = useMemo(
+    () => total ?? data.reduce((acc, { value }) => acc + value, 0),
+    [total, data]
+  );
+  return /* @__PURE__ */ jsx(StyledContainer, { "data-testid": dataTestId, className, children: data.map(
+    ({
+      id,
+      value,
+      text,
+      onClick,
+      onDoubleClick,
+      onMouseEnter,
+      onMouseLeave,
+      onMouseDown,
+      onMouseUp,
+      tooltip
+    }) => /* @__PURE__ */ jsx(
+      StyledBarWrapper,
+      {
+        style: { width: `${value / computedTotal * 100}%` },
+        children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { id: `tooltip-${id}`, text: tooltip, children: /* @__PURE__ */ jsx(
+          StyledBar,
+          {
+            onMouseDown,
+            onMouseUp,
+            onClick,
+            onDoubleClick,
+            onMouseEnter,
+            onMouseLeave,
+            children: text
+          }
+        ) }) : /* @__PURE__ */ jsx(
+          StyledBar,
+          {
+            onMouseDown,
+            onMouseUp,
+            onClick,
+            onDoubleClick,
+            onMouseEnter,
+            onMouseLeave,
+            children: text
+          }
+        )
+      },
+      id
+    )
+  ) });
+};
+export {
+  BarStack
+};

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

@@ -0,0 +1,30 @@
+import type { JSX, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+type ItemProps = {
+    children: ReactNode;
+    'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';
+    /**
+     * Make the component act a `Link` tag
+     */
+    to?: string;
+    disabled?: boolean;
+    /**
+     * ID of the step, automatically injected by Breadcrumbs parent tag
+     */
+    step?: number;
+    onClick?: (event: ReactMouseEvent<HTMLLIElement>, step: number) => void;
+};
+export declare const Item: ({ to, children, disabled, "aria-current": ariaCurrent, onClick, step, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+type BreadcrumbsProps = {
+    selected?: number;
+    children: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+};
+type BreadcrumbsType = ((props: BreadcrumbsProps) => JSX.Element) & {
+    Item: typeof Item;
+};
+/**
+ * Breadcrumbs component is used to display a navigation path with links to the parent pages.
+ */
+export declare const Breadcrumbs: BreadcrumbsType;
+export {};

package/dist/components/Breadcrumbs/index.js

@@ -0,0 +1,76 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Children, isValidElement, cloneElement } from "react";
+import { Link } from "../Link/index.js";
+const contractString = (str) => {
+  if (typeof str === "string" && str.length > 30) {
+    return `${str.slice(0, 15)}...${str.slice(-15)}`;
+  }
+  return str;
+};
+const StyledOl = styled.ol`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+`;
+const ItemContainer = styled.li`
+  display: inline;
+
+  &[aria-current='page'] {
+    color: ${({ theme }) => theme.colors.neutral.textWeak};
+  }
+
+  &:not(:last-child)::after {
+    content: '›';
+    margin: 0 8px;
+  }
+
+  ${({ onClick }) => onClick ? `
+    cursor: pointer;
+    &[aria-disabled="true"] {
+      pointer-events: none;
+    }
+` : ``}
+`;
+const Item = ({
+  to,
+  children,
+  disabled = false,
+  "aria-current": ariaCurrent,
+  onClick,
+  step
+}) => /* @__PURE__ */ jsx(
+  ItemContainer,
+  {
+    "aria-disabled": disabled,
+    onClick: onClick ? (event) => onClick(event, step ?? -1) : void 0,
+    "aria-current": ariaCurrent,
+    children: to ? /* @__PURE__ */ jsx(Link, { sentiment: "primary", href: to, children: contractString(children) }) : contractString(children)
+  }
+);
+const Breadcrumbs = ({
+  children,
+  selected: selectedProp,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const selected = selectedProp !== void 0 ? selectedProp : Children.count(children) - 1;
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, "data-testid": dataTestId, children: /* @__PURE__ */ jsx(StyledOl, { children: Children.map(children, (child, index) => {
+    if (!isValidElement(child)) {
+      return child;
+    }
+    const active = selected === index;
+    return cloneElement(child, {
+      "aria-current": active ? "page" : void 0,
+      step: index
+    });
+  }) }) });
+};
+Breadcrumbs.Item = Item;
+export {
+  Breadcrumbs,
+  Item
+};