From 96f027f0aca0da3b4692b647413527f4d85155bd Mon Sep 17 00:00:00 2001
From: Putra Bonaccorsi <putra.roeung@gmail.com>
Date: Wed, 23 Feb 2022 23:11:12 -0500
Subject: [PATCH] fix(card-pictogram): show body copy on both pictogram
 positions (#8359)

### Related Ticket(s)

https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8302

### Description

- This PR fixes the issue where animation is not being applied to Card Pictorgram with the top position. This was an issue seen within the Web Component (React Wrapper).


### Changelog

**Changed**

- Set the body copy knob to show for both `top` and `bottom` position and not just `bottom`

### Testing

- Visit the Web Components (React Wrapper) storybook preview
- Navigate to `carbon-for-ibm-dotcom/canary/web-components-react/?path=/story/components-card--pictogram`
- Ensure that the body copy and animation get render correct for the "top" and " bottom" pictogram positions.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../card/__stories__/card.stories.react.tsx         | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx
index 81a765e81d4..cef79139286 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx
+++ b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx
@@ -107,14 +107,11 @@ Pictogram.story = {
     knobs: {
       PictogramCard: ({ groupId }) => {
         const pictogramPlacement = select('Pictogram position:', pictogramPlacements, pictogramPlacements.top, groupId);
-        const copy =
-          pictogramPlacement === pictogramPlacements.bottom
-            ? textNullable(
-                'Body copy:',
-                'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat',
-                groupId
-              )
-            : null;
+        const copy = textNullable(
+          'Body copy:',
+          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat',
+          groupId
+        );
         return {
           pictogramPlacement,
           heading: textNullable('Heading:', 'Aerospace and defence', groupId),