Repository: Sage/carbon (ts)

Issue:
Card: focus indicator doesn't wrap full Card when onClick and height props are specifed
### Description

Spoke to @edleeks87 who informed me that the `height` prop is not passed to the underlying button when there’s an onClick also set. As shown, this leads to some interesting focus indicator outlines.


### Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-8fzovy?file=src%2FApp.tsx

### Steps to reproduce

Tab onto a Card with `onClick` and `height` props defined

### JIRA ticket numbers (Sage only)

_No response_

### Suggested solution

_No response_

### Carbon version

125.0.0

### Design tokens version

_No response_

### Relevant browsers

Chrome

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request description:
fix(card): ensure that focus outline wraps all card content when `height` prop is set
fix #6741


### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
Ensures that the card content has a responsive height so the focus styles wrap all of the interactive area of the content when the `Card` has a `height` prop passed

![image](https://github.com/Sage/carbon/assets/44157880/55ce7a8a-57b3-40ff-adc8-a36416a24583)


### Current behaviour

<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
Content is not responsive when `height` prop is passed to `Card`

![image](https://github.com/Sage/carbon/assets/44157880/93a07c47-5cbb-4e53-9f5e-5e9cd5558636)

### 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] Playwright automation tests added or updated if required
- [x] Storybook added or updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright 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?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->
`CustomHeight` test story added

Patch:
diff --git a/src/components/card/card.pw.tsx b/src/components/card/card.pw.tsx
index fc7fa9972..91528271a 100644
--- a/src/components/card/card.pw.tsx
+++ b/src/components/card/card.pw.tsx
@@ -60,7 +60,7 @@ test.describe("Check Card component styling", () => {
       mount,
       page,
     }) => {
-      await mount(<CardComponent {...props} />);
+      await mount(<WithCustomHeight {...props} />);
 
       const cardElement = card(page);
       const cardContentElement = cardContent(page);
@@ -78,6 +78,8 @@ test.describe("Check Card component styling", () => {
         "box-shadow",
         "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
       );
+
+      await expect(cardContentElement).toHaveCSS("height", "500px");
     });
 
     test(`should match the expected styling when ${key} is passed with custom boxShadow and hoverBoxShadow props`, async ({
diff --git a/src/components/card/card.style.ts b/src/components/card/card.style.ts
index fc42d4119..1ba90111e 100644
--- a/src/components/card/card.style.ts
+++ b/src/components/card/card.style.ts
@@ -109,6 +109,9 @@ const StyledCardContent = styled.div.attrs(
     interactive &&
     css`
       cursor: pointer;
+      display: inline-flex;
+      flex-direction: column;
+      height: 100%;
 
       ${!theme.focusRedesignOptOut &&
       css`
@@ -119,6 +122,7 @@ const StyledCardContent = styled.div.attrs(
       `}
     `}
 
+  align-items: stretch;
   outline: none;
   text-decoration: none;
   background-color: inherit;


Test patch:
diff --git a/src/components/card/card-test.stories.tsx b/src/components/card/card-test.stories.tsx
index 3553f4f2b..d39a3e1da 100644
--- a/src/components/card/card-test.stories.tsx
+++ b/src/components/card/card-test.stories.tsx
@@ -12,7 +12,7 @@ import Box from "../box";
 
 export default {
   title: "Card/Test",
-  includeStories: ["DefaultStory"],
+  includeStories: ["DefaultStory", "CustomHeight"],
   component: Card,
   parameters: {
     docs: {
@@ -277,3 +277,78 @@ export const CardTextAlignment = ({ ...props }) => {
     </Card>
   );
 };
+
+export const CustomHeight = () => {
+  return (
+    <>
+      <Card
+        height="500px"
+        onClick={() => {}}
+        footer={
+          <CardFooter>
+            <CardColumn>
+              <Link icon="link" href="https://carbon.sage.com/">
+                Footer link
+              </Link>
+            </CardColumn>
+          </CardFooter>
+        }
+      >
+        <CardRow>
+          <CardColumn align="left">
+            <Heading title="Heading" divider={false} />
+            <Typography fontSize="16px" m={0}>
+              Additional text
+            </Typography>
+          </CardColumn>
+          <CardColumn align="right">
+            <Icon type="image" />
+          </CardColumn>
+        </CardRow>
+        <CardRow>
+          <CardColumn>
+            <Typography fontSize="16px" m={0} fontWeight="bold">
+              Body text
+            </Typography>
+            <Heading title="More text" divider={false} />
+            <Typography>Even more text</Typography>
+          </CardColumn>
+        </CardRow>
+      </Card>
+      <Card
+        height="500px"
+        href="#"
+        footer={
+          <CardFooter>
+            <CardColumn>
+              <Link icon="link" href="https://carbon.sage.com/">
+                Footer link
+              </Link>
+            </CardColumn>
+          </CardFooter>
+        }
+      >
+        <CardRow>
+          <CardColumn align="left">
+            <Heading title="Heading" divider={false} />
+            <Typography fontSize="16px" m={0}>
+              Additional text
+            </Typography>
+          </CardColumn>
+          <CardColumn align="right">
+            <Icon type="image" />
+          </CardColumn>
+        </CardRow>
+        <CardRow>
+          <CardColumn>
+            <Typography fontSize="16px" m={0} fontWeight="bold">
+              Body text
+            </Typography>
+            <Heading title="More text" divider={false} />
+            <Typography>Even more text</Typography>
+          </CardColumn>
+        </CardRow>
+      </Card>
+    </>
+  );
+};
diff --git a/src/components/card/components.test-pw.tsx b/src/components/card/components.test-pw.tsx
index c396de186..2fb98b870 100644
--- a/src/components/card/components.test-pw.tsx
+++ b/src/components/card/components.test-pw.tsx
@@ -334,8 +334,8 @@ export const WithWidthProvided = () => (
   </Card>
 );
 
-export const WithCustomHeight = () => (
-  <Card height="500px">
+export const WithCustomHeight = (props: Partial<CardProps>) => (
+  <Card height="500px" {...props}>
     <CardRow>
       <CardColumn align="left">
         <Heading title="Stripe - [account name]" divider={false} />