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 = { 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({ validationSchema, isHeaderDisabled = false, isSquareCorners = true, + icon, }: SQFormScrollableCardProps): React.ReactElement { const hasSubHeader = Boolean(SubHeaderComponent); @@ -233,6 +236,7 @@ function SQFormScrollableCard({ 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: , +};