Merge pull request #24 from Giveth/fix-buttons-sizes

Fix buttons sizes
Giveth · Jan 27, 2022 · a1f184c · a1f184c
2 parents 7c1291d + 7487ab6
commit a1f184c
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 8 deletions.
diff --git a/src/components/buttonLinks/ButtonLink.tsx b/src/components/buttonLinks/ButtonLink.tsx
@@ -8,7 +8,7 @@ import { IButtonLinkContainerProps, IButtonLinkProps } from './type';
 const ButtonLinkContainer = styled.a<IButtonLinkContainerProps>`
 	border: none;
 	border-radius: 48px;
-	padding: 16px 24px;
+	padding: ${ props => props.size === 'large' ? '24px' : '16px'} 24px;
 	transition: background 0.3s ease;
 	display: flex;
 	justify-content: center;
@@ -73,6 +73,7 @@ export const ButtonLink: FC<IButtonLinkProps> = forwardRef(
 				target={target}
 				linkType={linkType}
 				disabled={disabled}
+				size={size}
 				href={href}
 				className={className}
 			>

diff --git a/src/components/buttonLinks/OulineButtonLink.tsx b/src/components/buttonLinks/OulineButtonLink.tsx
@@ -8,7 +8,7 @@ import { IButtonLinkContainerProps, IButtonLinkProps } from './type';
 const ButtonLinkContainer = styled.a<IButtonLinkContainerProps>`
 	border: 2px solid;
 	border-radius: 48px;
-	padding: 14px 22px;
+	padding: ${ props => props.size === 'large' ? '22px' : '14px'} 24px;
 	transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
 	background: unset;
 	display: flex;
@@ -67,6 +67,7 @@ export const OutlineLinkButton: FC<IButtonLinkProps> = forwardRef(
 				ref={ref as any}
 				target={target}
 				linkType={linkType}
+				size={size}
 				disabled={disabled}
 				href={href}
 				className={className}

diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
@@ -6,9 +6,9 @@ import { ButtonText } from '../typography/ButtonText';
 import { IButtonContainerProps, IButtonProps } from './type';
 
 const ButtonContainer = styled.button<IButtonContainerProps>`
-	border: none;
+	border: 0 solid;
 	border-radius: 48px;
-	padding: 16px 24px;
+	padding: ${ props => props.size === 'large' ? '24px' : '16px'} 24px;
 	transition: background 0.3s ease;
 	display: flex;
 	justify-content: center;
@@ -65,6 +65,7 @@ export const Button: FC<IButtonProps> = ({
 	return (
 		<ButtonContainer
 			buttonType={buttonType}
+			size={size}
 			disabled={disabled}
 			onClick={onClick}
 			className={className}

diff --git a/src/components/buttons/OulineButton.tsx b/src/components/buttons/OulineButton.tsx
@@ -8,7 +8,7 @@ import { IButtonContainerProps, IButtonProps } from './type';
 const ButtonContainer = styled.button<IButtonContainerProps>`
 	border: 2px solid;
 	border-radius: 48px;
-	padding: 14px 22px;
+	padding: ${ props => props.size === 'large' ? '22px' : '14px'} 24px;
 	transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
 	background: unset;
 	display: flex;
@@ -63,6 +63,7 @@ export const OulineButton: FC<IButtonProps> = ({
 			disabled={disabled}
 			onClick={onClick}
 			className={className}
+			size={size}
 		>
 			<ButtonText size={size}>
 				{label}

diff --git a/src/components/typography/ButtonText.tsx b/src/components/typography/ButtonText.tsx
@@ -12,11 +12,11 @@ export const ButtonText = styled.a<IButtonTextProps>`
 	${props => {
 		switch (props.size) {
 			case 'small':
-				return 'font-size: 12px;line-height: 114%;';
+				return 'font-size: 12px;line-height: 16px;';
 			case 'medium':
-				return 'font-size: 14px;line-height: 130%;';
+				return 'font-size: 14px;line-height: 18px;';
 			case 'large':
-				return 'font-size: 16px;line-height: 112%;';
+				return 'font-size: 16px;line-height: 18px;';
 			default:
 				return 'font-size: 14px;line-height: 18px;';
 		}

diff --git a/src/stories/ButtonLink.stories.tsx b/src/stories/ButtonLink.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ButtonLink } from '../components/buttonLinks/ButtonLink';
+
+
+export default {
+	title: 'Example/ButtonLink',
+	component: ButtonLink,
+} as ComponentMeta<typeof ButtonLink>;
+
+const Template: ComponentStory<typeof ButtonLink> = args => (
+	<ButtonLink {...args}>{args.label}</ButtonLink>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+	linkType: 'primary',
+	label: 'Primary',
+	size: 'medium',
+	disabled: false,
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+	linkType: 'secondary',
+	label: 'Secondary',
+	size: 'medium',
+	disabled: false,
+};
+
+export const Texty = Template.bind({});
+Texty.args = {
+	linkType: 'texty',
+	label: 'Texty',
+	size: 'medium',
+	disabled: false,
+};
diff --git a/src/stories/OutlineButtonLink.stories.tsx b/src/stories/OutlineButtonLink.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { OutlineLinkButton } from '../components/buttonLinks/OulineButtonLink';
+
+export default {
+	title: 'Example/ButtonLink',
+	component: OutlineLinkButton,
+} as ComponentMeta<typeof OutlineLinkButton>;
+
+const Template: ComponentStory<typeof OutlineLinkButton> = args => (
+	<OutlineLinkButton {...args}>{args.label}</OutlineLinkButton>
+);
+
+export const OulinePrimary = Template.bind({});
+OulinePrimary.args = {
+	buttonType: 'primary',
+	label: 'Ouline Primary',
+	size: 'medium',
+	disabled: false,
+};
+
+export const OulineSecondary = Template.bind({});
+OulineSecondary.args = {
+	buttonType: 'secondary',
+	label: 'Ouline Secondary',
+	size: 'medium',
+	disabled: false,
+};