@luscii-healthtech/web-ui 0.1.0

package/src/components/Page/Page.scss

@@ -0,0 +1,59 @@
+.cweb-page {
+  width: 100%;
+  max-width: 1140px;
+  margin: 32px auto 0 auto;
+
+  .cweb-page-breadcrumbs {
+    margin-bottom: 16px;
+  }
+
+  .page-spinner {
+    margin-left: 8px;
+    margin-bottom: 4px;
+
+    img {
+      width: 21px;
+    }
+  }
+
+  .cweb-page-header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    flex-grow: 0;
+
+    .cweb-page-title {
+      display: inline;
+    }
+
+    &.accessory-right {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &.accessory-bottom {
+      @media screen and (max-width: 426px) {
+        max-width: 75vw;
+
+        img {
+          max-width: 10vw;
+        }
+
+        button {
+          p {
+            font-size: 4vw;
+          }
+        }
+      }
+
+      flex-direction: column;
+      align-items: flex-start;
+
+      .cweb-page-title {
+        margin-bottom: 8px;
+        display: inline;
+      }
+    }
+  }
+}

package/src/components/PaginationMenu/PaginationMenu.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import { PaginationMenuSmall } from "./PaginationMenuSmall";
+import { PaginationMenuLarge } from "./PaginationMenuLarge";
+
+PaginationMenu.propTypes = {
+  pageCount: PropTypes.number.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  onPageClick: PropTypes.func.isRequired,
+  small: PropTypes.bool,
+  className: PropTypes.string,
+  localization: PropTypes.object,
+};
+
+function PaginationMenu({ pageCount, currentPage, onPageClick, small, className, localization }) {
+  const containerClassName = classNames("flex flex-row flex-space-between w-full items-center", className);
+
+  return (
+    <div className={containerClassName}>
+      {small ? (
+        <PaginationMenuSmall pageCount={pageCount} currentPage={currentPage} onPageClick={onPageClick} />
+      ) : (
+        <PaginationMenuLarge pageCount={pageCount} currentPage={currentPage} onPageClick={onPageClick} localization={localization}/>
+      )}
+    </div>
+  );
+}
+
+export default PaginationMenu;

package/src/components/PaginationMenu/PaginationMenuLarge.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { GroupBase, SingleValue } from "react-select";
+
+import Button, { BUTTON_ROLES } from "../Button/Button";
+import Select from "../Select/Select";
+import { Text } from "../Text/Text";
+
+interface PaginationMenuLargeProps {
+  pageCount: number;
+  currentPage: number;
+  onPageClick: (page: number) => void;
+  localization: {previous: string, next: string, page: string};
+}
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+export const PaginationMenuLarge = (props: PaginationMenuLargeProps): JSX.Element => {
+  const [page, setPage] = useState<Option>({ value: "", label: "" });
+
+  useEffect(() => {
+    setPage({
+      label: props.currentPage.toString(),
+      value: props.currentPage.toString(),
+    });
+  }, [props.currentPage]);
+
+  function handleOnPageClick(event: React.MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    const newPage: string = event.currentTarget.dataset.page;
+    setPage({ value: newPage, label: newPage });
+    props.onPageClick(parseInt(newPage, 10));
+  }
+
+  function handleOnPageSelect(newValue: SingleValue<Option>) {
+    newValue?.value && props.onPageClick(parseInt(newValue.value));
+  }
+
+  function getPageOptions(): Option[] {
+    const items = [];
+    for (let i = 1; i <= props.pageCount; i++) {
+      items.push({
+        label: i.toString(),
+        value: i.toString(),
+      });
+    }
+
+    return items;
+  }
+
+  return (
+    <>
+      <div className={"flex flex-row ml-2 mr-3 items-center"}>
+        <Text className="mr-3" text={props.localization.page} />
+        <Select<Option, false, GroupBase<Option>>
+          className={"w-24"}
+          options={getPageOptions()}
+          onChange={handleOnPageSelect}
+          value={page}
+          isDisabled={props.pageCount < 2}
+          menuPlacement="auto"
+        />
+      </div>
+      <div className={"mr-2 ml-auto flex flex-row items-center"}>
+        <Text
+          className="mr-3"
+          text={`${props.localization.page} ${props.currentPage} / ${props.pageCount}`}
+          color="gray-500"
+        />
+        <Button
+          data-test-id="prev-button"
+          role={BUTTON_ROLES.SECONDARY}
+          text={props.localization.previous}
+          data-page={props.currentPage - 1}
+          onClick={handleOnPageClick}
+          isDisabled={props.currentPage === 1}
+          className="w-24 mr-3"
+        />
+        <Button
+          data-test-id="next-button"
+          role={BUTTON_ROLES.SECONDARY}
+          text={props.localization.next}
+          isDisabled={props.currentPage === props.pageCount}
+          data-page={props.currentPage + 1}
+          onClick={handleOnPageClick}
+          className="w-24"
+        />
+      </div>
+    </>
+  );
+};

package/src/components/PaginationMenu/PaginationMenuSmall.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+import Button, { BUTTON_ROLES } from "../Button/Button";
+import { Text } from "../Text/Text";
+
+interface PaginationMenuSmallProps {
+  pageCount: number;
+  currentPage: number;
+  onPageClick: (page: number) => void;
+}
+
+export const PaginationMenuSmall = (props: PaginationMenuSmallProps): JSX.Element => {
+  function handleOnPageClick(event: React.MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    const page = event.currentTarget.dataset.page;
+    props.onPageClick(parseInt(page, 10));
+  }
+
+  return (
+    <>
+      <Button
+        data-test-id="prev-button"
+        role={BUTTON_ROLES.TERTIARY}
+        iconName={props.currentPage === 1 ? "chevron-left-grey" : "chevron-left-blue"}
+        data-page={props.currentPage - 1}
+        onClick={handleOnPageClick}
+        isDisabled={props.currentPage === 1}
+      />
+      <Text text={`${props.currentPage} / ${props.pageCount}`} type="sm" color="gray-500" />
+      <Button
+        data-test-id="next-button"
+        role={BUTTON_ROLES.TERTIARY}
+        iconName={props.currentPage === props.pageCount ? "chevron-right-grey" : "chevron-right-blue"}
+        isDisabled={props.currentPage === props.pageCount}
+        data-page={props.currentPage + 1}
+        onClick={handleOnPageClick}
+      />
+    </>
+  );
+};

package/src/components/PreviewPhone/PreviewPhone.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback, useEffect, useState } from "react";
+import classNames from "classnames";
+
+import phoneMockup from "../../assets/phone-mockup.svg";
+
+import { useWindowDimensions } from "./useWindowDimensions";
+
+interface PreviewPhoneProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const PreviewPhone = ({ className, children }: PreviewPhoneProps): JSX.Element => {
+  const phoneHeight = 637;
+  const phoneWidth = 340;
+  const [scale, setScale] = useState(1);
+  const [showPhone, setShowPhone] = useState(false);
+  const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+
+  useEffect(() => {
+    // hack to offset rendering the phone after the first render
+    // this way the scale calculation works without fixed width
+    setShowPhone(true);
+  }, []);
+
+  const containerCallbak = useCallback(
+    (containerElement) => {
+      if (!containerElement) {
+        return;
+      }
+      const { clientWidth: containerWidth, clientHeight: containerHeight } = containerElement;
+      const heightScale = containerHeight < phoneHeight ? containerHeight / phoneHeight : 1;
+      const widthScale = containerWidth < phoneWidth ? containerWidth / phoneWidth : 1;
+      setScale(heightScale < widthScale ? heightScale : widthScale);
+    },
+    [windowHeight, windowWidth]
+  );
+
+  return (
+    showPhone && (
+      <div ref={containerCallbak} className={classNames("relative h-full flex items-center justify-center", className)}>
+        <div className={"absolute"} style={{ width: phoneWidth, height: phoneHeight, transform: `scale(${scale})` }}>
+          <div className={"h-full px-5 pt-11 pb-20"}>
+            <div className={"h-full overflow-y-auto bg-white"}>{children}</div>
+          </div>
+          <img className="absolute top-0 pointer-events-none" src={phoneMockup} alt="phone mockup" />
+        </div>
+      </div>
+    )
+  );
+};
+
+export default PreviewPhone;

package/src/components/PreviewPhone/useWindowDimensions.js

@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react";
+import debounce from "lodash/debounce";
+
+export const useWindowDimensions = () => {
+  const [height, setHeight] = useState(window.innerHeight);
+  const [width, setWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = debounce(() => {
+      if (height !== window.innerHeight) {
+        setHeight(window.innerHeight);
+      }
+      if (width !== window.innerWidth) {
+        setWidth(window.innerWidth);
+      }
+    }, 500);
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return { height, width };
+};

package/src/components/Radio/Radio.js

@@ -0,0 +1,99 @@
+import React, { PureComponent } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import "./Radio.scss";
+import { Text } from "../Text/Text";
+
+class Radio extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    text: PropTypes.string,
+    isChecked: PropTypes.bool.isRequired,
+    isDisabled: PropTypes.bool,
+    name: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onChange: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isFocused: false,
+    };
+  }
+
+  handleChange = (event) => {
+    const { onChange } = this.props;
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  handleFocus = () => {
+    this.setState({
+      isFocused: true,
+    });
+  };
+
+  handleBlur = () => {
+    this.setState({
+      isFocused: false,
+    });
+  };
+
+  render() {
+    const { className, isChecked, isDisabled, name, value, text } = this.props;
+
+    const { isFocused } = this.state;
+
+    const containerClassName = classNames("cweb-radio mr-4", className, {
+      "is-focused": isFocused,
+      "is-checked": isChecked,
+      "opacity-50": isDisabled,
+    });
+
+    return (
+      <div className={containerClassName} ref={this.containerRef}>
+        <label className="cweb-radio-label">
+          <input
+            className="cweb-radio-input"
+            name={name}
+            type="radio"
+            checked={isChecked}
+            disabled={isDisabled}
+            value={value}
+            onBlur={this.handleBlur}
+            onFocus={this.handleFocus}
+            onChange={this.handleChange}
+          />
+
+          <span
+            className={classNames("cweb-radio-icon-container", {
+              "bg-primary": isChecked,
+              "hover:bg-primary-dark": isChecked,
+              "outline-primary": isFocused,
+              "cursor-not-allowed": isDisabled,
+              "cursor-pointer": !isDisabled,
+            })}
+          >
+            <span className="cweb-radio-icon" />
+          </span>
+
+          {text && (
+            <Text
+              className={classNames("cweb-radio-label-text", {
+                "cursor-not-allowed": isDisabled,
+              })}
+              text={text}
+            />
+          )}
+        </label>
+      </div>
+    );
+  }
+}
+
+export default Radio;

package/src/components/Radio/Radio.scss

@@ -0,0 +1,58 @@
+@import "../../styles/colors";
+
+.cweb-radio {
+  outline: none;
+
+  .cweb-radio-input {
+    -webkit-appearance: none;
+    height: 1px;
+    opacity: 0;
+    width: 1px;
+  }
+
+  .cweb-radio-label-text {
+    margin-left: 8px;
+    user-select: none;
+    text-align: left;
+  }
+
+  .cweb-radio-label {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0;
+  }
+
+  .cweb-radio-icon-container {
+    width: 16px;
+    height: 16px;
+    position: relative;
+
+    border: 1px solid $color-border;
+    border-radius: 50%;
+
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  .cweb-radio-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: block;
+  }
+
+  &.is-focused {
+    .cweb-radio-icon-container {
+      border-color: $color-primary;
+    }
+  }
+
+  &.is-checked {
+    .cweb-radio-icon {
+      width: 5px;
+      height: 5px;
+      background-color: $color-white;
+      border-radius: 50%;
+    }
+  }
+}

package/src/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,63 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import Radio from "../Radio/Radio";
+
+import "./RadioGroup.scss";
+
+function RadioGroup({
+  className,
+  radioClassName,
+  name,
+  selectedOption,
+  isVertical,
+  radioOptions,
+  onChange,
+  error,
+  isDisabled,
+  ...otherOptions
+}) {
+  const containerClassName = classNames("cweb-radio-group", { vertical: isVertical }, { hasError: error }, className);
+
+  function handleChange(event) {
+    if (!isDisabled && onChange) {
+      onChange(event);
+    }
+  }
+
+  return (
+    <div className={containerClassName} {...otherOptions}>
+      {radioOptions.map((option) => (
+        <Radio
+          {...option}
+          key={option.value}
+          className={radioClassName}
+          name={name}
+          isChecked={selectedOption === option.value}
+          onChange={handleChange}
+          isDisabled={isDisabled}
+        />
+      ))}
+    </div>
+  );
+}
+
+RadioGroup.propTypes = {
+  className: PropTypes.string,
+  radioClassName: PropTypes.string,
+  name: PropTypes.string,
+  selectedOption: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  isVertical: PropTypes.bool,
+  radioOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string,
+      info: PropTypes.string,
+      isDisabled: PropTypes.bool,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    })
+  ).isRequired,
+  onChange: PropTypes.func,
+};
+
+export default RadioGroup;

package/src/components/RadioGroup/RadioGroup.scss

@@ -0,0 +1,37 @@
+@import "../../styles/colors";
+@import "../../styles/layout";
+
+.cweb-radio-group {
+  @include flexbox-horizontal(center);
+
+  > .cweb-radio {
+    flex: 0 0 auto;
+    margin-right: 8px;
+  }
+
+  .cweb-form-field {
+    margin-bottom: 12px;
+  }
+
+  .cweb-form-info-text {
+    margin-left: 1.5rem;
+  }
+
+  &.vertical {
+    @include flexbox-vertical(flex-start);
+
+    .cweb-form-field:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    > .cweb-radio {
+      flex: 0 0 auto;
+      margin-bottom: 8px;
+    }
+  }
+  &.hasError {
+    > .cweb-radio .cweb-radio-icon-container {
+      border: 1px solid $color-negative !important;
+    }
+  }
+}

package/src/components/Section/Section.scss

@@ -0,0 +1,74 @@
+@import "../../styles/layout";
+@import "../../styles/colors";
+
+.cweb-section {
+  .cweb-button {
+    &:last-of-type {
+      margin-right: 24px;
+    }
+    &:not(:last-of-type) {
+      margin-right: 8px;
+    }
+    &.add-button,
+    &.edit-button,
+    &.delete-button {
+      margin-left: auto;
+      width: 32px;
+      height: 32px;
+    }
+    &.add-button {
+      background: url("../../assets/add.svg") no-repeat center;
+      background-size: contain;
+      &:hover,
+      &:active,
+      &:focus {
+        background: url("../../assets/add_hover.svg") no-repeat center;
+        background-size: contain;
+      }
+    }
+
+    &.edit-button {
+      background: url("../../assets/edit.svg") no-repeat center;
+      background-size: contain;
+      &:hover,
+      &:active,
+      &:focus {
+        background: url("../../assets/edit_hover.svg") no-repeat center;
+        background-size: contain;
+      }
+    }
+
+    &.delete-button {
+      background: url("../../assets/delete.svg") no-repeat center;
+      background-size: contain;
+      &:hover,
+      &:active,
+      &:focus {
+        background: url("../../assets/delete_hover.svg") no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+
+  > .cweb-section-header {
+    @include flexbox-horizontal(center, space-between);
+    border-bottom: 1px solid $color-divider;
+    width: 100%;
+    padding: 18px 24px;
+  }
+
+  > .cweb-section-footer {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    border-top: 1px solid #eeeeee;
+    width: 100%;
+    padding: 1rem 24px 1rem 24px;
+
+    img {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}