@capillarytech/blaze-ui 6.3.0 → 6.4.0

package/CapMobileDateRangePicker/styles.scss

@@ -1,221 +1,225 @@
-@import '../styles/_variables';
-
-$clsPrefix: 'cap-mobile-date-range-picker';
-
-$base-date-color: $cap-secondary-base;
-$base-date-color-range: $cap-pale-grey;
-$compare-date-color: $cap-pink;
-$compare-date-color-range: rgba($cap-pink, 0.1);
-
-@mixin cta-button {
-  color: $FONT_COLOR_05 !important;
-  cursor: pointer !important;
-  font-size: $FONT_SIZE_M !important;
-}
-
-@mixin date-range-colors($color, $range-color) {
-  .ant-picker-cell-range-start,
-  .ant-picker-cell-range-end {
-    .ant-picker-cell-inner {
-      background-color: $color;
-    }
-
-    &::before {
-      background-color: $range-color;
-    }
-  }
-
-  .ant-picker-cell-in-range::before {
-    background-color: $range-color;
-  }
-
-  .ant-picker-cell-today {
-    .ant-picker-cell-inner::before {
-      border-color: $color;
-    }
-  }
+@mixin highlight-inputbox($color) {
+  border: 1px solid $color;
+  border-radius: 0.285rem;
+  height: 32px;
 }
-
-.#{$clsPrefix} {
-  //modal overrides
-  &-modal {
-    &-header {
-      margin-bottom: $CAP_SPACE_12 !important;
-    }
-
-    &-footer {
+$modal-content-height: 38vh;
+$daypicker-width: 80vw;
+$base-date-color: rgb(36, 102, 234);
+$base-date-color-range: rgb(233, 240, 254);
+$compare-date-color: rgb(229, 31, 163);
+$compare-date-color-range: rgba(229, 31, 163, 0.1);  
+.mobile-view{
+  .mobile-date-range-picker-modal{
+    .modal-footer {
       display: flex;
       justify-content: flex-end;
-      width: inherit;
-      padding: 1.714rem;
-
-      &-cancel-button {
-        @include cta-button;
-
-        margin-right: $CAP_SPACE_24;
+      padding-right: 10px;
+    }
+    .ant-modal-content {
+      .ant-modal-body {
+        .cap-divider-v2 {
+          margin-top: 22px;
+          margin-bottom: 12px;
+        }
+        .compare-mobile-date-picker {
+          .datepicker {
+            .datepicker-wheel {
+              background: $compare-date-color-range;
+            }
+            .datepicker-scroll>li.selected {
+              color: $compare-date-color;
+            }
+          }
+        }
+        .datepicker {
+          position: static;
+          .datepicker-content {
+            background: #fff;
+            padding: 0.75em 0.25em;
+          }
+          .datepicker-viewport {
+            height: calc(#{$modal-content-height} - 12px);
+          }
+          .datepicker-scroll>li {
+            font-family: 'Roboto', sans-serif;
+            font-size: 14px;
+          }
+          .datepicker-scroll>li.selected {
+            color: $base-date-color;
+          }
+          .datepicker-wheel {
+            border-top: 0;
+            border-bottom: 0;
+            background: $base-date-color-range;
+          }
+        }
       }
-
-      &-done-button {
-        @include cta-button;
+      .ant-modal-footer {
+        padding-top: 1.714rem;
       }
     }
   }
-
-  &-divider {
-    margin: $CAP_SPACE_12 0;
-  }
-
-  //read-only inputs overrides
-  &-inputs {
+  .mobile-dateRange-picker-inputs{
     display: flex;
     align-items: center;
-
-    &-date-range-hyphen {
-      margin-inline: $CAP_SPACE_08;
+    .cap-column-v2.ant-col-11 {
+      width: 45%;
     }
-
-    &-date-range-hyphen-vertical-align {
-      margin-top: 1rem;
+    .cap-column-v2.ant-col-2 {
+      width: 2%;
     }
-
-    &-label {
-      margin-bottom: $CAP_SPACE_04;
+    input{
+      margin-top: 5px;
+      max-width: 100px;
     }
-
-    &-focused {
-      :global {
-        .ant-input {
-          border: 1px solid $CAP_G01;
+    .focused .ant-input{
+      border: 1px solid #091e42;
+    }
+    .ant-input[disabled]{
+      background-color: transparent;
+      color: rgb(9, 30, 66);
+      -webkit-text-fill-color: rgb(9, 30, 66) !important;
+    }
+    .placeholder-text{
+      font-size: 12px;
+      color: rgb(94, 108, 132);
+    }
+    .date-range-hyphen{
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+    .vertical-align{
+      margin-top: 28px;
+    }
+    .ant-input-affix-wrapper .ant-input:not(:last-child){
+      padding-right : 0;
+    }
+  }
+  .calender-only {
+    // height: $modal-content-height ;
+    margin-top: 8px;
+    .DayPicker_transitionContainer {
+      // height: $modal-content-height ;
+      max-width: $daypicker-width;
+    }
+    .DayPicker {
+      max-width: $daypicker-width;
+    }
+    .DateRangePicker {
+      .ant-select-dropdown.cap-select-v2-dropdown {
+        .ant-select-dropdown-menu {
+          li {
+            font-size: 14px;
+            padding: 4px 12px;
+            height: 36px;
+            line-height: 30px;
+          }
         }
       }
     }
-
-    :global {
-      .ant-input {
-        font-size: $FONT_SIZE_S;
+  }
+  .DateRangePicker_picker {
+    .year-selector .cap-select-v2 .ant-select-selection {
+      height: 28px;
+      .ant-select-selection__rendered {
+        line-height: 26px;
+      }
+      .ant-select-selection-selected-value {
+        font-size: 14px;
       }
     }
   }
-
-  //CTA links overrides
-  &-reset-button {
-    @include cta-button;
-
-    margin-top: 1rem;
+  .calender-only.compare-mobile-date-range-picker .DateRangePicker_picker {
+    .CalendarDay__selected .calendar-day-content span {
+      background: $compare-date-color;
+    }
+    .CalendarDay__selected_span .calendar-day-content, .DateRangePicker_picker .CalendarDay__hovered_span .calendar-day-content {
+      background: $compare-date-color-range;
+    }
+    .CalendarDay__selected_start .calendar-day-content {
+      background: linear-gradient(90deg, #ffffff 50%, $compare-date-color-range 50%);
+    }
+    .CalendarDay__selected_end .calendar-day-content {
+      background: linear-gradient(90deg, $compare-date-color-range 50%, #ffffff 50%);
+    }
   }
-
-  &-switch-label {
-    @include cta-button;
-
+  .control-section{
+    .action-item{
+      padding-top: 8%;
+      margin-left: -6%;
+      width: 16%;
+      text-align: right;
+    }
+    .cap-column-v2.ant-col-11 {
+      width: 40%;
+      min-width: 100px;
+    }
+    .cap-column-v2.ant-col-2 {
+      width: 2%;
+    }
+  }
+  .toggle-text{
     text-align: right;
     margin: 0;
   }
-
-  //calender-only overrides for date-range-picker
-  &-calender-only {
-    :global {
-      .ant-picker-dropdown {
-        position: static;
-        width: 100%;
-
-        .ant-picker-panel-container {
-          border: none;
-          box-shadow: none;
-          background: transparent;
-          width: inherit;
-
-          .ant-picker-panel-layout {
-            width: inherit;
-
-            > div:first-of-type {
-              width: inherit;
-            }
-
-            .ant-picker-panels {
-              width: inherit;
-
-              .ant-picker-panel {
-                width: inherit;
-
-                .ant-picker-date-panel {
-                  width: inherit;
-
-                  @include date-range-colors($base-date-color, $base-date-color-range);
-                }
-
-                .ant-picker-header-view {
-                  pointer-events: none;
-                }
-              }
-            }
-          }
-        }
+  .DayPicker_weekHeader, .CalendarMonth {
+    padding: 0 6px !important;
+  }
+  .CalendarMonth {
+    .CalendarMonth_caption {
+      padding: 6px 0 10px;
+      line-height: 20px;
+      font-weight: 400;
+      font-size: 14px;
+      color: rgb(9, 30, 66);
+      .month-name {
+        padding-top: 3px;
+      }
+      .ant-select-lg {
+        width: 75px;
       }
     }
   }
-
-  //scroller-datepicker overrides for react-mobile-datepicker
-  &-scroller-datepicker {
-    margin-top: $CAP_SPACE_16;
-
-    :global {
-      .datepicker {
-        position: static;
-        background: transparent;
-
-        .datepicker-content {
-          background: transparent;
-          padding: 0.75em 0.25em;
-        }
-
-        .datepicker-scroll > li {
-          font-family: $FONT_FAMILY;
-          font-size: $FONT_SIZE_M;
-        }
-
-        .datepicker-scroll > li.selected {
-          color: $base-date-color;
-        }
-
-        .datepicker-wheel {
-          border-top: 0;
-          border-bottom: 0;
-          background: $base-date-color-range;
-        }
-      }
+  .DateRangePicker_picker {
+    left: -16px !important;
+    .calendar-day-content{
+      padding: 0 5px;
+    }  
+    .DayPicker__withBorder{
+      box-shadow: none;
+    }
+    .month-nav-btn {
+      top: 6px;
+      margin-left: -2px;
+      margin-right: 14px;
+    }
+    .CalendarDay__selected_span .calendar-day-content, .DateRangePicker_picker .CalendarDay__hovered_span .calendar-day-content {
+      background: rgb(233, 240, 254),;
+    }
+    .CalendarDay__selected_start .calendar-day-content {
+      background: linear-gradient(90deg, #ffffff 50%, rgb(233, 240, 254), 50%);
+    }
+    .CalendarDay__selected_end .calendar-day-content {
+      background: linear-gradient(90deg, rgb(233, 240, 254), 50%, #ffffff 50%);
     }
   }
+}
 
-  //different color while comparing
-  &-compare-mobile-date-picker {
-    :global {
-      .datepicker {
-        .datepicker-scroll > li.selected {
-          color: $compare-date-color;
-        }
-
-        .datepicker-wheel {
-          background: $compare-date-color-range;
-        }
-      }
+@media screen and (max-height: 930px) {
+  .calender-only {
+    height: 32vh !important;
+    .DayPicker_transitionContainer {
+      height: 32vh !important;
     }
   }
+}
 
-  &-compare-mobile-date-range-picker {
-    :global {
-      .ant-picker-dropdown {
-        .ant-picker-panel-container {
-          .ant-picker-panel-layout {
-            .ant-picker-panels {
-              .ant-picker-panel {
-                .ant-picker-date-panel {
-                  @include date-range-colors($compare-date-color, $compare-date-color-range);
-                }
-              }
-            }
-          }
-        }
-      }
+@media screen and (max-height: 854px) {
+  .calender-only {
+    height: 38.5vh !important;
+    .DayPicker_transitionContainer {
+      height: 38.5vh !important;
     }
   }
-}
+}

package/CapTimeline/CapTimelineCard.d.ts

@@ -1,30 +1,7 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import './styles.scss';
-export declare const CapTimelineCard: {
-    (props: any): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        children: PropTypes.Requireable<any>;
-        className: PropTypes.Requireable<string>;
-        isSelected: PropTypes.Requireable<boolean>;
-        handleClick: PropTypes.Requireable<(...args: any[]) => any>;
-        milestoneHeader: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        milestoneDescription: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        disabled: PropTypes.Requireable<boolean>;
-        configuringMessage: PropTypes.Requireable<string>;
-        notConfiguredMessage: PropTypes.Requireable<string>;
-        alwaysShowDescription: PropTypes.Requireable<boolean>;
-        complete: PropTypes.Requireable<boolean>;
-        configError: PropTypes.Requireable<boolean>;
-        defaultConfiguringMessage: PropTypes.Requireable<string>;
-        defaultNotConfiguredMessage: PropTypes.Requireable<string>;
-        toConfigure: PropTypes.Requireable<string>;
-        completePrevSteps: PropTypes.Requireable<string>;
-        paneKey: PropTypes.Requireable<any>;
-        isLastPane: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<number>;
-    };
-};
-declare const _default: React.ComponentType<Omit<any, "intl">>;
+import type { WrappedComponentProps } from 'react-intl';
+import type { CapTimelineCardProps } from './types';
+export declare const CapTimelineCard: (props: CapTimelineCardProps & WrappedComponentProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: React.ComponentType<Omit<CapTimelineCardProps & WrappedComponentProps, "intl">>;
 export default _default;
 //# sourceMappingURL=CapTimelineCard.d.ts.map

package/CapTimeline/CapTimelineCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CapTimelineCard.d.ts","sourceRoot":"","sources":["../../components/CapTimeline/CapTimelineCard.tsx"],"names":[],"mappings":"AAOA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,eAAe,CAAC;AAMvB,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;CA0K3B,CAAC;;AAwBF,wBAAsE"}
+{"version":3,"file":"CapTimelineCard.d.ts","sourceRoot":"","sources":["../../components/CapTimeline/CapTimelineCard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAQxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAIpD,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,GAAG,qBAAqB,4CAyElF,CAAC;;AAEF,wBAA2C"}

package/CapTimeline/CapTimelineCard.js

@@ -1,19 +1,14 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Timeline } from "antd";
+import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import PropTypes from "prop-types";
+import { injectIntl } from "react-intl";
 import CapCard from "../CapCard/index.js";
-import CapIcon from "../CapIcon/index.js";
 import CapRow from "../CapRow/index.js";
 import CapTooltip from "../CapTooltip/index.js";
-import LocaleHoc from "../LocaleHoc/index.js";
-import * as styles__variables from "../styles/_variables.js";
-import './styles.css';/* empty css            */
-const { FONT_SIZE_M, CAP_G04, CAP_RED } = styles__variables;
+import messages from "./messages.js";
+import styles from "./styles.module.scss.js";
 const clsPrefix = "cap-timeline-card-v1";
 const CapTimelineCard = (props) => {
   const {
-    className,
     isSelected = false,
     handleClick = () => {
     },
@@ -25,170 +20,58 @@ const CapTimelineCard = (props) => {
     alwaysShowDescription = false,
     complete = false,
     configError = false,
-    defaultConfiguringMessage,
     paneKey,
-    isLastPane = false,
     width = 380,
-    // texts from the translation file
-    defaultNotConfiguredMessage,
-    toConfigure,
-    completePrevSteps,
-    edited
+    intl: { formatMessage }
   } = props;
+  const defaultConfiguringMessage = formatMessage(messages.defaultConfiguringMessage);
+  const defaultNotConfiguredMessage = formatMessage(messages.defaultNotConfiguredMessage);
+  const toConfigure = formatMessage(messages.toConfigure);
+  const completePrevSteps = formatMessage(messages.completePrevSteps);
   const getDescriptionForDisabled = () => {
-    if (alwaysShowDescription) {
-      return milestoneDescription;
-    }
+    if (alwaysShowDescription) return milestoneDescription;
     return notConfiguredMessage ? notConfiguredMessage : defaultNotConfiguredMessage;
   };
   const getDescriptionForEnabled = () => {
-    if (alwaysShowDescription) {
-      return milestoneDescription;
-    }
+    if (alwaysShowDescription) return milestoneDescription;
     return notConfiguredMessage ? configuringMessage : defaultConfiguringMessage;
   };
-  const getTimelineIcon = () => {
-    if (configError) {
-      return /* @__PURE__ */ jsx(CapTooltip, { title: "Warning", children: /* @__PURE__ */ jsx(
-        CapIcon,
-        {
-          style: {
-            color: CAP_RED,
-            fontSize: FONT_SIZE_M
-          },
-          type: "warning",
-          size: "l"
-        }
-      ) });
-    } else if (!complete || edited) {
-      return /* @__PURE__ */ jsx(CapTooltip, { title: "Pending", children: /* @__PURE__ */ jsx(
-        CapIcon,
-        {
-          style: {
-            color: CAP_G04,
-            fontSize: FONT_SIZE_M,
-            marginTop: "1px"
-          },
-          type: "exclamation-circle"
-        }
-      ) });
-    }
-    return /* @__PURE__ */ jsx(CapTooltip, { title: "Completed", children: /* @__PURE__ */ jsx(CapRow, { className: classNames(`${clsPrefix}-icon-parent`), children: /* @__PURE__ */ jsx(CapIcon, { type: "check" }) }) });
-  };
-  return /* @__PURE__ */ jsxs(
-    CapRow,
+  if (disabled) {
+    return /* @__PURE__ */ jsx(CapTooltip, { placement: "right", title: `${toConfigure} ${paneKey}, ${completePrevSteps}`, children: /* @__PURE__ */ jsx(CapRow, { className: styles[`${clsPrefix}-disabled-card`], onClick: handleClick, children: /* @__PURE__ */ jsxs(
+      CapCard,
+      {
+        style: { width },
+        className: classNames(
+          styles[`${clsPrefix}-card-body`],
+          styles[`${clsPrefix}-incomplete-card`],
+          configError && styles[`${clsPrefix}-warning-card`]
+        ),
+        children: [
+          milestoneHeader,
+          /* @__PURE__ */ jsx(CapRow, { className: styles[`${clsPrefix}-card-description`], children: getDescriptionForDisabled() })
+        ]
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx(CapRow, { onClick: handleClick, children: /* @__PURE__ */ jsxs(
+    CapCard,
     {
+      style: { width },
       className: classNames(
-        className,
-        "no-wrap",
-        !configError && `${clsPrefix}-division`,
-        configError && `${clsPrefix}-warning-division`
+        isSelected && styles[`${clsPrefix}-pane-selected`],
+        styles[`${clsPrefix}-enabled-card`],
+        styles[`${clsPrefix}-card-body`],
+        !complete && styles[`${clsPrefix}-incomplete-card`],
+        configError && styles[`${clsPrefix}-warning-card`]
       ),
-      type: "flex",
-      align: "middle",
-      justify: "space-between",
       children: [
-        disabled && /* @__PURE__ */ jsx(CapTooltip, { placement: "right", title: `${toConfigure} ${paneKey}, ${completePrevSteps}`, children: /* @__PURE__ */ jsx(
-          Timeline.Item,
-          {
-            dot: configError ? /* @__PURE__ */ jsx(
-              CapIcon,
-              {
-                style: {
-                  color: CAP_RED,
-                  fontSize: FONT_SIZE_M
-                },
-                type: "warning"
-              }
-            ) : /* @__PURE__ */ jsx(
-              CapIcon,
-              {
-                style: {
-                  color: CAP_G04,
-                  fontSize: FONT_SIZE_M,
-                  marginTop: "1px"
-                },
-                type: "exclamation-circle"
-              }
-            ),
-            className: classNames(
-              `${clsPrefix}-disabled-timeline-item`,
-              isLastPane && `${clsPrefix}-last-pane`
-            ),
-            children: /* @__PURE__ */ jsx(CapRow, { className: classNames(`${clsPrefix}-disabled-card`), onClick: handleClick, children: /* @__PURE__ */ jsxs(
-              CapCard,
-              {
-                style: { width },
-                className: classNames(
-                  `${clsPrefix}-card-body`,
-                  `${clsPrefix}-incomplete-card`,
-                  configError && `${clsPrefix}-warning-card`
-                ),
-                children: [
-                  milestoneHeader,
-                  /* @__PURE__ */ jsx(CapRow, { className: classNames(`${clsPrefix}-card-description`), children: getDescriptionForDisabled() })
-                ]
-              }
-            ) })
-          }
-        ) }),
-        !disabled && /* @__PURE__ */ jsx(
-          Timeline.Item,
-          {
-            dot: getTimelineIcon(),
-            className: classNames(
-              `${clsPrefix}-enabled-timeline-item`,
-              isLastPane && `${clsPrefix}-last-pane`,
-              complete && `${clsPrefix}-completed-tail`,
-              configError && `${clsPrefix}-warning-tail`,
-              configError && `${clsPrefix}-warning-card`,
-              complete && !isSelected && `${clsPrefix}-complete-head`
-            ),
-            children: /* @__PURE__ */ jsx(CapRow, { onClick: handleClick, children: /* @__PURE__ */ jsxs(
-              CapCard,
-              {
-                style: { width },
-                className: classNames(
-                  isSelected && `${clsPrefix}-pane-selected`,
-                  `${clsPrefix}-enabled-card`,
-                  `${clsPrefix}-card-body`,
-                  !complete && `${clsPrefix}-incomplete-card`,
-                  configError && `${clsPrefix}-warning-card`
-                ),
-                children: [
-                  milestoneHeader,
-                  /* @__PURE__ */ jsx(CapRow, { className: classNames(`${clsPrefix}-card-description`), children: isSelected ? getDescriptionForEnabled() : milestoneDescription })
-                ]
-              }
-            ) })
-          }
-        )
+        milestoneHeader,
+        /* @__PURE__ */ jsx(CapRow, { className: styles[`${clsPrefix}-card-description`], children: isSelected ? getDescriptionForEnabled() : milestoneDescription })
       ]
     }
-  );
-};
-CapTimelineCard.propTypes = {
-  children: PropTypes.any,
-  className: PropTypes.string,
-  isSelected: PropTypes.bool,
-  handleClick: PropTypes.func,
-  milestoneHeader: PropTypes.element,
-  milestoneDescription: PropTypes.element,
-  disabled: PropTypes.bool,
-  configuringMessage: PropTypes.string,
-  notConfiguredMessage: PropTypes.string,
-  alwaysShowDescription: PropTypes.bool,
-  complete: PropTypes.bool,
-  configError: PropTypes.bool,
-  defaultConfiguringMessage: PropTypes.string,
-  defaultNotConfiguredMessage: PropTypes.string,
-  toConfigure: PropTypes.string,
-  completePrevSteps: PropTypes.string,
-  paneKey: PropTypes.any,
-  isLastPane: PropTypes.bool,
-  width: PropTypes.number
+  ) });
 };
-const CapTimelineCard$1 = LocaleHoc(CapTimelineCard, { key: "CapTimelineCard" });
+const CapTimelineCard$1 = injectIntl(CapTimelineCard);
 export {
   CapTimelineCard,
   CapTimelineCard$1 as default