@luscii-healthtech/web-ui 0.1.0

package/src/components/Acknowledgement/Acknowledgement.js

@@ -0,0 +1,61 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import { Text } from "../Text/Text";
+import successIcon from "../../assets/success-icon.svg";
+import failureIcon from "../../assets/error-icon.svg";
+
+import "./Acknowledgement.scss";
+
+export const ACKNOWLEDGEMENT_TYPE_OPTIONS = {
+  SUCCESS: "success",
+  FAILURE: "failure",
+};
+
+Acknowledgement.propTypes = {
+  message: PropTypes.string,
+  type: PropTypes.oneOf([ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS, ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE]),
+  hasIcon: PropTypes.bool,
+  isVisible: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+function Acknowledgement({
+  message = "",
+  type = ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS,
+  isVisible = false,
+  hasIcon = false,
+  className = "",
+}) {
+  const containerClassName = classNames("cweb-acknowledgement", className, {
+    "type-success": type === ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS,
+    "type-failure": type === ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE,
+    "is-visible": isVisible,
+  });
+
+  const iconContainerClasses = classNames("acknowledgement-icon-container", {
+    hidden: !hasIcon,
+  });
+
+  const successIconClasses = classNames("icon success-icon acknowledgement-icon", {
+    hidden: type !== ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS,
+  });
+
+  const failureIconClasses = classNames("icon failure-icon acknowledgement-icon", {
+    hidden: type !== ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE,
+  });
+
+  return (
+    <div id="application-acknowledgement" data-test-id={`acknowledgement-panel-${type}`} className={containerClassName}>
+      <div className={iconContainerClasses}>
+        <img src={successIcon} className={successIconClasses} alt="Success icon" />
+        <img src={failureIcon} className={failureIconClasses} alt="Failure icon" />
+      </div>
+
+      <Text data-test-id="acknowledgement-message" text={message} />
+    </div>
+  );
+}
+
+export default Acknowledgement;

package/src/components/Acknowledgement/Acknowledgement.scss

@@ -0,0 +1,49 @@
+@import "../../styles/layout";
+@import "../../styles/colors";
+
+.cweb-acknowledgement {
+  @include horizontal-static-position(fixed, 10000);
+  @include flexbox-vertical(center, center);
+
+  $horizontal-margin: 6px;
+  $max-width: 360px - $horizontal-margin;
+
+  top: 0;
+  margin: 0 auto;
+  opacity: 0;
+  width: $max-width;
+  max-width: calc(100% - #{$horizontal-margin});
+  box-shadow: 0 0 20px 0 rgba(106, 191, 165, 0.2);
+  padding: 16px;
+  border-radius: 8px;
+
+  transform: translateY(-100%);
+  transition: transform ease-out 400ms, opacity 1ms linear 500ms;
+
+  > .acknowledgement-icon-container {
+    width: 48px;
+    height: 48px;
+
+    margin-bottom: 12px;
+
+     > .acknowledgement-icon {
+       width: 100%;
+       height: 100%;
+     }
+  }
+
+  &.type-success {
+    background: $color-positive-support;
+  }
+
+  &.type-failure {
+    background: $color-negative-support;
+  }
+
+  &.is-visible {
+    opacity: 1;
+    transform: translateY(32px);
+    transition: transform ease-in 150ms;
+  }
+}
+

package/src/components/Avatar/Avatar.js

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,153 @@
+@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

@@ -0,0 +1,23 @@
+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/Button/Button.examples.md

@@ -0,0 +1,46 @@
+```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

@@ -0,0 +1,200 @@
+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

@@ -0,0 +1,41 @@
+// 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

@@ -0,0 +1,42 @@
+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} />;
+};