@luscii-healthtech/web-ui 28.2.0 → 28.3.1

package/dist/components/Box/Box.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { SIZES } from "../../system/Sizes";
 import { ELEVATION } from "../../system/Elevation";
+import { BackgroundColor } from "../../types/general.types";
 type Size = keyof typeof SIZES;
 declare const spacingKeys: readonly ["p", "pt", "pr", "pb", "pl", "px", "py", "m", "mt", "mr", "mb", "ml", "mx", "my"];
 type SpacingProps = Partial<Record<(typeof spacingKeys)[number], Size>>;
@@ -15,6 +16,12 @@ export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<
      * Make the item fill up horizontal space
      */
     width?: "full" | keyof typeof SIZES;
+    backgroundColor?: BackgroundColor;
+    /**
+     * Will set a border radius based on the standard sizes scale.
+     * Check {@link SIZES} for reference.
+     */
+    borderRadius?: "xxxs";
 };
 export declare const Box: <C extends React.ElementType = "div">(props: Props<C>) => React.JSX.Element;
 export {};

package/dist/components/ButtonV2/ButtonProps.type.d.ts

@@ -12,7 +12,30 @@ export interface BaseButtonProps extends React.ComponentPropsWithRef<"button"> {
      * @deprecated Use `children` instead.
      */
     text?: string;
+    /**
+     * @deprecated Use `leadingIcon` instead.
+     */
     icon?: React.FunctionComponent<IconProps> | IconKey;
+    /**
+     * Icon that will be rendered before the text. You need to
+     * pass in the rendered icon component, not the key.
+     *
+     * @example
+     * ```tsx
+     * <PrimaryButton leadingIcon={<AddIcon />} />
+     * ````
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Icon that will be rendered before the text. You need to
+     * pass in the rendered icon component, not the key.
+     *
+     * @example
+     * ```tsx
+     * <PrimaryButton trailingIcon={<AddIcon />} />
+     * ````
+     */
+    trailingIcon?: React.ReactNode;
     isDisabled?: boolean;
     className?: string;
     dataTestId?: string;

package/dist/index.development.js

@@ -1596,21 +1596,18 @@ const Spinner = (props) => {
 
 const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
   var _b, _c;
-  var { children, size = "medium", onClick, text, textColor, textHoverColor, icon, isDisabled, isPending, className, title, dataTestId, type = "button" } = _a, otherAttributes = __rest(_a, ["children", "size", "onClick", "text", "textColor", "textHoverColor", "icon", "isDisabled", "isPending", "className", "title", "dataTestId", "type"]);
+  var { children, size = "medium", onClick, text, textColor, textHoverColor, icon, leadingIcon, trailingIcon, isDisabled, isPending, className, title, dataTestId, type = "button" } = _a, otherAttributes = __rest(_a, ["children", "size", "onClick", "text", "textColor", "textHoverColor", "icon", "leadingIcon", "trailingIcon", "isDisabled", "isPending", "className", "title", "dataTestId", "type"]);
   const generatedId = React__namespace.default.useId();
   const buttonId = (_b = otherAttributes.id) !== null && _b !== void 0 ? _b : generatedId;
   const buttonTooltipId = `button-tooltip-id-${buttonId}`;
   const content = children !== null && children !== void 0 ? children : text;
   const isInteractive = !isDisabled && !isPending;
-  const hasContentAndIcon = content && icon;
+  const hasContentAndLeadingIcon = content && (icon !== null && icon !== void 0 ? icon : leadingIcon);
+  const hasContentAndTrailingIcon = content && trailingIcon;
   function handleClick(event) {
     event.stopPropagation();
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }
-  if (!content && !icon) {
-    console.error("Content (`text` or `children` prop) or an icon is required to use this component, please make sure to pass at least one of them as a prop.");
-    return React__namespace.default.createElement("span", null, "Invalid props passed to this component.");
-  }
   const buttonClassName = classNames__default.default([
     "[transition:transform_150ms,box-shadow_150ms,color_150ms,background-color_150ms,border-color_150ms,background-position_300ms] ui-ease-out",
     "ui-border",
@@ -1618,16 +1615,19 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
     "ui-outline-offset-4 focus:ui-outline-primary",
     "ui-group",
     "ui-relative",
-    "ui-inline-flex ui-flex-row ui-items-center ui-justify-center ui-gap-xxs ui-flex-shrink-0",
+    "ui-inline-flex ui-flex-row ui-items-center ui-justify-center ui-flex-shrink-0",
     "ui-shadow-sm"
   ], {
+    "ui-gap-xxs": content
+  }, {
     "ui-opacity-50": isDisabled,
     "ui-cursor-not-allowed": isPending !== null && isPending !== void 0 ? isPending : isDisabled,
     "active:ui-shadow-none active:ui-scale-[0.98]": isInteractive,
     /**
      * Specific paddings for each combination of text and/or icon.
      */
-    "ui-pl-m ui-pr-l": hasContentAndIcon,
+    "ui-pl-m ui-pr-l": hasContentAndLeadingIcon,
+    "ui-pl-l ui-pr-m": hasContentAndTrailingIcon,
     /**
      * Deducting 1px from the padding to account for the border.
      */
@@ -1643,19 +1643,12 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
   const buttonComponent = React__namespace.default.createElement(
     "button",
     Object.assign({ ref: innerRef }, otherAttributes, { className: buttonClassName, type, onClick: handleClick, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : isPending, "aria-disabled": isDisabled, "aria-busy": isPending, "data-test-id": (_c = dataTestId !== null && dataTestId !== void 0 ? dataTestId : otherAttributes["data-test-id"]) !== null && _c !== void 0 ? _c : otherAttributes.id }, tooltipAttrs),
-    icon && React__namespace.default.createElement(IconComponentOrKey, { name: icon, className: classNames__default.default(
-      "ui-flex-shrink-0",
-      /**
-       * Text on a medium button is 2px smaller than the icon. So to
-       * make sure the icon can grow beyond the text, we need to
-       * allow the icon to grow beyond the text. This essentially
-       * vertically centers the icon.
-       */
-      "-ui-m-[2px]",
-      {
-        "ui-invisible": isPending
-      }
-    ) }),
+    leadingIcon && React__namespace.default.createElement(IconLayoutWrapper, { isInvisible: isPending }, leadingIcon),
+    !leadingIcon && icon && React__namespace.default.createElement(
+      IconLayoutWrapper,
+      { isInvisible: isPending },
+      React__namespace.default.createElement(IconComponentOrKey, { name: icon })
+    ),
     isPending && React__namespace.default.createElement(
       "span",
       { className: "ui-absolute ui-left-1/2 ui-top-1/2 ui--translate-x-1/2 ui--translate-y-1/2 ui-transform ui-opacity-100" },
@@ -1663,7 +1656,8 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
     ),
     content && React__namespace.default.createElement(Text, { variant: "strong", className: classNames__default.default({
       "ui-opacity-[0.01]": isPending
-    }), color: textColor, hoverColor: textHoverColor, hoverInGroup: true }, content)
+    }), color: textColor, hoverColor: textHoverColor, hoverInGroup: true }, content),
+    trailingIcon && React__namespace.default.createElement(IconLayoutWrapper, { isInvisible: isPending }, trailingIcon)
   );
   if (title) {
     return React__namespace.default.createElement(
@@ -1675,6 +1669,22 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
   }
   return buttonComponent;
 });
+function IconLayoutWrapper({ children, className, isInvisible }) {
+  return React__namespace.default.createElement("span", { className: classNames__default.default(
+    "ui-flex-shrink-0",
+    /**
+     * Text on a medium button is 2px smaller than the icon. So to
+     * make sure the icon can grow beyond the text, we need to
+     * allow the icon to grow beyond the text. This essentially
+     * vertically centers the icon.
+     */
+    "-ui-m-[2px]",
+    {
+      "ui-invisible": isInvisible
+    },
+    className
+  ) }, children);
+}
 
 const SecondaryButton = React__namespace.default.forwardRef((props, innerRef) => {
   return React__namespace.default.createElement(ButtonV2, Object.assign({ ref: innerRef }, props, { className: classNames__default.default([
@@ -1980,9 +1990,15 @@ const Box = (props) => {
   const spacingClasses = createSpacingClassNames(spacingKeys, props);
   const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
   return React__namespace.default.createElement(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
+    "ui-bg-slate-100": props.backgroundColor === "base",
+    "ui-bg-blue-50": props.backgroundColor === "blue",
+    "ui-bg-red-50": props.backgroundColor === "red",
+    " ui-bg-green-50": props.backgroundColor === "green",
+    " ui-bg-amber-50": props.backgroundColor === "amber",
     [`ui-shadow-${elevation}`]: elevation,
     [`ui-w-${width}`]: width && width !== "full",
-    "ui-w-full": width === "full"
+    "ui-w-full": width === "full",
+    "ui-radius-xxxs": props.borderRadius
   }, className) }, attributesWithoutSpacingKeys));
 };