@capillarytech/blaze-ui 6.1.1 → 6.1.3

package/CapPopoverTree/styles.scss

@@ -2,186 +2,38 @@
 
 $popoverTree: cap-popover-tree-v2;
 
-// ExpandIcon styles
-.expandIcon {
-  margin-top: 0.714rem; // 10px / 14
-  z-index: 1;
-
-  svg {
-    height: 1.714rem; // 24px / 14
-    width: 1.714rem; // 24px / 14
-  }
-}
-
-// StyledIcon styles
-.styledIcon {
-  z-index: 1;
-  padding: 0.286rem; // 4px / 14
-  border-radius: 0.571rem; // 8px / 14
-  background: $CAP_G08;
-}
-
-// StyledCapHeading styles
-.styledCapHeading {
-  display: inline;
-  margin-left: 0.286rem; // 4px / 14
-}
-
-// StyledCapColumn styles
-.styledCapColumn {
-  display: inline;
-}
-
-.matchedSearch {
-  font-weight: 500;
-}
-
-// StyledCapTree styles
-.styledCapTree {
-  &.ant-tree.cap-tree-v2 {
-    min-height: 8.857rem; // 124px / 14
-
-    li {
-      padding: 0;
-    }
-
-    .ant-tree-node-content-wrapper {
-      height: 2.857rem; // 40px / 14
-      padding: 0.643rem 0 0.786rem 0.286rem; // 9px 0 11px 4px / 14
-
-      &:hover {
-        background-color: $BG_01;
-        margin-left: -2.857rem; // -40px / 14
-        padding-left: 3.143rem; // 44px / 14
-      }
-    }
-
-    .ant-tree-node-selected {
-      .tree-node-title {
-        color: $CAP_COLOR_17; // #1d61ee
-      }
-    }
-
-    .ant-tree-node-content-wrapper-open {
-      margin-left: -2.857rem; // -40px / 14
-      padding-left: 3.143rem; // 44px / 14
-      width: 23.143rem; // 324px / 14
-    }
-
-    &.isExpanded {
-      .ant-tree-node-content-wrapper-open {
-        background: $CAP_PALE_GREY;
-        border-left: 0.143rem solid $FONT_COLOR_05; // 2px / 14
-
-        &:hover {
-          background-color: $CAP_PALE_GREY;
-        }
-
-        .tree-node-title {
-          color: $CAP_COLOR_17; // #1d61ee
-        }
-
-        .tree-node-icon {
-          z-index: 1;
-          background: $FONT_COLOR_05;
-          color: $CAP_WHITE;
-        }
-      }
-    }
-
-    .ant-tree-child-tree {
-      .ant-tree-node-content-wrapper {
-        position: relative;
-        margin-left: 1.143rem; // 16px / 14
-        padding-left: 0;
-        width: 17.857rem; // 250px / 14
-      }
-
-      .ant-tree-node-selected {
-        background-color: $CAP_PALE_GREY;
-      }
-
-      .ant-tree-title {
-        margin-left: -0.857rem; // -12px / 14
-
-        .info-icon {
-          position: absolute;
-          right: 1.786rem; // 25px / 14
-          top: 1rem; // 14px / 14
-        }
-      }
-    }
-  }
-}
-
-// IsExpanded styles - exported as separate class for CSS module
-.isExpanded {
-  &.ant-tree.cap-tree-v2 {
-    .ant-tree-node-content-wrapper-open {
-      background: $CAP_PALE_GREY;
-      border-left: 0.143rem solid $FONT_COLOR_05; // 2px / 14
-
-      &:hover {
-        background-color: $CAP_PALE_GREY;
-      }
-
-      .tree-node-title {
-        color: $CAP_COLOR_17; // #1d61ee
-      }
-
-      .tree-node-icon {
-        z-index: 1;
-        background: $FONT_COLOR_05;
-        color: $CAP_WHITE;
-      }
-    }
-  }
-}
-
 .ant-popover.#{$popoverTree} {
-  width: 23.857rem; // 334px / 14
-  .ant-popover-content {
-    padding: 0;
-    min-height: 12.571rem; // 176px / 14
-  }
-
-  .ant-popover-inner-content {
-    padding: 0 0 $CAP_SPACE_12 0;
-  }
-
-  .search-and-tree-wrapper {
-    display: block;
-
-    .ant-spin-container {
-      width: 100%;
-    }
-  }
-
-  .search-tree-node {
-    &.ant-input-affix-wrapper {
-      width: 100%;
-      padding: 0.571rem $CAP_SPACE_12; // 8px 12px / 14
-      border-bottom: 0.071rem solid $CAP_G07; // 1px / 14
-
-      .ant-input {
-        margin-left: 0.286rem; // 4px / 14
-      }
+    .ant-popover-content {
+        width: 334px;
+        padding: 0;
+        min-height: 176px;
+    }
+
+    .divider {
+        border-top: 1px solid $CAP_G07;
+    }
+    .empty-data-text {
+        text-align: center;
+        margin-top: 12px;
+        padding: 10px 0;
+    }
+    .ant-popover-inner-content {
+        padding: 0 0 12px 0;
+    }
+    .search-tree-node {
+        .ant-input-affix-wrapper {
+            width: 300px;
+            margin-left: 12px;
+            .ant-input.ant-input-lg {
+                border: none !important;
+                border-radius: 0 !important;
+                margin-left: 8px;
+            }
+        }
     }
-  }
-
-  .divider {
-    display: none; // replaced by search input bottom border
-  }
-
-  .empty-data-text {
-    text-align: center;
-    margin-top: 0.857rem; // 12px / 14
-    padding: 0.714rem $CAP_SPACE_12; // 10px 12px / 14
-  }
 }
-
 .add-condition-tooltip {
-  .ant-tooltip-inner {
-    width: 27.571rem; // 386px / 14
-  }
-}
+    .ant-tooltip-inner {
+        width: 386px;
+      }
+}

package/CapRadioCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapRadioCard/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAKvF,cAAM,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC3D,YAAY,GAAI,GAAG,uBAAuB,UAExC;IAEF,cAAc,GAAI,MAAM,gBAAgB,6CAyEtC;IAEF,MAAM;CAmCP;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapRadioCard/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAKvF,cAAM,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC3D,YAAY,GAAI,GAAG,uBAAuB,UAExC;IAEF,cAAc,GAAI,MAAM,gBAAgB,6CAuGtC;IAEF,MAAM;CAmCP;AAED,eAAe,YAAY,CAAC"}

package/CapRadioCard/index.js

@@ -18,7 +18,22 @@ class CapRadioCard extends React.Component {
       (_b = (_a = this.props).onChange) == null ? void 0 : _b.call(_a, e);
     };
     this.getRadioButton = (pane) => {
-      const { cardHeight, cardWidth, selected, defaultValue, size } = this.props;
+      const {
+        cardHeight,
+        cardWidth,
+        selected,
+        defaultValue,
+        size,
+        radioButtonWrapperClassName,
+        checkedIconClassName,
+        iconWrapperClassName,
+        iconContainerClassName,
+        divIconClassName,
+        contentContainerClassName,
+        headerClassName,
+        contentClassName,
+        infoIconWrapperClassName
+      } = this.props;
       const {
         content,
         title,
@@ -46,34 +61,51 @@ class CapRadioCard extends React.Component {
           disabled,
           style: radioButtonStyle,
           className: classNames(
-            styles["radioButtonWrapper"],
+            styles["radio-button-wrapper"],
             {
-              [styles["customDisableRadioButton"]]: customDisableClass,
-              [styles["disabledWrapper"]]: disabled
+              [styles["custom-disable-radio-button"]]: customDisableClass,
+              [styles["disabled-wrapper"]]: disabled
             },
-            radioCardClassName
+            radioCardClassName,
+            radioButtonWrapperClassName
           ),
           ...restParams,
           children: [
-            !customDisableClass && /* @__PURE__ */ jsx(CapIcon, { type: "check-filled", className: styles["radioCardChecked"] }),
+            !customDisableClass && /* @__PURE__ */ jsx(
+              CapIcon,
+              {
+                type: "check-filled",
+                className: classNames(styles["radio-card-checked"], checkedIconClassName)
+              }
+            ),
             /* @__PURE__ */ jsxs(Card, { variant: "borderless", children: [
-              icon && /* @__PURE__ */ jsx("div", { className: styles["radioCardIcon"], children: /* @__PURE__ */ jsx(
+              icon && /* @__PURE__ */ jsx("div", { className: classNames(styles["radio-card-icon"], iconWrapperClassName), children: /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: classNames(styles["iconContainer"], {
-                    [styles["greenColor"]]: isChecked && !isSmall && !disabled
-                  }),
-                  children: /* @__PURE__ */ jsx("div", { className: styles["divIcon"], children: icon })
+                  className: classNames(
+                    styles["icon-container"],
+                    {
+                      [styles["green-color"]]: isChecked && !isSmall && !disabled
+                    },
+                    iconContainerClassName
+                  ),
+                  children: /* @__PURE__ */ jsx("div", { className: classNames(styles["div-icon"], divIconClassName), children: icon })
                 }
               ) }),
-              /* @__PURE__ */ jsxs("div", { className: styles["radioCardContentContainer"], children: [
-                /* @__PURE__ */ jsx("div", { className: styles["radioCardHeader"], children: /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h4", className: classNames(titleClassName), children: title }) }),
-                /* @__PURE__ */ jsxs("div", { className: styles["radioCardContent"], children: [
-                  " ",
-                  content
-                ] })
-              ] }),
-              infoIconDescription && /* @__PURE__ */ jsx("div", { className: styles["infoIconWrapper"], children: /* @__PURE__ */ jsx(CapTooltipWithInfo, { title: infoIconDescription }) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classNames(
+                    styles["radio-card-content-container"],
+                    contentContainerClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: classNames(styles["radio-card-header"], headerClassName), children: /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h4", className: classNames(titleClassName), children: title }) }),
+                    /* @__PURE__ */ jsx("div", { className: classNames(styles["radio-card-content"], contentClassName), children: content })
+                  ]
+                }
+              ),
+              infoIconDescription && /* @__PURE__ */ jsx("div", { className: classNames(styles["info-icon-wrapper"], infoIconWrapperClassName), children: /* @__PURE__ */ jsx(CapTooltipWithInfo, { title: infoIconDescription }) }),
               customComponent
             ] })
           ]
@@ -98,7 +130,7 @@ class CapRadioCard extends React.Component {
         ...rest,
         onChange: this.handleChange,
         className: classNames(
-          styles["capRadioCardV2"],
+          styles["cap-radioCard-v2"],
           {
             [styles["smallRadioCard"]]: size === "small"
           },

package/CapRadioCard/styles.css

@@ -6,39 +6,39 @@
 /* Border Width */
 /* Transition */
 /* Timezones Footer */
-.capRadioCardV2 .radioCardContentContainer {
+.cap-radioCard-v2 .radio-card-content-container {
   width: 100%;
 }
-.capRadioCardV2 .radioCardContent,
-.capRadioCardV2 .radioCardHeader {
+.cap-radioCard-v2 .radio-card-content,
+.cap-radioCard-v2 .radio-card-header {
   font-size: 0.857rem;
   line-height: 1.17;
   letter-spacing: normal;
   color: #5e6c84;
   padding-top: 0.285rem;
 }
-.capRadioCardV2 .radioCardIcon {
+.cap-radioCard-v2 .radio-card-icon {
   width: 3.429rem;
   height: 3.429rem;
   object-fit: contain;
   margin-right: 1.714rem;
 }
-.capRadioCardV2 .radioCardChecked {
+.cap-radioCard-v2 .radio-card-checked {
   position: absolute;
   right: -0.429rem;
   top: -0.857rem;
   display: none;
 }
-.capRadioCardV2 .ant-radio-button-wrapper-checked .radioCardChecked {
+.cap-radioCard-v2 .ant-radio-button-wrapper-checked .radio-card-checked {
   display: block;
   z-index: 1;
 }
-.capRadioCardV2 .divIcon {
+.cap-radioCard-v2 .div-icon {
   position: absolute;
   top: 25%;
   left: 25%;
 }
-.capRadioCardV2 .iconContainer {
+.cap-radioCard-v2 .icon-container {
   padding-right: 1.714rem;
   height: 3.429rem;
   width: 3.429rem;
@@ -49,11 +49,11 @@
   border-radius: 1.286rem;
   position: relative;
 }
-.capRadioCardV2 .iconContainer.greenColor {
+.cap-radioCard-v2 .icon-container.green-color {
   background-color: #47af46;
   color: #ffffff;
 }
-.capRadioCardV2 .radioButtonWrapper {
+.cap-radioCard-v2 .radio-button-wrapper {
   position: relative;
   height: 120px;
   width: 372px;
@@ -64,60 +64,60 @@
   border-top-width: 1px;
   vertical-align: top;
 }
-.capRadioCardV2 .disabledWrapper {
+.cap-radioCard-v2 .disabled-wrapper {
   opacity: 0.5;
 }
-.capRadioCardV2 .disabledWrapper.customDisableRadioButton {
+.cap-radioCard-v2 .disabled-wrapper.custom-disable-radio-button {
   border: unset;
   max-height: 5.357rem;
 }
-.capRadioCardV2 .disabledWrapper.customDisableRadioButton .radioCardChecked {
+.cap-radioCard-v2 .disabled-wrapper.custom-disable-radio-button .radio-card-checked {
   display: none;
 }
-.capRadioCardV2 .disabledWrapper.customDisableRadioButton .ant-card-body {
+.cap-radioCard-v2 .disabled-wrapper.custom-disable-radio-button .ant-card-body {
   padding: unset;
 }
-.capRadioCardV2 .customDisableRadioButton {
+.cap-radioCard-v2 .custom-disable-radio-button {
   border: unset;
   max-height: 5.357rem;
 }
-.capRadioCardV2 .customDisableRadioButton .ant-card-body {
+.cap-radioCard-v2 .custom-disable-radio-button .ant-card-body {
   padding: unset;
 }
-.capRadioCardV2 .ant-card-body {
+.cap-radioCard-v2 .ant-card-body {
   display: flex;
   padding: 1.142rem;
   height: 100%;
   position: relative;
 }
-.capRadioCardV2 .infoIconWrapper {
+.cap-radioCard-v2 .info-icon-wrapper {
   position: absolute;
   top: 1.142rem;
   right: 1.142rem;
 }
-.capRadioCardV2 .ant-card {
+.cap-radioCard-v2 .ant-card {
   height: 100%;
   border: none;
 }
-.capRadioCardV2.smallRadioCard .iconContainer {
+.cap-radioCard-v2.smallRadioCard .icon-container {
   padding-right: unset;
   background-color: unset;
 }
-.capRadioCardV2.smallRadioCard .radioCardIcon {
+.cap-radioCard-v2.smallRadioCard .radio-card-icon {
   height: 1.428rem;
   width: 1.714rem;
 }
-.capRadioCardV2.smallRadioCard .divIcon {
+.cap-radioCard-v2.smallRadioCard .div-icon {
   top: 0%;
   left: 0%;
 }
-.capRadioCardV2.smallRadioCard .radioButtonWrapper {
+.cap-radioCard-v2.smallRadioCard .radio-button-wrapper {
   margin: 0.428rem 0.857rem 0.428rem 0;
 }
-.capRadioCardV2.smallRadioCard .radioButtonWrapper:nth-child(3n) {
+.cap-radioCard-v2.smallRadioCard .radio-button-wrapper:nth-child(3n) {
   margin-right: 0;
 }
-.capRadioCardV2.smallRadioCard .ant-card-body {
+.cap-radioCard-v2.smallRadioCard .ant-card-body {
   padding: 0.857rem;
   height: 48px;
 }

package/CapRadioCard/styles.module.scss.js

@@ -1,47 +1,21 @@
-import './styles.css';const capRadioCardV2 = "capRadioCardV2";
-const radioCardContentContainer = "radioCardContentContainer";
-const radioCardContent = "radioCardContent";
-const radioCardHeader = "radioCardHeader";
-const radioCardIcon = "radioCardIcon";
-const radioCardChecked = "radioCardChecked";
-const divIcon = "divIcon";
-const iconContainer = "iconContainer";
-const greenColor = "greenColor";
-const radioButtonWrapper = "radioButtonWrapper";
-const disabledWrapper = "disabledWrapper";
-const customDisableRadioButton = "customDisableRadioButton";
-const infoIconWrapper = "infoIconWrapper";
-const smallRadioCard = "smallRadioCard";
+import './styles.css';const smallRadioCard = "smallRadioCard";
 const styles = {
-  capRadioCardV2,
-  radioCardContentContainer,
-  radioCardContent,
-  radioCardHeader,
-  radioCardIcon,
-  radioCardChecked,
-  divIcon,
-  iconContainer,
-  greenColor,
-  radioButtonWrapper,
-  disabledWrapper,
-  customDisableRadioButton,
-  infoIconWrapper,
+  "cap-radioCard-v2": "cap-radioCard-v2",
+  "radio-card-content-container": "radio-card-content-container",
+  "radio-card-content": "radio-card-content",
+  "radio-card-header": "radio-card-header",
+  "radio-card-icon": "radio-card-icon",
+  "radio-card-checked": "radio-card-checked",
+  "div-icon": "div-icon",
+  "icon-container": "icon-container",
+  "green-color": "green-color",
+  "radio-button-wrapper": "radio-button-wrapper",
+  "disabled-wrapper": "disabled-wrapper",
+  "custom-disable-radio-button": "custom-disable-radio-button",
+  "info-icon-wrapper": "info-icon-wrapper",
   smallRadioCard
 };
 export {
-  capRadioCardV2,
-  customDisableRadioButton,
   styles as default,
-  disabledWrapper,
-  divIcon,
-  greenColor,
-  iconContainer,
-  infoIconWrapper,
-  radioButtonWrapper,
-  radioCardChecked,
-  radioCardContent,
-  radioCardContentContainer,
-  radioCardHeader,
-  radioCardIcon,
   smallRadioCard
 };

package/CapRadioCard/styles.scss

@@ -1,12 +1,12 @@
 @import '../styles/_variables.scss';
 
-.capRadioCardV2 {
-  .radioCardContentContainer {
+.cap-radioCard-v2 {
+  .radio-card-content-container {
     width: 100%;
   }
 
-  .radioCardContent,
-  .radioCardHeader {
+  .radio-card-content,
+  .radio-card-header {
     font-size: $FONT_SIZE_S;
     line-height: 1.17;
     letter-spacing: normal;
@@ -14,32 +14,32 @@
     padding-top: $CAP_SPACE_04;
   }
 
-  .radioCardIcon {
+  .radio-card-icon {
     width: 3.429rem;
     height: 3.429rem;
     object-fit: contain;
     margin-right: $CAP_SPACE_24;
   }
 
-  .radioCardChecked {
+  .radio-card-checked {
     position: absolute;
     right: -0.429rem;
     top: -0.857rem;
     display: none;
   }
 
-  :global(.ant-radio-button-wrapper-checked) .radioCardChecked {
+  :global(.ant-radio-button-wrapper-checked) .radio-card-checked {
     display: block;
     z-index: 1;
   }
 
-  .divIcon {
+  .div-icon {
     position: absolute;
     top: 25%;
     left: 25%;
   }
 
-  .iconContainer {
+  .icon-container {
     padding-right: $CAP_SPACE_24;
     height: 3.429rem;
     width: 3.429rem;
@@ -50,13 +50,13 @@
     border-radius: 1.286rem;
     position: relative;
 
-    &.greenColor {
+    &.green-color {
       background-color: map-get($CAP_PRIMARY, base);
       color: $CAP_WHITE;
     }
   }
 
-  .radioButtonWrapper {
+  .radio-button-wrapper {
     position: relative;
     height: 120px;
     width: 372px;
@@ -68,14 +68,14 @@
     vertical-align: top;
   }
 
-  .disabledWrapper {
+  .disabled-wrapper {
     opacity: 0.5;
 
-    &.customDisableRadioButton {
+    &.custom-disable-radio-button {
       border: unset;
       max-height: 5.357rem;
 
-      .radioCardChecked {
+      .radio-card-checked {
         display: none;
       }
 
@@ -85,7 +85,7 @@
     }
   }
 
-  .customDisableRadioButton {
+  .custom-disable-radio-button {
     border: unset;
     max-height: 5.357rem;
 
@@ -101,7 +101,7 @@
     position: relative;
   }
 
-  .infoIconWrapper {
+  .info-icon-wrapper {
     position: absolute;
     top: $CAP_SPACE_16;
     right: $CAP_SPACE_16;
@@ -113,22 +113,22 @@
   }
 
   &.smallRadioCard {
-    .iconContainer {
+    .icon-container {
       padding-right: unset;
       background-color: unset;
     }
 
-    .radioCardIcon {
+    .radio-card-icon {
       height: $CAP_SPACE_20;
       width: $CAP_SPACE_24;
     }
 
-    .divIcon {
+    .div-icon {
       top: 0%;
       left: 0%;
     }
 
-    .radioButtonWrapper {
+    .radio-button-wrapper {
       margin: $CAP_SPACE_06 $CAP_SPACE_12 $CAP_SPACE_06 0;
 
       &:nth-child(3n) {

package/CapRadioCard/types.d.ts

@@ -20,6 +20,26 @@ export interface CapRadioCardPane {
 }
 export interface CapRadioCardProps extends Omit<React.ComponentProps<typeof Radio.Group>, 'size'> {
     className?: string;
+    /** Root (RadioGroup) */
+    rootClassName?: string;
+    /** RadioButton wrapper */
+    radioButtonWrapperClassName?: string;
+    /** Checked icon */
+    checkedIconClassName?: string;
+    /** Icon wrapper div */
+    iconWrapperClassName?: string;
+    /** Icon container div */
+    iconContainerClassName?: string;
+    /** Div wrapping icon content */
+    divIconClassName?: string;
+    /** Content container */
+    contentContainerClassName?: string;
+    /** Header div */
+    headerClassName?: string;
+    /** Content div */
+    contentClassName?: string;
+    /** Info icon wrapper */
+    infoIconWrapperClassName?: string;
     panes?: CapRadioCardPane[];
     cardHeight?: number | string;
     cardWidth?: number | string;