@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/TextEditor/TextEditor.scss

@@ -1,14 +0,0 @@
-@import "../../styles/colors";
-
-.ql-editor {
-  resize: vertical;
-  min-height: 10rem;
-}
-
-.ql-snow.ql-toolbar {
-  display: block;
-  background: $color-slate-100;
-  border-top-left-radius: 0.5em;
-  border-top-right-radius: 0.5em;
-  margin-top: 0.5em;
-}

package/src/components/TextEditorV2/TextEditorV2.js

@@ -1,52 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { EditorState, convertToRaw, ContentState } from "draft-js";
-import { Editor } from "react-draft-wysiwyg";
-import draftToHtml from "draftjs-to-html";
-import htmlToDraft from "html-to-draftjs";
-
-import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
-import "./TextEditorV2.scss";
-
-export const TextEditorV2 = ({ defaultValue, onValueChange, locale }) => {
-  const [editorState, setEditorState] = useState(EditorState.createEmpty());
-
-  useEffect(() => {
-    const { contentBlocks, entityMap } = htmlToDraft(defaultValue);
-    setEditorState(EditorState.createWithContent(ContentState.createFromBlockArray(contentBlocks, entityMap)));
-  }, []);
-
-  const onEditorStateChange = (state) => {
-    setEditorState(state);
-    onValueChange(draftToHtml(convertToRaw(state.getCurrentContent())));
-  };
-
-  return (
-    <div className="editor">
-      <Editor
-        toolbar={{
-          options: ["inline", "list", "link", "textAlign", "history"],
-          inline: {
-            options: ["bold", "italic", "underline"],
-          },
-          list: {
-            options: ["unordered", "ordered"],
-          },
-          link: {
-            showOpenOptionOnHover: false,
-            defaultTargetOption: "_blank",
-          },
-        }}
-        editorState={editorState}
-        onEditorStateChange={onEditorStateChange}
-        wrapperClassName="mb-6"
-        toolbarClassName="border border-solid border-color-border-primary"
-        editorClassName="border border-solid border-color-border-primary h-56"
-        localization={{
-          locale: locale,
-        }}
-      />
-    </div>
-  );
-};
-
-export default TextEditorV2;

package/src/components/TextEditorV2/TextEditorV2.scss

@@ -1,110 +0,0 @@
-.editor {
-  .rdw-editor {
-    overflow-y: auto;
-
-    .rdw-link-modal {
-      width: 20rem;
-      height: 19rem;
-
-      .rdw-link-modal-label,
-      .rdw-link-modal-target-option {
-        font-weight: normal;
-      }
-
-      .rdw-link-modal-input {
-        margin-bottom: 1rem;
-
-        font-size: 16px;
-        font-weight: normal;
-        line-height: 21px;
-        color: #2d2d2d;
-        height: 44px;
-        border: 1px solid #cccccc;
-        border-radius: 4px;
-        outline: none;
-        background-color: #ffffff;
-        padding: 12px;
-        caret-color: #0a78b2;
-      }
-
-      .rdw-link-modal-buttonsection {
-        display: flex;
-        flex-direction: row-reverse;
-        align-items: center;
-
-        .rdw-link-modal-btn {
-          border-radius: 1.375rem;
-          width: 6.5rem;
-          height: 2.75rem;
-          border: 1px solid #009fe3;
-          background-color: transparent;
-          color: #009fe3;
-        }
-
-        .rdw-link-modal-btn:first-child,
-        .rdw-link-modal-btn:disabled {
-          background: #009fe3;
-          color: #ffffff;
-        }
-      }
-    }
-
-    .rdw-embedded-modal {
-      width: 22rem;
-      height: 15rem;
-
-      .rdw-embedded-modal-link-input,
-      .rdw-embedded-modal-size-input {
-        font-size: 16px;
-        font-weight: normal;
-        line-height: 21px;
-        color: #2d2d2d;
-        height: 44px;
-        border: 1px solid #cccccc;
-        border-radius: 4px;
-        outline: none;
-        background-color: #ffffff;
-        padding: 12px;
-        caret-color: #0a78b2;
-      }
-
-      .rdw-embedded-modal-link-input {
-        width: 100%;
-      }
-
-      .rdw-embedded-modal-size-input {
-        width: 90%;
-      }
-
-      .rdw-embedded-modal-btn-section {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .rdw-embedded-modal-btn {
-          border-radius: 1.375rem;
-          width: 6.5rem;
-          height: 2.75rem;
-          border: 1px solid #009fe3;
-          background-color: transparent;
-          color: #009fe3;
-        }
-
-        .rdw-embedded-modal-btn:first-child,
-        .rdw-embedded-modal-btn:disabled {
-          background: #009fe3;
-          color: #ffffff;
-        }
-      }
-    }
-
-    .rdw-editor-main {
-      min-height: 14rem;
-      overflow: hidden;
-
-      .DraftEditor-root {
-        margin: 0 12px;
-      }
-    }
-  }
-}

package/src/components/TextLink/TextLink.tsx

@@ -1,42 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-export interface TextLinkProps {
-  text: string;
-  enabled?: boolean;
-  href?: string;
-  rel?: string;
-  target?: string;
-  onClick?: () => void;
-  className?: string;
-}
-
-export const TextLink = (props: TextLinkProps): JSX.Element => {
-  const className = classNames(
-    "text-sm hover:underline",
-    {
-      "cursor-pointer": props.enabled,
-      "cursor-default": !props.enabled,
-    },
-    {
-      "text-blue-800": props.enabled,
-      "text-slate-800": !props.enabled,
-    },
-    {
-      "hover:text-blue-900": props.enabled,
-      "hover:text-slate-900": !props.enabled,
-    }
-  );
-
-  return (
-    <a
-      href={props.href}
-      rel={props.rel}
-      target={props.target}
-      onClick={props.onClick}
-      className={classNames(className, props.className)}
-    >
-      {props.text}
-    </a>
-  );
-};

package/src/components/Textarea/Textarea.js

@@ -1,108 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import "./Textarea.scss";
-
-const RESIZE_TYPES = {
-  NONE: "none",
-  BOTH: "both",
-  HORIZONTAL: "horizontal",
-  VERTICAL: "vertical",
-};
-
-Textarea.propTypes = {
-  className: PropTypes.string,
-  value: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  maxLength: PropTypes.number,
-  rows: PropTypes.number,
-  resizable: PropTypes.oneOf([RESIZE_TYPES.BOTH, RESIZE_TYPES.HORIZONTAL, RESIZE_TYPES.VERTICAL, RESIZE_TYPES.NONE]),
-  isDisabled: PropTypes.bool,
-  icon: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onCtrlEnter: PropTypes.func,
-};
-
-function Textarea(props) {
-  const {
-    className,
-    value,
-    name,
-    placeholder,
-    maxLength,
-    rows = 4,
-    resizable = RESIZE_TYPES.VERTICAL,
-    isDisabled = false,
-    icon,
-    onChange,
-    onBlur,
-    onFocus,
-    onKeyPress,
-    onKeyDown,
-    onCtrlEnter,
-    ...otherProps
-  } = props;
-
-  let style;
-
-  if (icon) {
-    style = {
-      backgroundImage: `url(${icon})`,
-    };
-  }
-
-  return (
-    <textarea
-      {...otherProps}
-      name={name}
-      value={value}
-      placeholder={placeholder}
-      onChange={onChange}
-      onBlur={onBlur}
-      onFocus={onFocus}
-      onKeyPress={onKeyPress}
-      onKeyDown={(event) => {
-        onKeyDown?.();
-        const { ctrlKey, metaKey, key } = event;
-
-        if ((ctrlKey || metaKey) && key === "Enter") {
-          onCtrlEnter?.();
-        }
-      }}
-      maxLength={maxLength}
-      rows={rows}
-      disabled={isDisabled}
-      className={classNames(
-        "cweb-textarea",
-        className,
-        "p-2",
-        "border",
-        "placeholder-gray-500",
-        "text-sm",
-        "border-solid",
-        "border-input-border",
-        "hover:border-input-border-dark",
-        "focus:outline-primary",
-        "transition-colors",
-        "duration-300",
-        "w-full",
-        "focus:border-primary",
-        {
-          "has-icon": !!icon,
-          resizable: resizable === RESIZE_TYPES.BOTH,
-          "resizable-x": resizable === RESIZE_TYPES.HORIZONTAL,
-          "resizable-y": resizable === RESIZE_TYPES.VERTICAL,
-        }
-      )}
-      style={style}
-    />
-  );
-}
-
-export default Textarea;

package/src/components/Textarea/Textarea.scss

@@ -1,56 +0,0 @@
-@import "../../styles/colors";
-@import "../../styles/typography";
-@import "../../styles/layout";
-
-.cweb-textarea {
-  border: 1px solid $color-border;
-  border-radius: $default-border-radius;
-  outline: none;
-  background-color: $color-white;
-
-  resize: none;
-
-  &.has-icon {
-    background-size: 24px;
-    background-position: 10px 10px;
-    background-repeat: no-repeat;
-    padding-left: 44px;
-  }
-
-  &.resizable {
-    resize: both;
-  }
-
-  &.resizable-x {
-    resize: horizontal;
-  }
-
-  &.resizable-y {
-    resize: vertical;
-  }
-
-  &::placeholder {
-    color: $color-text-lighter;
-  }
-
-  &:-ms-input-placeholder {
-    color: $color-placeholder !important;
-  }
-
-  &::-ms-input-placeholder {
-    color: $color-placeholder;
-  }
-
-  &:focus {
-    border-color: $color-primary;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  &.has-error {
-    border: 1px solid $color-negative;
-    color: $color-negative;
-  }
-}

package/src/components/Timeline/Timeline.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-import { SecondaryButton } from "../ButtonV2/SecondaryButton";
-import { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
-
-import { TimelineStep, TimelineStepProps } from "./TimelineStep";
-
-export interface TimelineProps {
-  steps: TimelineStepProps[];
-  loadMoreButtonProps?: BaseButtonProps;
-}
-
-export const Timeline = (props: TimelineProps): JSX.Element => (
-  <>
-    {/* Needs a container around TimelineSteps as last one should be styled differently */}
-    <div>
-      {props.steps.map(step => <TimelineStep {...step} />)}
-    </div>
-    {props.loadMoreButtonProps && (
-      <SecondaryButton
-        className={"mt-6 mx-auto"}
-        {...props.loadMoreButtonProps}
-      />
-    )}
-  </>
-);
-
-export default Timeline;

package/src/components/Timeline/TimelineStep.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-export interface TimelineStepProps {
-  key: string | number;
-  type?: "wide" | "base";
-  content: React.ReactNode;
-}
-
-export const TimelineStep = ({
-  content,
-  type,
-}: TimelineStepProps): JSX.Element => {
-  const isWideStep = type === "wide";
-  const borderClassNames = "ml-4 pl-6 border-blue-800 border-l-2";
-  const containerClassNames = classNames("relative", {
-    [borderClassNames]: !isWideStep,
-    "bg-white rounded-lg overflow-hidden": isWideStep,
-  });
-
-  return (
-    <>
-      <div className={containerClassNames}>
-        {content}
-        {!isWideStep && (
-          <span className="rounded-lg bg-blue-800 h-4 w-4 absolute top-6 -left-2 -ml-px -mt-px"></span>
-        )}
-      </div>
-      <div className={classNames(borderClassNames, "h-6 last:h-0")} />
-    </>
-  );
-};
-
-TimelineStep.defaultProps = {
-  type: "base" as TimelineStepProps["type"],
-};

package/src/components/Title/LegacyTitle.js

@@ -1,64 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import "./Title.scss";
-
-const TITLE_TYPE_OPTIONS = {
-  DEFAULT: "default",
-  BIG: "big",
-  SMALL: "small",
-  TINY: "tiny",
-  BOLD: "bold",
-};
-
-LegacyTitle.propTypes = {
-  text: PropTypes.string.isRequired,
-  type: PropTypes.oneOf([
-    TITLE_TYPE_OPTIONS.DEFAULT,
-    TITLE_TYPE_OPTIONS.BIG,
-    TITLE_TYPE_OPTIONS.SMALL,
-    TITLE_TYPE_OPTIONS.TINY,
-    TITLE_TYPE_OPTIONS.BOLD,
-  ]),
-  className: PropTypes.string,
-};
-
-function LegacyTitle({ text, type, className = "", ...otherProps }) {
-  let ContainerElement;
-
-  const containerClassName = classNames("cweb-title", className, {
-    "type-default": !type || type === TITLE_TYPE_OPTIONS.DEFAULT,
-    "type-big": type === TITLE_TYPE_OPTIONS.BIG,
-    "type-small": type === TITLE_TYPE_OPTIONS.SMALL,
-    "type-tiny": type === TITLE_TYPE_OPTIONS.TINY,
-    "type-bold": type === TITLE_TYPE_OPTIONS.BOLD,
-  });
-
-  switch (type) {
-    case TITLE_TYPE_OPTIONS.DEFAULT:
-    case TITLE_TYPE_OPTIONS.BOLD:
-    case TITLE_TYPE_OPTIONS.BIG:
-      ContainerElement = "h1";
-      break;
-
-    case TITLE_TYPE_OPTIONS.SMALL:
-    case TITLE_TYPE_OPTIONS.TINY:
-      ContainerElement = "h3";
-      break;
-
-    default:
-      ContainerElement = "h1";
-      break;
-  }
-
-  return (
-    <ContainerElement {...otherProps} className={containerClassName}>
-      {text}
-    </ContainerElement>
-  );
-}
-
-export default LegacyTitle;
-
-export { TITLE_TYPE_OPTIONS };

package/src/components/Title/Title.scss

@@ -1,6 +0,0 @@
-@import "../../styles/layout";
-@import "../../styles/colors";
-
-.title {
-  font-family: "AvenirNextLTPro-Bold", "Roboto", sans-serif;
-}

package/src/components/Title/Title.tsx

@@ -1,62 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-import "./Title.scss";
-
-export type TitleStyle = "xs" | "sm" | "base" | "lg" | "xl" | "2xl";
-
-export interface TextProps {
-  text: string;
-  type?: TitleStyle; //defaults to "base"
-  className?: string;
-}
-
-export const Title = (props: TextProps): JSX.Element => {
-  const containerClassName = classNames(
-    "title", //this is used to load the correct font from the css
-    "font-bold",
-    {
-      "text-slate-700": !props.className?.match(/\s(text-)/),
-      "text-base": props.type === "xs",
-      "text-xl": props.type === "sm",
-      "text-2xl": props.type === "base",
-      "text-3xl": props.type === "lg",
-      "text-4xl ": props.type === "xl",
-      "text-6xl ": props.type === "2xl",
-    },
-    props.className
-  );
-
-  let ContainerElement: React.ElementType;
-
-  switch (props.type) {
-    case "sm":
-      ContainerElement = "h5";
-      break;
-    case "base":
-      ContainerElement = "h4";
-      break;
-    case "lg":
-      ContainerElement = "h3";
-      break;
-    case "xl":
-      ContainerElement = "h2";
-      break;
-    case "2xl":
-      ContainerElement = "h1";
-      break;
-    default:
-      ContainerElement = "h4";
-      break;
-  }
-
-  return (
-    <ContainerElement className={containerClassName}>
-      {props.text}
-    </ContainerElement>
-  );
-};
-
-Title.defaultProps = {
-  type: "base",
-};

package/src/components/Toaster/Toaster.scss

@@ -1,57 +0,0 @@
-#application-toaster {
-  position: fixed;
-  left: 50%;
-  transform: translate(-50%, 200%);
-  bottom: 48px;
-
-  // https://easings.net/#easeInOutBack
-  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
-
-  &.shelved {
-    transform: translate(-50%, 200%);
-  }
-
-  &.expanded {
-    transform: translate(-50%, 0);
-  }
-
-  &.type-success {
-    @apply bg-green-50;
-
-    [data-test-id="toaster-title"] {
-      @apply text-green-700;
-    }
-
-    .failure-icon {
-      @apply hidden;
-    }
-
-    [data-test-id="toaster-progress-bar-container"] {
-      @apply bg-green-50;
-
-      [data-test-id="toaster-progress-bar"] {
-        @apply bg-green-400;
-      }
-    }
-  }
-
-  &.type-failure {
-    @apply bg-red-50;
-
-    [data-test-id="toaster-title"] {
-      @apply text-red-700;
-    }
-
-    .success-icon {
-      @apply hidden;
-    }
-
-    [data-test-id="toaster-progress-bar-container"] {
-      @apply bg-red-50;
-
-      [data-test-id="toaster-progress-bar"] {
-        @apply bg-red-400;
-      }
-    }
-  }
-}