@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/List/List.tsx

@@ -1,138 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import classNames from "classnames";
-import dragula from "react-dragula";
-
-import { Title } from "../Title/Title";
-import Text from "../Text/Text";
-
-import { ListItem } from "./ListItem";
-import {
-  ListProps,
-  ListItemProps,
-  OnAssetLoadErrorPayload,
-} from "./List.types";
-import { ListSkeleton } from "./ListSkeleton";
-
-import "./List.scss";
-
-export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
-
-export const List = ({
-  title,
-  headerButton,
-  headerTransparent,
-  items,
-  onAssetLoadError,
-  onDragEnd,
-  emptyStateMessage,
-  isLoading,
-}: ListProps): JSX.Element => {
-  const listRef = useRef<HTMLUListElement | null>(null);
-  const dragulaRef = useRef<dragula.Drake | null>(null);
-  const hasHeader = !!(title || headerButton);
-
-  useEffect(() => {
-    dragulaRef.current?.destroy?.();
-    if (listRef.current && onDragEnd && items.length) {
-      dragulaRef.current = setupDragging();
-    }
-
-    return () => {
-      dragulaRef.current?.destroy?.();
-    };
-  }, [items, listRef]);
-
-  const handleDragEnd = (element: HTMLElement) => {
-    const draggedItemId = element.dataset["id"];
-
-    if (listRef.current && draggedItemId) {
-      const itemIdsWithOldOrder = items.map((item) => item.itemId.toString());
-      const itemIdsWithNewOrder = Array.from(listRef.current.children)
-        .map((child) => (child as HTMLElement).dataset["id"])
-        .filter((itemId): itemId is string => !!itemId);
-
-      const oldIndexOfDraggedItemId =
-        itemIdsWithOldOrder.indexOf(draggedItemId);
-      const newIndexOfDraggedItemId =
-        itemIdsWithNewOrder.indexOf(draggedItemId);
-
-      if (oldIndexOfDraggedItemId !== newIndexOfDraggedItemId) {
-        onDragEnd?.(draggedItemId, newIndexOfDraggedItemId);
-      }
-    }
-  };
-
-  const setupDragging = (): dragula.Drake | null => {
-    if (!listRef.current) {
-      return null;
-    }
-    const dragulaInstance = dragula([listRef.current], {
-      revertOnSpill: true,
-    });
-    dragulaInstance.on("dragend", handleDragEnd as (Element) => void);
-
-    return dragulaInstance;
-  };
-
-  const roundTop = !hasHeader || (hasHeader && headerTransparent);
-
-  if (isLoading) {
-    return <ListSkeleton items={items.length} />;
-  }
-
-  return (
-    <div data-test-id="list-component">
-      {(title || headerButton) && (
-        <div
-          data-test-id="list-header"
-          className={classNames(
-            "flex rounded-t flex-row items-center space-x-4",
-            {
-              "py-4": !headerButton,
-              "py-2": headerButton,
-              "bg-white border-b border-slate-100 px-4": !headerTransparent,
-              "mb-px": headerTransparent,
-              "justify-between": title && headerButton,
-              "justify-start": title && !headerButton,
-              "justify-end": !title && headerButton,
-            }
-          )}
-        >
-          {title && <Title type="xs" text={title} />}
-          {!!headerButton && (
-            <div className="space-x-3">
-              {React.createElement(
-                headerButton.buttonType,
-                headerButton.buttonProps
-              )}
-            </div>
-          )}
-        </div>
-      )}
-
-      <ul ref={listRef}>
-        {items.map((item) => (
-          <ListItem
-            {...item}
-            roundTop={roundTop}
-            key={item.itemId}
-            onAssetLoadError={onAssetLoadError}
-            isDraggable={!!onDragEnd}
-          />
-        ))}
-      </ul>
-
-      {items.length === 0 && emptyStateMessage && (
-        <div
-          className={classNames("p-4 bg-white rounded-b", {
-            "first:rounded-t": roundTop,
-          })}
-        >
-          <Text text={emptyStateMessage} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default List;

package/src/components/List/List.types.ts

@@ -1,41 +0,0 @@
-import React from "react";
-
-import { ButtonDefinition } from "../ButtonV2/ButtonProps.type";
-import { IconProps } from "../Icons/types/IconProps.type";
-import { PrimaryButtonProps } from "../../index";
-
-export interface ListItemProps {
-  itemId: string | number;
-  title: string;
-  subtitle?: string;
-  icon?: React.FunctionComponent<IconProps> | string;
-  accessories?: JSX.Element[];
-  handleItemClick?: () => void;
-  onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
-  tooltipId?: string;
-  /**
-   *
-   * If the parent list component can have a header,
-   * the list items don't need to add a border radius on top of the first item.
-   *
-   * The header is an optional <li> on top that contains the title and accessories (buttons)
-   */
-  roundTop?: boolean;
-  isDraggable?: boolean;
-}
-
-export type OnAssetLoadErrorPayload = Pick<
-  ListItemProps,
-  "itemId" | "subtitle" | "title" | "icon"
->;
-
-export type ListProps = {
-  title?: string;
-  headerButton?: ButtonDefinition<PrimaryButtonProps>;
-  headerTransparent?: boolean;
-  items: ListItemProps[];
-  onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
-  onDragEnd?: (itemId: string | number, newIndex: number) => void;
-  emptyStateMessage?: string;
-  isLoading?: boolean;
-};

package/src/components/List/ListItem.tsx

@@ -1,89 +0,0 @@
-import React, { useState } from "react";
-import classNames from "classnames";
-
-import Text from "../Text/Text";
-import { DragIcon } from "../Icons/DragIcon";
-import { ImageIcon } from "../Icons/ImageIcon";
-
-import { ListItemProps } from "./List.types";
-
-export const ListItem = ({
-  icon,
-  subtitle,
-  title,
-  accessories,
-  tooltipId,
-  onAssetLoadError,
-  roundTop,
-  ...restProps
-}: ListItemProps): JSX.Element => {
-  const [loadIconError, setLoadIconError] = useState(false);
-
-  function onListItemIconLoadError() {
-    console.error({
-      message:
-        "Url from icon failed to load, please check the props passed to `ListItem`.",
-      icon,
-      title,
-      subtitle,
-    });
-
-    setLoadIconError(true);
-
-    onAssetLoadError?.({
-      title,
-      subtitle: subtitle,
-      itemId: restProps.itemId,
-      icon,
-    });
-  }
-
-  function onListItemIconLoad() {
-    setLoadIconError(false);
-  }
-
-  return (
-    <li
-      className={classNames(
-        "flex last:rounded-b flex-row items-center space-x-4 bg-white",
-        "p-4 border-b last:border-b-0 border-slate-100",
-        {
-          "first:rounded-t": roundTop,
-          "cursor-pointer": restProps.handleItemClick,
-          "hover:bg-blue-50 transition-colors ease-in-out duration-300":
-            restProps.handleItemClick,
-        }
-      )}
-      onClick={restProps.handleItemClick}
-      data-id={restProps.itemId}
-      data-tip={restProps.itemId}
-      data-for={tooltipId}
-    >
-      {restProps.isDraggable && <DragIcon className="text-slate-300" />}
-      {/* If the icon is a react component, render it as so */}
-      {icon &&
-        typeof icon === "function" &&
-        React.createElement(icon, { className: "w-6 h-6" })}
-      {/* If the icon is a string url, load it in a vanilla img element */}
-      {!loadIconError && icon && typeof icon === "string" && (
-        <img
-          src={icon}
-          data-chromatic="ignore"
-          alt="list-item-icon"
-          className="w-6 h-6 text-sm"
-          onLoad={onListItemIconLoad}
-          onError={onListItemIconLoadError}
-        />
-      )}
-      {loadIconError && <ImageIcon className="w-6 h-6 text-slate-300" />}
-      <div>
-        <Text text={title} />
-        {subtitle && <Text text={subtitle} type={"sm"} />}
-      </div>
-      <div className={"flex-grow"} />
-      {accessories}
-    </li>
-  );
-};
-
-export default ListItem;

package/src/components/List/ListItemSkeleton.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-
-export const ListItemSkeleton = (): JSX.Element => {
-  return (
-    <div className="flex flex-row items-center p-4">
-      <div
-        className="skeleton-box is-circle mr-2"
-        style={{ width: `${32}px`, height: `${32}px` }}
-      />
-      <div className="flex flex-col">
-        <div
-          className="skeleton-box mb-1"
-          style={{ width: `${160}px`, height: `${14}px` }}
-        />
-        <div
-          className="skeleton-box"
-          style={{ width: `${110}px`, height: `${14}px` }}
-        />
-      </div>
-      <div
-        className="skeleton-box is-button ml-auto rounded-full"
-        style={{ width: `${24}px`, height: `${24}px` }}
-      />
-    </div>
-  );
-};

package/src/components/List/ListSkeleton.scss

@@ -1,5 +0,0 @@
-@import "../../styles/skeleton";
-
-.list-skeleton {
-  @include skeleton();
-}

package/src/components/List/ListSkeleton.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-
-import "./ListSkeleton.scss";
-import { ListItemSkeleton } from "./ListItemSkeleton";
-
-type ListSkeletonProps = {
-  items: number;
-};
-
-export const ListSkeleton = ({ items }: ListSkeletonProps): JSX.Element => {
-  const skeletonItems = Array.from({ length: items || 5 }, (_, i) => {
-    return <ListItemSkeleton key={i} />;
-  });
-
-  return (
-    <div className="flex flex-col divide-y divide-slate-200 bg-white border-slate-50 border rounded-lg shadow list-skeleton">
-      <div className="flex flex-row items-center px-4 py-2">
-        <div
-          className="skeleton-box"
-          style={{ width: `${160}px`, height: `${14}px` }}
-        />
-        <div
-          className="skeleton-box is-button ml-auto"
-          style={{ width: `${110}px`, height: `${44}px` }}
-        />
-      </div>
-      {skeletonItems}
-    </div>
-  );
-};

package/src/components/LoadingIndicator/LoadingIndicator.scss

@@ -1,50 +0,0 @@
-@import "../../styles/colors";
-
-.cweb-loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .cweb-loading-text {
-    margin-bottom: 24px;
-  }
-
-  &.as-modal {
-    $border-radius: 4px;
-
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 9999;
-    background-color: rgba($color-white, 0.6);
-
-    .cweb-loading-panel {
-      position: relative;
-      width: 320px;
-      min-height: 120px;
-      border-radius: $border-radius;
-      padding: 16px;
-      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);
-      background-color: #ffffff;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: center;
-
-      &:before {
-        position: absolute;
-        content: "";
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 1;
-        height: 3px;
-        background-color: $color-branding-support-1;
-        border-top-left-radius: $border-radius;
-        border-top-right-radius: $border-radius;
-      }
-    }
-  }
-}

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -1,46 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import loadingImage from "../../assets/loading.svg";
-import spinner from "../../assets/spinner.svg";
-import graySpinner from "../../assets/spinner-gray.svg";
-import { RestPropped } from "../../types/general.types";
-
-import "./LoadingIndicator.scss";
-
-export interface LoadingIndicatorProps extends RestPropped {
-  asModal?: boolean;
-  asSpinner?: boolean;
-  className?: string;
-  spinnerColor?: "blue" | "gray";
-}
-
-export function LoadingIndicator({
-  asModal = false,
-  asSpinner = false,
-  className = "",
-  spinnerColor = "blue",
-
-  ...restProps
-}: LoadingIndicatorProps): JSX.Element {
-  const spinnerToRender = spinnerColor === "blue" ? spinner : graySpinner;
-
-  const containerClassName = classNames("cweb-loading", className, {
-    "as-modal": asModal,
-  });
-
-  return (
-    <div {...restProps} className={containerClassName}>
-      <img
-        src={asSpinner ? spinnerToRender : loadingImage}
-        data-chromatic="ignore"
-        className={classNames("text-gray-600 fill-current stroke-current", {
-          "h-4 w-4": asSpinner,
-          "h-12 w-12": !asSpinner,
-        })}
-      />
-    </div>
-  );
-}
-
-export default LoadingIndicator;

package/src/components/Menu/Menu.js

@@ -1,74 +0,0 @@
-import React, { PureComponent } from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import Button from "../Button/Button";
-
-import "./Menu.scss";
-
-class Menu extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isOpen: false,
-    };
-  }
-
-  componentDidMount() {
-    document.addEventListener("mousedown", this.handleClickOutside);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener("mousedown", this.handleClickOutside);
-  }
-
-  handleClickOutside = (event) => {
-    if (this.rootRef && !this.rootRef.contains(event.target)) {
-      this.closeMenu();
-    }
-  };
-
-  handleIconClick = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    this.openMenu();
-  };
-
-  openMenu = () => {
-    this.setState({
-      isOpen: true,
-    });
-  };
-
-  closeMenu = () => {
-    this.setState({
-      isOpen: false,
-    });
-  };
-
-  render() {
-    const { children, className } = this.props;
-    const { isOpen } = this.state;
-
-    const containerClassName = classNames("cweb-menu", className, {
-      "is-open": isOpen,
-    });
-
-    return (
-      <div className={containerClassName} ref={(element) => (this.rootRef = element)}>
-        {isOpen ? (
-          <div className="p-6 border shadow-md cweb-menu-content border-slate-300">{children}</div>
-        ) : (
-          <Button role="tertiary" onClick={this.handleIconClick} className="chart-button" />
-        )}
-      </div>
-    );
-  }
-}
-
-export default Menu;

package/src/components/Menu/Menu.scss

@@ -1,27 +0,0 @@
-@import "../../styles/colors";
-@import "../../styles/layout";
-
-.cweb-menu {
-  > .cweb-menu-content {
-    min-width: 300px;
-    border-radius: 4px;
-    background-color: $color-white;
-  }
-
-  > .cweb-menu-button {
-    @include flexbox-layout();
-
-    width: 44px;
-    height: 44px;
-    background: url("../../assets/big-menu-icon.svg") no-repeat center;
-    transition: 0.2s ease;
-    background-size: contain;
-  }
-
-  > .cweb-menu-button:hover {
-    width: 44px;
-    height: 44px;
-    background: url("../../assets/big-menu-icon-hover.svg") no-repeat center;
-    transition: 0.2s ease;
-  }
-}

package/src/components/Modal/Modal.scss

@@ -1,117 +0,0 @@
-@import "../../styles/colors";
-@import "../../styles/layout";
-@import "../../styles/utils";
-@import "../../styles/shadows";
-
-.cweb-modal-overlay {
-  $modal-horizontal-distance: 8px;
-  $modal-vertical-distance: 60px;
-
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: $modal-vertical-distance $modal-horizontal-distance;
-  background-color: rgba(0, 0, 0, 0.25);
-  z-index: 20;
-
-  &.no-title-bar {
-    background-color: rgba(0, 0, 0, 0.75);
-  }
-
-  > .cweb-modal {
-    @include box-shadow-2dp();
-    position: relative;
-    margin: 0 auto;
-    background: white;
-    outline: none;
-    border-radius: 8px;
-
-    &.type-default {
-      max-width: 580px;
-    }
-
-    &.type-extra-small {
-      max-width: 444px;
-    }
-
-    &.type-wide {
-      max-width: 748px;
-    }
-
-    &.type-wider {
-      max-width: 868px;
-    }
-
-    &.has-padded-body {
-      .cweb-modal-content {
-        padding: 1.5rem;
-      }
-    }
-
-    .cweb-modal-no-title-section {
-      height: 0;
-      width: 100%;
-      position: relative;
-
-      > .cweb-modal-close-button {
-        position: absolute;
-        top: 16px;
-        right: 24px;
-
-        width: 44px;
-        height: 44px;
-        background: url("../../assets/modal-close-icon.svg") no-repeat center;
-        background-size: contain;
-
-        &:hover,
-        &:active,
-        &:focus {
-          background: url("../../assets/modal-close-icon-active.svg") no-repeat center;
-          background-size: contain;
-        }
-      }
-    }
-
-    .cweb-modal-title-section {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      border-bottom: 1px solid $color-chrome;
-      padding: 24px;
-
-      > .cweb-modal-title {
-        width: 100%;
-
-        justify-content: flex-start;
-        color: $color-secondary;
-        font-weight: normal;
-      }
-
-      > .cweb-modal-close-button {
-        transition: opacity 0.3s ease-in-out;
-        outline: none;
-        width: 2rem;
-        height: 2rem;
-        background: url("../../assets/cross-dark.svg") no-repeat center;
-        background-size: contain;
-
-        opacity: 0.75;
-
-        &:hover,
-        &:active,
-        &:focus {
-          opacity: 1;
-        }
-      }
-
-      > .cweb-modal-content {
-        margin: 24px;
-        overflow-y: auto;
-      }
-    }
-  }
-}