@luscii-healthtech/web-ui 20.6.0 → 20.7.0

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

@@ -6,6 +6,11 @@ import { TextColor, TextHoverColor } from "../Text/Text";
  *
  */
 export interface BaseButtonProps extends React.ComponentPropsWithRef<"button"> {
+    size?: "medium" | "large";
+    children?: React.ReactNode;
+    /**
+     * @deprecated Use `children` instead.
+     */
     text?: string;
     icon?: React.FunctionComponent<IconProps> | IconKey;
     isDisabled?: boolean;

package/dist/index.development.js

@@ -1063,7 +1063,7 @@ toast.info = (message) => {
   });
 };
 
-var css_248z$k = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
+var css_248z$k = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n/** Load Avenir fonts for titles */\n@font-face {\n  font-family: \"AvenirNextLTPro-Regular\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.ttf\") format(\"truetype\");\n}\n@font-face {\n  font-family: \"AvenirNextLTPro-Bold\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.ttf\") format(\"truetype\");\n}\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
 styleInject(css_248z$k);
 
 const Title = (props) => {
@@ -1147,7 +1147,7 @@ const Accordion = ({ dataTestId, isCollapsedByDefault = false, items, className,
   );
 };
 
-var css_248z$j = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button {\n  background-color: #e2e8f0;\n  border-radius: 9999px;\n}\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}";
+var css_248z$j = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}";
 styleInject(css_248z$j);
 
 const ListItemSkeleton = () => {
@@ -1176,7 +1176,7 @@ const ListSkeleton = ({ items, dataTestId = "list-skeleton" }) => {
       "div",
       { className: "ui-flex ui-flex-row ui-items-center ui-px-4 ui-py-2" },
       React__namespace.default.createElement("div", { className: "skeleton-box", style: { width: `${160}px`, height: `${14}px` } }),
-      React__namespace.default.createElement("div", { className: "skeleton-box is-button ui-ml-auto", style: { width: `${110}px`, height: `${44}px` } })
+      React__namespace.default.createElement("div", { className: "skeleton-box is-button ui-ml-auto ui-bg-slate-200 ui-radius-xxs", style: { width: `${110}px`, height: `${36}px` } })
     ),
     skeletonItems
   );
@@ -1622,32 +1622,46 @@ const Spinner = (props) => {
 
 const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
   var _b, _c;
-  var { onClick, text, textColor, textHoverColor, icon, isDisabled, isPending, className, title, dataTestId, type = "button" } = _a, otherAttributes = __rest(_a, ["onClick", "text", "textColor", "textHoverColor", "icon", "isDisabled", "isPending", "className", "title", "dataTestId", "type"]);
+  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"]);
   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;
   function handleClick(event) {
     event.stopPropagation();
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }
-  if (!text && !icon) {
-    console.error("A text or an icon is required to use this component, please make sure to pass at least one of them as a prop.");
+  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([
-    "ui-h-11",
+    "[transition:transform_150ms,box-shadow_150ms,color_150ms,background-color_150ms,border-color_150ms,background-position_300ms] ui-ease-out",
     "ui-border",
-    "ui-transition-outline ui-transition-colors ui-duration-300 ui-ease-in-out",
-    "ui-rounded-full",
-    "ui-leading-none",
-    "ui-cursor-pointer",
-    "focus:ui-outline-primary",
+    "ui-radius-xxs",
+    "ui-outline-offset-4 focus:ui-outline-primary",
     "ui-group",
-    "ui-flex-shrink-0"
+    "ui-relative",
+    "ui-inline-flex ui-flex-row ui-items-center ui-justify-center ui-gap-xxs ui-flex-shrink-0",
+    "ui-shadow-sm"
   ], {
     "ui-opacity-50": isDisabled,
-    "ui-pointer-events-none": isPending,
-    "ui-w-11": !text && icon
+    "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,
+    /**
+     * Deducting 1px from the padding to account for the border.
+     */
+    "ui-px-[calc(theme('spacing.m')-1px)]": true,
+    "ui-py-[calc(theme('spacing.xxs')-1px)]": size === "medium",
+    "ui-py-[calc(theme('spacing.s')-1px)]": size === "large",
+    "ui-py-[calc(theme('spacing.xxxs')-1px)]": hasContentAndIcon && size === "medium",
+    "ui-py-[calc(theme('spacing.xs')-1px)]": hasContentAndIcon && size === "large"
   }, className);
   const textColorClass = allowedColors[textColor !== null && textColor !== void 0 ? textColor : "base"];
   const tooltipAttrs = title ? {
@@ -1656,37 +1670,37 @@ 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, "aria-disabled": isDisabled, "data-test-id": (_c = dataTestId !== null && dataTestId !== void 0 ? dataTestId : otherAttributes["data-test-id"]) !== null && _c !== void 0 ? _c : otherAttributes.id }),
-    React__namespace.default.createElement(
+    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
+      }
+    ) }),
+    isPending && React__namespace.default.createElement(
       "span",
-      Object.assign({}, tooltipAttrs, { className: classNames__default.default(
-        "ui-relative ui-flex ui-h-full ui-w-full ui-flex-row ui-items-center ui-justify-center",
-        // ensuring the buttons are 44px high including content
-        {
-          "ui-pl-4 ui-pr-6": text && icon,
-          "ui-px-4": text && !icon
+      {
+        className: "ui-opacity-100",
+        // IE11 center translate fix
+        style: {
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)"
         }
-      ) }),
-      icon && !isPending && React__namespace.default.createElement(IconComponentOrKey, { name: icon, className: `ui-h-6 ui-w-6 ${textColorClass}` }),
-      isPending && React__namespace.default.createElement(
-        "span",
-        {
-          className: "ui-opacity-100",
-          // IE11 center translate fix
-          style: {
-            position: "absolute",
-            left: "50%",
-            top: "50%",
-            transform: "translate(-50%, -50%)"
-          }
-        },
-        React__namespace.default.createElement(Spinner, { className: textColorClass })
-      ),
-      text && React__namespace.default.createElement(Text, { className: classNames__default.default({
-        "ui-invisible": isPending,
-        "ui-ml-1": icon
-      }), text, color: textColor, hoverColor: textHoverColor, hoverInGroup: true })
-    )
+      },
+      React__namespace.default.createElement(Spinner, { className: textColorClass })
+    ),
+    content && React__namespace.default.createElement(Text, { variant: "strong", className: classNames__default.default({
+      "ui-invisible": isPending
+    }), color: textColor, hoverColor: textHoverColor, hoverInGroup: true }, content)
   );
   if (title) {
     return React__namespace.default.createElement(
@@ -1703,11 +1717,10 @@ const SecondaryButton = React__namespace.default.forwardRef((props, innerRef) =>
   return React__namespace.default.createElement(ButtonV2, Object.assign({ ref: innerRef }, props, { className: classNames__default.default([
     "ui-text-primary",
     "ui-bg-white",
-    "ui-border-slate-300",
-    "hover:ui-text-primary-dark",
-    "hover:ui-border-slate-400",
-    "focus:ui-border-primary",
-    "ui-shadow-sm"
+    "ui-border-neutral-interactive",
+    {
+      "hover:ui-border-neutral-interactive--hover hover:ui-bg-primary-background": !props.isDisabled
+    }
   ], props.className), textColor: "blue-800", textHoverColor: "blue-900" }));
 });
 
@@ -1845,10 +1858,10 @@ AccordionList.Actions = AccordionListActions;
 const TertiaryButton = (props) => {
   return React__namespace.default.createElement(ButtonV2, Object.assign({}, props, { className: classNames__default.default([
     "ui-text-primary",
-    "ui-bg-transparent",
-    "ui-border-transparent",
-    "hover:ui-text-primary-dark",
-    "focus:ui-border-primary"
+    "ui-border-transparent ui-bg-transparent !ui-shadow-none",
+    {
+      "hover:ui-bg-primary-background hover:ui-text-primary-dark": !props.isDisabled
+    }
   ], props.className), textColor: "blue-800", textHoverColor: "blue-900" }));
 };
 
@@ -1864,10 +1877,11 @@ const ModalHeader = (props) => {
 const PrimaryButton = (props) => {
   return React__namespace.default.createElement(ButtonV2, Object.assign({}, props, { className: classNames__default.default([
     "ui-text-white",
-    "ui-bg-primary",
-    "ui-border-primary-transparent",
-    "hover:ui-bg-primary-dark",
-    "ui-shadow-sm"
+    "ui-bg-gradient-to-r",
+    "ui-gradient-blue",
+    {
+      "hover:ui-gradient-blue--hover": !props.isDisabled && !props.isPending
+    }
   ], props.className), textColor: "white" }));
 };