@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/Checkbox/Checkbox.tsx

@@ -1,147 +0,0 @@
-import React, { useEffect, useState } from "react";
-import classNames from "classnames";
-
-import { Text } from "../Text/Text";
-
-import "./Checkbox.scss";
-
-export interface CheckboxProps {
-  id?: string;
-  // The label that will be presented as a Text
-  text?: string;
-  // The explanation that will be presented below it
-  explanation?: string;
-  type?: "regular" | "switch";
-  // Set the value
-  isChecked?: boolean;
-  //Value for when it is not clear if state is checked or not (for hierarchical checkboxes)
-  isIndeterminate?: boolean;
-  // Allow the user to change the input
-  isDisabled?: boolean;
-  name?: string;
-  // This can be used to retrieve the value it is referring to through onChange
-  value?: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  className?: string;
-  error?: boolean;
-}
-
-export const Checkbox = ({
-  id,
-  text,
-  explanation,
-  type = "regular",
-  isChecked = false,
-  isIndeterminate = false,
-  isDisabled,
-  name,
-  value,
-  onChange,
-  className,
-  error,
-}: CheckboxProps): JSX.Element => {
-  const [checked, setChecked] = useState(false);
-  const [indeterminate, setIndeterminate] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const checkboxRef = React.useRef<HTMLInputElement>(null);
-
-  const containerClassName = classNames("cweb-checkbox", className, {
-    "is-focused": isFocused,
-    "is-checked": checked && !indeterminate,
-    "is-indeterminate": indeterminate,
-    "opacity-50 cursor-not-allowed is-disabled": isDisabled,
-    "type-regular": type === "regular",
-    "type-switch": type === "switch",
-    hasError: error,
-  });
-
-  useEffect(() => {
-    setChecked(isChecked);
-    setIndeterminate(false);
-  }, [isChecked]);
-
-  useEffect(() => {
-    setIndeterminate(isIndeterminate);
-  }, [isIndeterminate]);
-
-  useEffect(() => {
-    if (checkboxRef?.current) {
-      checkboxRef.current.indeterminate = !indeterminate;
-    }
-  }, [indeterminate]);
-
-  const handleChange = event => {
-    event.stopPropagation();
-    setIndeterminate(false);
-    if (onChange) {
-      onChange(event);
-    }
-  };
-
-  const handleFocus = () => setIsFocused(true);
-
-  const handleBlur = () => setIsFocused(false);
-
-  return (
-    <div className={containerClassName} data-test-id="checkbox">
-      <label
-        className="cweb-checkbox-label"
-        data-test-id="checkbox-label"
-        onClick={e => e.stopPropagation()}
-      >
-        <input
-          id={id}
-          ref={checkboxRef}
-          data-test-id={`checkbox-${name}`}
-          className="cweb-checkbox-input"
-          name={name}
-          type="checkbox"
-          checked={checked}
-          disabled={isDisabled}
-          value={value}
-          onBlur={handleBlur}
-          onFocus={handleFocus}
-          onChange={handleChange}
-        />
-
-        <span
-          className={classNames(
-            "cweb-checkbox-icon-container",
-            "transition-colors duration-300",
-            {
-              "bg-primary": checked || indeterminate,
-              "bg-white": !checked && !indeterminate,
-              "hover:bg-primary-dark": checked || indeterminate,
-              "outline-primary": isFocused,
-              "cursor-not-allowed": isDisabled,
-              "cursor-pointer": !isDisabled,
-            }
-          )}
-          data-test-id="checkbox-span"
-        >
-          <span className="cweb-checkbox-icon" />
-        </span>
-
-        <div className="flex flex-col">
-          {text && (
-            <Text
-              className="ml-2 text-left select-none"
-              text={text}
-              data-test-id="checkbox-text"
-            />
-          )}
-          {explanation && (
-            <Text
-              className="ml-2 text-left select-none"
-              text={explanation}
-              color={"slate-500"}
-              data-test-id="checkbox-explanation"
-            />
-          )}
-        </div>
-      </label>
-    </div>
-  );
-};
-
-export default Checkbox;

package/src/components/CheckboxList/CheckboxGroup.tsx

@@ -1,120 +0,0 @@
-import React, { useEffect, useState } from "react";
-import classNames from "classnames";
-
-import { Text } from "../Text/Text";
-import { Checkbox } from "../..";
-import { ChevronRightIcon } from "../Icons/ChevronRightIcon";
-import { ChevronDownIcon } from "../Icons/ChevronDownIcon";
-
-import { CheckboxGroupProps, CheckboxState } from "./CheckboxList.types";
-import { CheckboxListItem } from "./CheckboxListItem";
-
-export const CheckboxGroup = ({
-  title,
-  items,
-  onChange,
-  className,
-  isCollapsed = true,
-}: CheckboxGroupProps): JSX.Element => {
-  const [groupCheckboxState, setGroupCheckboxState] = useState<CheckboxState>(
-    CheckboxState.UNCHECKED
-  );
-
-  const [collapsed, setCollapsed] = useState(isCollapsed);
-
-  useEffect(() => {
-    if (items?.length > 0) {
-      const indeterminate = items.some(
-        (item) => item.isChecked !== items[0].isChecked
-      );
-      if (!indeterminate && items[0].isChecked) {
-        setGroupCheckboxState(CheckboxState.CHECKED);
-      } else if (!indeterminate && !items[0].isChecked) {
-        setGroupCheckboxState(CheckboxState.UNCHECKED);
-      } else {
-        setGroupCheckboxState(CheckboxState.INDETERMINATE);
-      }
-    } else {
-      setGroupCheckboxState(CheckboxState.UNCHECKED);
-    }
-  }, [items]);
-
-  const handleGroupClick = (
-    event:
-      | React.MouseEvent<HTMLDivElement>
-      | React.ChangeEvent<HTMLInputElement>
-  ) => {
-    event.stopPropagation();
-
-    if (
-      (groupCheckboxState === CheckboxState.CHECKED ||
-        groupCheckboxState === CheckboxState.INDETERMINATE) &&
-      onChange
-    ) {
-      //if checked or indeterminate >> make all items unchecked
-      items.forEach((item) =>
-        onChange({ id: item.id, newCheckedValue: false })
-      );
-    } else if (onChange) {
-      // else if unchecked >> make all items  checked
-      items.forEach((item) => onChange({ id: item.id, newCheckedValue: true }));
-    }
-  };
-
-  const handleGroupCollapse = (
-    event:
-      | React.MouseEvent<HTMLDivElement>
-      | React.MouseEvent<SVGSVGElement>
-      | undefined
-  ) => {
-    if (event) {
-      event.stopPropagation();
-    }
-
-    setCollapsed(!collapsed);
-  };
-
-  const checkedItemsCount = items?.filter((item) => item?.isChecked).length;
-  const groupTitle =
-    checkedItemsCount > 0 ? `${title} (${checkedItemsCount})` : title;
-
-  return (
-    <div className={classNames("flex flex-col", className)}>
-      {title && (
-        <div className={"flex flex-row my-1 items-center w-full space-between"}>
-          <div
-            className={
-              "h-6 cursor-pointer mr-auto flex flex-row items-center text-slate-300 hover:text-slate-500 transition duration-300"
-            }
-            onClick={handleGroupCollapse}
-          >
-            {collapsed ? (
-              <ChevronRightIcon onClick={handleGroupCollapse} />
-            ) : (
-              <ChevronDownIcon onClick={handleGroupCollapse} />
-            )}
-            <Text type={"strong"} text={groupTitle || ""} className={" ml-4"} />{" "}
-          </div>
-          <Checkbox
-            onChange={handleGroupClick}
-            className={"ml-auto"}
-            isChecked={groupCheckboxState === CheckboxState.CHECKED}
-            isIndeterminate={groupCheckboxState === CheckboxState.INDETERMINATE}
-          />
-        </div>
-      )}
-
-      {!collapsed &&
-        items.map((item) => (
-          <CheckboxListItem
-            key={item.id}
-            id={item.id}
-            label={item.label}
-            onChange={onChange}
-            isChecked={item.isChecked}
-            className={"ml-10 my-1"}
-          />
-        ))}
-    </div>
-  );
-};

package/src/components/CheckboxList/CheckboxList.tsx

@@ -1,46 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import { CheckboxListItem } from "./CheckboxListItem";
-import { CheckboxListProps } from "./CheckboxList.types";
-import { CheckboxGroup } from "./CheckboxGroup";
-
-export { CheckboxListProps };
-
-export const CheckboxList = ({
-  groups,
-  onChange,
-  className,
-}: CheckboxListProps): JSX.Element => {
-  return (
-    <div className={classNames("flex flex-col", className)}>
-      {groups?.length > 0 &&
-        groups.map((group) => {
-          if (group.title) {
-            return (
-              <CheckboxGroup
-                key={group.title}
-                items={group.items}
-                title={group.title}
-                isCollapsed={group.isCollapsed}
-                onChange={onChange}
-              />
-            );
-          } else {
-            return group.items.map((item) => (
-              <CheckboxListItem
-                key={item.id}
-                id={item.id}
-                label={item.label}
-                onChange={onChange}
-                isChecked={item.isChecked}
-                className={"my-1"}
-              />
-            ));
-          }
-        })}
-    </div>
-  );
-};
-
-export default CheckboxList;

package/src/components/CheckboxList/CheckboxList.types.ts

@@ -1,47 +0,0 @@
-export enum CheckboxState {
-  CHECKED = "checked",
-  INDETERMINATE = "indeterminate",
-  UNCHECKED = "unchecked",
-}
-
-export interface CheckboxListProps {
-  groups: CheckboxGroup[];
-  onChange: (event: CheckboxChangeEvent) => void;
-  className?: string;
-}
-
-export interface CheckboxGroupProps {
-  //If you don't specify a title than it will just be a non-collapsible list
-  title?: string;
-  items: CheckboxListItem[];
-  onChange: (event: CheckboxChangeEvent) => void;
-  className?: string;
-  isCollapsed?: boolean;
-}
-
-export interface CheckboxGroupItemProps {
-  id: string;
-  label: string;
-  isChecked?: boolean;
-  onChange: (event: CheckboxChangeEvent) => void;
-  className?: string;
-}
-
-export interface CheckboxListItem {
-  id: string;
-  label: string;
-  isChecked?: boolean;
-  className?: string;
-}
-
-export interface CheckboxGroup {
-  //If you don't specify a title than it will just be a non-collapsible list
-  title?: string;
-  items: CheckboxListItem[];
-  isCollapsed?: boolean;
-}
-
-export interface CheckboxChangeEvent {
-  id: string;
-  newCheckedValue: boolean;
-}

package/src/components/CheckboxList/CheckboxListItem.tsx

@@ -1,54 +0,0 @@
-import React, { useEffect, useState } from "react";
-import classNames from "classnames";
-
-import { Text } from "../Text/Text";
-import { Checkbox } from "../Checkbox/Checkbox";
-
-import { CheckboxGroupItemProps } from "./CheckboxList.types";
-
-export const CheckboxListItem = ({
-  id,
-  label,
-  isChecked,
-  onChange,
-  className,
-}: CheckboxGroupItemProps): JSX.Element => {
-  const [checked, setChecked] = useState(isChecked || false);
-
-  useEffect(() => {
-    setChecked(isChecked || false);
-  }, [isChecked]);
-
-  const handleItemClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    event.stopPropagation();
-
-    if (onChange) {
-      onChange({ id, newCheckedValue: !checked });
-    }
-    setChecked(!checked);
-  };
-
-  const handleCheckboxClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-    event.stopPropagation();
-    const targetId = event.target.id;
-    const newCheckedValue = event.target.checked;
-
-    if (onChange) {
-      onChange({ id: targetId, newCheckedValue });
-    }
-  };
-
-  return (
-    <div
-      className={classNames(
-        "flex flex-row space-between cursor-pointer",
-        className
-      )}
-      item-id={id}
-      onClick={handleItemClick}
-    >
-      <Text text={label} className={"mr-auto"} />
-      <Checkbox isChecked={checked} onChange={handleCheckboxClick} id={id} />
-    </div>
-  );
-};

package/src/components/ConfirmationDialog/ConfirmationDialog.scss

@@ -1,15 +0,0 @@
-@import "../../styles/layout";
-
-.vitals-confirmation-dialog {
-  margin-top: 4rem !important;
-
-  .vitals-confirmation-dialog-content {
-    padding: 24px;
-
-    .vitals-confirmation-dialog-action-container {
-      @include flexbox-horizontal(center, space-between);
-      width: 100%;
-      margin-top: 16px;
-    }
-  }
-}

package/src/components/ConfirmationDialog/ConfirmationDialog.tsx

@@ -1,84 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import Button, { BUTTON_ROLES } from "../Button/Button";
-import "./ConfirmationDialog.scss";
-import { ModalWithButtons } from "../Modal/ModalWithButtons";
-import { MODAL_SIZES, MODAL_SIZES_VALUES } from "../Modal/Modal";
-import Text from "../Text/Text";
-import { BUTTON_TYPE } from "../Button/Button.types";
-
-interface ConfirmationDialogTexts {
-  message: string;
-  confirmLabel: string;
-  cancelLabel: string;
-  title?: string;
-}
-
-interface ConfirmationDialogProps {
-  texts: ConfirmationDialogTexts;
-  isOpen: boolean;
-  onCancel: () => void;
-  onConfirm: () => void;
-  isProcessing: boolean;
-  cancelButtonRole: BUTTON_TYPE;
-  confirmButtonRole: BUTTON_TYPE;
-  size: MODAL_SIZES_VALUES;
-  showHeader: boolean;
-  className?: string;
-}
-
-export const ConfirmationDialog = (props: ConfirmationDialogProps): JSX.Element => {
-  const calculatedClassNames = classNames("vitals-confirmation-dialog", props.className);
-
-  const handleOnCloseClick = () => {
-    if (!props.isProcessing) {
-      props.onCancel();
-    }
-  };
-
-  const modalButtons: [JSX.Element, JSX.Element?] = [
-    <Button
-      key="confirmation-dialog-button-cancel"
-      data-test-id="button-cancel"
-      text={props.texts.cancelLabel}
-      onClick={props.onCancel}
-      isDisabled={props.isProcessing}
-      role={props.cancelButtonRole}
-    />,
-    <Button
-      key="confirmation-dialog-button-confirm"
-      className="ml-2.5"
-      data-test-id="button-confirm"
-      text={props.texts.confirmLabel}
-      onClick={props.onConfirm}
-      isPending={props.isProcessing}
-    />,
-  ];
-
-  return (
-    <ModalWithButtons
-      type={props.size}
-      className={calculatedClassNames}
-      isOpen={props.isOpen}
-      title={props.texts.title}
-      onCloseClick={handleOnCloseClick}
-      shouldCloseOnOverlayClick={!props.isProcessing}
-      showHeader={props.showHeader}
-      buttons={modalButtons}
-      buttonsAlignment="justify-end"
-    >
-      <div className="vitals-confirmation-dialog-content">
-        <Text text={props.texts.message} containsDangerousHtml={true} />
-      </div>
-    </ModalWithButtons>
-  );
-};
-
-ConfirmationDialog.defaultProps = {
-  isProcessing: false,
-  cancelButtonRole: BUTTON_ROLES.SECONDARY,
-  confirmButtonRole: BUTTON_ROLES.PRIMARY,
-  size: MODAL_SIZES.DEFAULT,
-  showHeader: true,
-};

package/src/components/Container/FlexColumn.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-
-import { FlexContainer } from "./FlexContainer";
-import { FlexContainerProps } from "./types/FlexContainerProps.type";
-
-/**
- * Container to be used for layouting instead of divs around the project.
- * The spacing here has been coded according to our guidelines.
- */
-export const FlexColumn: React.FC<FlexContainerProps> = (props) => {
-  const { children, spaced = true, ...rest } = props;
-
-  return (
-    <FlexContainer {...rest} type="column" verticallySpaced={spaced}>
-      {children}
-    </FlexContainer>
-  );
-};

package/src/components/Container/FlexContainer.tsx

@@ -1,46 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-import { FlexContainerBaseProps } from "./types/FlexContainerProps.type";
-
-/**
- * Container to be used for layouting instead of divs around the project.
- * The spacing here has been coded according to our guidelines.
- */
-export const FlexContainer: React.FC<
-  FlexContainerBaseProps & { type: "column" | "row" }
-> = (props) => {
-  const {
-    children,
-    alignItems,
-    verticallySpaced,
-    horitontallySpaced,
-    justifyContent,
-    hasPadding,
-    type,
-  } = props;
-
-  return (
-    <div
-      className={classNames("flex w-full", {
-        "flex-row": type === "row",
-        "flex-col": type === "column",
-
-        "justify-center": justifyContent === "center",
-        "justify-start": justifyContent === "start",
-        "justify-end": justifyContent === "end",
-        "justify-between": justifyContent === "between",
-
-        "items-start": alignItems === "start",
-        "items-center": alignItems === "center",
-        "items-end": alignItems === "end",
-
-        "space-x-4": horitontallySpaced,
-        "space-y-4": verticallySpaced,
-        "p-4": hasPadding,
-      })}
-    >
-      {children}
-    </div>
-  );
-};

package/src/components/Container/FlexRow.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-
-import { FlexContainer } from "./FlexContainer";
-import { FlexContainerProps } from "./types/FlexContainerProps.type";
-
-/**
- * Container to be used for layouting instead of divs around the project.
- * The spacing here has been coded according to our guidelines.
- */
-export const FlexRow: React.FC<FlexContainerProps> = (props) => {
-  const { children, spaced = true, ...rest } = props;
-
-  return (
-    <FlexContainer {...rest} type="row" horitontallySpaced={spaced}>
-      {children}
-    </FlexContainer>
-  );
-};

package/src/components/Container/types/FlexContainerProps.type.ts

@@ -1,18 +0,0 @@
-import React from "react";
-
-type FlexContainerBase = {
-  alignItems?: "center" | "start" | "end";
-  justifyContent?: "center" | "start" | "end" | "between";
-  verticallySpaced?: boolean;
-  horitontallySpaced?: boolean;
-  hasPadding?: boolean;
-};
-
-export type FlexContainerBaseProps = FlexContainerBase & {
-  children: React.ReactNode;
-};
-
-export type FlexContainerProps = Omit<
-  FlexContainerBaseProps,
-  "verticallySpaced" | "horitontallySpaced"
-> & { spaced?: boolean };