@zohodesk/components 1.4.17 → 1.4.19

package/es/utils/dropDownUtils.js

@@ -43,6 +43,8 @@ const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
 const getListItemProps = props => props.listItemProps || '';
 
+const getlistItemCustomProps = props => props.listItemCustomProps || dummyObj;
+
 const defaultSearchFields = ['value'];
 
 const getSearchFields = props => {
@@ -55,7 +57,7 @@ const getSearchFields = props => {
 // }
 
 
-const isObjectContainsSearchString = function () {
+export const isObjectContainsSearchString = function () {
   let searchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let obj = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -133,7 +135,7 @@ export const extractOptionId = id => {
   }
 };
 export const extractOptionIdFromJson = (id, localData) => localData[id] || {};
-export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback, getSearchFields, getSecondaryField], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback, searchFields, secondaryField) => {
+export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getlistItemCustomProps, getAllowValueFallback, getSearchFields, getSecondaryField], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, listItemCustomProps, allowValueFallback, searchFields, secondaryField) => {
   const revampOptions = [];
   const remvampOptionIds = [];
   const normalizedAllOptions = {};
@@ -149,7 +151,8 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         optionType: impOptionType,
         iconName: impIconName,
         iconSize: impIconSize,
-        listItemProps: listStyle
+        listItemProps: listStyle,
+        listItemCustomProps: listStyleCustomProps
       } = option;
       let id = typeof option === 'object' ? option[impValueField || valueField] : option;
       const value = typeof option === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
@@ -195,6 +198,10 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
           optionDetails.listItemProps = listStyle || listItemProps;
         }
 
+        if (listStyleCustomProps || listItemCustomProps) {
+          optionDetails.listItemCustomProps = listStyleCustomProps || listItemCustomProps;
+        }
+
         normalizedFormatOptions[id] = optionDetails;
         normalizedAllOptions[id] = { ...option,
           groupId: prefixText
@@ -321,7 +328,8 @@ export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions
       id: groupId,
       name,
       valueField,
-      textField
+      textField,
+      secondaryField
     } = group;
 
     if (!getIsEmptyValue(groupId) && groupIds.indexOf(groupId) === -1) {
@@ -336,6 +344,7 @@ export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions
         options,
         valueField,
         textField,
+        secondaryField,
         prefixText: groupId,
         allowValueFallback
       });

package/es/v1/Switch/__tests__/Switch.spec.js

@@ -1,30 +1,65 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Switch from "../Switch";
-describe('Switch', () => {
-  test('rendering the defult props', () => {
+describe('Switch - Snapshot', () => {
+  test('Render with default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Switch, null));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the Switch with Checked', () => {
+  test('Render with isChecked=true', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Switch, {
-      id: "switch",
       isChecked: true
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the Switch with Disabled', () => {
+  test('Render with isDisabled=true', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Switch, {
-      id: "switch",
       isChecked: true,
       isDisabled: true
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      customId: "switch-customId",
+      testId: "switch-testId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tag attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      tagAttributes: {
+        'data-custom-attr': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      a11yAttributes: {
+        role: 'switch'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      customClass: "my-switch"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -1,6 +1,179 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Switch rendering the Switch with Checked 1`] = `
+exports[`Switch - Snapshot Render with a11y attributes 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with customId and testId 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="switch-customId"
+    data-selector-id="switch-customId"
+    data-test-id="switch-testId"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with isChecked=true 1`] = `
 <DocumentFragment>
   <div
     class="inlineFlex row alignItems_center container medium checked enabled"
@@ -15,7 +188,6 @@ exports[`Switch rendering the Switch with Checked 1`] = `
       <input
         checked=""
         class="track"
-        id="switch"
         role="switch"
         type="checkbox"
         value=""
@@ -45,7 +217,7 @@ exports[`Switch rendering the Switch with Checked 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Switch rendering the Switch with Disabled 1`] = `
+exports[`Switch - Snapshot Render with isDisabled=true 1`] = `
 <DocumentFragment>
   <div
     class="inlineFlex row alignItems_center container medium checked disabled"
@@ -61,7 +233,6 @@ exports[`Switch rendering the Switch with Disabled 1`] = `
         aria-disabled="true"
         checked=""
         class="track"
-        id="switch"
         role="switch"
         type="checkbox"
         value=""
@@ -91,7 +262,7 @@ exports[`Switch rendering the Switch with Disabled 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Switch rendering the defult props 1`] = `
+exports[`Switch - Snapshot Render with tag attributes 1`] = `
 <DocumentFragment>
   <div
     class="inlineFlex row alignItems_center container medium unChecked enabled"

package/lib/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/lib/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/lib/Button/css/cssJSLogic.js

@@ -36,7 +36,7 @@ function cssJSLogic(_ref) {
   var canStrikeThrough = !strikeExcludedPalettes.includes(paletteLower);
   var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customButton, !!customButton), _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, "".concat(style["".concat(paletteLower, "Strike")], " ").concat(style.strike), disabled && canStrikeThrough && shouldStrikeThroughDisabled), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
   var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.successstate, statusLower != 'loading'), _compileClassNames2));
-  var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, customStatus, !!customStatus), _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.successelement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "success")], statusLower != 'loading'), _compileClassNames3));
+  var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, customStatus, !!customStatus), _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.tickElement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "Tick")], statusLower != 'loading'), _compileClassNames3));
   return {
     buttonClass: buttonClass,
     loaderParentClass: loaderParentClass,

package/lib/Card/__tests__/Card.spec.js

@@ -27,8 +27,56 @@ describe('Card', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the children', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], null, " ", /*#__PURE__*/_react["default"].createElement(_Card.CardContent, null, "Test"))),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isScrollAttribute is true', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      isScrollAttribute: true
+    }, " ", /*#__PURE__*/_react["default"].createElement(_Card.CardContent, null, "Test"))),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the dataId value', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      dataId: "customdataId"
+    }, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, null, "Test"))),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      customClass: "customClass"
+    }, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, null, "Test"))),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the htmlId', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      htmlId: "customHtmlId"
+    }, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, null, "Test"))),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the a11y', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      a11y: {
+        role: 'button'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, null, "Test"))),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var mockGetNextOptions, _render2, getByTestId, asFragment, cardContent;
+    var mockGetNextOptions, _render8, getByTestId, asFragment, cardContent;
 
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) {
@@ -39,13 +87,13 @@ describe('Card', function () {
                 resolve();
               });
             });
-            _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+            _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
               from: 0,
               limit: 10,
               fetchData: mockGetNextOptions
             }, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
               dataId: "scrollToBottomCardContent"
-            }, /*#__PURE__*/_react["default"].createElement("div", null, "Hello Zam")))), getByTestId = _render2.getByTestId, asFragment = _render2.asFragment;
+            }, /*#__PURE__*/_react["default"].createElement("div", null, "Hello Zam")))), getByTestId = _render8.getByTestId, asFragment = _render8.asFragment;
             cardContent = getByTestId('scrollToBottomCardContent');
             Object.defineProperty(cardContent, 'scrollHeight', {
               value: 1000,
@@ -80,7 +128,7 @@ describe('Card', function () {
     }, _callee);
   })));
   test('should trigger fetch, when scroll to the top of the card while scrollDirection = bottomToTop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-    var mockGetNextOptions, _render3, getByTestId, asFragment, cardContent;
+    var mockGetNextOptions, _render9, getByTestId, asFragment, cardContent;
 
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) {
@@ -91,14 +139,14 @@ describe('Card', function () {
                 resolve();
               });
             });
-            _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+            _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
               from: 0,
               limit: 10,
               scrollDirection: "bottomToTop",
               fetchData: mockGetNextOptions
             }, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
               dataId: "scrollToTopCardContent"
-            }, /*#__PURE__*/_react["default"].createElement("div", null, "Hello Zam")))), getByTestId = _render3.getByTestId, asFragment = _render3.asFragment;
+            }, /*#__PURE__*/_react["default"].createElement("div", null, "Hello Zam")))), getByTestId = _render9.getByTestId, asFragment = _render9.asFragment;
             cardContent = getByTestId('scrollToTopCardContent');
             Object.defineProperty(cardContent, 'scrollHeight', {
               value: 1000,

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

@@ -0,0 +1,68 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Card = require("../Card");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('CardContent', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card.CardContent, null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering children', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card.CardContent, null, "Test")),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isScrollAttribute is true', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+      isScrollAttribute: true
+    }, "Test")),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var scroll = ['vertical', 'horizontal', 'both', 'none'];
+  test.each(scroll)('Should render with name - %s', function (scroll) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+      isScrollAttribute: true,
+      scroll: scroll
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Test Animation"))),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering shrink is true', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+      shrink: true
+    }, "Test")),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customClass is true', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+      customClass: "cardCustomClass"
+    }, "Test")),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var preventParentScroll = ['vertical', 'horizontal', 'both'];
+  test.each(preventParentScroll)('Should render with name - %s', function (preventParentScroll) {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+      isScrollAttribute: true,
+      preventParentScroll: preventParentScroll
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Test"))),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});