@vitality-ds/components 5.7.0-alpha.1 → 5.7.0-alpha.3

package/dist/esm/Table/components/Cells/SortableHeader/components/SortedIcon/styles/BaseSortedIconContainer.js

@@ -2,13 +2,15 @@ import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/sy
 var text = colorUseCases.text;
 export default css({
   color: getColorScaleValueByUseCase("neutral", text.lowContrast),
+  height: "1rem",
+  width: "1rem",
   variants: {
     sortBy: {
       descending: {
-        transform: "rotate(270deg)"
+        transform: "rotate(180deg)"
       },
       ascending: {
-        transform: "rotate(90deg)"
+        transform: "rotate(0deg)"
       }
     }
   }

package/dist/esm/Table/components/MemoizedCell/constants.js

@@ -2,6 +2,9 @@ import { AsyncSelectCell, ButtonCell, CreatableSelectCell, CurrencyInputCell, Da
 import CustomCell from "../Cells/Custom";
 import SearchSelectInputCell from "../Cells/SearchSelectInput";
 export var DEFAULT_EMPTY_PLACEHOLDER = "-";
+
+// Cell types that can safely render a placeholder with only `children`
+export var PLACEHOLDER_SAFE_CELL_TYPES = ["text", "number"];
 var errorGetCellProps = function errorGetCellProps(componentName) {
   // eslint-disable-next-line no-console
   console.error("[Vitality] You're trying to render a ".concat(componentName, " cell. But no getCellProps function was given to the column as a result nothing could be rendered. Please refer to https://vitalitydesignsystem.com/components/table for an implementation."));

package/dist/esm/Table/components/MemoizedCell/logic.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { TextCell } from "../Cells";
-import { CELL_TYPES, DEFAULT_EMPTY_PLACEHOLDER } from "./constants";
+import { CELL_TYPES, DEFAULT_EMPTY_PLACEHOLDER, PLACEHOLDER_SAFE_CELL_TYPES } from "./constants";
 function isCellContentsEmpty(rowData, colId, computedCellProps) {
   return rowData[colId] !== 0 && !rowData[colId] && !computedCellProps;
 }
@@ -9,14 +8,16 @@ function getCellType(cellType, _ref, rowData, emptyPlaceholderText) {
     getCellProps = _ref.getCellProps;
   var computedCellProps = typeof getCellProps === "function" && getCellProps(colId, rowData);
   if (isCellContentsEmpty(rowData, colId, computedCellProps)) {
+    var _ref2 = PLACEHOLDER_SAFE_CELL_TYPES.includes(cellType) ? CELL_TYPES[cellType] : CELL_TYPES.text,
+      EmptyComponent = _ref2.component;
     return {
-      as: TextCell,
+      as: EmptyComponent,
       children: emptyPlaceholderText || DEFAULT_EMPTY_PLACEHOLDER
     };
   }
-  var _ref2 = CELL_TYPES[cellType] || CELL_TYPES.text,
-    Component = _ref2.component,
-    defaultGetCellProps = _ref2.getCellProps;
+  var _ref3 = CELL_TYPES[cellType] || CELL_TYPES.text,
+    Component = _ref3.component,
+    defaultGetCellProps = _ref3.getCellProps;
   var getCellPropsFn = getCellProps || defaultGetCellProps;
   return _extends({}, getCellPropsFn(colId, rowData), {
     as: Component

package/dist/esm/Table/components/MemoizedCell/logic.spec.js

@@ -68,6 +68,30 @@ describe("getCellType function", function () {
     expect(data.as).toEqual(NumberCell);
     expect(data.children).toEqual("12");
   });
+  it("Should return a NumberCell with placeholder when number cell is empty", function () {
+    rowData.number = "";
+    var data = getCellType("number", {
+      colId: "number"
+    }, rowData, null);
+    expect(data.as).toEqual(NumberCell);
+    expect(data.children).toEqual("-");
+  });
+  it("Should fall back to TextCell with placeholder when link cell is empty", function () {
+    rowData.link = "";
+    var data = getCellType("link", {
+      colId: "link"
+    }, rowData, null);
+    expect(data.as).toEqual(TextCell);
+    expect(data.children).toEqual("-");
+  });
+  it("Should fall back to TextCell with placeholder when icon cell is empty", function () {
+    rowData.icon = "";
+    var data = getCellType("icon", {
+      colId: "icon"
+    }, rowData, null);
+    expect(data.as).toEqual(TextCell);
+    expect(data.children).toEqual("-");
+  });
   it("Should return an statusBadge with a console error", function () {
     var logSpy = jest.spyOn(global.console, "error");
     var data = getCellType("statusBadge", {

package/dist/esm/Table/components/Pagination/index.js

@@ -1,4 +1,4 @@
-import { ChevronLeft, ChevronRight } from "@vitality-ds/icons";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import React from "react";
 import IconButton from "../../../IconButton";
 import { Select } from "../../../Input/Select";

package/dist/esm/Table/components/States/Error/index.js

@@ -1,4 +1,4 @@
-import { Error } from "@vitality-ds/icons";
+import { CircleAlert } from "lucide-react";
 import React from "react";
 import Button from "../../../../Button";
 import { EMPTY_OBJ } from "../../../../helpers/logic/empties";
@@ -20,9 +20,10 @@ export function ErrorState(_ref) {
     align: "center",
     direction: size === "compact" ? "horizontal" : "vertical"
   }, /*#__PURE__*/React.createElement(Stack, {
-    direction: "horizontal"
-  }, /*#__PURE__*/React.createElement(Error, {
-    color: "critical"
+    direction: "horizontal",
+    align: "center"
+  }, /*#__PURE__*/React.createElement(CircleAlert, {
+    color: "var(--vitality-colors-critical11)"
   }), /*#__PURE__*/React.createElement(Typography, {
     color: "critical"
   }, errorMessage)), errorButtonProps && onClick && /*#__PURE__*/React.createElement(Button, {

package/dist/esm/Toaster/components/CloseIconButton/index.js

@@ -1,4 +1,4 @@
-import { Close } from "@vitality-ds/icons";
+import { X } from "lucide-react";
 import React, { useContext } from "react";
 import Tooltip from "../../../Tooltip";
 import { ToastContext } from "../../ToastProvider";
@@ -11,9 +11,9 @@ function CloseIconButton(_ref) {
   }, /*#__PURE__*/React.createElement(BaseCloseIconButton, {
     type: type,
     onClick: onClose
-  }, /*#__PURE__*/React.createElement(Close, {
-    size: "sm",
-    color: "inherit"
+  }, /*#__PURE__*/React.createElement(X, {
+    size: "1rem",
+    color: "currentColor"
   })));
 }
 export default CloseIconButton;

package/dist/esm/Toaster/components/Toast/constants.js

@@ -1,13 +1,13 @@
-import { Completed, Error, Info } from "@vitality-ds/icons";
+import { CircleAlert, CircleCheck, Info } from "lucide-react";
 var TOAST_TYPES = {
   success: {
-    icon: Completed
+    icon: CircleCheck
   },
   warning: {
-    icon: Error
+    icon: CircleAlert
   },
   error: {
-    icon: Error
+    icon: CircleAlert
   },
   info: {
     icon: Info

package/dist/esm/Toaster/components/Toast/helpers/getVariantsByColorScale.js

@@ -6,10 +6,8 @@ function getVariantsByColorScale(colorScale) {
   return {
     backgroundColor: getColorScaleValueByUseCase(colorScale, backgrounds.app),
     color: getColorScaleValueByUseCase(colorScale, text.hiContrast),
-    svg: {
-      path: {
-        fill: getColorScaleValueByUseCase(colorScale, text.lowContrast)
-      }
+    "svg.icon": {
+      color: getColorScaleValueByUseCase(colorScale, text.lowContrast)
     },
     borderColor: "".concat(getColorScaleValueByUseCase(colorScale, text.hiSaturation), " ").concat(getColorScaleValueByUseCase(colorScale, borders.uiElement), " ").concat(getColorScaleValueByUseCase(colorScale, borders.uiElement))
   };

package/dist/esm/Toaster/components/Toast/index.js

@@ -15,7 +15,7 @@ function Toast(_ref) {
   return /*#__PURE__*/React.createElement(BaseToast, {
     type: type
   }, !hideIcon && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconComponent, {
-    size: "sm"
+    className: "icon"
   })), /*#__PURE__*/React.createElement(BaseContent, null, title && /*#__PURE__*/React.createElement(Typography, {
     variant: "display200"
   }, title), message && /*#__PURE__*/React.createElement(Typography, null, message)), /*#__PURE__*/React.createElement(CloseIconButton, {

package/dist/esm/Toaster/components/Toast/logic.spec.js

@@ -1,20 +1,20 @@
-import { Completed, Error, Info } from "@vitality-ds/icons";
+import { CircleAlert, CircleCheck, Info } from "lucide-react";
 import { getIconFromType } from "./logic";
 describe("getIconFromType", function () {
   it("should return the icon for the success toast type", function () {
     var type = "success";
     var icon = getIconFromType(type);
-    expect(icon).toEqual(Completed);
+    expect(icon).toEqual(CircleCheck);
   });
   it("should return the icon for the warning toast type", function () {
     var type = "warning";
     var icon = getIconFromType(type);
-    expect(icon).toEqual(Error);
+    expect(icon).toEqual(CircleAlert);
   });
   it("should return the icon for the error toast type", function () {
     var type = "error";
     var icon = getIconFromType(type);
-    expect(icon).toEqual(Error);
+    expect(icon).toEqual(CircleAlert);
   });
   it("should return the icon for the info toast type", function () {
     var type = "info";

package/dist/esm/Toaster/components/Toast/styles/BaseToast.styles.js

@@ -11,6 +11,9 @@ export default css({
   boxSizing: "border-box",
   padding: "$md",
   gap: "$sm",
+  "svg.icon": {
+    verticalAlign: "middle"
+  },
   variants: {
     type: {
       success: getVariantsByColorScale("success"),

package/dist/esm/Typography/styles/BaseTypography.styles.js

@@ -1,7 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
-import { BaseIcon } from "@vitality-ds/icons";
 import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
 import { AVAILABLE_MAX_LINES, AVAILABLE_VARIANTS } from "../constants/variants";
 import { getMaxLines, getMaxLinesVariants, getVariantStyles } from "./helpers";
@@ -9,137 +7,140 @@ var text = colorUseCases.text;
 var overflowSharedStyles = {
   overflow: "hidden"
 };
-export default css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+export default css({
   fontFamily: "$default",
   fontSize: "inherit",
   // Reset browser default margins added to certain semantic HTML elements
-  marginBlock: 0
-}, "& > ".concat(BaseIcon), {
-  // Aligning Icons to text baseline = most Icons have 2px inner bottom spacing -> 2/24 * 2 = 0.2 rounded up
-  marginTop: "-.2em"
-}), "variants", {
-  /**
-   * Set the text element's text alignment
-   */
-  textAlign: {
-    start: {
-      textAlign: "start"
-    },
-    end: {
-      textAlign: "end"
-    },
-    left: {
-      textAlign: "left"
-    },
-    right: {
-      textAlign: "right"
-    },
-    center: {
-      textAlign: "center"
-    },
-    justify: {
-      textAlign: "justify"
-    },
-    matchParent: {
-      textAlign: "match-parent"
-    }
-  },
-  /**
-   * Allows you to handle CSS text overflow behaviour
-   */
-  textOverflow: {
-    ellipsis: _extends({}, overflowSharedStyles, {
-      textOverflow: "ellipsis"
-    }),
-    clip: _extends({}, overflowSharedStyles, {
-      textOverflow: "clip"
-    })
-  },
-  /**
-   * Allows you to handle CSS white space behaviour
-   */
-  wrap: {
-    "true": _extends({}, overflowSharedStyles, {
-      whiteSpace: "break-spaces"
-    }),
-    "false": _extends({}, overflowSharedStyles, {
-      whiteSpace: "nowrap"
-    })
+  marginBlock: 0,
+  "& > svg.lucide": {
+    verticalAlign: "baseline"
   },
-  /**
-   * Sets the color of the text.
-   */
-  color: {
-    inherit: {
-      color: "inherit"
-    },
-    hiContrast: {
-      color: getColorScaleValueByUseCase("greyA", text.hiContrast)
-    },
-    primary: {
-      color: getColorScaleValueByUseCase("primary", text.hiSaturation)
-    },
-    lowContrast: {
-      color: getColorScaleValueByUseCase("greyA", text.lowContrast)
-    },
-    disabled: {
-      color: getColorScaleValueByUseCase("greyA", text.disabled)
-    },
-    accent: {
-      color: getColorScaleValueByUseCase("accent", text.hiSaturation)
-    },
-    info: {
-      color: getColorScaleValueByUseCase("info", text.hiSaturation)
-    },
-    moderate: {
-      color: getColorScaleValueByUseCase("yellow", text.hiSaturation)
-    },
-    critical: {
-      color: getColorScaleValueByUseCase("critical", text.hiSaturation)
+  variants: {
+    /**
+     * Set the text element's text alignment
+     */
+    textAlign: {
+      start: {
+        textAlign: "start"
+      },
+      end: {
+        textAlign: "end"
+      },
+      left: {
+        textAlign: "left"
+      },
+      right: {
+        textAlign: "right"
+      },
+      center: {
+        textAlign: "center"
+      },
+      justify: {
+        textAlign: "justify"
+      },
+      matchParent: {
+        textAlign: "match-parent"
+      }
     },
-    warning: {
-      color: getColorScaleValueByUseCase("warning", text.hiSaturation)
+    /**
+     * Allows you to handle CSS text overflow behaviour
+     */
+    textOverflow: {
+      ellipsis: _extends({}, overflowSharedStyles, {
+        textOverflow: "ellipsis"
+      }),
+      clip: _extends({}, overflowSharedStyles, {
+        textOverflow: "clip"
+      })
+    },
+    /**
+     * Allows you to handle CSS white space behaviour
+     */
+    wrap: {
+      "true": _extends({}, overflowSharedStyles, {
+        whiteSpace: "break-spaces"
+      }),
+      "false": _extends({}, overflowSharedStyles, {
+        whiteSpace: "nowrap"
+      })
+    },
+    /**
+     * Sets the color of the text.
+     */
+    color: {
+      inherit: {
+        color: "inherit"
+      },
+      hiContrast: {
+        color: getColorScaleValueByUseCase("greyA", text.hiContrast)
+      },
+      primary: {
+        color: getColorScaleValueByUseCase("primary", text.hiSaturation)
+      },
+      lowContrast: {
+        color: getColorScaleValueByUseCase("greyA", text.lowContrast)
+      },
+      disabled: {
+        color: getColorScaleValueByUseCase("greyA", text.disabled)
+      },
+      accent: {
+        color: getColorScaleValueByUseCase("accent", text.hiSaturation)
+      },
+      info: {
+        color: getColorScaleValueByUseCase("info", text.hiSaturation)
+      },
+      moderate: {
+        color: getColorScaleValueByUseCase("yellow", text.hiSaturation)
+      },
+      critical: {
+        color: getColorScaleValueByUseCase("critical", text.hiSaturation)
+      },
+      warning: {
+        color: getColorScaleValueByUseCase("warning", text.hiSaturation)
+      },
+      success: {
+        color: getColorScaleValueByUseCase("success", text.hiSaturation)
+      }
     },
-    success: {
-      color: getColorScaleValueByUseCase("success", text.hiSaturation)
+    /**
+     * Customises the font size and weight to a pre-set option.
+     */
+    variant: {
+      inherit: getVariantStyles("inherit"),
+      caption: getVariantStyles("$caption"),
+      button: getVariantStyles("$button"),
+      body: getVariantStyles("$body"),
+      paragraph: _extends({}, getVariantStyles("$body"), {
+        "& + &": {
+          marginTop: "$md"
+        }
+      }),
+      sectionSubtitle: getVariantStyles("$sectionSubtitle"),
+      sectionTitle: getVariantStyles("$sectionTitle"),
+      pageTitle: getVariantStyles("$pageTitle"),
+      display100: getVariantStyles("$display100"),
+      display200: getVariantStyles("$display200"),
+      display300: getVariantStyles("$display300"),
+      display400: getVariantStyles("$display400"),
+      display500: getVariantStyles("$display500"),
+      display600: getVariantStyles("$display600"),
+      display700: getVariantStyles("$display700"),
+      display800: getVariantStyles("$display800"),
+      display900: getVariantStyles("$display900")
+    },
+    /**
+     * Sets a limit on the maximum number of lines to display.
+     */
+    maxLines: {
+      1: getMaxLines(1, "$body"),
+      2: getMaxLines(2, "$body"),
+      3: getMaxLines(3, "$body")
     }
   },
-  /**
-   * Customises the font size and weight to a pre-set option.
-   */
-  variant: {
-    inherit: getVariantStyles("inherit"),
-    caption: getVariantStyles("$caption"),
-    button: getVariantStyles("$button"),
-    body: getVariantStyles("$body"),
-    paragraph: _extends({}, getVariantStyles("$body"), {
-      "& + &": {
-        marginTop: "$md"
-      }
-    }),
-    sectionSubtitle: getVariantStyles("$sectionSubtitle"),
-    sectionTitle: getVariantStyles("$sectionTitle"),
-    pageTitle: getVariantStyles("$pageTitle"),
-    display100: getVariantStyles("$display100"),
-    display200: getVariantStyles("$display200"),
-    display300: getVariantStyles("$display300"),
-    display400: getVariantStyles("$display400"),
-    display500: getVariantStyles("$display500"),
-    display600: getVariantStyles("$display600"),
-    display700: getVariantStyles("$display700"),
-    display800: getVariantStyles("$display800"),
-    display900: getVariantStyles("$display900")
-  },
-  /**
-   * Sets a limit on the maximum number of lines to display.
-   */
-  maxLines: {
-    1: getMaxLines(1, "$body"),
-    2: getMaxLines(2, "$body"),
-    3: getMaxLines(3, "$body")
+  compoundVariants: _toConsumableArray(getMaxLinesVariants(AVAILABLE_MAX_LINES, AVAILABLE_VARIANTS)),
+  "ul, ol": {
+    listStylePosition: "inside",
+    paddingInlineStart: 0,
+    marginBlock: "inherit"
   }
-}), "compoundVariants", _toConsumableArray(getMaxLinesVariants(AVAILABLE_MAX_LINES, AVAILABLE_VARIANTS))), "ul, ol", {
-  listStylePosition: "inside",
-  paddingInlineStart: 0,
-  marginBlock: "inherit"
-}));
+});

package/dist/esm/helpers/logic/get-component-from-lookup.spec.js

@@ -1,4 +1,4 @@
-import { Pdf } from "@vitality-ds/icons";
+import { Paperclip } from "lucide-react";
 import React from "react";
 import IconButton from "../../IconButton";
 import getComponentFromLookup from "./get-component-from-lookup";
@@ -12,7 +12,7 @@ describe("getComponentFromLookup", function () {
     var trigger = {
       type: "iconButton",
       props: {
-        icon: /*#__PURE__*/React.createElement(Pdf, null),
+        icon: /*#__PURE__*/React.createElement(Paperclip, null),
         tooltipContent: "Content"
       }
     };
@@ -26,7 +26,7 @@ describe("getComponentFromLookup", function () {
     var trigger = {
       type: "iconButton",
       props: {
-        icon: /*#__PURE__*/React.createElement(Pdf, null),
+        icon: /*#__PURE__*/React.createElement(Paperclip, null),
         tooltipContent: "Content",
         disabled: true
       }

package/dist/helpers/logic/get-component-from-lookup.spec.js

@@ -1,7 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _IconButton = _interopRequireDefault(require("../../IconButton"));
 var _getComponentFromLookup = _interopRequireDefault(require("./get-component-from-lookup"));
@@ -15,7 +15,7 @@ describe("getComponentFromLookup", function () {
     var trigger = {
       type: "iconButton",
       props: {
-        icon: /*#__PURE__*/_react["default"].createElement(_icons.Pdf, null),
+        icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.Paperclip, null),
         tooltipContent: "Content"
       }
     };
@@ -29,7 +29,7 @@ describe("getComponentFromLookup", function () {
     var trigger = {
       type: "iconButton",
       props: {
-        icon: /*#__PURE__*/_react["default"].createElement(_icons.Pdf, null),
+        icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.Paperclip, null),
         tooltipContent: "Content",
         disabled: true
       }