feat: 🎸 Adds icon prop to scrollable card

provides and optional icon prop to supply the scrollable card an icon to place to the left of the title ✅ Closes: 744
SelectQuoteLabs · Aug 4, 2022 · 38adea6 · 38adea6
1 parent 51f7ec1
commit 38adea6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git 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
@@ -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" />,
+};