From 26eff25ed1e03385c6195ee551a03a007b6edbd5 Mon Sep 17 00:00:00 2001
From: Ramin <r.ramazanpour@aut.ac.ir>
Date: Wed, 24 Aug 2022 12:38:29 +0430
Subject: [PATCH] fix: add lead large font size

---
 src/components/typography/body/Lead.tsx      | 22 ++++++++++++++++++--
 src/stories/typography/body/Lead.stories.tsx | 10 ++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/typography/body/Lead.tsx b/src/components/typography/body/Lead.tsx
index 4d22cd8..7469c58 100644
--- a/src/components/typography/body/Lead.tsx
+++ b/src/components/typography/body/Lead.tsx
@@ -1,10 +1,28 @@
 import styled from 'styled-components';
 
-export const Lead = styled.div`
+export interface ILeadProps {
+	size?: 'medium' | 'large';
+}
+
+const fontSize = {
+	medium: '20px',
+	large: '24px',
+};
+
+export const Lead = styled.div<ILeadProps>`
 	/* Body/Lead */
 	font-family: Red Hat Text;
 	font-style: normal;
 	font-weight: normal;
-	font-size: 20px;
 	line-height: 150%;
+	${props => {
+		switch (props.size) {
+			case 'medium':
+				return `font-size: ${fontSize.medium};`;
+			case 'large':
+				return `font-size: ${fontSize.large};`;
+			default:
+				return `font-size: ${fontSize.medium};`;
+		}
+	}}
 `;
diff --git a/src/stories/typography/body/Lead.stories.tsx b/src/stories/typography/body/Lead.stories.tsx
index b557713..e1a5b05 100644
--- a/src/stories/typography/body/Lead.stories.tsx
+++ b/src/stories/typography/body/Lead.stories.tsx
@@ -13,4 +13,12 @@ const Template: ComponentStory<typeof Lead> = args => (
 	</Lead>
 );
 
-export const Example = Template.bind({});
+export const Medium = Template.bind({});
+Medium.args = {
+	size: 'medium',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+	size: 'large',
+};