@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/Toaster/Toaster.tsx

@@ -1,100 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import { Text } from "../Text/Text";
-import { CheckIcon } from "../Icons/CheckIcon";
-import { CrossIcon } from "../Icons/CrossIcon";
-import { WarningIcon } from "../Icons/WarningIcon";
-
-import "./Toaster.scss";
-
-export interface ToasterProps {
-  type: "success" | "failure";
-  message: string;
-  title: string;
-  isVisible?: boolean;
-  /** if you need to reposition the toaster for whatever reason you can use these props */
-  styleOverwrite?: Pick<
-    React.CSSProperties,
-    "top" | "bottom" | "left" | "right"
-  >;
-}
-
-export const TOASTER_TYPE_OPTIONS = {
-  SUCCESS: "success",
-  FAILURE: "failure",
-} as const;
-export type ToasterType =
-  typeof TOASTER_TYPE_OPTIONS[keyof typeof TOASTER_TYPE_OPTIONS];
-
-const Toaster: React.VoidFunctionComponent<ToasterProps> = ({
-  message = "",
-  title = "",
-  type = TOASTER_TYPE_OPTIONS.SUCCESS,
-  isVisible,
-  styleOverwrite,
-}) => {
-  const isSuccess = type === TOASTER_TYPE_OPTIONS.SUCCESS;
-  const isFailure = type === TOASTER_TYPE_OPTIONS.FAILURE;
-
-  return (
-    <div
-      style={styleOverwrite}
-      id="application-toaster"
-      data-test-id={`toaster-panel-${type}`}
-      className={classNames(
-        "bg-white cursor-pointer",
-        "rounded-md shadow-lg",
-        "min-h-13 max-h-19 w-104 transition-transform",
-
-        {
-          shelved: !isVisible,
-          expanded: isVisible,
-          "type-success": isSuccess,
-          "type-failure": isFailure,
-        }
-      )}
-    >
-      <div className="relative p-4">
-        <div className="flex flex-row">
-          <div
-            data-test-id="success-toaster-icon"
-            className={classNames("success-icon text-green-700", {
-              hidden: isFailure,
-            })}
-          >
-            <CheckIcon />
-          </div>
-          <div
-            data-test-id="failure-toaster-icon"
-            className={classNames("failure-icon text-red-700", {
-              hidden: isSuccess,
-            })}
-          >
-            <WarningIcon />
-          </div>
-          <div className="ml-3">
-            <Text type="strong" data-test-id="toaster-title" text={title} />
-            <Text data-test-id="toaster-message" text={message} />
-          </div>
-          <CrossIcon
-            data-test-id="toaster-close-button"
-            className="ml-auto cursor-pointer text-slate-500"
-          />
-        </div>
-      </div>
-
-      <div
-        data-test-id="toaster-progress-bar-container"
-        className={classNames("h-1 absolute bottom-0 w-full rounded-b-md")}
-      >
-        <div
-          data-test-id="toaster-progress-bar"
-          className={classNames("h-full")}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default Toaster;

package/src/components/Toaster/toast-elements-getter.ts

@@ -1,72 +0,0 @@
-interface GetToasterElementsParams {
-  timeoutId: NodeJS.Timeout;
-  progressBarAnimationFrameHandler: number;
-}
-
-interface GetToasterElementsReturn {
-  toasterElementMessage: HTMLElement;
-  toasterProgressBar: HTMLElement;
-  toasterElementTitle: HTMLElement;
-  toasterElementSuccessIcon: HTMLElement;
-  toasterElementFailureIcon: HTMLElement;
-  toasterElementContainer: HTMLElement;
-  toasterCloseButton: HTMLElement;
-}
-
-/**
- *
- * @param params.timeoutId - the timeoutId (that makes the toaster vanish), in case of a shortcut
- * @param params.progressBarAnimationFrameHandler - animation frame id to be canceled in case of a shortcut
- * @returns a collection of html elements to be manipulated by the animation
- */
-export const getToasterElements = (
-  params: GetToasterElementsParams
-): GetToasterElementsReturn => {
-  const { timeoutId, progressBarAnimationFrameHandler } = params;
-  const toasterElementContainer = document.querySelector<HTMLElement>(
-    "#application-toaster"
-  );
-
-  if (!toasterElementContainer) {
-    clearTimeout(timeoutId);
-    clearTimeout(progressBarAnimationFrameHandler);
-
-    throw new Error(
-      "Make sure that the Toaster component element is rendered with an id [application-toaster]"
-    );
-  }
-
-  const toasterElementMessage = toasterElementContainer?.querySelector(
-    '[data-test-id="toaster-message"]'
-  ) as HTMLElement;
-
-  const toasterElementTitle = toasterElementContainer?.querySelector(
-    '[data-test-id="toaster-title"]'
-  ) as HTMLElement;
-
-  const toasterElementSuccessIcon = toasterElementContainer?.querySelector(
-    '[data-test-id="success-toaster-icon"]'
-  ) as HTMLElement;
-
-  const toasterElementFailureIcon = toasterElementContainer?.querySelector(
-    '[data-test-id="failure-toaster-icon"]'
-  ) as HTMLElement;
-
-  const toasterCloseButton = toasterElementContainer?.querySelector(
-    '[data-test-id="toaster-close-button"]'
-  ) as HTMLElement;
-
-  const toasterProgressBar = toasterElementContainer?.querySelector(
-    '[data-test-id="toaster-progress-bar"]'
-  ) as HTMLElement;
-
-  return {
-    toasterElementContainer,
-    toasterElementMessage,
-    toasterElementTitle,
-    toasterProgressBar,
-    toasterElementSuccessIcon,
-    toasterElementFailureIcon,
-    toasterCloseButton,
-  };
-};

package/src/components/Toaster/toast-progress-animator.ts

@@ -1,53 +0,0 @@
-interface AnimateProgressParams {
-  animationDuration: number;
-  progressBarElement: HTMLElement;
-}
-
-/**
- * Reference: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
- * @param params.animationDuration - the amount of seconds the duration will take
- * @param params.progressBarElement - the html element for the progress bar
- * @returns the animation frame id
- */
-export const animateProgress = (params: AnimateProgressParams): number => {
-  const { animationDuration, progressBarElement } = params;
-
-  let progressBarAnimationFrameHandler: number;
-
-  let startingTimestamp = 0;
-  let previousTimestamp = 0;
-  let done = false;
-  const animationTick = 100 / animationDuration;
-
-  const animate = (animationTimestamp: number) => {
-    if (!startingTimestamp) {
-      startingTimestamp = animationTimestamp;
-    }
-
-    const elapsed = animationTimestamp - startingTimestamp;
-
-    if (previousTimestamp !== animationTimestamp) {
-      const count = 100 - animationTick * elapsed;
-      progressBarElement.style.width = `${count}%`;
-      if (count === 0) {
-        done = true;
-      }
-    }
-
-    if (elapsed < animationDuration) {
-      // Stop the animation after duration is finished
-      previousTimestamp = animationTimestamp;
-
-      if (!done) {
-        progressBarAnimationFrameHandler =
-          window.requestAnimationFrame(animate);
-      }
-    }
-  };
-
-  progressBarElement.style.width = "100%";
-
-  progressBarAnimationFrameHandler = requestAnimationFrame(animate);
-
-  return progressBarAnimationFrameHandler;
-};

package/src/components/Toaster/toast.ts

@@ -1,112 +0,0 @@
-import { getToasterElements } from "./toast-elements-getter";
-import { animateProgress } from "./toast-progress-animator";
-
-let timeoutId: NodeJS.Timeout;
-let progressBarAnimationFrameHandler: number;
-
-const defaultDurationInSeconds = 5;
-
-type ToastParams =
-  | {
-      message: string;
-      title?: string;
-      showIcon?: boolean;
-      type: "success" | "failure";
-    }
-  | string;
-
-const showToaster = (params: ToastParams) => {
-  clearTimeout(timeoutId);
-  clearTimeout(progressBarAnimationFrameHandler);
-
-  const {
-    toasterElementContainer,
-    toasterElementMessage,
-    toasterElementTitle,
-    toasterProgressBar,
-    toasterElementSuccessIcon,
-    toasterElementFailureIcon,
-    toasterCloseButton,
-  } = getToasterElements({
-    timeoutId,
-    progressBarAnimationFrameHandler,
-  });
-
-  const animationDuration = defaultDurationInSeconds * 1000;
-
-  progressBarAnimationFrameHandler = animateProgress({
-    animationDuration,
-    progressBarElement: toasterProgressBar,
-  });
-
-  timeoutId = setTimeout(() => {
-    toasterElementContainer.classList.remove("expanded");
-    clearTimeout(timeoutId);
-    cancelAnimationFrame(progressBarAnimationFrameHandler);
-  }, animationDuration);
-
-  function shortcutAndClose() {
-    toasterElementContainer.classList.remove("expanded");
-    toasterElementContainer.classList.add("shelved");
-
-    clearTimeout(timeoutId);
-    cancelAnimationFrame(progressBarAnimationFrameHandler);
-  }
-
-  toasterCloseButton.removeEventListener("click", shortcutAndClose, true);
-  toasterCloseButton.addEventListener("click", shortcutAndClose);
-
-  toasterElementContainer.removeEventListener("click", shortcutAndClose, true);
-  toasterElementContainer.addEventListener("click", shortcutAndClose);
-
-  // Basic usage, no need to manipulate any other element;
-  if (typeof params === "string") {
-    toasterElementMessage.textContent = params;
-    toasterElementTitle.classList.add("hidden");
-
-    toasterElementSuccessIcon.classList.remove("hidden");
-    toasterElementFailureIcon.classList.add("hidden");
-
-    toasterElementContainer.classList.remove("type-failure");
-    toasterElementContainer.classList.add("type-success");
-    toasterElementContainer.classList.add("expanded");
-
-    return;
-  }
-
-  const { title = "", showIcon = true, message, type } = params;
-
-  toasterElementTitle.classList.toggle("hidden", !title);
-  toasterElementTitle.textContent = title;
-
-  toasterElementSuccessIcon.classList.toggle("hidden", !showIcon);
-  toasterElementFailureIcon.classList.toggle("hidden", !showIcon);
-
-  toasterElementMessage.textContent = message;
-  toasterElementContainer.classList.remove("type-success");
-  toasterElementContainer.classList.remove("type-failure");
-  toasterElementContainer.classList.add("expanded");
-  toasterElementContainer.classList.add(`type-${type}`);
-};
-
-export const toast = (params: ToastParams): void => {
-  showToaster(params);
-};
-
-toast.error = (message: string): void => {
-  showToaster({
-    message: message,
-    type: "failure",
-    showIcon: true,
-    title: "",
-  });
-};
-
-toast.info = (message: string): void => {
-  showToaster({
-    message: message,
-    type: "success",
-    showIcon: true,
-    title: "",
-  });
-};

package/src/components/ViewItem/ViewItem.tsx

@@ -1,85 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import Text, { TextProps } from "../Text/Text";
-import Button from "../Button/Button";
-import { RestPropped } from "../../types/general.types";
-import { ButtonProps } from "../Button/Button.types";
-
-export interface ViewItemProps<AccessoryType extends JSX.Element>
-  extends RestPropped {
-  titleProps?: TextProps;
-  // deprecated: use titleProps instead
-  title?: string;
-  titleAccessory?: AccessoryType;
-  // these props are injected in a Text component, allowing for customisation
-  contentProps?: TextProps[];
-  // these strings are injected in a default Text component
-  // deprecated: use contentProps instead
-  content?: string[];
-  // if contentProps and content are both empty or null, this value will be presented instead
-  defaultContent?: string;
-  className?: string;
-  buttons?: ButtonProps[];
-}
-
-export function ViewItem<AccessoryType extends JSX.Element>({
-  titleProps,
-  title,
-  titleAccessory,
-  contentProps,
-  content,
-  defaultContent = "-",
-  className,
-  buttons,
-  ...restProps
-}: ViewItemProps<AccessoryType>): JSX.Element {
-  const titlePropsMerged = titleProps ?? { text: title ?? defaultContent };
-  const contentPropsMerged =
-    contentProps ??
-    content?.map(line => {
-      return { text: line, className: "cweb-view-content-text" } as TextProps;
-    });
-
-  return (
-    <div className={classNames("vitals-view-item", className)} {...restProps}>
-      <div
-        className={
-          "vitals-view-item-title-line flex justify-start flex-row items-start"
-        }
-      >
-        {titlePropsMerged && (
-          <Text
-            className={classNames(
-              titlePropsMerged.className,
-              "vitals-view-item-title mb-1 mr-2"
-            )}
-            color="slate-500"
-            {...titlePropsMerged}
-          />
-        )}
-        {titleAccessory}
-      </div>
-      {contentPropsMerged &&
-        contentPropsMerged?.map(textProps => (
-          <Text {...textProps} key={textProps.key || textProps.text} />
-        ))}
-      {(!contentPropsMerged || contentPropsMerged?.length === 0) && (
-        <Text text={defaultContent} key="empty-text" />
-      )}
-
-      <div className="flex flex-row cweb-view-buttons" key="cweb-view-buttons">
-        {buttons &&
-          buttons.map(button => (
-            <Button
-              {...button}
-              className={classNames("cweb-view-button ml-3", button.className)}
-              key={button.key || button.text}
-            />
-          ))}
-      </div>
-    </div>
-  );
-}
-
-export default ViewItem;

package/src/custom.d.ts

@@ -1,4 +0,0 @@
-declare module "*.svg" {
-    const content: any;
-    export default content;
-}

package/src/index.tsx

@@ -1,170 +0,0 @@
-export { FlexColumn } from "./components/Container/FlexColumn";
-export { FlexRow } from "./components/Container/FlexRow";
-export type { FlexContainerProps } from "./components/Container/types/FlexContainerProps.type";
-
-export {
-  default as Toaster,
-  TOASTER_TYPE_OPTIONS,
-} from "./components/Toaster/Toaster";
-export { toast } from "./components/Toaster/toast";
-
-export { default as Avatar } from "./components/Avatar/Avatar";
-export { default as Badge } from "./components/Badge/Badge";
-export {
-  BaseButtonProps as NonPrimaryButtonProps,
-  ButtonWithPendingStateProps as PrimaryButtonProps,
-  ButtonDefinition,
-} from "./components/ButtonV2/ButtonProps.type";
-export { PrimaryButton } from "./components/ButtonV2/PrimaryButton";
-export { SecondaryButton } from "./components/ButtonV2/SecondaryButton";
-export { TertiaryButton } from "./components/ButtonV2/TertiaryButton";
-export { default as Carousel } from "./components/Carousel/Carousel";
-export { default as CenteredHero } from "./components/CenteredHero/CenteredHero";
-export { default as Checkbox } from "./components/Checkbox/Checkbox";
-export { ConfirmationDialog } from "./components/ConfirmationDialog/ConfirmationDialog";
-export { default as DatePicker } from "./components/Datepicker/Datepicker";
-export { default as Dropdown } from "./components/Dropdown/Dropdown";
-export { EmptyListMessage } from "./components/EmptyListMessage/EmptyListMessage";
-export { default as ErrorBlock } from "./components/ErrorBlock/ErrorBlock";
-export { default as InfoBlock } from "./components/InfoBlock/InfoBlock";
-export { InfoField } from "./components/InfoField/InfoField";
-export { INPUT_TYPES, default as Input } from "./components/Input/Input";
-export { default as Line } from "./components/Line/Line";
-export { Table, TableProps } from "./components/Table/Table";
-export {
-  TableFieldConfig,
-  TableFieldContent,
-  TableFieldText,
-  TableFieldAction,
-} from "./components/Table/Table.types";
-export {
-  LoadingIndicator,
-  LoadingIndicatorProps,
-} from "./components/LoadingIndicator/LoadingIndicator";
-export { default as Menu } from "./components/Menu/Menu";
-export {
-  List,
-  ListProps,
-  ListItemProps,
-  OnAssetLoadErrorPayload,
-} from "./components/List/List";
-export {
-  CheckboxList,
-  CheckboxListProps,
-} from "./components/CheckboxList/CheckboxList";
-
-export {
-  CheckboxListModal,
-  CheckboxListModalProps,
-} from "./components/CheckBoxListModal/CheckboxListModal";
-
-export { MultiSelect } from "./components/MultiSelect/MultiSelect";
-export { NavLayout, NavMenuLayoutProps } from "./components/NavMenu/NavLayout";
-export { NavMenu, NavMenuElement } from "./components/NavMenu/NavMenu";
-export {
-  NotificationBanner,
-  NotificationBannerColor,
-  NotificationBannerLinkProps,
-} from "./components/NotificationBanner/NotificationBanner";
-export { default as Page } from "./components/Page/Page";
-export { default as CRUDPage } from "./components/Page/CRUDPage";
-export { PaginationMenu } from "./components/PaginationMenu/PaginationMenu";
-export {
-  PageSize as PaginationMenuPageSize,
-  OnPaginationChange as OnPaginationMenuChange,
-  Localization as PaginationMenuLocalization,
-  PaginationMenuProps,
-} from "./components/PaginationMenu/PaginationMenu.types";
-export { default as PreviewPhone } from "./components/PreviewPhone/PreviewPhone";
-export { default as Radio } from "./components/Radio/Radio";
-export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
-export { RadioProps, RadioV2 } from "./components/Radio/RadioV2";
-export {
-  RadioGroupProps,
-  RadioGroupV2,
-} from "./components/RadioGroup/RadioGroupV2";
-export { default as Section } from "./components/Section/Section";
-export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
-export {
-  default as SectionItem,
-  SectionItemProps,
-} from "./components/Section/SectionItem";
-//export { default as Select } from "./components/Select/Select";
-export { SelectProps, Select } from "./components/Select/SelectV2";
-export {
-  SettingsMenuButton,
-  SettingsMenuButtonProps,
-} from "./components/SettingsMenuButton/SettingsMenuButton";
-export { Spinner } from "./components/Spinner/Spinner";
-export { Steps } from "./components/Steps/Steps";
-export { default as Switcher } from "./components/Switcher/Switcher";
-
-export {
-  default as Tabbar,
-  TabbarProps,
-  TabItemDetails,
-} from "./components/Tabbar/Tabbar";
-
-export {
-  Breadcrumbs,
-  BreadcrumbProps,
-} from "./components/Breadcrumbs/Breadcrumbs";
-
-export {
-  PageHeader,
-  PageHeaderProps,
-} from "./components/PageHeader/PageHeader";
-
-export { default as TabLinks } from "./components/TabLinks/TabLinks";
-export { default as Tag } from "./components/Tag/Tag";
-export { default as TagGroup } from "./components/Tag/TagGroup";
-export { default as TextArea } from "./components/Textarea/Textarea";
-export { default as TextEditor } from "./components/TextEditor/TextEditor";
-export { default as TextEditorV2 } from "./components/TextEditorV2/TextEditorV2";
-export { TextLink, TextLinkProps } from "./components/TextLink/TextLink";
-export { Title, TitleStyle } from "./components/Title/Title";
-export { Timeline } from "./components/Timeline/Timeline";
-export { ViewItem, ViewItemProps } from "./components/ViewItem/ViewItem";
-
-export { default as Text } from "./components/Text/Text";
-
-export { SearchInput, SearchInputProps } from "./components/Input/SearchInput";
-
-export { GenericForm, Form } from "./components/Form/Form";
-export { GenericFormProps, FormProps } from "./components/Form/form.types";
-
-export { IconProps } from "./components/Icons/types/IconProps.type";
-export { AddIcon } from "./components/Icons/AddIcon";
-export { AlertsIcon } from "./components/Icons/AlertsIcon";
-export { BellIcon } from "./components/Icons/BellIcon";
-export { ChartIcon } from "./components/Icons/ChartIcon";
-export { ChatBoxIcon } from "./components/Icons/ChatBoxIcon";
-export { CheckIcon } from "./components/Icons/CheckIcon";
-export { ChevronDoubleIcon } from "./components/Icons/ChevronDoubleIcon";
-export { CrossIcon } from "./components/Icons/CrossIcon";
-export { DeleteIcon } from "./components/Icons/DeleteIcon";
-export { DownArrowIcon } from "./components/Icons/DownArrowIcon";
-export { DragIcon } from "./components/Icons/DragIcon";
-export { EditIcon } from "./components/Icons/EditIcon";
-export { EmptyStateDashboardIcon } from "./components/Icons/EmptyStateDashboardIcon";
-export { ExclamationMarkIcon } from "./components/Icons/ExclamationMarkIcon";
-export { EyeIcon } from "./components/Icons/EyeIcon";
-export { GearIcon } from "./components/Icons/GearIcon";
-export { GroupIcon } from "./components/Icons/GroupIcon";
-export { HeartIcon } from "./components/Icons/HeartIcon";
-export { LeftArrowIcon } from "./components/Icons/LeftArrowIcon";
-export { LightBulbIcon } from "./components/Icons/LightBulbIcon";
-export { LockIcon } from "./components/Icons/LockIcon";
-export { MessagesIcon } from "./components/Icons/MessagesIcon";
-export { NotesIcon } from "./components/Icons/NotesIcon";
-export { PinIcon } from "./components/Icons/PinIcon";
-export { PrintIcon } from "./components/Icons/PrintIcon";
-export { RightArrowIcon } from "./components/Icons/RightArrowIcon";
-export { SmallCircleIcon } from "./components/Icons/SmallCircleIcon";
-export { SmallDiamondIcon } from "./components/Icons/SmallDiamondIcon";
-export { SmallSquareIcon } from "./components/Icons/SmallSquareIcon";
-export { SpaceRocketIcon } from "./components/Icons/SpaceRocketIcon";
-export { StarIcon } from "./components/Icons/StarIcon";
-export { HamburgerIcon } from "./components/Icons/HamburgerIcon";
-export { SearchIcon } from "./components/Icons/SearchIcon";
-export { SearchCancelIcon } from "./components/Icons/SearchCancelIcon";

package/src/styles/_colors.scss

@@ -1,59 +0,0 @@
-//colors
-
-$input-border: #d1d5db;
-$input-background: #d1d5db;
-$input-border-dark: #9ca3af;
-
-$color-background-secondary: #f3f4f6;
-
-$color-toggle-switch-background: #6abfa6;
-
-$color-primary: #0074dd;
-$color-secondary: #374151;
-$color-white: #ffffff;
-$color-body: #2d2d2d;
-
-$color-emphasis-background: #e8f5fc;
-$color-primary-emphasis: #045baa;
-$color-primary-light: #2da8e5;
-$color-luscii-pink: #ff0099;
-$color-luscii-green: #6abfa5;
-
-$color-positive: #4ad461;
-$color-positive-support: #e7f5ec;
-$color-negative: #ff6266;
-$color-negative-support: #fff1f1;
-$color-warning: #ffad62;
-$color-warning-support: #ffedd5;
-
-$color-chrome: #f3f3f3;
-$color-divider: #eeeeee;
-$color-border: #cccccc;
-$color-accent: #b9b9b9;
-//$color-text-lighter: #9F9F9F; This is an experiment from Dennis to see if it becomes better for our users. Leaving this here if we want to switch back.
-$color-text-lighter: #737373;
-$color-pale-grey: #f2fafd;
-$color-pale-green: #e7f5ec;
-$color-pale-grey-2: #f1f1f1;
-$color-placeholder: #64748b; // slate-500
-$color-slate-50: #f8fafc; // slate-50
-$color-slate-100: #f1f5f9; // slate-100
-$color-slate-700: #334155; // slate-700
-$color-text-secondary: #737373;
-$color-text-emphasis: #0f3554;
-
-$color-comp-dark: #32918f;
-$color-comp-light: #57bbb9;
-$color-comp-alt: #43bbe7;
-$color-comp-active: #516ed0;
-$color-comp-darker: #46375f;
-$color-comp-darkest: #1f1e1e;
-
-$color-negative-alt: #ff6660;
-$color-negative-alt-emphasis: #e55b56;
-$color-branding-support-1: #6abfa5;
-$color-branding-support-2: #6670a5;
-$color-branding-support-4: #0f3554;
-
-$color-helper-1: #c5d0de;
-$color-emphasis-2: #f0f8f6;