@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/Datepicker/Datepicker.js

@@ -1,96 +0,0 @@
-import React, { Component } from "react";
-import ReactDatePicker from "react-datepicker";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import moment from "moment";
-
-import Button from "../Button/Button";
-
-import "react-datepicker/dist/react-datepicker.css";
-import "./Datepicker.scss";
-
-export default class Datepicker extends Component {
-  handleCloseButtonClick = (event) => {
-    event.preventDefault();
-
-    this.datepickerRef.setOpen(false);
-  };
-
-  getDateFormat = () => {
-    const { showTimeSelect, formatDateWithTime = false } = this.props;
-
-    return showTimeSelect || formatDateWithTime ? "L LT" : "L";
-  };
-
-  render() {
-    const {
-      className,
-      hasCloseButton,
-      closeButtonText,
-      adjustDateOnChange = true,
-      showMonthDropdown = true,
-      showYearDropdown = true,
-      shouldCloseOnSelect = false,
-      allowSameDay = false,
-      minDate,
-      maxDate,
-      isDisabled = false,
-      selected,
-      ...otherProps
-    } = this.props;
-
-    const dateFormat = this.getDateFormat();
-    const pickerClassName = classNames("cweb-datepicker text-slate-700 text-sm", className);
-    const getCloseButtonText = () => {
-      if (!closeButtonText) {
-        return "OK";
-      }
-      return closeButtonText;
-    };
-
-    return (
-      <ReactDatePicker
-        {...otherProps}
-        adjustDateOnChange={adjustDateOnChange}
-        ref={(element) => (this.datepickerRef = element)}
-        className={pickerClassName}
-        calendarClassName="cweb-datepicker-calendar"
-        shouldCloseOnSelect={shouldCloseOnSelect}
-        allowSameDay={allowSameDay}
-        closeButtonText
-        minDate={minDate}
-        maxDate={maxDate}
-        disabled={isDisabled}
-        showMonthDropdown={showMonthDropdown}
-        showYearDropdown={showYearDropdown}
-        dateFormat={dateFormat}
-        timeFormat="HH:mm"
-        selected={selected}
-        dropdownMode="select"
-      >
-        <div className="m-2">
-          {hasCloseButton ? (
-            <Button
-              text={getCloseButtonText()}
-              className="w-full cweb-datepicker-close-button"
-              onClick={this.handleCloseButtonClick}
-            />
-          ) : null}
-        </div>
-      </ReactDatePicker>
-    );
-  }
-}
-
-Datepicker.propTypes = {
-  className: PropTypes.string,
-  selected: PropTypes.object,
-  hasCloseButton: PropTypes.bool,
-  closeButtonText: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  showMonthDropdown: PropTypes.bool,
-  showYearDropdown: PropTypes.bool,
-  minDate: PropTypes.instanceOf(moment),
-  maxDate: PropTypes.instanceOf(moment),
-  isDisabled: PropTypes.bool,
-};

package/src/components/Datepicker/Datepicker.scss

@@ -1,332 +0,0 @@
-@import "../../styles/colors";
-@import "../../styles/typography";
-@import "../../styles/layout";
-@import "../../styles/utils";
-
-.cweb-datepicker {
-  width: 182px;
-  height: $default-height;
-  border: 1px solid $color-border;
-  border-radius: $default-border-radius;
-  background-color: $color-white;
-  outline: none;
-  padding: 12px 12px 11px 12px;
-
-  input.cweb-datepicker {
-    font-size: 14px;
-  }
-
-  &::placeholder {
-    color: $color-placeholder;
-  }
-
-  &:-ms-input-placeholder {
-    color: $color-placeholder !important;
-  }
-
-  &::-ms-input-placeholder {
-    color: $color-placeholder;
-  }
-}
-
-.react-datepicker-popper {
-  z-index: 5;
-
-  &[data-placement^="bottom"] {
-    margin-top: 4px;
-
-    .react-datepicker__triangle {
-      border-bottom-color: $color-white;
-      margin-top: -4px;
-    }
-  }
-
-  &[data-placement^="top"] {
-    margin-bottom: 4px;
-
-    .react-datepicker__triangle {
-      border-top-color: $color-white;
-      margin-bottom: -4px;
-    }
-  }
-}
-
-.cweb-datepicker-calendar {
-  @include cweb-box-shadow(0, 4px, 8px, rgba(0, 0, 0, 0.2));
-
-  $header-navigation-height: 19px;
-
-  padding: 0;
-  border: 1px solid $color-border;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-
-  .react-datepicker__triangle {
-    left: 10px;
-    border: 6px solid transparent;
-  }
-
-  .react-datepicker__navigation {
-    top: $header-navigation-height;
-    width: $header-navigation-height;
-    height: 10px;
-    background: url("../../assets/arrow-down-icon.svg") no-repeat center;
-
-    &.react-datepicker__navigation--previous {
-      border: 0;
-      transform: rotate(90deg);
-    }
-
-    &.react-datepicker__navigation--next {
-      border: 0;
-      transform: rotate(-90deg);
-    }
-  }
-
-  .react-datepicker__time-container {
-    .react-datepicker__time-box {
-      width: auto;
-    }
-
-    .react-datepicker__time-list {
-      overflow-x: hidden;
-    }
-
-    .react-datepicker__time-list-item {
-      @include text(14px, $header-navigation-height, $color-slate-700);
-      @include flexbox-horizontal(center, center);
-
-      height: 40px !important;
-      padding: 0 !important;
-
-      &.react-datepicker__time-list-item--selected {
-        color: $color-white;
-        background-color: $color-primary !important;
-        position: relative;
-
-        &:hover {
-          background-color: $color-primary-emphasis !important;
-        }
-
-        &:before {
-          $triangle-width: 6px;
-
-          content: "";
-          position: absolute;
-          bottom: -($triangle-width / 2);
-          right: 0;
-          left: initial;
-          top: initial;
-          border-style: solid;
-          border-width: $triangle-width $triangle-width $triangle-width 0;
-          border-color: transparent $color-white transparent transparent;
-          transform: rotate(-135deg);
-        }
-      }
-    }
-  }
-
-  .react-datepicker__header {
-    padding-top: 0;
-    border: none;
-    background-color: $color-white;
-    font-size: 14px;
-
-    .react-datepicker__current-month {
-      @include text(14px, $header-navigation-height, $color-body, 600);
-      @include vertical-padding(16px);
-
-      text-transform: capitalize;
-    }
-
-    .react-datepicker__header__dropdown {
-      margin-bottom: 15px;
-    }
-
-    .react-datepicker__month-select,
-    .react-datepicker__year-select {
-      @include text(14px, $header-navigation-height, $color-slate-700);
-
-      height: $default-height;
-      padding-left: 12px;
-      border-radius: 4px;
-      background: $color-white url("../../assets/chevron-double.svg") no-repeat
-        right 8px center;
-      text-transform: capitalize;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      border: 1px solid $color-border;
-      transition: all 0.4s ease;
-
-      &:hover,
-      &:focus {
-        color: $color-primary;
-        border-color: $color-primary;
-        cursor: pointer;
-      }
-    }
-
-    .react-datepicker__month-select {
-      min-width: 172px;
-    }
-
-    .react-datepicker__year-select {
-      min-width: 107px;
-    }
-
-    &.react-datepicker__header--time {
-      @include flexbox-horizontal(center, center);
-
-      height: 52px;
-      padding: 0;
-      background-color: $color-chrome;
-    }
-  }
-
-  .react-datepicker__day-names,
-  .react-datepicker__month {
-    margin: 0.4rem;
-  }
-
-  .react-datepicker__month {
-    padding-bottom: 8px;
-  }
-
-  .react-datepicker__day-names,
-  .react-datepicker__week {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .react-datepicker__day-name,
-  .react-datepicker__day {
-    @include text(14px, $header-navigation-height, $color-slate-700);
-
-    width: 41px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .react-datepicker__day-name {
-    height: 19px;
-    text-transform: capitalize;
-  }
-
-  .react-datepicker__day {
-    height: 30px;
-    border-radius: 4px;
-    transition: background-color 0.3s ease-in-out;
-
-    &.react-datepicker__day--highlighted {
-      background-color: $color-white;
-      color: $color-primary;
-      position: relative;
-
-      &:after {
-        content: "";
-        position: absolute;
-        width: 4px;
-        height: 4px;
-        border-radius: 50%;
-        background-color: $color-primary;
-        left: 0;
-        right: 0;
-        bottom: 2px;
-        margin: 0 auto;
-      }
-
-      &.react-datepicker__day--selected,
-      &.react-datepicker__day--keyboard-selected,
-      &.react-datepicker__day--in-range {
-        &:after {
-          background-color: $color-white;
-        }
-      }
-    }
-
-    &.react-datepicker__day--today {
-      font-weight: bold;
-    }
-
-    &.react-datepicker__day--in-selecting-range {
-      background-color: $color-emphasis-background;
-    }
-
-    &:hover {
-      background-color: $color-slate-50;
-    }
-
-    &.react-datepicker__day--in-range,
-    &.react-datepicker__day--selected {
-      color: $color-white;
-      background-color: $color-primary;
-
-      &:hover {
-        background-color: $color-primary-emphasis;
-      }
-    }
-
-    &.react-datepicker__day--keyboard-selected {
-      color: $color-white;
-      background-color: $color-primary-emphasis;
-    }
-
-    &.react-datepicker__day--selected {
-      position: relative;
-    }
-
-    &.react-datepicker__day--range-start {
-      position: relative;
-
-      &:before {
-        $triangle-width: 6px;
-
-        content: "";
-        position: absolute;
-        top: -($triangle-width / 2);
-        left: 0;
-        bottom: initial;
-        right: initial;
-        border-style: solid;
-        border-width: $triangle-width $triangle-width $triangle-width 0;
-        border-color: transparent $color-white transparent transparent;
-        transform: rotate(45deg);
-      }
-    }
-
-    &.react-datepicker__day--range-end {
-      position: relative;
-
-      &:before {
-        $triangle-width: 6px;
-
-        content: "";
-        position: absolute;
-        bottom: -($triangle-width / 2);
-        right: 0;
-        left: initial;
-        top: initial;
-        border-style: solid;
-        border-width: $triangle-width $triangle-width $triangle-width 0;
-        border-color: transparent $color-white transparent transparent;
-        transform: rotate(-135deg);
-      }
-    }
-
-    &.react-datepicker__day--disabled {
-      color: $color-border;
-
-      &:hover {
-        background-color: $color-white;
-      }
-    }
-
-    &.react-datepicker__day--outside-month {
-      color: $color-border;
-    }
-  }
-}