impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/DateRangePicker/DateRangePicker.styles.scss

@@ -1,635 +0,0 @@
-@import "../../styles/index.scss";
-
-.impact-portal-container {
-  position: absolute;
-  z-index: 9999;
-}
-
-.impact-dateRangePicker-main-container {
-  display: flex;
-  font-family: $fontFamily;
-  &.label-flex-row {
-    flex-direction: row;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &.label-flex-column {
-    flex-direction: column;
-    .dateRangePicker-label {
-      margin-bottom: 6px;
-    }
-  }
-
-  .dateRangePicker-label {
-    font-family: $fontFamily;
-    color: $textButtonFontColor;
-    font-size: 12px;
-    line-height: 18px;
-    font-weight: $normalFontWeight;
-  }
-
-  .dateRangePicker-container {
-    position: relative;
-    width: 240px;
-  }
-  .dateRangePicker-input-container {
-    box-sizing: border-box;
-    display: flex;
-    width: 100%;
-    height: 32px;
-
-    &:hover .dateRangePicker-input-start-date {
-      border: 1px solid $primaryColor;
-      border-right: none;
-    }
-
-    &:hover .dateRangePicker-input-end-date {
-      border: 1px solid $primaryColor;
-      border-left: none;
-    }
-
-    .dateRangePicker-input-start-date {
-      font-family: $fontFamily;
-      font-weight: $normalFontWeight;
-      // color: #c3c8d4;
-      font-size: 14px;
-      flex: 0.8 1 0;
-      width: 100%;
-      box-sizing: border-box;
-      padding-left: 12px;
-      border: 1px solid $deactivateColor;
-      border-right: none;
-      border-radius: 8px 0 0 8px;
-      // @media screen and (max-width: 1399px) and (min-width: 1200px) {
-      //   padding-left: 10px;
-      //   background-size: 13px;
-      //   font-size: 14px;
-      // }
-      &:focus {
-        outline: none;
-      }
-
-      &:focus::placeholder {
-        color: $primaryColor;
-      }
-    }
-
-    .dateRangePicker-input-end-date {
-      font-family: $fontFamily;
-      font-weight: $normalFontWeight;
-      // color: #c3c8d4;
-      font-size: 14px;
-      flex: 1 1 0;
-      width: 100%;
-      box-sizing: border-box;
-      // padding-left: 12px;
-      border: 1px solid $deactivateColor;
-      border-left: none;
-      border-radius: 0 8px 8px 0;
-      // background: url("../../assets/calendar.svg") no-repeat;
-      background-color: #fff;
-      background-position: center right 12px;
-      @media screen and (max-width: 1399px) and (min-width: 1200px) {
-        padding-left: 10px;
-        background-position: center right 10px;
-        background-size: 13px;
-      }
-      &:focus {
-        outline: none;
-      }
-
-      &:focus::placeholder {
-        color: $primaryColor;
-      }
-    }
-  }
-
-  .dateRangePicker-input-disabled {
-    &:hover .dateRangePicker-input-start-date {
-      border: 1px solid $disabledSecondaryBorder;
-      border-right: none;
-    }
-
-    &:hover .dateRangePicker-input-end-date {
-      border: 1px solid $disabledSecondaryBorder;
-      border-left: none;
-    }
-    .dateRangePicker-input-start-date {
-      border-top: 1px solid $disabledSecondaryBorder;
-      border-left: 1px solid $disabledSecondaryBorder;
-      border-bottom: 1px solid $disabledSecondaryBorder;
-      background-color: $inactiveInputBackground;
-      pointer-events: none !important;
-      &:hover {
-        border: 1px solid $disabledSecondaryBorder;
-      }
-    }
-
-    .dateRangePicker-input-end-date {
-      background-color: $inactiveInputBackground;
-      border-top: 1px solid $disabledSecondaryBorder;
-      border-right: 1px solid $disabledSecondaryBorder;
-      border-bottom: 1px solid $disabledSecondaryBorder;
-      pointer-events: none !important;
-      &:hover {
-        border: 1px solid $disabledSecondaryBorder;
-      }
-    }
-  }
-
-  .impact-dateRangePicker-error {
-    &:hover .dateRangePicker-input-start-date {
-      border: 1px solid red;
-      border-right: none;
-    }
-
-    &:hover .dateRangePicker-input-end-date {
-      border: 1px solid red;
-      border-left: none;
-    }
-
-    .dateRangePicker-input-start-date {
-      border-top: 1px solid red;
-      border-left: 1px solid red;
-      border-bottom: 1px solid red;
-
-      &:focus::placeholder {
-        color: red;
-      }
-    }
-
-    .dateRangePicker-input-end-date {
-      border-top: 1px solid red;
-      border-right: 1px solid red;
-      border-bottom: 1px solid red;
-
-      &:focus::placeholder {
-        color: red;
-      }
-    }
-  }
-}
-
-.impact-dateRangePicker-full-width-main-container {
-  .dateRangePicker-container {
-    width: 100%;
-  }
-}
-
-.impact-dateRangePicker-dropdown-container {
-  position: absolute;
-  top: 35px;
-  left: 0;
-  display: flex;
-  flex-direction: row;
-  width: auto; //448px;
-  background-color: #fff;
-  border: none;
-  border-radius: 8px;
-  box-shadow: 0px 1px 6px 0px #00000029;
-  z-index: 9999;
-
-  .dateRangePicker-left-container {
-    width: 450px;
-    .DayPicker {
-      background-color: blue;
-      width: 432px !important;
-      height: fit-content;
-      & > div {
-        width: 432px;
-        height: inherit;
-        & > div {
-          width: 432px !important;
-          height: inherit;
-        }
-      }
-    }
-
-    .DayPicker__withBorder {
-      box-shadow: none;
-      border-radius: unset;
-    }
-
-    .DayPicker__horizontal {
-      background: transparent;
-    }
-
-    .CalendarMonth_caption {
-      font-family: $fontFamily;
-      font-weight: $normalFontWeight;
-      font-size: 14px;
-      color: $mainFontColor;
-      padding-bottom: 30px;
-    }
-
-    .DayPicker_weekHeader_li small {
-      line-height: 20px;
-    }
-
-    .DayPicker_weekHeader_li {
-      display: inline-block;
-      text-align: center;
-      margin-left: 5px;
-      width: 20px !important;
-    }
-    .DayPicker_weekHeader {
-      left: 0px;
-      padding: 0px 12px;
-      width: 269px;
-      top: 50px;
-      ul {
-        font-family: $fontFamily;
-        font-size: 12px;
-        font-weight: 400;
-        padding-left: 1px;
-      }
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: -2px;
-        left: 15px;
-        width: 70%;
-        height: 1px;
-        background-color: $darkGrayColor;
-      }
-    }
-
-    // date picker navigation styles
-
-    .DayPickerNavigation {
-      position: relative;
-      z-index: 2;
-    }
-    .DayPickerNavigation__horizontal {
-      height: 0;
-    }
-    .DayPickerNavigation__verticalScrollable_prevNav {
-      z-index: 1;
-    }
-    .DayPickerNavigation__verticalDefault {
-      position: absolute;
-      width: 100%;
-      height: 52px;
-      bottom: 0;
-      left: 0;
-    }
-    .DayPickerNavigation__verticalScrollableDefault {
-      position: relative;
-    }
-    .DayPickerNavigation__bottom {
-      height: auto;
-    }
-    .DayPickerNavigation__bottomDefault {
-      -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-      display: -webkit-box;
-      display: -moz-box;
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-      -webkit-justify-content: space-between;
-      justify-content: space-between;
-    }
-    .DayPickerNavigation_button {
-      cursor: pointer;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-      border: 0;
-      padding: 0;
-      margin: 0;
-    }
-    .DayPickerNavigation_button__default {
-      background: url("../../assets/accordion-chevron.svg") no-repeat;
-      /* width: 16px;
-      height: 16px; */
-      background-size: 12px;
-      transform: rotate(90deg);
-    }
-    .DayPickerNavigation_button__default svg {
-      display: none;
-    }
-    .DayPickerNavigation_button__default:focus,
-    .DayPickerNavigation_button__default:hover {
-      /* border: 1px solid #c4c4c4 */
-    }
-    .DayPickerNavigation_button__default:active {
-      /* background: #f2f2f2 */
-    }
-    .DayPickerNavigation_button__disabled {
-      /* cursor: default;
-    border: 1px solid #f2f2f2 */
-      opacity: 0.8;
-    }
-    .DayPickerNavigation_button__disabled:focus,
-    .DayPickerNavigation_button__disabled:hover {
-      /* border: 1px solid #f2f2f2 */
-    }
-    .DayPickerNavigation_button__disabled:active {
-      /* background: 0 0 */
-    }
-    .DayPickerNavigation_button__horizontalDefault {
-      position: absolute;
-      top: 25px;
-      line-height: 0.78;
-      border-radius: 3px;
-      padding: 6px 6px;
-    }
-    .DayPickerNavigation_bottomButton__horizontalDefault {
-      position: static;
-      margin: -10px 22px 30px;
-    }
-    .DayPickerNavigation_leftButton__horizontalDefault {
-      left: 20px;
-    }
-    .DayPickerNavigation_rightButton__horizontalDefault {
-      transform: rotate(-90deg);
-      right: 15px;
-    }
-    .DayPickerNavigation_button__verticalDefault {
-      padding: 5px;
-      background: #fff;
-      box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
-      position: relative;
-      display: inline-block;
-      text-align: center;
-      height: 100%;
-      width: 50%;
-    }
-    .DayPickerNavigation_nextButton__verticalDefault {
-      border-left: 0;
-    }
-    .DayPickerNavigation_nextButton__verticalScrollableDefault,
-    .DayPickerNavigation_prevButton__verticalScrollableDefault {
-      width: 100%;
-    }
-    .DayPickerNavigation_svg__horizontal {
-    }
-    .DayPickerNavigation_svg__vertical {
-      height: 42px;
-      width: 42px;
-      fill: #484848;
-    }
-    .DayPickerNavigation_svg__disabled {
-      fill: #f2f2f2;
-    }
-
-    .CalendarMonth {
-      background: transparent;
-    }
-
-    .CalendarMonth_table {
-      border-collapse: separate;
-      border-spacing: 5px 6px;
-      padding-top: 8px;
-    }
-
-    .CalendarDay__default {
-      font-family: $fontFamily;
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 16.39px;
-      color: $mainFontColor;
-      border: none;
-      width: 20px !important;
-      height: 20px !important;
-      padding-top: 2px;
-    }
-
-    .CalendarDay__selected_span,
-    .CalendarDay__hovered_span {
-      background: #e7eaff;
-      position: relative;
-
-      &:after {
-        position: absolute;
-        content: "";
-        top: 0;
-        bottom: 0;
-        left: -4px;
-        right: -4px;
-        background: #eceefd;
-        z-index: -1;
-      }
-    }
-
-    .CalendarDay__default:hover {
-      background: #eceefd !important;
-      color: $primaryColor;
-      border-radius: 8px;
-      outline: 1px solid #b3bdf8;
-    }
-
-    .CalendarDay__selected,
-    .CalendarDay__selected:active,
-    .CalendarDay__selected:hover {
-      background: $primaryColor !important;
-      color: $whiteColor;
-      border-radius: 8px;
-      border: none;
-    }
-
-    .CalendarDay__blocked_out_of_range {
-      color: #c3c8d4 !important;
-    }
-
-    .dateRangePicker-footer-container {
-      position: relative;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px 19px;
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 10px;
-        height: 1px;
-        width: 95%;
-        background-color: $darkGrayColor;
-      }
-
-      .dateRangePicker-footer-label-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 4px;
-        color: $textButtonFontColor;
-        font-size: 12px;
-        line-height: 18px;
-        font-weight: $normalFontWeight;
-
-        .dateRangePicker-footer-value {
-          color: $darkColor;
-          font-weight: 600;
-        }
-      }
-
-      .dateRangePicker-buttons-right-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-      }
-    }
-  }
-
-  .dateRangePicker-show-range-main-container {
-    position: relative;
-    width: 100%;
-    z-index: 1;
-    padding: 16px 8px;
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: 20px;
-      left: 0;
-      width: 1px;
-      height: 85%;
-      background-color: $darkGrayColor;
-    }
-    .dateRangePicker-shortcut-heading {
-      text-align: center;
-      color: $textButtonFontColor;
-      font-size: 12px;
-      line-height: 18px;
-      font-weight: $normalFontWeight;
-      margin-bottom: 8px;
-    }
-
-    .dateRangePicker-shortcut-list {
-      .ia-radioButton {
-        margin: 0 !important;
-      }
-
-      .ia-radioButton .MuiTypography-root {
-        font-size: 12px;
-      }
-    }
-  }
-
-  .showWeekNumbers {
-    .DayPicker_weekHeader ul {
-      padding-left: 10px;
-    }
-
-    .DayPickerNavigation_rightButton__horizontalDefault {
-      right: 3px;
-    }
-
-    .DayPicker_weekHeader::after {
-      left: 20px;
-    }
-    .CalendarMonth_table {
-      position: relative;
-      left: 10px;
-      padding-top: 4px;
-    }
-    // for side border
-    .CalendarMonth_table tbody {
-      position: relative;
-    }
-
-    .CalendarMonth_table tbody:before {
-      content: "";
-      position: absolute;
-      top: 0px;
-      left: -5px;
-      width: 1px;
-      height: 130px;
-      background-color: $darkGrayColor;
-      z-index: 1;
-    }
-
-    .CalendarDayWeekNumber {
-      position: absolute;
-      left: -30px;
-      display: none;
-      font-family: $fontFamily;
-      font-weight: $normalFontWeight;
-      font-size: 11px;
-      color: #757575;
-      display: block;
-      border-right: none !important; //0.5px solid #1d1d1d;
-      width: 18px;
-    }
-    .suppress-click-on-week-number {
-      pointer-events: none;
-    }
-  }
-}
-
-.showRangeSelector {
-  width: 550px;
-}
-
-.date-range-picker-show-month-year-select-container {
-  position: relative;
-  top: -6px; //-6
-  left: 20px;
-  width: 150px;
-  z-index: 9999;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .date-range-picker-month-select-container {
-    width: 80px;
-    .ia-select-styled-dropdown-main-button {
-      min-width: 80px;
-      width: 80px;
-      .ia-select-button-text-full-width {
-        width: 80px;
-      }
-    }
-
-    .ia-select-button-clear-icon {
-      display: none;
-    }
-
-    .ia-select-chevron-icon {
-      width: 10px;
-      margin-left: -50px;
-      display: none;
-    }
-    .ia-select-button-text-span {
-      width: 60px;
-    }
-  }
-
-  .date-range-picker-year-select-container {
-    width: 66px;
-
-    .ia-select-styled-dropdown-main-button {
-      min-width: 66px;
-      width: 66px;
-      .ia-select-button-text-full-width {
-        width: 66px;
-      }
-    }
-
-    .ia-select-button-clear-icon {
-      display: none;
-    }
-
-    .ia-select-chevron-icon {
-      width: 10px;
-      margin-left: -110px;
-      display: none;
-    }
-  }
-}
-
-// css added to select dropdown
-
-.date-range-picker-month-select-dropdown,
-.date-range-picker-year-select-dropdown {
-  z-index: 9999;
-  min-width: 115px !important;
-  width: 115px !important;
-}

package/src/components/DateRangePicker/dateRangePickerCustom.js

@@ -1,22 +0,0 @@
-import React from "react";
-import { rangeSelectorTypes } from "./utils";
-import { RadioButtonGroup } from "../RadioButtonGroup";
-
-export default function DateRangePickerCustom({
-  handleRangeSelectorChange,
-  selectedRange,
-}) {
-  return (
-    <div className="dateRangePicker-show-range-main-container">
-      <div className="dateRangePicker-shortcut-heading">Date Range</div>
-      <div className="dateRangePicker-shortcut-list">
-        <RadioButtonGroup
-          className="dateRangePicker-shortcut-list-item"
-          options={rangeSelectorTypes}
-          onChange={handleRangeSelectorChange}
-          value={selectedRange}
-        />
-      </div>
-    </div>
-  );
-}