@luscii-healthtech/web-ui 0.1.0

package/src/components/ButtonV2/ButtonV2.tsx

@@ -0,0 +1,91 @@
+import classNames from "classnames";
+import React from "react";
+
+import { Spinner } from "../Spinner/Spinner";
+import { IconProps } from "../Icons/types/IconProps.type";
+
+export type ButtonV2Type = "button" | "submit";
+
+export interface ButtonV2Props {
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  type?: ButtonV2Type;
+  text?: string;
+  icon?: React.FunctionComponent<IconProps>;
+  isDisabled?: boolean;
+  isPending?: boolean;
+  className?: string;
+}
+
+export const ButtonV2 = (props: ButtonV2Props): JSX.Element => {
+  if (!props.text && !props.icon) {
+    console.error(
+      "A text or an icon is required to use this component, please make sure to pass at least one of them as a prop."
+    );
+    return <span>Invalid props passed to this component.</span>;
+  }
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (props.type === "submit") {
+      event.preventDefault();
+    }
+    props.onClick(event);
+  };
+
+  const buttonClassName = classNames(
+    [
+      "h-11",
+      "relative flex flex-row justify-center items-center",
+      "transition-outline transition-colors duration-300 ease-in-out",
+      "rounded-full",
+      "leading-none",
+      "shadow-sm",
+      "cursor-pointer",
+      "focus:outline-none",
+    ],
+    {
+      "w-11": !props.text && props.icon,
+      "px-4": props.text,
+      "py-2": props.text && props.icon,
+      "py-3": props.text && !props.icon,
+    },
+    props.className
+  );
+
+  return (
+    <button
+      className={buttonClassName}
+      type={props.type}
+      onClick={handleClick}
+      disabled={props.isDisabled}
+      aria-disabled={props.isDisabled}
+    >
+      {props.icon && React.createElement(props.icon, { className: "w-5 h-5" })}
+
+      {props.isPending && (
+        <span
+          className="opacity-100"
+          // IE11 center translate fix
+          style={{
+            position: "absolute",
+            left: "50%",
+            top: "50%",
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          <Spinner className="text-white" />
+        </span>
+      )}
+
+      {props.text && (
+        <span
+          className={classNames("text-sm font-medium", {
+            invisible: props.isPending,
+            "ml-1": props.icon,
+          })}
+        >
+          {props.text}
+        </span>
+      )}
+    </button>
+  );
+};

package/src/components/ButtonV2/PrimaryButton.tsx

@@ -0,0 +1,43 @@
+import classNames from "classnames";
+import React from "react";
+
+import { IconProps } from "../Icons/types/IconProps.type";
+
+import { ButtonV2, ButtonV2Type } from "./ButtonV2";
+
+export interface PrimaryButtonProps {
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  type?: ButtonV2Type;
+  text?: string;
+  icon?: React.FunctionComponent<IconProps>;
+  isDisabled?: boolean;
+  isPending?: boolean;
+}
+
+export const PrimaryButton = (props: PrimaryButtonProps): JSX.Element => {
+  return (
+    <ButtonV2
+      className={classNames(
+        [
+          "text-white",
+          "bg-primary",
+          "border",
+          "border-solid",
+          "border-primary-transparent",
+          "hover:bg-primary-dark",
+          "focus:outline-primary",
+        ],
+        {
+          "opacity-50": props.isDisabled,
+          "pointer-events-none": props.isDisabled || props.isPending,
+        }
+      )}
+      onClick={props.onClick}
+      type={props.type}
+      text={props.text}
+      icon={props.icon}
+      isDisabled={props.isDisabled}
+      isPending={props.isPending}
+    />
+  );
+};

package/src/components/ButtonV2/SecondaryButton.tsx

@@ -0,0 +1,31 @@
+import classNames from "classnames";
+import React from "react";
+
+import { IconProps } from "../Icons/types/IconProps.type";
+
+import { ButtonV2 } from "./ButtonV2";
+
+export interface SecondaryButtonProps {
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  text?: string;
+  icon?: React.FunctionComponent<IconProps>;
+}
+
+export const SecondaryButton = (props: SecondaryButtonProps): JSX.Element => {
+  return (
+    <ButtonV2
+      className={classNames([
+        "text-primary",
+        "bg-white",
+        "border",
+        "border-slate-300",
+        "hover:text-primary-dark",
+        "hover:border-slate-400",
+        "focus:outline-primary",
+      ])}
+      onClick={props.onClick}
+      text={props.text}
+      icon={props.icon}
+    />
+  );
+};

package/src/components/ButtonV2/TertiaryButton.tsx

@@ -0,0 +1,31 @@
+import classNames from "classnames";
+import React from "react";
+
+import { IconProps } from "../Icons/types/IconProps.type";
+
+import { ButtonV2 } from "./ButtonV2";
+
+export interface TertiaryButtonProps {
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  text?: string;
+  icon?: React.FunctionComponent<IconProps>;
+}
+
+export const TertiaryButton = (props: TertiaryButtonProps): JSX.Element => {
+  return (
+    <ButtonV2
+      className={classNames([
+        "text-primary",
+        "bg-transparent",
+        "border",
+        "border-transparent",
+        "shadow-none",
+        "hover:text-primary-dark",
+        "focus:outline-primary",
+      ])}
+      onClick={props.onClick}
+      text={props.text}
+      icon={props.icon}
+    />
+  );
+};

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
+import Glider from "react-glider";
+
+import { GliderContainer } from "./GliderContainer";
+
+interface CarouselProps {
+  id: string;
+  slides: React.ReactNode[];
+  className?: string;
+}
+
+const Carousel = ({ slides, className, id }: CarouselProps): JSX.Element => {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => setIsVisible(false), [id]);
+  useEffect(() => {
+    // hack to force Glider to re mount when id changes
+    if (!isVisible) {
+      setIsVisible(true);
+    }
+  }, [isVisible]);
+
+  return (
+    isVisible ? (
+      <Glider
+        hasDots
+        hasArrows
+        skipTrack
+        // draggable
+        scrollLock
+        rewind
+        arrows={{
+          prev: ".entity-preview-left",
+          next: ".entity-preview-right",
+        }}
+        id={id} // this should force Glider to rebuild, but it does not
+        dots={".entity-preview-dots"}
+        className={classNames("h-full", className)}
+        containerElement={GliderContainer}
+      >
+        <div className="glider-track h-full">
+          {slides?.map((slide, index) => (
+            <div key={index} className={"overflow-hidden"}>
+              {slide}
+            </div>
+          ))}
+        </div>
+      </Glider>
+    ) : <></>);
+};
+
+export default Carousel;

package/src/components/Carousel/GliderContainer.scss

@@ -0,0 +1,13 @@
+.entity-preview-dots.glider-dots {
+  @apply pt-4;
+  .glider-dot {
+    @apply h-2 w-2 m-1 bg-blue-50;
+    &:focus {
+      @apply outline-primary;
+    }
+    &.active,
+    &:focus {
+      @apply bg-blue-800;
+    }
+  }
+}

package/src/components/Carousel/GliderContainer.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import Button, { BUTTON_ROLES } from "../Button/Button";
+
+import "./GliderContainer.scss";
+
+interface GliderContainerProps {
+  children: React.ReactNode;
+}
+
+export const GliderContainer = (props: GliderContainerProps): JSX.Element => (
+  <div className={"relative h-full pb-6 glider-contain px-17 pb-6"}>
+    {props.children}
+    <div className={"entity-preview-left absolute top-1/2 left-0"}>
+      <Button iconName={"chevron-left-blue"} role={BUTTON_ROLES.QUATERNARY} />
+    </div>
+    <div className={"entity-preview-right absolute top-1/2 right-0"}>
+      <Button iconName={"chevron-right-blue"} role={BUTTON_ROLES.QUATERNARY} />
+    </div>
+    <div className="entity-preview-dots" />
+  </div>
+);

package/src/components/CenteredHero/CenteredHero.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import Button, { BUTTON_ROLES } from "../Button/Button";
+import Text from "../Text/Text";
+import { Title } from "../Title/Title";
+
+CenteredHero.propTypes = {
+  title: PropTypes.string,
+  text: PropTypes.string,
+  image: PropTypes.string,
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      handleOnClick: PropTypes.func.isRequired,
+      type: PropTypes.oneOf([BUTTON_ROLES.PRIMARY, BUTTON_ROLES.SECONDARY]).isRequired,
+    })
+  ),
+  className: PropTypes.string,
+};
+
+function CenteredHero({ title, text, image, buttons, className }) {
+  return (
+    <div className={classNames(className, "p-6 my-6 flex flex-col items-center w-200 ml-auto mr-auto")}>
+      {image && <img src={image} />}
+      {title && <Title className="mt-8 mb-2" text={title} type={"base"} />}
+      {text && <Text text={text} />}
+
+      {buttons?.length > 0 && (
+        <div className="flex flex-row mt-8">
+          {buttons
+            .filter((button) => button.title && button.handleOnClick && button.type)
+            .map((button) => (
+              <Button
+                className="mr-4 last:mr-0"
+                key={button.title}
+                role={button.type}
+                title={button.title}
+                text={button.title}
+                onClick={button.handleOnClick}
+              />
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CenteredHero;

package/src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,115 @@
+@import "../../styles/colors";
+@import "../../styles/layout";
+
+.cweb-checkbox {
+  outline: none;
+  transition: all 0.3s ease;
+
+  .cweb-checkbox-input {
+    position: absolute;
+    -webkit-appearance: none;
+    height: 1px;
+    opacity: 0;
+    width: 1px;
+  }
+
+  &.type-regular {
+    .cweb-checkbox-label {
+      display: flex;
+      align-items: center;
+      margin-bottom: 0;
+    }
+
+    .cweb-checkbox-icon-container {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      border: 1px solid $color-border;
+      border-radius: $default-border-radius;
+    }
+
+    &.hasError {
+      .cweb-checkbox-icon-container {
+        border: 1px solid $color-negative;
+      }
+    }
+
+    .cweb-checkbox-icon {
+      display: block;
+    }
+
+    &.is-focused {
+      .cweb-checkbox-icon-container {
+        border-color: $color-primary;
+      }
+    }
+
+    &.is-checked {
+      .cweb-checkbox-icon {
+        width: 0.5rem;
+        height: 0.5rem;
+        padding: 4px;
+        background: url("../../assets/check-icon.svg") no-repeat center;
+        background-size: contain;
+      }
+    }
+
+    &.is-disabled.show-cross-when-disabled {
+      .cweb-checkbox-icon {
+        width: 10px;
+        height: 10px;
+        background: url("../../assets/check-cross-icon.svg") no-repeat center;
+        background-size: contain;
+        opacity: 0.6;
+      }
+    }
+  }
+
+  &.type-switch {
+    .cweb-checkbox-label {
+      display: flex;
+      align-items: center;
+      margin-bottom: 0;
+      width: 56px;
+      height: 28px;
+      position: relative;
+    }
+
+    .cweb-checkbox-icon-container {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: $input-background;
+      border-radius: 16px;
+
+      &:after {
+        position: relative;
+        display: block;
+        content: "";
+        height: 20px;
+        width: 20px;
+        top: 4px;
+        left: 4px;
+        background-color: white;
+        border-radius: 50%;
+        transition: all 0.2s ease;
+      }
+    }
+
+    &.is-checked {
+      .cweb-checkbox-icon-container {
+        background-color: $color-toggle-switch-background;
+
+        &:after {
+          left: 32px;
+        }
+      }
+    }
+  }
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,114 @@
+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 initial value
+  isChecked?: 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,
+  isDisabled,
+  name,
+  value,
+  onChange,
+  className,
+  error,
+}: CheckboxProps): JSX.Element => {
+  const [checked, setChecked] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const containerClassName = classNames("cweb-checkbox", className, {
+    "is-focused": isFocused,
+    "is-checked": checked,
+    "opacity-50 cursor-not-allowed is-disabled": isDisabled,
+    "type-regular": type === "regular",
+    "type-switch": type === "switch",
+    hasError: error,
+  });
+
+  useEffect(() => {
+    setChecked(isChecked);
+  }, [isChecked]);
+
+  const handleChange = (event) => {
+    setChecked(!checked);
+    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}
+          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,
+            "bg-white": !checked,
+            "hover:bg-primary-dark": checked,
+            "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 select-none text-left" text={text} data-test-id="checkbox-text" />}
+          {explanation && (
+            <Text
+              className="ml-2 select-none text-left"
+              text={explanation}
+              color={"gray-500"}
+              data-test-id="checkbox-explanation"
+            />
+          )}
+        </div>
+      </label>
+    </div>
+  );
+};
+
+export default Checkbox;

package/src/components/ConfirmationDialog/ConfirmationDialog.scss

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

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