@zohodesk/components 1.0.0-temp-241 → 1.0.0-temp-242

package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css

@@ -1,36 +1,36 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* CTA variables */
-	--zdt_cta_primary_text: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_text: hsla(37, calc(var(--zd-mc) * 66.48%), calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_bg: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_bg: hsla(39, calc(var(--zd-mc) * 90.18%), calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_border: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_border: hsla(39, calc(var(--zd-mc) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_text: hsla(37, 66.48%, calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_bg: hsla(39, 90.18%, calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
 	--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
-	--zdt_cta_primary_light_bg: hsla(35, calc(var(--zd-mc) * 15.00%), calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_primary_light_hover_bg: hsla(37, calc(var(--zd-mc) * 12.70%), calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_primary_light_border: hsla(37, calc(var(--zd-mc) * 12.70%), calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_bg: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_secondary_text: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_secondary_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_light_border: hsla(38, calc(var(--zd-mc) * 30.19%), calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_light_bg: hsla(38, calc(var(--zd-mc) * 30.19%), calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_alpha_text: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_hover_text: hsla(39, calc(var(--zd-mc) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_border: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_hover_border: hsla(39, calc(var(--zd-mc) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_bg: hsla(220, calc(var(--zd-mc) * 2.75%), calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_beta_border: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_10_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_10_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_15_bg: hsla(0, calc(var(--zd-mc) * 2.33%), calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_15_border: hsla(0, calc(var(--zd-mc) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_20_bg: hsla(217, calc(var(--zd-mc) * 22.81%), calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_text: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_40_bg: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_40_text: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_light_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_hover_bg: hsla(37, 12.70%, calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_border: hsla(37, 12.70%, calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_border: hsla(38, 30.19%, calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_bg: hsla(38, 30.19%, calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_alpha_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_text: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_bg: hsla(220, 2.75%, calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_beta_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_10_bg: hsla(0, 0.00%, calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_10_border: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_15_bg: hsla(0, 2.33%, calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_15_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_border: hsla(0, 0.00%, calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_40_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_border: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);
@@ -44,7 +44,10 @@
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
 	
 	/* button */
-	--zdt_button_primary_strike: hsla(37, calc(var(--zd-mc) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
-	--zdt_button_primaryFilled_strike: hsla(0, calc(var(--zd-mc) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
-	--zdt_button_secondaryFilled_strike: hsla(0, calc(var(--zd-mc) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%;
 }

package/es/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -142,7 +142,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - succe
         class="successstate"
       >
         <div
-          class="customStautusClassName successelement primarysuccess"
+          class="customStautusClassName tickElement primaryTick"
         />
       </div>
     </div>
@@ -263,7 +263,7 @@ exports[`Button component Should render Status of buttons - success 1`] = `
         class="successstate"
       >
         <div
-          class="successelement primarysuccess"
+          class="tickElement primaryTick"
         />
       </div>
     </div>

package/es/Button/css/Button.module.css

@@ -383,11 +383,36 @@
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
 
+.successelement {
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+}
+
+.successfilledelement {
+  --button_loading_bg_color: var(--zdt_button_successfill_bg);
+}
+
+.secondaryfilledelement {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+}
+
+.secondaryelement {
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+}
+
+.tertiaryfilledelement {
+  --button_loading_bg_color: var(--zdt_button_tertiaryfill_bg);
+}
+
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
 .dangerelement:after,
-.dangerfilledelement:after {
+.dangerfilledelement:after,
+.successelement:after,
+.successfilledelement:after,
+.secondaryelement:after,
+.secondaryfilledelement:after,
+.tertiaryfilledelement:after {
   --button_loading_bg_color: inherit;
 }
 
@@ -421,18 +446,47 @@
   transform: rotateX(180deg);
 }
 
-.primarysuccess {
+.primaryTick {
   --button_success_border_color: var(--zdt_button_default_border);
 }
 
-.primaryfilled .successelement {
+.primaryfilled .tickElement {
   --button_success_border_color: var(--zdt_button_tick_primary_border);
 }
 
-.dangersuccess {
+.successelement:before {
+  --button_loading_bg_color: var(--zdt_button_success_border);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_success_linear_gradient);
+}
+
+.secondaryelement:before {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_secondary_linear_gradient);
+  transform: rotateX(180deg);
+}
+
+.dangerTick {
   --button_success_border_color: var(--zdt_button_danger_border);
 }
 
+.successTick {
+  --button_success_border_color: var(--zdt_button_success_border);
+}
+
+.secondaryTick {
+  --button_success_border_color: var(--zdt_button_secondary_border);
+}
+
+.secondaryfilledTick {
+  --button_success_border_color: var(--zdt_button_secondary_border);
+}
+
+.secondaryfilledelement:before {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_secondary_linear_gradient);
+  transform: rotateX(180deg);
+}
+
 @keyframes crlrotate-ltr {
   0% {
     transform: scaleX(-1) rotate(0deg);
@@ -502,7 +556,7 @@
   z-index: 3;
 }
 
-.successelement {
+.tickElement {
   height: var(--zd_size15) ;
   position: relative;
   top: calc( var(--zd_size2) * -1 ) ;
@@ -609,5 +663,5 @@
 }
 .successfilledStrike {
   --button_strike_color: var(--zdt_button_successFilled_strike);
-  --button_border_color: var(--zdt_button_successfill_bg);
+  --button_border_color: var(--zdt_button_successfill_border);
 }

package/es/Button/css/cssJSLogic.js

@@ -47,8 +47,8 @@ export default function cssJSLogic(_ref) {
     [customStatus]: !!customStatus,
     [style.loadingelement]: statusLower === 'loading',
     [style[`${paletteLower}element`]]: statusLower === 'loading',
-    [style.successelement]: statusLower != 'loading',
-    [style[`${paletteLower}success`]]: statusLower != 'loading'
+    [style.tickElement]: statusLower != 'loading',
+    [style[`${paletteLower}Tick`]]: statusLower != 'loading'
   });
   return {
     buttonClass,

package/es/Card/__tests__/Card.spec.js

@@ -8,6 +8,54 @@ describe('Card', () => {
     } = render( /*#__PURE__*/React.createElement(Card, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, null, " ", /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isScrollAttribute is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      isScrollAttribute: true
+    }, " ", /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the dataId value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      dataId: "customdataId"
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      customClass: "customClass"
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the htmlId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      htmlId: "customHtmlId"
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the a11y', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      a11y: {
+        role: 'button'
+      }
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false', async () => {
     const mockGetNextOptions = jest.fn(() => {
       return new Promise(resolve => {

package/es/Card/__tests__/CardContent.spec.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CardContent } from "../Card";
+describe('CardContent', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, null, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isScrollAttribute is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      isScrollAttribute: true
+    }, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const scroll = ['vertical', 'horizontal', 'both', 'none'];
+  test.each(scroll)('Should render with name - %s', scroll => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      isScrollAttribute: true,
+      scroll: scroll
+    }, /*#__PURE__*/React.createElement("div", null, "Test Animation")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering shrink is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true
+    }, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customClass is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      customClass: "cardCustomClass"
+    }, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const preventParentScroll = ['vertical', 'horizontal', 'both'];
+  test.each(preventParentScroll)('Should render with name - %s', preventParentScroll => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      isScrollAttribute: true,
+      preventParentScroll: preventParentScroll
+    }, /*#__PURE__*/React.createElement("div", null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Card/__tests__/CardHeader.spec.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CardHeader } from "../Card";
+describe('CardHeader', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isScroll is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, {
+      isScroll: true
+    }, "Children"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Children is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, null, "Children"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, {
+      customClass: "cardHeader-class"
+    }, "Children"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Card/__tests__/__snapshots__/Card.spec.js.snap

@@ -1,5 +1,87 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Card rendering the a11y 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+      role="button"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the children 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+     
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="customClass flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the dataId value 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="customdataId"
+    data-selector-id="container"
+    data-test-id="customdataId"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Card rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -11,6 +93,49 @@ exports[`Card rendering the defult props 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Card rendering the htmlId 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+      id="customHtmlId"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the isScrollAttribute is true 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-scroll="true"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+     
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Card should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false 1`] = `
 <DocumentFragment>
   <div