Merge branch 'master' into dependabot/npm_and_yarn/acorn-5.7.4

carbon-design-system · Mar 17, 2020 · feaf3ae · feaf3ae
2 parents f3e1a1a + 125e157
commit feaf3ae
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/components/ValueCard/DataStateRenderer.jsx b/src/components/ValueCard/DataStateRenderer.jsx
@@ -91,7 +91,9 @@ const DataStateRenderer = ({ dataState, size, id }) => {
     >
       <p className={classnames(`${dsPrefix}-dashes`)}>--</p>
       <div className={`${dsPrefix}-grid`}>
-        {size === CARD_SIZES.SMALL || size === CARD_SIZES.MEDIUMTHIN
+        {size === CARD_SIZES.SMALL ||
+        size === CARD_SIZES.SMALLWIDE ||
+        size === CARD_SIZES.MEDIUMTHIN
           ? renderDataStateGridIcon()
           : renderDataStateGridItems()}
       </div>

diff --git a/src/components/ValueCard/DataStateRenderer.test.jsx b/src/components/ValueCard/DataStateRenderer.test.jsx
@@ -60,7 +60,7 @@ describe('ValueCard', () => {
     expect(wrapperError.find(`svg.${iotPrefix}--data-state-default-warning-icon`)).toHaveLength(0);
   });
 
-  test('should render icon, label, description for sizes not equal SMALL or MEDIUMTHIN', () => {
+  test('should render icon, label, description for sizes not equal SMALL, SMALLWIDE or MEDIUMTHIN', () => {
     const myDataState = getDataStateProp();
     function hasLabelDescription(jsx) {
       const wrapper = mount(jsx);
@@ -73,7 +73,6 @@ describe('ValueCard', () => {
       );
     }
 
-    hasLabelDescription(<DataStateRenderer dataState={myDataState} size={CARD_SIZES.SMALLWIDE} />);
     hasLabelDescription(<DataStateRenderer dataState={myDataState} size={CARD_SIZES.MEDIUM} />);
     hasLabelDescription(<DataStateRenderer dataState={myDataState} size={CARD_SIZES.MEDIUMWIDE} />);
     hasLabelDescription(<DataStateRenderer dataState={myDataState} size={CARD_SIZES.LARGE} />);
@@ -90,6 +89,17 @@ describe('ValueCard', () => {
     expect(wrapper.find(`.${iotPrefix}--data-state-grid__description`)).toHaveLength(0);
   });
 
+  test('should render only icon for size SMALLWIDE', () => {
+    const myDataState = getDataStateProp();
+    const wrapper = mount(
+      <DataStateRenderer dataState={myDataState} size={CARD_SIZES.SMALLWIDE} />
+    );
+
+    expect(wrapper.find(`svg.${iotPrefix}--data-state-default-warning-icon`)).toHaveLength(1);
+    expect(wrapper.find(`.${iotPrefix}--data-state-grid__label`)).toHaveLength(0);
+    expect(wrapper.find(`.${iotPrefix}--data-state-grid__description`)).toHaveLength(0);
+  });
+
   test('should render only icon for size MEDIUMTHIN', () => {
     const myDataState = getDataStateProp();
     const wrapper = mount(