@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/Modal/Modal.tsx

@@ -1,104 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import ReactModal from "react-modal";
-
-import "./Modal.scss";
-import { Title } from "../Title/Title";
-
-export const MODAL_SIZES = {
-  DEFAULT: "default",
-  WIDE: "wide",
-  WIDER: "wider",
-  EXTRA_SMALL: "extra-small",
-} as const;
-
-type MODAL_SIZES_NAMES = keyof typeof MODAL_SIZES;
-export type MODAL_SIZES_VALUES = typeof MODAL_SIZES[MODAL_SIZES_NAMES];
-
-export interface ModalProps {
-  children: React.ReactNode;
-  type?: MODAL_SIZES_VALUES;
-  isOpen?: boolean;
-  shouldCloseOnOverlayClick?: boolean;
-  showTitleBar?: boolean;
-  title?: string;
-  onCloseClick?: (event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void;
-  backAltText?: string;
-  closeAltText?: string;
-  className?: string;
-  closeButtonId?: string;
-  withPadding?: boolean;
-  showHeader?: boolean;
-}
-
-/**
- * Don't use this modal directly if you need to add buttons to it.
- * There's a component called <ModalWithButtons /> you can use instead.
- */
-function Modal({
-  children,
-  type = MODAL_SIZES.DEFAULT,
-  isOpen = false,
-  shouldCloseOnOverlayClick = true,
-  showTitleBar = true,
-  title,
-  onCloseClick,
-  closeAltText = "Close",
-  className,
-  closeButtonId,
-  withPadding = false,
-  showHeader = true,
-}: ModalProps): JSX.Element {
-  const containerClassName = classNames("cweb-modal", className, {
-    "type-default": type === MODAL_SIZES.DEFAULT,
-    "type-wide": type === MODAL_SIZES.WIDE,
-    "type-wider": type === MODAL_SIZES.WIDER,
-    "type-extra-small": type === MODAL_SIZES.EXTRA_SMALL,
-  });
-
-  const overlayClassName = classNames("cweb-modal-overlay", {
-    "no-title-bar": !showTitleBar,
-  });
-
-  ReactModal.setAppElement("body");
-
-  return (
-    <ReactModal
-      isOpen={isOpen}
-      contentLabel={title}
-      portalClassName="cweb-modal-portal"
-      overlayClassName={overlayClassName}
-      bodyOpenClassName="cweb-modal-body-open"
-      htmlOpenClassName="cweb-modal-html-open"
-      onRequestClose={onCloseClick}
-      shouldFocusAfterRender={false}
-      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
-      className={containerClassName}
-    >
-      {showHeader && (
-        <div
-          className={classNames({
-            "cweb-modal-title-section": showTitleBar,
-            "cweb-modal-no-title-section": !showTitleBar,
-          })}
-        >
-          {showTitleBar && title && <Title text={title} type="sm" className="cweb-modal-title" />}
-          <button
-            data-test-id="close-modal-button"
-            role="icon"
-            title={closeAltText}
-            id={closeButtonId}
-            className="cweb-modal-close-button"
-            onClick={onCloseClick}
-          />
-        </div>
-      )}
-
-      {children ? (
-        <div className={classNames("cweb-modal-content", { "px-6 py-4": withPadding })}>{children}</div>
-      ) : null}
-    </ReactModal>
-  );
-}
-
-export default Modal;

package/src/components/Modal/ModalWithButtons.tsx

@@ -1,34 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-import Modal, { ModalProps } from "./Modal";
-
-export type ButtonsAlignment = "justify-end" | "justify-between";
-
-type ModalWithButtonProps = ModalProps & {
-  buttons: [JSX.Element, JSX.Element?];
-  buttonsAlignment: ButtonsAlignment;
-};
-
-export const ModalWithButtons = (props: ModalWithButtonProps): JSX.Element => {
-  const { buttons, buttonsAlignment = "justify-between", children, ...rest } = props;
-  return (
-    <Modal {...rest} withPadding={false}>
-      <div className={classNames("cweb-modal-content", { "px-6 py-4": props.withPadding })}>{children}</div>
-      <div
-        className={classNames(
-          "flex items-center",
-          {
-            "justify-end": buttonsAlignment === "justify-end" || buttons.length === 1,
-            "justify-between": buttonsAlignment === "justify-between" && buttons.length >= 2,
-          },
-          "px-6 py-4",
-          "border-t border-solid rounded-b-lg border-chrome",
-          "bg-slate-50"
-        )}
-      >
-        {buttons}
-      </div>
-    </Modal>
-  );
-};

package/src/components/MultiSelect/MultiSelect.js

@@ -1,117 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-
-import Checkbox from "../Checkbox/Checkbox";
-import { TEXT_TYPE_OPTIONS } from "../Text/LegacyText";
-
-import { handleImplicitSelect } from "./MultiSelectUtils";
-
-import "./MultiSelect.scss";
-
-export function MultiSelect({
-  checkboxList,
-  radioLabel,
-  onChange,
-  validationError,
-  name,
-  implicitSelect,
-  radioOnDemand,
-}) {
-  const [list, setList] = useState(checkboxList);
-
-  useEffect(() => {
-    onChange({
-      target: {
-        name,
-        value: list,
-      },
-    });
-  }, [list]);
-
-  function handleChange(event, indexSelected) {
-    let newList = [...list];
-
-    const isChecked = event.target.checked;
-    const updateCheckbox = { ...list[indexSelected], isChecked: isChecked, isOn: false };
-    newList.splice(indexSelected, 1, updateCheckbox);
-
-    if (implicitSelect) {
-      newList = handleImplicitSelect(implicitSelect, event, newList, "isChecked");
-    }
-    setList(newList);
-  }
-
-  function handleRadioChange(event, indexSelected) {
-    let newList = [...list];
-
-    const isChecked = event.target.checked;
-    const updateCheckbox = { ...list[indexSelected], isOn: isChecked };
-    newList.splice(indexSelected, 1, updateCheckbox);
-
-    if (implicitSelect) {
-      newList = handleImplicitSelect(implicitSelect, event, newList, "isOn");
-    }
-
-    setList(newList);
-  }
-
-  return (
-    <ul>
-      {list.map((checkbox, index) => {
-        const text = [checkbox.name];
-
-        if (checkbox.description && checkbox.description !== checkbox.name) {
-          text.push(checkbox.description);
-        }
-
-        return (
-          <div className="cweb-multiselect" key={checkbox.identifier}>
-            <Checkbox
-              text={text.join(" - ")}
-              name={checkbox.identifier}
-              isChecked={checkbox.isChecked || false}
-              onChange={(event) => handleChange(event, index)}
-              className="cweb-multiselect-checkbox"
-              textType={TEXT_TYPE_OPTIONS.SMALL_DARK}
-              error={validationError}
-              key={checkbox.identifier}
-            />
-
-            {radioOnDemand && (
-              <div className="cweb-switch-wrapper">
-                <p className="cweb-switch-title">{radioLabel}</p>
-                <Checkbox
-                  type="switch"
-                  name={`${checkbox.identifier}-toggle`}
-                  isChecked={checkbox.isOn}
-                  onChange={(event) => handleRadioChange(event, index)}
-                  textType={TEXT_TYPE_OPTIONS.SMALL_DARK}
-                  error={validationError}
-                  className="cweb-multiselect-switch"
-                  isDisabled={!checkbox.isChecked}
-                  key={checkbox.identifier}
-                />
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </ul>
-  );
-}
-
-MultiSelect.propTypes = {
-  name: PropTypes.string,
-  checkboxList: PropTypes.arrayOf(
-    PropTypes.shape({
-      isChecked: PropTypes.bool,
-      name: PropTypes.string.isRequired,
-      description: PropTypes.string,
-      identifier: PropTypes.string.isRequired,
-    })
-  ),
-  onChange: PropTypes.func,
-  validationError: PropTypes.string,
-  implicitSelect: PropTypes.object,
-  radioOnDemand: PropTypes.bool,
-};

package/src/components/MultiSelect/MultiSelect.scss

@@ -1,29 +0,0 @@
-@import "../../styles/colors";
-
-.cweb-multiselect {
-  display: flex;
-  .cweb-multiselect-checkbox {
-    margin-bottom: 0px;
-    margin-top: 0.5rem;
-    width: 100%;
-    text-transform: capitalize;
-  }
-
-  .cweb-switch-wrapper {
-    display: flex;
-    .cweb-multiselect-switch {
-      width: 50px;
-      .cweb-checkbox.type-switch.is-checked {
-        .cweb-checkbox-icon-container {
-          background-color: $color-branding-support-1;
-        }
-      }
-    }
-    .cweb-switch-title {
-      width: 100px;
-      color: $color-text-lighter;
-      font-size: 16px;
-      line-height: 1.8em;
-    }
-  }
-}

package/src/components/MultiSelect/MultiSelectUtils.js

@@ -1,23 +0,0 @@
-export function handleImplicitSelect(implicitSelected, event, list, property) {
-  /*For certain values, if one checkbox is selected
-  other checkboxes have to be selected/unselected automatically */
-  const newList = [...list];
-  const selectCheckboxName = event.target.name;
-  const isChecked = event.target.checked;
-  const implicitSelectedValues = implicitSelected[selectCheckboxName];
-
-  if (implicitSelectedValues) {
-    implicitSelectedValues.forEach((value) => {
-      const selectedIndex = newList.findIndex((checkbox) => value === checkbox.identifier);
-      let upadteCheckbox;
-      if (property === "isChecked") {
-        //if normal checkbox is false the switcher must be set to false as well
-        upadteCheckbox = { ...newList[selectedIndex], isChecked: isChecked, isOn: false };
-      } else {
-        upadteCheckbox = { ...newList[selectedIndex], [property]: isChecked };
-      }
-      newList.splice(selectedIndex, 1, upadteCheckbox);
-    });
-  }
-  return newList;
-}

package/src/components/NavMenu/NavLayout.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-export interface NavMenuLayoutProps {
-  menu: JSX.Element;
-  children: JSX.Element | JSX.Element[]; //rendered as the page
-  patientSidebar?: JSX.Element; //if passed will show the patients sidebar
-  isNavDisabled?: boolean; //don't show any navigation, for instance when constrained to a single patient
-  disableScrolling?: boolean;
-}
-
-/**
- *
- * @param props {NavMenuLayoutProps} - explaining specifically the `disableScrolling` prop:
- *
- * The patient overview page has some challenges we want to overcome in regards to the multiple scrollable
- * content (the charts and the action bar with alerts, etc).
- *
- * In order to have the setup working on the patient overview page and the rest of the application, we have to
- * progamatically disable/enable if that location will have a normal scrolling mechanism with specific margin/padding,
- * or we will need to let the components take care of that.
- */
-export const NavLayout = (props: NavMenuLayoutProps): JSX.Element => {
-  return (
-    <div className={"flex flex-col mb-3 lg:mb-0 lg:flex-row h-full w-full"}>
-      {!props.isNavDisabled && (
-        <>
-          {props.menu}
-          {props.patientSidebar && props.patientSidebar}
-        </>
-      )}
-      <div
-        data-test-id="page-main-content"
-        className={classNames(["w-full", { "max-h-screen overflow-y-auto px-4 lg:px-8": !props.disableScrolling }])}
-      >
-        {props.children}
-      </div>
-    </div>
-  );
-};

package/src/components/NavMenu/NavMenu.tsx

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { useState } from "react";
-
-import Button from "../Button/Button";
-
-import { NavMenuContent } from "./NavMenuContent";
-import { NavMenuItemProps } from "./NavMenuItem";
-
-export type NavMenuElement = NavMenuItemProps | { type: "separator" | "spacer" }
-export type NavMenuProps = { items: NavMenuElement[] };
-
-export function NavMenu({ items }: NavMenuProps): JSX.Element {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleToggleOpen = () => {
-    setIsOpen(!isOpen);
-  };
-
-  return (
-    <>
-      <div className={"hidden h-screen lg:flex"}>
-        <NavMenuContent items={items} />
-      </div>
-      <div className={"lg:hidden relative bg-nav-header w-screen flex items-center p-2 shadow-lg"}>
-        <Button
-          hasIcon={true}
-          role="secondaryDark"
-          iconName={isOpen ? "close" : "hamburger"}
-          onClick={handleToggleOpen}
-        />
-      </div>
-      {isOpen && (
-        <div className="absolute z-20">
-          <NavMenuContent items={items} />
-        </div>
-      )}
-    </>
-  );
-}

package/src/components/NavMenu/NavMenu.utils.ts

@@ -1,6 +0,0 @@
-import { NavMenuElement } from "./NavMenu";
-import { NavMenuItemProps } from "./NavMenuItem";
-
-export function isNavMenuItem(item: NavMenuElement): item is NavMenuItemProps {
-    return item.type === "base" || item.type === undefined;
-}

package/src/components/NavMenu/NavMenuContent.tsx

@@ -1,23 +0,0 @@
-import * as React from "react";
-
-import { NavMenuProps } from "./NavMenu";
-import { NavMenuItem } from "./NavMenuItem";
-import { isNavMenuItem } from "./NavMenu.utils";
-
-export const NavMenuContent = ({ items }: NavMenuProps): JSX.Element => {
-  return (
-    <div className={"flex flex-col bg-nav-menu w-46 pl-1 py-2 lg:relative shadow-lg"}>
-      {items.map((item, index) => {
-        if (item.type === "separator") {
-          return <div key={`${item.type}-${index}`} className={"border-b ml-3 border-slate-600"} />;
-        } else if (item.type === "spacer") {
-          return <div key={`${item.type}-${index}`} className={"mt-auto"} />;
-        } else if (isNavMenuItem(item)) {
-          return <NavMenuItem {...item} key={item.title} />;
-        } else {
-          return null as never;
-        }
-      })}
-    </div>
-  );
-};

package/src/components/NavMenu/NavMenuItem.tsx

@@ -1,102 +0,0 @@
-import * as React from "react";
-import { useState } from "react";
-import { navigate } from "@reach/router";
-import classNames from "classnames";
-
-import { Text } from "../Text/Text";
-
-export interface NavMenuItemProps {
-  href?: string;
-  linkTo?: string;
-  title: string;
-  isSelected: boolean;
-  img: string;
-  imgOnHover: string;
-  dataTestId: string;
-  gtmEvent?: string;
-  isExternal?: boolean;
-  type?: "base";
-  track?: (event: string) => void;
-}
-
-export const NavMenuItem = (props: NavMenuItemProps): JSX.Element => {
-  const [currentImg, setCurrentImg] = useState(
-    props.isSelected ? props.imgOnHover : props.img
-  );
-
-  const classes = classNames(
-    [
-      "flex",
-      "flex-row",
-      "items-center",
-      "w-auto",
-      "rounded",
-      "px-2",
-      "py-1",
-      "my-2",
-      "mx-2",
-      "hover:bg-gray-600",
-      "transition",
-      "ease-in",
-      "duration-150",
-      "lg:last:pb-2",
-      "focus:outline-primary",
-      "group",
-    ],
-    {
-      "bg-nav-menu": !props.isSelected,
-      "bg-gray-600": props.isSelected,
-    }
-  );
-
-  const handleOnMouseOver = () => {
-    if (!props.isSelected) {
-      setCurrentImg(props.imgOnHover);
-    }
-  };
-
-  const handleOnMouseOut = () => {
-    if (!props.isSelected) {
-      setCurrentImg(props.img);
-    }
-  };
-
-  return (
-    <a
-      href={props.href ?? props.linkTo ?? "#"}
-      data-test-id={props.dataTestId}
-      className={classes}
-      onMouseOver={handleOnMouseOver}
-      onMouseOut={handleOnMouseOut}
-      onClick={handleMenuClick}
-    >
-      <img src={currentImg} className={"mr-4 ml-0"} />
-      <Text
-        type={"strong"}
-        text={props.title}
-        hoverInGroup
-        color="slate-200"
-        hoverColor="white"
-      />
-    </a>
-  );
-
-  function handleMenuClick(event: React.MouseEvent<HTMLElement>) {
-    if (event.metaKey || event.ctrlKey) {
-      // if ctrl or meta key are held on click, allow default behavior of opening link in new tab
-      return;
-    }
-
-    event.preventDefault();
-
-    props.track && props.gtmEvent && props.track(props.gtmEvent);
-
-    if (props.isExternal) {
-      window.open(props.href, "_blank");
-    } else if (props.href) {
-      window.location.assign(props.href);
-    } else if (props.linkTo) {
-      navigate(props.linkTo);
-    }
-  }
-};

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -1,104 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import { Text, TextColor } from "../Text/Text";
-import { TextLink } from "../TextLink/TextLink";
-import { DynamicIcon, DynamicIconProps } from "../Icons/DynamicIcon";
-
-export type NotificationBannerColor =
-  | "base"
-  | "blue"
-  | "red"
-  | "green"
-  | "amber";
-
-export interface NotificationBannerLinkProps {
-  text: string;
-  enabled: boolean;
-  handleClick?: () => void;
-}
-
-export interface NotificationBannerProps {
-  text: string;
-  color?: NotificationBannerColor;
-  /**
-   * The icon can either be one of our icon components or an image url
-   */
-  icon?: DynamicIconProps["icon"];
-  linkProps?: NotificationBannerLinkProps;
-  className?: string;
-  stretch?: boolean;
-  /**
-   * When stretching the banner, you can also decide if the content should be centered or not.
-   */
-  centerContent?: boolean;
-}
-
-export const NotificationBanner = (
-  props: NotificationBannerProps
-): JSX.Element => {
-  const { stretch = true, centerContent = false } = props;
-  const classes = classNames(
-    "px-6 py-4 h-13 flex flex-row items-center border border-solid rounded",
-    props.className,
-    {
-      "bg-slate-100 border-slate-300 text-slate-700": props.color === "base",
-      "bg-blue-50 border-blue-700 text-blue-800": props.color === "blue",
-      "bg-red-50 border-red-700 text-red-700": props.color === "red",
-      "bg-green-50 border-green-700 text-green-700": props.color === "green",
-      "bg-amber-50 border-amber-700 text-amber-700": props.color === "amber",
-    },
-    {
-      "justify-center": centerContent,
-    }
-  );
-
-  const textColor: Record<NotificationBannerColor, TextColor> = {
-    red: "red",
-    amber: "amber",
-    green: "green",
-    base: "base",
-    // Blue must be 800 here to pass the contrast test
-    blue: "blue-800",
-  };
-
-  const color = props.color ? textColor[props.color] : "base";
-
-  return (
-    <div
-      data-test-id="notification-banner"
-      className={classNames({
-        "w-full": stretch,
-        "inline-block": !stretch,
-      })}
-    >
-      <div className={classes}>
-        {props.icon && <DynamicIcon className="w-6 h-6" icon={props.icon} />}
-        {/* space-x-1 here makes it look more natural as a full sentence with the link */}
-        <div className="flex flex-row items-center space-x-1">
-          <Text
-            className={classNames({
-              "ml-3": props.icon,
-            })}
-            text={props.text}
-            color={color}
-          />
-          {props.linkProps && (
-            <TextLink
-              text={props.linkProps.text}
-              enabled={props.linkProps.enabled}
-              rel="noopener"
-              target="_blank"
-              onClick={props.linkProps.handleClick}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-NotificationBanner.defaultProps = {
-  color: "base",
-  onButtonClick: undefined,
-};