@luscii-healthtech/web-ui 0.1.0

package/src/components/Datepicker/Datepicker.js

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,331 @@
+@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/icons/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/icons/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;
+    }
+  }
+}