Repository: Sage/carbon (ts)

Issue:
TileSelectGroup - without description prop renders an empty paragraph 
### Current behaviour

Given a TileSelectGroup
When no description prop is passed
Then an empty paragraph is rendered adding a blank space at the top of the component. 

### Expected behaviour

Given a TileSelectGroup
When no description prop is passed
Then the first tile is rendered without a blank space at the top. 

### CodeSandbox or Storybook URL

https://codesandbox.io/s/elastic-julien-8qqh78?file=/src/index.js

### JIRA Ticket (Sage Only)

_No response_

### Suggested Solution

_No response_

### Carbon Version

111.22.0

### Design Tokens Version

2.64.0

### What browsers are you seeing the problem on?

Firefox, Chrome

### What Operating System are you seeing the problem on?

MacOS

### Anything else we should know?

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix(tile-select-group): implement conditional rendering for the Description prop
fix #5699

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes.

If applicable, add screenshots of a codesandbox to help explain your request. You can paste these directly into GitHub.

Please DO NOT share screenshots or the source code of your project.

You can create a codesandbox to show the behaviour before/after this pull request by forking this template https://codesandbox.io/s/carbon-quickstart-j5pb2

If you include a CodeSandbox link, the bot will fork it with the new built version of carbon.
If you have a commit that includes fixes #XXXX and issue #XXXX has a CodeSandbox link in the body, the bot will fork
it with the new built version of carbon.
-->

After the proposed changes when no `Description` prop is passed or the passed string is empty, the DOM element which displays the `TileSelectGroup` description no longer appears.

<img width="613" alt="Screenshot 2023-01-05 at 14 59 28" src="https://user-images.githubusercontent.com/114918852/210810728-e309a9f9-a8b4-4f66-88e8-3d34207f8943.png">


### Current behaviour

<!--
A clear and concise description of the behaviour before this change.

If applicable, add screenshots. You can paste these directly into GitHub.
-->

Currently when no `Description` prop is passed or the passed string is empty, the DOM element which displays the `TileSelectGroup` description still appears.

<img width="627" alt="Screenshot 2023-01-05 at 14 29 19" src="https://user-images.githubusercontent.com/114918852/210809695-234aa486-b0a2-4aeb-bf82-66c0b307c929.png">


### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [x] Screenshots are included in the PR if useful
- [x] All themes are supported if required
- [x] Unit tests added or updated if required
- [x] Cypress automation tests added or updated if required
- [ ] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in CodeSandbox/storybook
- [ ] Add new Cypress test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!-- How can a reviewer test this PR? -->

[This CodeSandbox ](https://codesandbox.io/s/priceless-mestorf-25fpzr?file=/src/index.js)is an example of the broken behaviour.

You can see the new behaviour by looking at the version in the comment by `codesandbox[bot]`.

<!-- Add CodeSandbox here -->


Patch:
diff --git a/src/components/tile-select/tile-select-group.component.js b/src/components/tile-select/tile-select-group.component.js
index 5eb97acaa..42d6bd56f 100644
--- a/src/components/tile-select/tile-select-group.component.js
+++ b/src/components/tile-select/tile-select-group.component.js
@@ -54,7 +54,11 @@ const TileSelectGroup = (props) => {
       multiSelect={multiSelect}
       {...filterStyledSystemMarginProps(rest)}
     >
-      <StyledGroupDescription>{description}</StyledGroupDescription>
+      {description ? (
+        <StyledGroupDescription data-element="tile-select-group-description">
+          {description}
+        </StyledGroupDescription>
+      ) : null}
       <div>{tiles}</div>
     </StyledTileSelectFieldset>
   );
diff --git a/src/components/tile-select/tile-select.spec.js b/src/components/tile-select/tile-select.spec.js
index 1d9df2b2f..afdc5e3c3 100644
--- a/src/components/tile-select/tile-select.spec.js
+++ b/src/components/tile-select/tile-select.spec.js
@@ -13,11 +13,13 @@ import {
   StyledSubtitle,
   StyledAdornment,
   StyledDescription,
+  StyledGroupDescription,
   StyledTitleContainer,
   StyledFocusWrapper,
   StyledFooterWrapper,
   StyledAccordionFooterWrapper,
 } from "./tile-select.style";
+
 import Button from "../button";
 import Icon from "../icon";
 import StyledIcon from "../icon/icon.style";
@@ -43,6 +45,15 @@ describe("TileSelect", () => {
     wrapper = mount(<TileSelect {...props} />);
   };
 
+  const renderWithTitleSelectGroup = (props) => {
+    wrapper = mount(
+      <TileSelectGroup name="tile-select-group" {...props}>
+        <TileSelect />
+        <TileSelect />
+      </TileSelectGroup>
+    );
+  };
+
   beforeEach(() => {
     render();
   });
@@ -165,6 +176,19 @@ describe("TileSelect", () => {
     );
   });
 
+  it("renders group description as p element when description prop is passed as string", () => {
+    renderWithTitleSelectGroup({ description: "description" });
+    expect(wrapper.find(StyledGroupDescription).prop("as")).toBe(undefined);
+    expect(wrapper.find(StyledGroupDescription).prop("children")).toBe(
+      "description"
+    );
+  });
+
+  it("does not render group description element, as description prop is undefined", () => {
+    renderWithTitleSelectGroup();
+    expect(wrapper.find(StyledGroupDescription).exists()).toEqual(false);
+  });
+
   describe("styles", () => {
     it("renders proper colors when TileSelect is checked", () => {
       render({ checked: true });


Test patch:
diff --git a/src/components/tile-select/tile-select.test.js b/src/components/tile-select/tile-select.test.js
index 19183213b..a360a4e36 100644
--- a/src/components/tile-select/tile-select.test.js
+++ b/src/components/tile-select/tile-select.test.js
@@ -17,7 +17,11 @@ import {
   legendStyleComponent,
 } from "../../../cypress/locators/tileSelect/index";
 
-import { getComponent, getElement } from "../../../cypress/locators/index";
+import {
+  getComponent,
+  getElement,
+  getDataElementByValue,
+} from "../../../cypress/locators/index";
 
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 
@@ -54,11 +58,7 @@ const MultiTileSelectGroupComponent = ({ ...props }) => {
   const [value3, setValue3] = React.useState(false);
   const [value4, setValue4] = React.useState(false);
   return (
-    <TileSelectGroup
-      legend="Tile Select"
-      description="Pick any number of available options"
-      {...props}
-    >
+    <TileSelectGroup legend="Tile Select" {...props}>
       <TileSelect
         value="1"
         name="multi-1"
@@ -306,6 +306,22 @@ context("Tests for TileSelect component", () => {
       }
     );
 
+    it("p element should be rendered when a description is passed to TileSelectGroup component", () => {
+      CypressMountWithProviders(
+        <MultiTileSelectGroupComponent description="foo" />
+      );
+      getDataElementByValue("tile-select-group-description")
+        .should("exist")
+        .and("be.visible");
+    });
+
+    it("p element should not be rendered when no description is passed to TileSelectGroup component", () => {
+      CypressMountWithProviders(<MultiTileSelectGroupComponent />);
+      getDataElementByValue("tile-select-group-description").should(
+        "not.exist"
+      );
+    });
+
     it.each([
       [false, "rgba(0, 0, 0, 0.9)"],
       [true, "rgba(0, 0, 0, 0.3)"],