@obolnetwork/obol-ui 1.0.17 → 1.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/molecules/ProgressTracker/ProgressTracker.d.ts +5 -3
  2. package/dist/index.es.js +15 -7
  3. package/dist/index.js +15 -7
  4. package/package.json +1 -1
package/dist/components/molecules/ProgressTracker/ProgressTracker.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  /// <reference types="react" />
2
- interface LinkItemProps {
2
+ export interface StepProps {
3
+ id: string | number;
3
4
  title: string;
4
5
  href: string;
5
- status: "complete" | "incomplete";
6
+ status: "complete" | "incomplete" | "current";
7
+ rank?: number;
6
8
  }
7
9
  interface ProgressTrackerProps {
8
- items: LinkItemProps[];
10
+ items: StepProps[];
9
11
  }
10
12
  export declare const ProgressTracker: React.FC<ProgressTrackerProps>;
11
13
  export {};
package/dist/index.es.js CHANGED
@@ -1723,8 +1723,11 @@ var NotificationCard = function (_a) {
1723
1723
  return (jsxs(NotificationContainer, { children: [jsx(Box, { children: jsx(AlertIcon, { size: "lg", color: "body" }) }), jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$sm" } }, { children: [jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$xs" } }, { children: [jsx(Text, __assign({ variant: "body" }, { children: heading })), subHeading && (jsx(Text, __assign({ css: { color: "$textLight", fontSize: "$3" } }, { children: subHeading })))] })), link && (jsxs(Link, __assign({ target: "_blank", href: link }, { children: [linkText, jsx(ArrowForward, { size: "md" })] })))] }))] }));
1724
1724
  };
1725
1725
 
1726
- var ProgressTracker = function (props) {
1727
- var _a = useState(props.items), items = _a[0]; _a[1];
1726
+ var ProgressTracker = function (_a) {
1727
+ var items = _a.items;
1728
+ var count = items.filter(function (item) { return item.status === "complete"; }).length;
1729
+ var offset = 100 / items.length / 2;
1730
+ var width = (100 / items.length) * count + offset;
1728
1731
  return (jsx(Box, __assign({ css: { backgroundColor: "$bg02", py: "$3xl", px: "$6xl" } }, { children: jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$md" } }, { children: [jsx(Box, __assign({ className: "progress-bar-behind", css: {
1729
1732
  height: "$xxs",
1730
1733
  borderRadius: "$3",
@@ -1737,7 +1740,7 @@ var ProgressTracker = function (props) {
1737
1740
  height: "$xxs",
1738
1741
  borderRadius: "$3",
1739
1742
  position: "relative",
1740
- width: "calc(100% / ".concat(items.length - 1, ")"),
1743
+ width: "".concat(width > 100 ? 100 : width, "%"),
1741
1744
  } }, { children: [jsx(Box, { css: {
1742
1745
  display: "grid",
1743
1746
  placeItems: "center",
@@ -1767,10 +1770,15 @@ var ProgressTracker = function (props) {
1767
1770
  right: "-8px",
1768
1771
  },
1769
1772
  } })] })) })), jsx(Box, __assign({ className: "link-items", css: {
1770
- display: "flex",
1771
- justifyContent: "space-between",
1772
- alignItems: "center",
1773
- } }, { children: items.map(function (item, index) { return (jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
1773
+ display: "grid",
1774
+ gridTemplateColumns: "repeat(".concat(items.length || 1, ", 1fr)"),
1775
+ } }, { children: items.map(function (item, index) { return (jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href, css: {
1776
+ display: "flex",
1777
+ justifyContent: "center",
1778
+ alignItems: "center",
1779
+ height: "auto",
1780
+ textAlign: "center",
1781
+ } }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
1774
1782
  };
1775
1783
 
1776
1784
  var StyledRadio = styled(RadioGroupPrimitive.Item, {
package/dist/index.js CHANGED
@@ -1754,8 +1754,11 @@ var NotificationCard = function (_a) {
1754
1754
  return (jsxRuntime.jsxs(NotificationContainer, { children: [jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(AlertIcon, { size: "lg", color: "body" }) }), jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$sm" } }, { children: [jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$xs" } }, { children: [jsxRuntime.jsx(Text, __assign({ variant: "body" }, { children: heading })), subHeading && (jsxRuntime.jsx(Text, __assign({ css: { color: "$textLight", fontSize: "$3" } }, { children: subHeading })))] })), link && (jsxRuntime.jsxs(Link, __assign({ target: "_blank", href: link }, { children: [linkText, jsxRuntime.jsx(ArrowForward, { size: "md" })] })))] }))] }));
1755
1755
  };
1756
1756
 
1757
- var ProgressTracker = function (props) {
1758
- var _a = React.useState(props.items), items = _a[0]; _a[1];
1757
+ var ProgressTracker = function (_a) {
1758
+ var items = _a.items;
1759
+ var count = items.filter(function (item) { return item.status === "complete"; }).length;
1760
+ var offset = 100 / items.length / 2;
1761
+ var width = (100 / items.length) * count + offset;
1759
1762
  return (jsxRuntime.jsx(Box, __assign({ css: { backgroundColor: "$bg02", py: "$3xl", px: "$6xl" } }, { children: jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$md" } }, { children: [jsxRuntime.jsx(Box, __assign({ className: "progress-bar-behind", css: {
1760
1763
  height: "$xxs",
1761
1764
  borderRadius: "$3",
@@ -1768,7 +1771,7 @@ var ProgressTracker = function (props) {
1768
1771
  height: "$xxs",
1769
1772
  borderRadius: "$3",
1770
1773
  position: "relative",
1771
- width: "calc(100% / ".concat(items.length - 1, ")"),
1774
+ width: "".concat(width > 100 ? 100 : width, "%"),
1772
1775
  } }, { children: [jsxRuntime.jsx(Box, { css: {
1773
1776
  display: "grid",
1774
1777
  placeItems: "center",
@@ -1798,10 +1801,15 @@ var ProgressTracker = function (props) {
1798
1801
  right: "-8px",
1799
1802
  },
1800
1803
  } })] })) })), jsxRuntime.jsx(Box, __assign({ className: "link-items", css: {
1801
- display: "flex",
1802
- justifyContent: "space-between",
1803
- alignItems: "center",
1804
- } }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
1804
+ display: "grid",
1805
+ gridTemplateColumns: "repeat(".concat(items.length || 1, ", 1fr)"),
1806
+ } }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href, css: {
1807
+ display: "flex",
1808
+ justifyContent: "center",
1809
+ alignItems: "center",
1810
+ height: "auto",
1811
+ textAlign: "center",
1812
+ } }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
1805
1813
  };
1806
1814
 
1807
1815
  var StyledRadio = styled(RadioGroupPrimitive__namespace.Item, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obolnetwork/obol-ui",
3
- "version": "1.0.17",
3
+ "version": "1.0.18",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.es.js",
6
6
  "license": "MIT",