@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/Avatar/Avatar.js

@@ -1,81 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import "./Avatar.scss";
-
-function checkImageValidity(src) {
-  return new Promise((resolve) => {
-    const image = new Image();
-    image.onload = () => {
-      resolve(true);
-    };
-    image.onerror = () => {
-      resolve(false);
-    };
-    image.src = src;
-  });
-}
-
-const AVATAR_SIZE_OPTIONS = {
-  LARGE: "large",
-  MEDIUM: "medium",
-  SMALL: "small",
-};
-
-export const Avatar = ({ size, src, defaultImage, initials, className }) => {
-  const [hasValidImage, setHasValidImage] = useState(false);
-
-  useEffect(() => {
-    let mounted = true;
-    if (!defaultImage && src) {
-      checkImageValidity(src).then((res) => {
-        if (mounted) {
-          setHasValidImage(res);
-        }
-      });
-    }
-    return () => {
-      mounted = false;
-    };
-  }, [defaultImage, src]);
-
-  const containerClassName = classNames("cweb-avatar type-readonly", className, {
-    "size-large": size === AVATAR_SIZE_OPTIONS.LARGE,
-    "size-medium": size === AVATAR_SIZE_OPTIONS.MEDIUM,
-    "size-small": size === AVATAR_SIZE_OPTIONS.SMALL,
-    "display-image": hasValidImage,
-    "display-initials": !hasValidImage,
-  });
-
-  const renderAvatar = () => {
-    if (defaultImage) {
-      return <img className="avatar-image" src={defaultImage} alt="User avatar image" />;
-    } else if (hasValidImage) {
-      return <img className="avatar-image" src={src} alt="User avatar image" />;
-    } else {
-      return <span className="avatar-initials-text">{initials}</span>;
-    }
-  };
-
-  return (
-    <div className={containerClassName}>
-      <div className="avatar-content-container">{renderAvatar()}</div>
-    </div>
-  );
-};
-
-Avatar.propTypes = {
-  src: PropTypes.string,
-  initials: PropTypes.string.isRequired,
-  size: PropTypes.oneOf([AVATAR_SIZE_OPTIONS.LARGE, AVATAR_SIZE_OPTIONS.MEDIUM, AVATAR_SIZE_OPTIONS.SMALL]),
-  defaultImage: PropTypes.string,
-  className: PropTypes.string,
-};
-
-Avatar.defaultProps = {
-  size: AVATAR_SIZE_OPTIONS.MEDIUM,
-  defaultImage: null,
-};
-
-export default Avatar;

package/src/components/Avatar/Avatar.scss

@@ -1,153 +0,0 @@
-@import "../../styles/layout";
-@import "../../styles/colors";
-@import "../../styles/typography";
-
-.cweb-avatar {
-  $readonly-color-text: #64748b; //slate-500
-  $readonly-color-background: #f1f5f9; //slate-100
-  $readonly-color-border: $color-border;
-
-  $editable-color-text: $color-primary;
-  $editable-color-background: $color-white;
-  $editable-color-background-hover: rgba($editable-color-text, 0.1);
-  $editable-color-border: $color-primary;
-
-  $size-large: 128px;
-  $size-medium: 64px;
-  $size-small: 36px;
-
-  $initials-size-large: 48px;
-  $initials-size-medium: 24px;
-  $initials-size-small: 14px;
-
-  $border-width-large: 1px;
-  $border-width-medium: $border-width-large / 2;
-
-  @include flexbox-vertical(center);
-  width: $size-medium;
-  box-sizing: border-box;
-
-  > .avatar-content-container {
-    @include flexbox-horizontal(center, center);
-    width: $size-medium;
-    height: $size-medium;
-    border-radius: 50%;
-    box-sizing: border-box;
-
-    > .avatar-image {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-    }
-
-    > .avatar-initials-text {
-      @include text($initials-size-medium, 1, $color-text-lighter, 300);
-      pointer-events: none;
-    }
-  }
-
-  &.size-large {
-    width: $size-large;
-
-    > .avatar-content-container {
-      width: $size-large;
-      height: $size-large;
-
-      > .avatar-initials-text {
-        font-size: $initials-size-large;
-      }
-    }
-  }
-
-  &.size-medium {
-    width: $size-medium;
-
-    > .avatar-content-container {
-      width: $size-medium;
-      height: $size-medium;
-
-      > .avatar-initials-text {
-        font-size: $initials-size-medium;
-      }
-    }
-  }
-
-  &.size-small {
-    width: $size-small;
-
-    > .avatar-content-container {
-      width: $size-small;
-      height: $size-small;
-
-      > .avatar-initials-text {
-        font-size: $initials-size-small;
-      }
-    }
-  }
-
-  &.type-editable {
-    cursor: pointer;
-
-    > .avatar-content-container {
-      position: relative;
-      border-color: $editable-color-border;
-      background-color: $editable-color-background;
-
-      &:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-        border-radius: 50%;
-        transition: 0.4s ease background-color;
-      }
-
-      &:hover:after {
-        background-color: $editable-color-background-hover;
-      }
-
-      > .avatar-initials-text {
-        color: $editable-color-text;
-      }
-    }
-  }
-
-  &.type-readonly {
-    > .avatar-content-container {
-      border-color: $readonly-color-border;
-      background-color: $readonly-color-background;
-
-      > .avatar-initials-text {
-        color: $readonly-color-text;
-      }
-    }
-  }
-
-  @media (max-width: $max-small-screen-width) {
-    $size-large-mobile: $size-large / 2;
-    $initials-size-large-mobile: $initials-size-large / 2;
-    $border-width-large-mobile: $border-width-large / 2;
-
-    &.size-large {
-      width: $size-large-mobile;
-
-      > .avatar-content-container {
-        width: $size-large-mobile;
-        height: $size-large-mobile;
-
-        > .avatar-initials-text {
-          font-size: $initials-size-large-mobile;
-        }
-      }
-
-      &.display-initials {
-        > .avatar-content-container {
-          border-width: $border-width-large-mobile;
-        }
-      }
-    }
-  }
-}

package/src/components/Badge/Badge.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-interface BadgeProps {
-  badgeCount: number;
-  className?: string;
-}
-
-const Badge = (props: BadgeProps): JSX.Element => {
-  const containerClasses = classNames(
-    ["inline-flex", "items-center", "justify-center", "rounded-full", "h-6", "min-w-24", "px-2", "bg-color-negative"],
-    props.className
-  );
-  const textClasses = classNames(["text-xs", "text-white", "leading-none"]);
-
-  return (
-    <div className={containerClasses}>
-      <span className={textClasses}>{props.badgeCount}</span>
-    </div>
-  );
-};
-
-export default Badge;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,46 +0,0 @@
-import { Link } from "@reach/router";
-import React from "react";
-
-import Text from "../Text/Text";
-
-export interface Crumb {
-  name: string;
-  link?: string;
-}
-
-export interface BreadcrumbProps {
-  crumbs: Crumb[];
-}
-
-export const Breadcrumbs: React.VoidFunctionComponent<BreadcrumbProps> = ({
-  crumbs,
-}) => {
-  const breadcrumbItems = crumbs.map(({ name, link }) => {
-    return (
-      <li
-        key={name}
-        className="flex flex-row items-center slash-split "
-      >
-        {link ? (
-          <Link to={link}>
-            <Text
-              text={name}
-              color="blue-800"
-            />
-          </Link>
-        ) : (
-          <Text text={name} />
-        )}
-      </li>
-    );
-  });
-
-  return (
-    <ul
-      data-test-id="breadcrumbs"
-      className="flex flex-row items-center space-x-2 "
-    >
-      {breadcrumbItems}
-    </ul>
-  );
-};

package/src/components/Button/Button.examples.md

@@ -1,46 +0,0 @@
-```js
-<div className="items-center mb-10 space-y-5">
-  <div className="flex flex-row space-x-4">
-    <Button text="Primary" onClick={() => console.log("primary")} />
-    <Button text="Primary" isPending onClick={() => console.log("primary")} />
-    <Button text="Primary" isDisabled onClick={() => console.log("primary")} />
-  </div>
-
-  <div className="flex flex-row space-x-4">
-    <Button text="Secondary" role="secondary" onClick={() => console.log("primary")} />
-    <Button text="Secondary" isPending role="secondary" onClick={() => console.log("primary")} />
-    <Button text="Secondary" isDisabled role="secondary" onClick={() => console.log("primary")} />
-  </div>
-
-  <div className="flex flex-row space-x-4">
-    <Button text="Tertiary" role="tertiary" onClick={() => console.log("tertiary")} />
-    <Button text="Tertiary" isPending role="tertiary" onClick={() => console.log("tertiary")} />
-    <Button text="Tertiary" isDisabled role="tertiary" onClick={() => console.log("tertiary")} />
-  </div>
-
-  <div className="flex flex-row space-x-4">
-    <Button text="Destructive" role="negative" onClick={() => console.log("negative")} />
-    <Button text="Destructive" isPending role="negative" onClick={() => console.log("negative")} />
-    <Button text="Destructive" isDisabled role="negative" onClick={() => console.log("negative")} />
-  </div>
-
-  <div className="flex flex-row space-x-4">
-    <Button text="Icon button" className="add-button" onClick={() => console.log("negative")} />
-    <Button text="Icon button" className="edit-button" onClick={() => console.log("negative")} />
-    <Button text="Icon button" className="delete-button" onClick={() => console.log("negative")} />
-  </div>
-
-  <div className="flex flex-row space-x-4">
-    <Button className="add-button" onClick={() => console.log("negative")} />
-    <Button role={BUTTON_ROLES.SECONDARY} className="add-button" onClick={() => console.log("negative")} />
-    <Button className="edit-button" onClick={() => console.log("negative")} />
-    <Button role={BUTTON_ROLES.SECONDARY} className="edit-button" onClick={() => console.log("negative")} />
-    <Button
-      role={BUTTON_ROLES.NEGATIVE}
-      className="delete-button"
-      onClick={() => console.log("negative")}
-      link={generateLocationWithPath("healthcare/pages/groups/add")}
-    />
-  </div>
-</div>
-```

package/src/components/Button/Button.tsx

@@ -1,200 +0,0 @@
-import React, { useEffect, useState } from "react";
-import classNames from "classnames";
-import { navigate } from "@reach/router";
-
-import { Spinner } from "../Spinner/Spinner";
-import { AddIcon } from "../Icons/AddIcon";
-import { DeleteIcon } from "../Icons/DeleteIcon";
-import { EditIcon } from "../Icons/EditIcon";
-import { LeftArrowIcon } from "../Icons/LeftArrowIcon";
-import { RightArrowIcon } from "../Icons/RightArrowIcon";
-import { ChartIcon } from "../Icons/ChartIcon";
-import { PrintIcon } from "../Icons/PrintIcon";
-
-import { ButtonIcon } from "./ButtonIcon";
-import { BUTTON_ROLES, ButtonProps } from "./Button.types";
-
-// TODO: use the Types from Button.types.ts instead of PropTypes
-function Button(props: ButtonProps): JSX.Element {
-  const {
-    text = "",
-    role: propsRole = BUTTON_ROLES.PRIMARY,
-    type = "button",
-    title = "",
-    link = "",
-    isPending = false,
-    isDisabled = false,
-    onClick,
-    className = "",
-    iconName = "",
-    hasIcon: hasIconProps = false,
-    dynamicIcon,
-    ...otherAttributes
-  } = props;
-
-  const hasAddIcon = className.includes("add-button");
-  const hasEditIcon = className.includes("edit-button");
-  const hasDeleteIcon = className.includes("delete-button");
-  const hasPrevIcon = className.includes("prev-button");
-  const hasNextIcon = className.includes("next-button");
-  const hasChartIcon = className.includes("chart-button");
-  const hasPrintIcon = className.includes("print-button");
-  const hasIcon =
-    hasIconProps ||
-    iconName ||
-    hasAddIcon ||
-    hasEditIcon ||
-    hasDeleteIcon ||
-    hasPrevIcon ||
-    hasNextIcon ||
-    hasChartIcon ||
-    hasPrintIcon ||
-    dynamicIcon;
-
-  const isIconOnly = hasIcon && !text;
-
-  const [role, setRole] = useState(propsRole);
-
-  // Fix to support the all the buttons in the application
-  // Ideally we want to make a better implementation of them overall, but that's beyond the
-  // scope of this task.
-
-  useEffect(() => {
-    if ((hasAddIcon || hasEditIcon) && !text) {
-      setRole(BUTTON_ROLES.SECONDARY);
-    } else if (propsRole === BUTTON_ROLES.TEXT || propsRole === BUTTON_ROLES.LINK) {
-      setRole(BUTTON_ROLES.TERTIARY);
-    } else if (hasDeleteIcon) {
-      setRole(BUTTON_ROLES.NEGATIVE);
-    }
-  }, []);
-
-  const isButtonDisabled = (role !== BUTTON_ROLES.LINK && isDisabled) || isPending;
-  const isNonPrimaryNonNegative =
-    role === BUTTON_ROLES.SECONDARY || role === BUTTON_ROLES.TERTIARY || role === BUTTON_ROLES.QUATERNARY;
-
-  function handleClick(event: any) {
-    if (link) {
-      navigate(link);
-      return;
-    }
-
-    if (isButtonDisabled || !onClick) {
-      // without this, form will be submitted, if button has type submit.
-      event.preventDefault();
-      return;
-    }
-
-    onClick(event);
-  }
-
-  const buttonRolesStyling = {
-    primary: [
-      "bg-primary",
-      "hover:bg-primary-dark",
-      "text-white",
-      "focus:outline-primary",
-      "border",
-      "border-solid",
-      "border-primary-transparent",
-    ],
-    secondary: ["bg-slate-200"],
-    secondaryDark: ["bg-slate-700", "hover:bg-slate-600"],
-    tertiary: ["bg-transparent", "shadow-none", "hover:bg-slate-100"],
-    quaternary: ["bg-white", "shadow-none", "border", "border-solid", "border-quaternary", "hover:border-slate-200"],
-    negative: [
-      "bg-negative",
-      "text-negative-dark",
-      "hover:text-negative-darker",
-      "hover:border-negative-border",
-      "focus:outline-negative",
-      "border",
-      "border-transparent",
-    ],
-    link: [],
-    text: [],
-    icon: [],
-  };
-
-  const containerClassName = classNames(
-    // default button classes
-    [
-      "h-11",
-      "focus:outline-none",
-      "relative flex flex-row justify-center items-center",
-      "shadow-sm",
-      "transition-outline transition-colors duration-300 ease-in-out",
-      "cursor-pointer",
-      "rounded-full",
-      "leading-none",
-    ],
-    // ensuring the buttons are 44px high including content
-    {
-      "py-2 px-2 w-11": isIconOnly,
-      "px-4 py-3": !isIconOnly,
-    },
-    className,
-    {
-      "opacity-50 pointer-events-none": isButtonDisabled,
-      "hover:text-primary-dark text-primary": isNonPrimaryNonNegative,
-      "border border-transparent": isNonPrimaryNonNegative,
-      "hover:border-slate-200 focus:outline-primary": isNonPrimaryNonNegative,
-      "text-secondary-dark opacity-75": isButtonDisabled && isNonPrimaryNonNegative,
-    },
-    buttonRolesStyling[role]
-  );
-
-  const spinnerClassNames = classNames({
-    hidden: !isPending,
-    "text-white": role === BUTTON_ROLES.PRIMARY,
-    "text-dark-gray": isNonPrimaryNonNegative,
-    "text-negative-dark": role === BUTTON_ROLES.TERTIARY,
-  });
-
-  const buttonTextClasses = classNames(["text-sm", "font-medium"], {
-    invisible: isPending,
-    hidden: !text,
-    "ml-3": hasIcon,
-  });
-
-  return (
-    <button
-      {...otherAttributes}
-      aria-disabled={isButtonDisabled}
-      disabled={isButtonDisabled}
-      className={containerClassName}
-      onClick={handleClick}
-      type={type}
-      title={title}
-      data-role={role}
-    >
-      {hasAddIcon && <AddIcon className="w-5 h-5" />}
-      {hasEditIcon && <EditIcon className="w-5 h-5" />}
-      {hasDeleteIcon && <DeleteIcon className="w-5 h-5" />}
-      {hasPrevIcon && <LeftArrowIcon className="w-5 h-5" />}
-      {hasNextIcon && <RightArrowIcon className="w-5 h-5" />}
-      {hasChartIcon && <ChartIcon className="w-5 h-5" />}
-      {hasPrintIcon && <PrintIcon className="w-5 h-5" />}
-      {iconName && <ButtonIcon name={iconName} />}
-      {dynamicIcon && React.createElement(dynamicIcon, { className: "w-5 h-5" })}
-
-      <span
-        className="opacity-100"
-        // IE11 center translate fix
-        style={{
-          position: "absolute",
-          left: "50%",
-          top: "50%",
-          transform: "translate(-50%, -50%)",
-        }}
-      >
-        <Spinner className={spinnerClassNames} />
-      </span>
-      <span className={buttonTextClasses}>{text}</span>
-    </button>
-  );
-}
-
-export default Button;
-
-export { BUTTON_ROLES };

package/src/components/Button/Button.types.ts

@@ -1,41 +0,0 @@
-// These types were added because they are used in ViewItem that is completely refactored to TS
-// Ideally they should also be used in the Button TS component, but this was outside of the scope of this task
-import React from "react";
-
-import { RestPropped } from "../../types/general.types";
-import { IconProps } from "../Icons/types/IconProps.type";
-
-export const BUTTON_ROLES = {
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  SECONDARY_DARK: "secondaryDark",
-  TERTIARY: "tertiary",
-  QUATERNARY: "quaternary",
-  NEGATIVE: "negative",
-  TEXT: "text",
-  LINK: "link",
-  ICON: "icon",
-} as const;
-
-type BUTTON_KEYS = keyof typeof BUTTON_ROLES;
-export type BUTTON_TYPE = typeof BUTTON_ROLES[BUTTON_KEYS];
-
-export type ButtonType = "button" | "submit";
-
-export interface ButtonProps extends RestPropped {
-  text?: string;
-  role?: BUTTON_TYPE;
-  type?: ButtonType;
-  title?: string;
-  link?: string;
-  isPending?: boolean;
-  isDisabled?: boolean;
-  // TODO: add specific type of ButtonEvent
-  onClick?: (arg: any) => void;
-  className?: string;
-  // name mapping to the right svg in ButtonIcon
-  iconName?: string;
-  // legacy - can be removed?
-  hasIcon?: boolean;
-  dynamicIcon?: React.FunctionComponent<IconProps>;
-}

package/src/components/Button/ButtonIcon.tsx

@@ -1,42 +0,0 @@
-import * as React from "react";
-
-import CloseIcon from "../../assets/close.svg";
-import HamburgerIcon from "../../assets/hamburger.svg";
-import ChevronRightBlueIcon from "../../assets/right-arrow-blue.svg";
-import ChevronRightGreyIcon from "../../assets/right-arrow-grey.svg";
-import ChevronLeftBlueIcon from "../../assets/left-arrow-blue.svg";
-import ChevronLeftGreyIcon from "../../assets/left-arrow-grey.svg";
-import SearchIcon from "../../assets/search.svg";
-import SearchCancelIcon from "../../assets/search-cancel.svg";
-import StarIcon from "../../assets/starIcon.svg";
-import CheckIcon from "../../assets/check-icon-primary.svg";
-
-interface ButtonIconProps {
-  name: string;
-  className?: string;
-}
-
-type IconNames = {
-  [key: string]: string;
-};
-
-const iconSrc: IconNames = {
-  // These need to be converted to svg files instead of components and added in
-  //  "add": AddIcon,
-  //  "delete": DeleteIcon,
-  //  "edit": EditIcon,
-  close: CloseIcon,
-  hamburger: HamburgerIcon,
-  "chevron-right-blue": ChevronRightBlueIcon,
-  "chevron-left-blue": ChevronLeftBlueIcon,
-  "chevron-right-grey": ChevronRightGreyIcon,
-  "chevron-left-grey": ChevronLeftGreyIcon,
-  search: SearchIcon,
-  star: StarIcon,
-  check: CheckIcon,
-  "search-cancel": SearchCancelIcon,
-};
-
-export const ButtonIcon = (props: ButtonIconProps): JSX.Element => {
-  return <img src={iconSrc[props.name]} className={props.className} />;
-};

package/src/components/ButtonV2/ButtonProps.type.ts

@@ -1,44 +0,0 @@
-import React from "react";
-
-import { IconProps } from "../Icons/types/IconProps.type";
-import { TextColor, TextHoverColor } from "../Text/Text";
-
-/**
- * Properties that are present in all variants of the button
- *
- */
-export interface BaseButtonProps
-  extends React.HTMLAttributes<HTMLButtonElement> {
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  text?: string;
-  icon?: React.FunctionComponent<IconProps>;
-  isDisabled?: boolean;
-  className?: string;
-}
-
-/**
- * Extra properties that can be set when the variant of the button
- * supports the pending state
- *
- */
-export interface ButtonWithPendingStateProps extends BaseButtonProps {
-  isPending?: boolean;
-}
-
-/**
- * All properties of BaseButtonProps and ButtonWithPendingStateProps,
- * plus other properties that are assigned internally by the button variants.
- *
- */
-export interface ButtonProps extends BaseButtonProps, ButtonWithPendingStateProps {
-  textColor?: TextColor;
-  textHoverColor?: TextHoverColor;
-}
-
-/**
- * Interface for defining a button
- */
-export interface ButtonDefinition<Props extends BaseButtonProps = BaseButtonProps> {
-  buttonType: React.FunctionComponent<Props>;
-  buttonProps: React.Attributes & Props;
-}