@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/Icons/SmallCircleIcon.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-
-import { IconProps } from "./types/IconProps.type";
-
-export const SmallCircleIcon = (props: IconProps): JSX.Element => {
-  return (
-    <svg
-      className={props.className}
-      onClick={props.onClick}
-      role={props.onClick ? "button" : undefined}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle cx="12" cy="12" r="6" fill="currentColor" />
-      <circle cx="14.5" cy="9.5" r="1.5" fill="white" fillOpacity="0.1" />
-    </svg>
-  );
-};

package/src/components/Icons/SmallDiamondIcon.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-
-import { IconProps } from "./types/IconProps.type";
-
-export const SmallDiamondIcon = (props: IconProps): JSX.Element => {
-  return (
-    <svg
-      className={props.className}
-      onClick={props.onClick}
-      role={props.onClick ? "button" : undefined}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4.92984 13.4142C4.14879 12.6332 4.14879 11.3668 4.92984 10.5858L10.5867 4.92893C11.3677 4.14788 12.6341 4.14788 13.4151 4.92893L19.072 10.5858C19.853 11.3668 19.853 12.6332 19.072 13.4142L13.4151 19.0711C12.6341 19.8521 11.3677 19.8521 10.5867 19.0711L4.92984 13.4142Z"
-        fill="currentColor"
-      />
-      <circle
-        cx="12.0002"
-        cy="7.05078"
-        r="1.5"
-        transform="rotate(-45 12.0002 7.05078)"
-        fill="white"
-        fillOpacity="0.1"
-      />
-    </svg>
-  );
-};

package/src/components/Icons/SmallSquareIcon.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-
-import { IconProps } from "./types/IconProps.type";
-
-export const SmallSquareIcon = (props: IconProps): JSX.Element => {
-  return (
-    <svg
-      className={props.className}
-      onClick={props.onClick}
-      role={props.onClick ? "button" : undefined}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor" />
-      <circle cx="15.5" cy="8.5" r="1.5" fill="white" fillOpacity="0.1" />
-    </svg>
-  );
-};

package/src/components/Icons/SpaceRocketIcon.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-
-import { IconProps } from "./types/IconProps.type";
-
-export const SpaceRocketIcon = (props: IconProps): JSX.Element => {
-  return (
-    <svg
-      className={props.className}
-      onClick={props.onClick}
-      role={props.onClick ? "button" : undefined}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9.18977 6.34976C7.14977 8.63976 5.74977 11.9298 5.61977 12.2398L3.35977 11.2698C2.70977 10.9898 2.54977 10.1398 3.04977 9.63976L6.05977 6.62976C6.52977 6.15976 7.20977 5.94976 7.86977 6.07976L9.18977 6.34976ZM10.6798 16.5098C10.9798 16.8098 11.4198 16.8898 11.7998 16.7098C12.9598 16.1698 15.4498 14.8998 17.0598 13.2898C21.6498 8.69976 21.6898 4.95976 21.4198 3.35976C21.3498 2.95976 21.0298 2.63976 20.6298 2.56976C19.0298 2.29976 15.2898 2.33976 10.6998 6.92976C9.08977 8.53976 7.82977 11.0298 7.27977 12.1898C7.09977 12.5698 7.18977 13.0198 7.47977 13.3098L10.6798 16.5098ZM17.6498 14.8098C15.3598 16.8498 12.0698 18.2498 11.7598 18.3798L12.7298 20.6398C13.0098 21.2898 13.8598 21.4498 14.3598 20.9498L17.3698 17.9398C17.8398 17.4698 18.0498 16.7898 17.9198 16.1298L17.6498 14.8098ZM8.93977 17.4098C9.13977 18.4698 8.78977 19.4498 8.11977 20.1198C7.34977 20.8898 4.95977 21.4598 3.40977 21.7598C2.71977 21.8898 2.10977 21.2798 2.23977 20.5898C2.53977 19.0398 3.09977 16.6498 3.87977 15.8798C4.54977 15.2098 5.52977 14.8598 6.58977 15.0598C7.75977 15.2798 8.71977 16.2398 8.93977 17.4098ZM12.9998 8.99976C12.9998 7.89976 13.8998 6.99976 14.9998 6.99976C16.0998 6.99976 16.9998 7.89976 16.9998 8.99976C16.9998 10.0998 16.0998 10.9998 14.9998 10.9998C13.8998 10.9998 12.9998 10.0998 12.9998 8.99976Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};

package/src/components/Icons/StarIcon.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-
-import { IconProps } from "./types/IconProps.type";
-
-export const StarIcon = (props: IconProps): JSX.Element => {
-  return (
-    <svg
-      className={props.className}
-      onClick={props.onClick}
-      role={props.onClick ? "button" : undefined}
-      width="19"
-      height="18"
-      viewBox="0 0 19 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M8.58663 1.04906C8.93899 0.258571 10.061 0.258571 10.4134 1.04906L12.1659 4.9807C12.3112 5.30673 12.6193 5.53057 12.9743 5.56804L17.2551 6.01985C18.1158 6.11069 18.4625 7.17779 17.8196 7.75718L14.6219 10.6389C14.3568 10.8778 14.2391 11.24 14.3131 11.5892L15.2063 15.8001C15.3858 16.6467 14.4781 17.3062 13.7284 16.8738L9.99962 14.7232C9.69041 14.5448 9.30959 14.5448 9.00038 14.7232L5.27159 16.8738C4.52189 17.3062 3.61416 16.6467 3.79373 15.8001L4.68686 11.5892C4.76093 11.24 4.64325 10.8778 4.37808 10.6389L1.18043 7.75718C0.537518 7.17779 0.88424 6.11069 1.74492 6.01985L6.0257 5.56804C6.38068 5.53057 6.68877 5.30673 6.8341 4.9807L8.58663 1.04906Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};

package/src/components/Icons/WarningIcon.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-
-import { IconProps } from "./types/IconProps.type";
-
-export const WarningIcon: React.VoidFunctionComponent<IconProps> = (props) => {
-  return (
-    <svg
-      className={props.className}
-      onClick={props.onClick}
-      role={props.onClick ? "button" : undefined}
-      data-test-id={props["data-test-id"]}
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5C10.55 5 11 5.45 11 6V10C11 10.55 10.55 11 10 11ZM11 15H9V13H11V15Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};

package/src/components/Icons/types/IconProps.type.ts

@@ -1,5 +0,0 @@
-export interface IconProps {
-  className?: string;
-  onClick?: (event: React.MouseEvent<SVGSVGElement> | undefined) => void;
-  "data-test-id"?: string;
-}

package/src/components/InfoBlock/InfoBlock.js

@@ -1,24 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import "./InfoBlock.scss";
-import { Text } from "../Text/Text";
-
-InfoBlock.propTypes = {
-  message: PropTypes.string.isRequired,
-  containsDangerousHtml: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-function InfoBlock({ message, className, containsDangerousHtml = false }) {
-  const containerClassName = classNames("cweb-info-block", className);
-
-  return (
-    <div className={containerClassName}>
-      <Text text={message} containsDangerousHtml={containsDangerousHtml} />
-    </div>
-  );
-}
-
-export default InfoBlock;

package/src/components/InfoBlock/InfoBlock.scss

@@ -1,20 +0,0 @@
-@import '../../styles/colors';
-
-.cweb-info-block {
-  position: relative;
-  padding: 16px 16px 16px 56px;
-  background-color: $color-emphasis-background;
-  border-radius: 8px;
-
-  &:before {
-    content: "";
-    position: absolute;
-    left: 16px;
-    top: 14px;
-    z-index: 1;
-    width: 24px;
-    height: 23px;
-    background: url("../../assets/info-icon.svg") no-repeat center;
-    background-size: contain;
-  }
-}

package/src/components/InfoField/InfoField.tsx

@@ -1,94 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import ClipboardJS from "clipboard";
-
-import { Text } from "../Text/Text";
-
-type InfoFieldLinkType = "none" | "link" | "clipboard" | "tel";
-
-interface InfoFieldProps {
-  label: string;
-  value: string;
-  linkType: InfoFieldLinkType;
-  supportsMultiline?: boolean;
-  onCopyToClipboard?: () => void;
-  icon?: JSX.Element;
-  className?: string;
-}
-
-export const InfoField = (props: InfoFieldProps): JSX.Element => {
-  const clipboard = new ClipboardJS("button");
-
-  clipboard.on("success", function(e) {
-    props.onCopyToClipboard && props.onCopyToClipboard();
-    e.clearSelection();
-  });
-
-  let ContainerElement: React.ElementType;
-  let containerProps: any;
-
-  switch (props.linkType) {
-    case "link":
-      ContainerElement = "a";
-      containerProps = {
-        href: props.value,
-        target: "_blank",
-        rel: "noopener noreferrer",
-      };
-      break;
-    case "tel":
-      ContainerElement = "a";
-      containerProps = { href: `tel:${props.value}` };
-      break;
-
-    case "clipboard":
-      ContainerElement = "button";
-      containerProps = {
-        type: "button",
-        "data-clipboard-text": props.value,
-      };
-      break;
-
-    case "none":
-    default:
-      ContainerElement = "div";
-      break;
-  }
-
-  return (
-    <div
-      className={classNames(
-        "flex flex-row align-center items-center",
-        props.className
-      )}
-    >
-      {props.icon}
-      <ContainerElement
-        className={"flex flex-col overflow-hidden ml-3 first:ml-0"}
-        {...containerProps}
-      >
-        <Text
-          text={props.label}
-          type={"sm"}
-          color={"slate-500"}
-          className={classNames(
-            { "break-words": props.supportsMultiline },
-            { "whitespace-no-wrap": !props.supportsMultiline }
-          )}
-        />
-        <Text
-          className={classNames(
-            { "break-words": props.supportsMultiline },
-            { "whitespace-no-wrap": !props.supportsMultiline }
-          )}
-          text={props.value}
-          truncate={!props.supportsMultiline}
-        />
-      </ContainerElement>
-    </div>
-  );
-};
-
-InfoField.defaultProps = {
-  linkType: "none",
-};

package/src/components/Input/Input.css

@@ -1,3 +0,0 @@
-.input::-ms-clear {
-  display: none;
-}

package/src/components/Input/Input.tsx

@@ -1,211 +0,0 @@
-import React, { useEffect, useState } from "react";
-import classNames from "classnames";
-
-import { CrossIcon } from "../Icons/CrossIcon";
-import { AllowedTextInputTypes } from "../Form/form.types";
-import { IconProps } from "../Icons/types/IconProps.type";
-
-import "./Input.css";
-
-// FIXME: something in the tsdx.js build doesn't allow me to use `Uppercase<AllowedInputTypes>`
-// Don't know why yet but it can be fixed later.
-export const INPUT_TYPES: Record<string, AllowedTextInputTypes> = {
-  EMAIL: "email",
-  NUMBER: "number",
-  PASSWORD: "password",
-  TEXT: "text",
-};
-
-/**
- * It's very complicated to tap into the onChange events of inputs,
- * so I omit the type it requires and add a easier one to deal with.
- */
-type CustomHTMLInputProps = Omit<
-  React.HTMLProps<HTMLInputElement>,
-  "onChange"
-> & { isError?: boolean };
-
-type FakeEventTarget = {
-  target: {
-    value: string;
-    name: string;
-  };
-  currentTarget: {
-    value: string;
-    name: string;
-  };
-};
-
-export interface InputProps extends CustomHTMLInputProps {
-  type?: AllowedTextInputTypes;
-  clearable?: boolean;
-  isDisabled?: boolean;
-  withPrefix?: string;
-  withSuffix?: string;
-  icon?: React.VoidFunctionComponent<IconProps>;
-  onChange?: (event: FakeEventTarget) => void;
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      withSuffix = "",
-      withPrefix = "",
-      className,
-      clearable = false,
-      type = "text",
-      isDisabled = false,
-      icon,
-      name,
-      value = "",
-      onChange,
-      isError,
-      ...otherProps
-    },
-    ref
-  ) => {
-    const hasNoExtraContent = withPrefix === "" && withSuffix === "";
-    const [innerValue, setInnerValue] = useState(value);
-
-    useEffect(() => {
-      setInnerValue(value);
-    }, [value]);
-
-    const clearField = () => {
-      setInnerValue("");
-
-      // This allows backwards compatibility with our usages of the input
-      onChange?.({
-        target: {
-          name: name || "",
-          value: "",
-        },
-        currentTarget: {
-          name: name || "",
-          value: "",
-        },
-      });
-    };
-
-    const handleChangeEvent = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setInnerValue(event.currentTarget.value);
-
-      // This allows backwards compatibility with our usages of the input
-      onChange?.({
-        target: {
-          name: name || "",
-          value: event.currentTarget.value,
-        },
-        currentTarget: {
-          name: name || "",
-          value: event.currentTarget.value,
-        },
-      });
-    };
-
-    const isClearIconVisible = clearable && value;
-
-    return (
-      <div
-        data-test-id="input-component-container"
-        className="relative inline-block"
-      >
-        <div className="flex flex-row">
-          <span
-            className={classNames(
-              "h-11 border-t border-b border-solid border-input-border",
-              {
-                hidden: hasNoExtraContent,
-                "order-1": withPrefix !== "",
-                "order-2": withSuffix !== "",
-                "rounded-l border-l": withPrefix !== "",
-                "rounded-r border-r": withSuffix !== "",
-              },
-
-              "flex flex-col items-center p-3",
-              "text-sm",
-              "text-slate-500",
-              "bg-main-background"
-            )}
-          >
-            {withSuffix || withPrefix}
-          </span>
-          {icon && (
-            <div
-              className="absolute top-1/2 left-4"
-              style={{
-                transform: "translateY(-50%)",
-              }}
-            >
-              {React.createElement(icon, {
-                className: "w-6 h-6 text-slate-300 ",
-              })}
-            </div>
-          )}
-          <input
-            {...otherProps}
-            data-test-id="input-component"
-            name={name}
-            value={innerValue}
-            onChange={handleChangeEvent}
-            ref={ref}
-            size={otherProps.maxLength}
-            type={type}
-            disabled={isDisabled}
-            className={classNames(
-              "input",
-              "block",
-              { "pl-12": icon, "pr-11": clearable },
-              {
-                "text-slate-400 bg-slate-50": isDisabled,
-                "text-slate-700": !isDisabled,
-                "border-input-border": !isDisabled && !isError,
-                "hover:border-input-border-dark": !isDisabled,
-                "border-red-700": isError,
-                "focus:outline-negative": isError,
-                "focus:border-blue-800": !isError,
-                "focus:outline-primary": !isError,
-                "bg-white": !isDisabled,
-              },
-              "h-11",
-              "p-2",
-              "border",
-              "text-sm",
-              "placeholder-slate-500",
-              "border-solid",
-
-              "transition-colors",
-              "duration-300",
-              {
-                "z-10": withSuffix !== "" || withPrefix !== "", // to make sure the outline is displayed completely
-                rounded: hasNoExtraContent,
-                "rounded-l": withSuffix !== "",
-                "rounded-r": withPrefix !== "",
-                "order-2": withPrefix !== "",
-                "order-1": withSuffix !== "",
-              },
-              "shadow-default",
-              className
-            )}
-          />
-          <div
-            className="absolute right-0 top-1/2"
-            style={{
-              transform: "translateY(-50%)",
-            }}
-          >
-            <CrossIcon
-              className={classNames(
-                "w-6 h-6 mr-3 cursor-pointer text-slate-300",
-                { block: isClearIconVisible, hidden: !isClearIconVisible }
-              )}
-              onClick={clearField}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-export default Input;

package/src/components/Input/SearchInput.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-
-import { SearchIcon } from "../Icons/SearchIcon";
-
-import Input, { InputProps } from "./Input";
-
-export type SearchInputProps = Omit<
-  InputProps,
-  "icon" | "withSuffix" | "withPrefix" | "type" | "clearable"
->;
-
-export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
-  (props, ref) => {
-    return (
-      <Input
-        {...props}
-        icon={SearchIcon}
-        type="text"
-        clearable={true}
-        ref={ref}
-      />
-    );
-  }
-);

package/src/components/Line/Line.js

@@ -1,38 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-const Line = ({ left, right, className }) => (
-  <div className={classNames(className, "cweb-line", "flex flex-row flex-no-wrap")}>
-    <div className={"flex"}>
-      {left?.map(
-        (item) =>
-          item && (
-            <div key={item.key ?? item.props.id} className={"mr-3 flex items-center"}>
-              {item}
-            </div>
-          )
-      )}
-    </div>
-    <div className={"flex-grow"} />
-    <div className={"flex"}>
-      {right?.map((item) => {
-        return (
-          item && (
-            <div key={item.key ?? item.props.id} className={"ml-3 first:ml-0"}>
-              {item}
-            </div>
-          )
-        );
-      })}
-    </div>
-  </div>
-);
-
-Line.propTypes = {
-  left: PropTypes.array,
-  right: PropTypes.array,
-  className: PropTypes.string,
-};
-
-export default Line;

package/src/components/List/List.scss

@@ -1,23 +0,0 @@
-li {
-  &.gu-mirror {
-    @apply shadow-xl m-0 fixed z-9999;
-  }
-
-  &.gu-hide {
-    @apply hidden;
-  }
-
-  &.gu-unselectable {
-    @apply select-none;
-  }
-
-  &.gu-transit {
-    @apply bg-blue-50;
-    @apply outline-dropTarget;
-    filter: none;
-    @apply opacity-100 rounded-none border-none; // TODO we only need these to override them in cVitals-Web
-  }
-  &.gu-transit > * {
-    @apply invisible;
-  }
-}