Merge pull request #64 from Giveth/add_lead_large

add lead large font size

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};`;
+		}
+	}}
 `;

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',
+};