From 38adea62ec3e40b2e812c9b5089e6194fc752de5 Mon Sep 17 00:00:00 2001
From: Harold Vilander <harold.vilander@selectquote.com>
Date: Thu, 4 Aug 2022 11:21:57 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Adds=20icon=20prop=20to?=
 =?UTF-8?q?=20scrollable=20card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

provides and optional icon prop to supply the scrollable card an icon to
place to the left of the title

✅ Closes: 744
---
 .../SQFormScrollableCard/SQFormScrollableCard.tsx         | 4 ++++
 stories/SQFormScrollableCard.stories.tsx                  | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/components/SQFormScrollableCard/SQFormScrollableCard.tsx b/src/components/SQFormScrollableCard/SQFormScrollableCard.tsx
index bb130aca..22c6924c 100644
--- a/src/components/SQFormScrollableCard/SQFormScrollableCard.tsx
+++ b/src/components/SQFormScrollableCard/SQFormScrollableCard.tsx
@@ -78,6 +78,8 @@ export type SQFormScrollableCardProps<Values extends FormikValues> = {
   titleVariant?: TypographyVariant;
   /** Boolean used to determine if the corners of the card should be squared */
   isSquareCorners?: boolean;
+  /** An Icon to be shown to the left of the title */
+  icon?: React.ReactNode;
 };
 
 type useStylesProps = {
@@ -149,6 +151,7 @@ function SQFormScrollableCard<Values>({
   validationSchema,
   isHeaderDisabled = false,
   isSquareCorners = true,
+  icon,
 }: SQFormScrollableCardProps<Values>): React.ReactElement {
   const hasSubHeader = Boolean(SubHeaderComponent);
 
@@ -233,6 +236,7 @@ function SQFormScrollableCard<Values>({
                     title={title}
                     className={classes.cardHeader}
                     titleTypographyProps={{variant: 'h5'}}
+                    avatar={icon}
                   />
                 )}
 
diff --git a/stories/SQFormScrollableCard.stories.tsx b/stories/SQFormScrollableCard.stories.tsx
index 4cb02cfe..3079a256 100644
--- a/stories/SQFormScrollableCard.stories.tsx
+++ b/stories/SQFormScrollableCard.stories.tsx
@@ -2,6 +2,7 @@ import * as Yup from 'yup';
 import React from 'react';
 
 import {Paper} from '@material-ui/core';
+import {Public} from '@material-ui/icons';
 import {SQFormScrollableCard, SQFormTextField} from '../src';
 import {createDocsPage} from './utils/createDocsPage';
 import type {GridProps} from '@material-ui/core';
@@ -137,3 +138,10 @@ WithRoundedCorners.args = {
   title: 'With Rounded Corners',
   isSquareCorners: false,
 };
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  ...defaultArgs,
+  title: 'With Icon',
+  icon: <Public fontSize="large" />,
+};