@capillarytech/blaze-ui 6.1.1 → 6.1.2

package/CapStaticTemplates/styles.css

@@ -0,0 +1,220 @@
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+.cap-static-templates-v2 {
+  display: flex;
+  flex-flow: nowrap;
+  min-width: 85vw;
+}
+.sidebar {
+  width: 18.429rem;
+  margin-right: 1.214rem;
+  border: 0.071rem solid #dfe2e7;
+}
+.templates-and-search-container {
+  width: var(--templates-container-width, 70.714rem);
+}
+.templates-container {
+  max-height: var(--templates-container-max-height, 28.571rem);
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+.category-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 2.857rem;
+  padding: 0.857rem 1.142rem 0.857rem 1.428rem;
+  border-left: 0.285rem solid var(--category-color, #97a0af);
+  cursor: pointer;
+}
+.category-container.selected {
+  background-color: #f4f5f7;
+  border-radius: unset;
+}
+.search-box {
+  width: 19.857rem;
+  margin-bottom: 0.857rem;
+  margin-left: 0.428rem;
+}
+.search-box .ant-input.ant-input-lg {
+  height: 2.285rem;
+}
+.template-icon.cap-icon-v2 {
+  font-size: 0.929rem;
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button {
+  border-left: 0.285rem solid var(--category-color, #97a0af);
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button.template-disabled {
+  opacity: 0.5;
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button .ant-card.ant-card-bordered {
+  border-left: 0.285rem solid var(--border-color, #97a0af);
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button .card-header-title {
+  max-width: 14.286rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button .coming-soon-tag {
+  display: none;
+  margin-bottom: 0.857rem;
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button:hover {
+  opacity: 1;
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button:hover .coming-soon-tag {
+  display: inline-flex;
+  height: auto;
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button:hover .card-header-title {
+  margin-right: 0.143rem;
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button:hover .card-available {
+  max-width: 14.286rem;
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button .strategy-template-radio-icon-container {
+  height: 2.857rem;
+  width: 2.857rem;
+  border-radius: 1.142rem;
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button .strategy-template-radio-icon-container .strategy-template-radio-div-icon {
+  left: 43%;
+  top: 21%;
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button .strategy-template-radio-icon-container .strategy-template-radio-div-icon .cap-icon-v2-add {
+  display: block;
+  margin-left: 0.071rem;
+  margin-top: 0.428rem;
+}
+.strategy-template .strategy-template-radio-root .strategy-template-radio-button .strategy-template-radio-icon-wrapper {
+  width: 2.857rem;
+  height: 2.857rem;
+  margin-right: 0.571rem;
+}
+.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  height: auto;
+  padding: 0.571rem 0.571rem 0.285rem 0.857rem;
+}
+.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body div.strategy-template-radio-content-container {
+  width: 14.5rem;
+}
+.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .card-content {
+  max-height: 3.214rem;
+}
+.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .card-header-row {
+  width: 14.857rem;
+  flex-flow: nowrap;
+  align-items: center;
+}
+.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .custom-template {
+  margin-left: 0.571rem;
+}
+.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .custom-template .title-desc-container {
+  width: 14rem;
+}
+.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .strategy-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.857rem;
+  width: 2.857rem;
+  margin-top: -0.571rem;
+  margin-left: -0.857rem;
+}
+.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .strategy-icon svg {
+  width: 2.857rem;
+  height: 2.857rem;
+}
+.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .strategy-icon .text-label {
+  font-weight: 500;
+  text-transform: uppercase;
+  background-color: unset;
+  border-radius: unset;
+}
+.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .strategy-icon .selected {
+  color: #ffffff;
+}
+.strategy-template-icon-placeholder .strategy-template-radio-div-icon {
+  left: 35% !important;
+  top: 30% !important;
+}
+.templates-modal .ant-modal-container {
+  width: 52.643rem;
+  height: 19.571rem;
+  right: 50%;
+  padding: 0;
+}
+.templates-modal .ant-modal-container div.ant-modal-body {
+  padding: 1.714rem 1.714rem 1.571rem 1.714rem;
+}
+.templates-modal .ant-modal-container .modal-image {
+  width: 17.357rem;
+  height: 15.714rem;
+}
+.templates-modal .ant-modal-container .modal-info-content {
+  width: 28.429rem;
+  margin-right: 1.714rem;
+}
+.templates-modal .ant-modal-container .ant-modal-close-x {
+  margin-top: 0.571rem;
+}
+.templates-modal .ant-modal-container .ant-modal-footer {
+  display: none;
+}
+.styled-cap-card {
+  width: 6.571rem;
+  height: 6.143rem;
+}
+.styled-cap-card div.ant-card-head {
+  max-height: 2.786rem;
+  min-height: 2.786rem;
+  text-align: center;
+  background-color: #e9f0fe;
+}
+.styled-cap-card div.ant-card-head .ant-card-head-title {
+  padding: 0.571rem 0;
+}
+.styled-cap-card div.ant-card-body {
+  height: 3.357rem;
+  margin-top: 0.571rem;
+  padding: 0.643rem 0.714rem 0.428rem 0.714rem !important;
+  text-align: center;
+}
+.styled-cap-card .cap-icon svg {
+  height: 1.714rem;
+  width: 1.714rem;
+  color: #c7d8fb;
+}
+.premium-icon {
+  margin-left: 0.285rem;
+  color: #e8bc25;
+}
+.cap-static-templates-v2-margin-t-4 {
+  margin-top: 0.285rem;
+}
+.cap-static-templates-v2-margin-t-13 {
+  margin-top: 0.928rem;
+}
+.cap-static-templates-v2-margin-l-8 {
+  margin-left: 0.571rem;
+}
+.cap-static-templates-v2-margin-b-8 {
+  margin-bottom: 0.571rem;
+}
+.cap-static-templates-v2-margin-t-16 {
+  margin-top: 1.142rem;
+}
+.cap-static-templates-v2-margin-b-16 {
+  margin-bottom: 1.142rem;
+}

package/CapStaticTemplates/styles.module.scss.js

@@ -0,0 +1,55 @@
+import './styles.css';const sidebar = "sidebar";
+const selected = "selected";
+const styles = {
+  "cap-static-templates-v2": "cap-static-templates-v2",
+  sidebar,
+  "templates-and-search-container": "templates-and-search-container",
+  "templates-container": "templates-container",
+  "category-container": "category-container",
+  selected,
+  "search-box": "search-box",
+  "template-icon": "template-icon",
+  "cap-icon-v2": "cap-icon-v2",
+  "strategy-template": "strategy-template",
+  "strategy-template-radio-root": "strategy-template-radio-root",
+  "strategy-template-radio-button": "strategy-template-radio-button",
+  "template-disabled": "template-disabled",
+  "card-header-title": "card-header-title",
+  "coming-soon-tag": "coming-soon-tag",
+  "card-available": "card-available",
+  "strategy-template-radio-icon-container": "strategy-template-radio-icon-container",
+  "strategy-template-radio-div-icon": "strategy-template-radio-div-icon",
+  "cap-icon-v2-add": "cap-icon-v2-add",
+  "strategy-template-radio-icon-wrapper": "strategy-template-radio-icon-wrapper",
+  "strategy-template-radio-content-container": "strategy-template-radio-content-container",
+  "card-content": "card-content",
+  "card-header-row": "card-header-row",
+  "custom-template": "custom-template",
+  "title-desc-container": "title-desc-container",
+  "strategy-icon": "strategy-icon",
+  "text-label": "text-label",
+  "strategy-template-icon-placeholder": "strategy-template-icon-placeholder",
+  "templates-modal": "templates-modal",
+  "ant-modal-body": "ant-modal-body",
+  "modal-image": "modal-image",
+  "modal-info-content": "modal-info-content",
+  "ant-modal-close-x": "ant-modal-close-x",
+  "ant-modal-footer": "ant-modal-footer",
+  "styled-cap-card": "styled-cap-card",
+  "ant-card-head": "ant-card-head",
+  "ant-card-head-title": "ant-card-head-title",
+  "ant-card-body": "ant-card-body",
+  "cap-icon": "cap-icon",
+  "premium-icon": "premium-icon",
+  "cap-static-templates-v2-margin-t-4": "cap-static-templates-v2-margin-t-4",
+  "cap-static-templates-v2-margin-t-13": "cap-static-templates-v2-margin-t-13",
+  "cap-static-templates-v2-margin-l-8": "cap-static-templates-v2-margin-l-8",
+  "cap-static-templates-v2-margin-b-8": "cap-static-templates-v2-margin-b-8",
+  "cap-static-templates-v2-margin-t-16": "cap-static-templates-v2-margin-t-16",
+  "cap-static-templates-v2-margin-b-16": "cap-static-templates-v2-margin-b-16"
+};
+export {
+  styles as default,
+  selected,
+  sidebar
+};

package/CapStaticTemplates/styles.scss

@@ -0,0 +1,291 @@
+@import '../styles/_variables';
+
+$component: cap-static-templates-v2;
+
+.#{$component} {
+  display: flex;
+  flex-flow: nowrap;
+  min-width: 85vw;
+}
+
+.sidebar {
+  width: 18.429rem; // 258px
+  margin-right: 1.214rem; // 17px
+  border: $border-width-1 solid $CAP_G07;
+}
+
+.templates-and-search-container {
+  width: var(--templates-container-width, 70.714rem); // 990px
+}
+
+.templates-container {
+  max-height: var(--templates-container-max-height, 28.571rem); // 400px
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+
+.category-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: $CAP_SPACE_40;
+  padding: $CAP_SPACE_12 $CAP_SPACE_16 $CAP_SPACE_12 $CAP_SPACE_20;
+  border-left: $CAP_SPACE_04 solid var(--category-color, $CAP_G05);
+  cursor: pointer;
+
+  &.selected {
+    background-color: $CAP_G09;
+    border-radius: unset;
+  }
+}
+
+.search-box {
+  width: 19.857rem; // 278px
+  margin-bottom: $CAP_SPACE_12;
+  margin-left: $CAP_SPACE_06;
+
+  :global(.ant-input.ant-input-lg) {
+    height: $CAP_SPACE_32;
+  }
+}
+
+.template-icon {
+  &.cap-icon-v2 {
+    font-size: 0.929rem; // 13px
+  }
+}
+
+// Class names passed to CapRadioCard via classNames prop (no longer depend on CapRadioCard internals)
+$radio: strategy-template-radio;
+
+.strategy-template {
+  // Target CapRadioCard via passed classNames (root, radioButtonWrapper, etc.)
+  .#{$radio}-root {
+    .#{$radio}-button {
+      border-left: $CAP_SPACE_04 solid var(--category-color, $CAP_G05);
+
+      &.template-disabled {
+        opacity: 0.5;
+      }
+
+      :global(.ant-card.ant-card-bordered) {
+        border-left: $CAP_SPACE_04 solid var(--border-color, $CAP_G05);
+      }
+
+      .card-header-title {
+        max-width: 14.286rem; // 200px
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .coming-soon-tag {
+        display: none;
+        margin-bottom: $cap-space-12;
+      }
+
+      &:hover {
+        opacity: 1;
+
+        .coming-soon-tag {
+          display: inline-flex;
+          height: auto;
+        }
+
+        .card-header-title {
+          margin-right: $border-width-2;
+        }
+
+        .card-available {
+          max-width: 14.286rem; // 200px
+        }
+      }
+
+      .#{$radio}-icon-container {
+        height: $CAP_SPACE_40;
+        width: $CAP_SPACE_40;
+        border-radius: $CAP_SPACE_16;
+
+        .#{$radio}-div-icon {
+          left: 43%;
+          top: 21%;
+
+          .cap-icon-v2-add {
+            display: block;
+            margin-left: $border-width-1;
+            margin-top: $CAP_SPACE_06;
+          }
+        }
+      }
+
+      .#{$radio}-icon-wrapper {
+        width: $CAP_SPACE_40;
+        height: $CAP_SPACE_40;
+        margin-right: $CAP_SPACE_08;
+      }
+    }
+
+    :global(.ant-card) {
+      div:global(.ant-card-body) {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        height: auto;
+        padding: $CAP_SPACE_08 $CAP_SPACE_08 $CAP_SPACE_04 $CAP_SPACE_12;
+
+        div.#{$radio}-content-container {
+          width: 14.5rem; // 203px
+        }
+
+        .card-content {
+          max-height: 3.214rem; // 45px
+        }
+
+        .card-header-row {
+          width: 14.857rem; // 208px
+          flex-flow: nowrap;
+          align-items: center;
+        }
+
+        .custom-template {
+          margin-left: $CAP_SPACE_08;
+
+          .title-desc-container {
+            width: 14rem; // 196px
+          }
+        }
+
+        .strategy-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: $CAP_SPACE_40;
+          width: $CAP_SPACE_40;
+          margin-top: -$CAP_SPACE_08;
+          margin-left: -$CAP_SPACE_12;
+
+          svg {
+            width: $CAP_SPACE_40;
+            height: $CAP_SPACE_40;
+          }
+
+          .text-label {
+            font-weight: 500;
+            text-transform: uppercase;
+            background-color: unset;
+            border-radius: unset;
+          }
+
+          .selected {
+            color: $CAP_WHITE;
+          }
+        }
+      }
+    }
+  }
+}
+
+.strategy-template-icon-placeholder {
+  .#{$radio}-div-icon {
+    left: 35% !important;
+    top: 30% !important;
+  }
+}
+
+.templates-modal {
+  // OVERRIDE: Fixed modal dimensions and custom layout cannot be tokenized
+  // Modal width/height tokens don't support custom fixed dimensions
+  // Footer display: none requires CSS override
+  :global(.ant-modal-container) {
+    width: 52.643rem; // 737px
+    height: 19.571rem; // 274px
+    right: 50%;
+    padding: 0;
+
+    div.ant-modal-body {
+      padding: $CAP_SPACE_24 $CAP_SPACE_24 1.571rem $CAP_SPACE_24; // 24px 24px 22px 24px
+    }
+
+    .modal-image {
+      width: 17.357rem; // 243px
+      height: 15.714rem; // 220px
+    }
+
+    .modal-info-content {
+      width: 28.429rem; // 398px
+      margin-right: $CAP_SPACE_24;
+    }
+
+    .ant-modal-close-x {
+      margin-top: $CAP_SPACE_08;
+    }
+
+    .ant-modal-footer {
+      display: none;
+    }
+  }
+}
+
+.styled-cap-card {
+  // OVERRIDE: Custom card dimensions and layout are component-specific
+  // No tokens available for fixed width/height and custom card structure
+
+  width: 6.571rem; // 92px
+  height: 6.143rem; // 86px
+
+  div.ant-card-head {
+    max-height: 2.786rem; // 39px
+    min-height: 2.786rem; // 39px
+    text-align: center;
+    background-color: $CAP_PALE_GREY;
+
+    .ant-card-head-title {
+      padding: $CAP_SPACE_08 0;
+    }
+  }
+
+  div.ant-card-body {
+    height: 3.357rem; // 47px
+    margin-top: $CAP_SPACE_08;
+    padding: 0.643rem 0.714rem $CAP_SPACE_06 0.714rem !important; // 9px 10px 6px 10px
+    text-align: center;
+  }
+
+  .cap-icon {
+    svg {
+      height: $CAP_SPACE_24;
+      width: $CAP_SPACE_24;
+      color: $cap-color-28;
+    }
+  }
+}
+
+.premium-icon {
+  margin-left: $CAP_SPACE_04;
+  color: $CAP_YELLOW01;
+}
+
+// Component-specific margin utilities (replacing margin-t-4, margin-t-13, etc.)
+.#{$component}-margin-t-4 {
+  margin-top: $CAP_SPACE_04;
+}
+
+.#{$component}-margin-t-13 {
+  margin-top: 0.928rem; // ~13px
+}
+
+.#{$component}-margin-l-8 {
+  margin-left: $CAP_SPACE_08;
+}
+
+.#{$component}-margin-b-8 {
+  margin-bottom: $CAP_SPACE_08;
+}
+
+.#{$component}-margin-t-16 {
+  margin-top: $CAP_SPACE_16;
+}
+
+.#{$component}-margin-b-16 {
+  margin-bottom: $CAP_SPACE_16;
+}

package/CapStaticTemplates/tests/CapStaticTemplates.mockData.d.ts

@@ -0,0 +1,54 @@
+import type { Category, ModalContent } from '../types';
+export declare const mockCategories: Category[];
+export declare const mockCategoriesWithLongLabel: Category[];
+export declare const mockCategoriesEmptyPanes: Category[];
+export declare const mockModalContent: ModalContent;
+export declare const mockHandlers: {
+    onSelectCategory: jest.Mock<any, any, any>;
+    onSelectStrategyTemplate: jest.Mock<any, any, any>;
+};
+export declare const mockProps: {
+    basic: {
+        categories: Category[];
+        modalContent: ModalContent;
+    };
+    withBlankTemplate: {
+        isBlankTemplateRequired: boolean;
+        categories: Category[];
+        modalContent: ModalContent;
+    };
+    withSelectedCategory: {
+        selectedCategory: string;
+        categories: Category[];
+        modalContent: ModalContent;
+    };
+    withSelectedTemplate: {
+        selectedStrategyTemplate: string;
+        categories: Category[];
+        modalContent: ModalContent;
+    };
+    withCustomSizes: {
+        cardWidth: string;
+        cardHeight: string;
+        blankCardWidth: string;
+        blankCardHeight: string;
+        templatesContainerWidth: string;
+        templatesContainerMaxHeight: string;
+        categories: Category[];
+        modalContent: ModalContent;
+    };
+    withShowComingSoonFalse: {
+        showComingSoon: boolean;
+        categories: Category[];
+        modalContent: ModalContent;
+    };
+    emptyCategories: {
+        categories: any[];
+        modalContent: ModalContent;
+    };
+    emptyPanes: {
+        categories: Category[];
+        modalContent: ModalContent;
+    };
+};
+//# sourceMappingURL=CapStaticTemplates.mockData.d.ts.map

package/CapStaticTemplates/tests/CapStaticTemplates.mockData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapStaticTemplates.mockData.d.ts","sourceRoot":"","sources":["../../../components/CapStaticTemplates/tests/CapStaticTemplates.mockData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEvD,eAAO,MAAM,cAAc,EAAE,QAAQ,EA4CpC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,QAAQ,EAgBjD,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,QAAQ,EAQ9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,YAsB9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAOF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCrB,CAAC"}