@ultraviolet/ui 1.0.0

package/dist/src/components/BarChart/Tooltip.js

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

package/dist/src/components/BarChart/index.js

@@ -0,0 +1,94 @@
+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';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const DEFAULT_MARGIN = {
+  bottom: 50,
+  left: 60,
+  right: 25,
+  top: 50
+};
+const DEFAULT_DATA = [];
+const DEFAULT_AXISFORMATTER = {};
+const DEFAULT_KEYS = ['value'];
+
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+const BarChart = _ref => {
+  let {
+    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
+  } = _ref;
+  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 jsx(BarChartTooltip, {
+      formattedValue: formattedValue,
+      indexValue: indexValue.toString(),
+      color: color
+    });
+  }, [tooltipFunction]);
+  return jsx("div", {
+    style: {
+      height
+    },
+    className: className,
+    "data-testid": dataTestId,
+    children: jsx(ResponsiveBar, {
+      colors: getLegendColor(theme),
+      data: data,
+      margin: 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: tooltip,
+      keys: keys,
+      enableLabel: false,
+      ...chartProps
+    })
+  });
+};
+
+export { BarChart };

package/dist/src/components/BarStack/index.js

@@ -0,0 +1,223 @@
+import _styled from '@emotion/styled/base';
+import { useMemo } from 'react';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledBarWrapper = /*#__PURE__*/_styled("div", {
+  target: "ezikjce2"
+})("width:0px;transition:width 500ms;background-color:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.backgroundWeak;
+}, ";");
+const StyledBar = /*#__PURE__*/_styled("div", {
+  target: "ezikjce1"
+})("height:50px;font-weight:600;color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.backgroundWeak;
+}, ";font-size:14px;display:flex;align-items:center;padding:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space[1];
+}, ";width:100%;white-space:nowrap;overflow:hidden;text-shadow:-1px 0 ", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.backgroundStronger;
+}, "B3,0 1px ", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral.backgroundStronger;
+}, "B3,1px 0 ", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.neutral.backgroundStronger;
+}, "B3,0 -1px ", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colors.neutral.backgroundStronger;
+}, "B3;");
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "ezikjce0"
+})("width:100%;display:flex;background-color:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.neutral.backgroundWeak;
+}, ";border-radius:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.radii.default;
+}, ";box-shadow:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.shadows.defaultShadow;
+}, ";overflow:hidden;", StyledBarWrapper, ":nth-child(5n+1){", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return `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:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.primary.backgroundStrong;
+}, ";}", StyledBarWrapper, ":nth-child(5n+2){background-color:", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.primary.backgroundStrong;
+}, "D9;background-image:linear-gradient(\n        135deg,\n        ", _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.colors.neutral.backgroundStrong;
+}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        225deg,\n        ", _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.colors.neutral.backgroundStrong;
+}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        45deg,\n        ", _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.colors.neutral.backgroundStrong;
+}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        315deg,\n        ", _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.neutral.backgroundStrong;
+}, "33 25%,\n        ", _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.colors.primary.backgroundStrong;
+}, "12 25%\n      );background-position:10px 0,10px 0,0 0,0 0;background-size:10px 10px;background-repeat:repeat;}", StyledBarWrapper, ":nth-child(5n+3){", _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return `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:", _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.colors.secondary.backgroundStrong;
+}, ";}", StyledBarWrapper, ":nth-child(5n+4){background-color:", _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.colors.secondary.backgroundStrong;
+}, ";background-image:linear-gradient(\n        135deg,\n        ", _ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.colors.neutral.backgroundWeak;
+}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        225deg,\n        ", _ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.colors.neutral.backgroundWeak;
+}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        45deg,\n        ", _ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.colors.neutral.backgroundWeak;
+}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        315deg,\n        ", _ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.colors.neutral.backgroundWeak;
+}, "33 25%,\n        ", _ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.colors.secondary.backgroundStrong;
+}, " 25%\n      );background-position:10px 0,10px 0,0 0,0 0;background-size:10px 10px;background-repeat:repeat;}", StyledBarWrapper, ":nth-child(5n+5){", _ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return `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:", _ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.colors.secondary.backgroundStrong;
+}, "BF;}");
+const BarStack = _ref29 => {
+  let {
+    data,
+    total,
+    className,
+    'data-testid': dataTestId
+  } = _ref29;
+  const computedTotal = useMemo(() => total ?? data.reduce((acc, _ref30) => {
+    let {
+      value
+    } = _ref30;
+    return acc + value;
+  }, 0), [total, data]);
+  return jsx(StyledContainer, {
+    "data-testid": dataTestId,
+    className: className,
+    children: data.map(_ref31 => {
+      let {
+        id,
+        value,
+        text,
+        onClick,
+        onDoubleClick,
+        onMouseEnter,
+        onMouseLeave,
+        onMouseDown,
+        onMouseUp,
+        tooltip
+      } = _ref31;
+      return jsx(StyledBarWrapper, {
+        style: {
+          width: `${value / computedTotal * 100}%`
+        },
+        children: tooltip ? jsx(Tooltip, {
+          id: `tooltip-${id}`,
+          text: tooltip,
+          children: jsx(StyledBar, {
+            onMouseDown: onMouseDown,
+            onMouseUp: onMouseUp,
+            onClick: onClick,
+            onDoubleClick: onDoubleClick,
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            children: text
+          })
+        }) : jsx(StyledBar, {
+          onMouseDown: onMouseDown,
+          onMouseUp: onMouseUp,
+          onClick: onClick,
+          onDoubleClick: onDoubleClick,
+          onMouseEnter: onMouseEnter,
+          onMouseLeave: onMouseLeave,
+          children: text
+        })
+      }, id);
+    })
+  });
+};
+
+export { BarStack };

package/dist/src/components/Breadcrumbs/index.js

@@ -0,0 +1,89 @@
+import _styled from '@emotion/styled/base';
+import { Children, isValidElement, cloneElement } from 'react';
+import { Link } from '../Link/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const contractString = str => {
+  if (typeof str === 'string' && str.length > 30) {
+    return `${str.slice(0, 15)}...${str.slice(-15)}`;
+  }
+  return str;
+};
+const StyledOl = /*#__PURE__*/_styled("ol", {
+  target: "ej0p0s41"
+})(process.env.NODE_ENV === "production" ? {
+  name: "v28fi1",
+  styles: "list-style:none;margin:0;padding:0;display:flex"
+} : {
+  name: "v28fi1",
+  styles: "list-style:none;margin:0;padding:0;display:flex",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const ItemContainer = /*#__PURE__*/_styled("li", {
+  target: "ej0p0s40"
+})("display:inline;&[aria-current='page']{color:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.textWeak;
+}, ";}&:not(:last-child)::after{content:'\u203A';margin:0 8px;}", _ref2 => {
+  let {
+    onClick
+  } = _ref2;
+  return onClick ? `
+    cursor: pointer;
+    &[aria-disabled="true"] {
+      pointer-events: none;
+    }
+` : ``;
+}, ";");
+const Item = _ref3 => {
+  let {
+    to,
+    children,
+    disabled = false,
+    'aria-current': ariaCurrent,
+    onClick,
+    step
+  } = _ref3;
+  return jsx(ItemContainer, {
+    "aria-disabled": disabled,
+    onClick: onClick ? event => onClick(event, step ?? -1) : undefined,
+    "aria-current": ariaCurrent,
+    children: to ? jsx(Link, {
+      sentiment: "primary",
+      href: to,
+      children: contractString(children)
+    }) : contractString(children)
+  });
+};
+const Breadcrumbs = _ref4 => {
+  let {
+    children,
+    selected: selectedProp,
+    className,
+    'data-testid': dataTestId
+  } = _ref4;
+  const selected = selectedProp !== undefined ? selectedProp : Children.count(children) - 1;
+  return jsx("nav", {
+    "aria-label": "breadcrumb",
+    className: className,
+    "data-testid": dataTestId,
+    children: jsx(StyledOl, {
+      children: Children.map(children, (child, index) => {
+        if (! /*#__PURE__*/isValidElement(child)) {
+          return child;
+        }
+        const active = selected === index;
+        return /*#__PURE__*/cloneElement(child, {
+          'aria-current': active ? 'page' : undefined,
+          step: index
+        });
+      })
+    })
+  });
+};
+Breadcrumbs.Item = Item;
+
+export { Breadcrumbs, Item };

package/dist/src/components/Bullet/index.js

@@ -0,0 +1,137 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '../Icon/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const sentiments = {
+  danger: _ref => {
+    let {
+      theme
+    } = _ref;
+    return `
+    background-color: ${theme.colors.danger.background};
+    color: ${theme.colors.danger.text};
+  `;
+  },
+  neutral: _ref2 => {
+    let {
+      theme
+    } = _ref2;
+    return `
+    border: 1px solid ${theme.colors.neutral.borderWeak};
+    background-color: ${theme.colors.neutral.background};
+    color: ${theme.colors.neutral.text};
+  `;
+  },
+  disabled: _ref3 => {
+    let {
+      theme
+    } = _ref3;
+    return `
+    border: 1px solid ${theme.colors.neutral.borderWeak};
+    background-color: ${theme.colors.neutral.background};
+    color: ${theme.colors.neutral.textWeak};
+  `;
+  },
+  info: _ref4 => {
+    let {
+      theme
+    } = _ref4;
+    return `
+    background-color: ${theme.colors.info.background};
+    color: ${theme.colors.info.text};
+  `;
+  },
+  primary: _ref5 => {
+    let {
+      theme
+    } = _ref5;
+    return `
+    background-color: ${theme.colors.primary.background};
+    color: ${theme.colors.primary.text};
+  `;
+  },
+  success: _ref6 => {
+    let {
+      theme
+    } = _ref6;
+    return `
+    background-color: ${theme.colors.success.background};
+    color: ${theme.colors.success.text};
+  `;
+  },
+  warning: _ref7 => {
+    let {
+      theme
+    } = _ref7;
+    return `
+    background-color: ${theme.colors.warning.background};
+    color: ${theme.colors.warning.text};
+  `;
+  }
+};
+const sizes = {
+  medium: `
+    width: 32px;
+    height: 32px;
+    font-size: 16px;
+  `,
+  small: `
+    width: 24px;
+    height: 24px;
+    font-size: 14px;
+  `
+};
+const sentimentStyles = _ref8 => {
+  let {
+    sentiment
+  } = _ref8;
+  return sentiments[sentiment];
+};
+const sizeStyles = _ref9 => {
+  let {
+    size
+  } = _ref9;
+  return sizes[size];
+};
+const StyledContainer = /*#__PURE__*/_styled('div', {
+  target: "e11loam60"
+})("display:inline-flex;border-radius:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.radii.circle;
+}, ";justify-content:center;align-items:center;font-weight:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.typography.bodyStrong.weight;
+}, ";", sentimentStyles, " ", sizeStyles, ";");
+const Bullet = _ref12 => {
+  let {
+    className,
+    sentiment = 'neutral',
+    size = 'medium',
+    icon,
+    text,
+    tooltip,
+    tooltipBaseId,
+    'data-testid': dataTestId
+  } = _ref12;
+  return jsx(Tooltip, {
+    id: tooltipBaseId,
+    text: tooltip,
+    children: jsx(StyledContainer, {
+      sentiment: sentiment,
+      size: size,
+      className: className,
+      "data-testid": dataTestId,
+      children: icon ? jsx(Icon, {
+        name: icon,
+        size: "50%"
+      }) : text
+    })
+  });
+};
+
+export { Bullet };