Merge branch 'main' of github.com:Giveth/ui-design-system into main

Giveth · Jun 8, 2022 · 7e1979c · 7e1979c
2 parents 846f5b7 + a9fc232
commit 7e1979c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 12 deletions.
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { FC } from 'react';
 import styled from 'styled-components';
 import { brandColors, neutralColors } from '../../common/colors';
+import { rotate } from '../../styled-components/animations';
 import { ButtonText } from '../typography/ButtonText';
 import { IButtonContainerProps, IButtonProps } from './type';
 
@@ -16,23 +17,21 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	gap: 4px;
 	white-space: nowrap;
 	${props => {
+		if (props.disabled) {
+			if (props.buttonType === 'texty') {
+				return `color: ${brandColors.giv[500]};background: unset};padding: 8px 24px;opacity: 0.5;`;
+			}
+			return `color: ${brandColors.giv[400]};background: ${brandColors.giv[500]};opacity: 0.5;`;
+		}
 		switch (props.buttonType) {
 			case 'primary':
-				return props.disabled
-					? `color: ${brandColors.giv[400]};background: ${brandColors.giv[500]};opacity: 0.5;`
-					: `color: ${neutralColors.gray[100]};background: ${brandColors.pinky[500]};`;
+				return `color: ${neutralColors.gray[100]};background: ${brandColors.pinky[500]};`;
 			case 'secondary':
-				return props.disabled
-					? `color: ${brandColors.giv[400]};background: ${brandColors.giv[500]};opacity: 0.5;`
-					: `color: ${neutralColors.gray[100]};background: ${brandColors.giv[500]};`;
+				return `color: ${neutralColors.gray[100]};background: ${brandColors.giv[500]};`;
 			case 'texty':
-				return props.disabled
-					? `color: ${brandColors.giv[500]};background: unset};padding: 8px 24px;opacity: 0.5;`
-					: `color: ${brandColors.deep[100]};background: unset};padding: 8px 24px;`;
+				return `color: ${brandColors.deep[100]};background: unset};padding: 8px 24px;`;
 			default:
-				return props.disabled
-					? `color: ${brandColors.giv[400]};background: ${brandColors.giv[500]};opacity: 0.5;`
-					: `color: ${neutralColors.gray[100]};background: ${brandColors.pinky[500]};`;
+				return `color: ${neutralColors.gray[100]};background: ${brandColors.pinky[500]};`;
 		}
 	}}
 	${props => (props.disabled ? '' : 'cursor: pointer;')}
@@ -53,11 +52,44 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	}
 `;
 
+const LoadingContainer = styled.div<{ loading: number }>`
+	position: relative;
+	transition: width 0.3s ease;
+	width: ${props => (props.loading ? '16px' : 0)};
+`;
+
+const Loader = styled.div<IButtonContainerProps>`
+	border: 3px solid
+		${props => {
+			if (props.disabled) return brandColors.giv[600];
+
+			switch (props.buttonType) {
+				case 'primary':
+					return brandColors.pinky[600];
+				case 'secondary':
+					return brandColors.giv[600];
+				case 'texty':
+					return brandColors.giv[500];
+				default:
+					return brandColors.giv[500];
+			}
+		}};
+	border-radius: 50%;
+	border-top: 3px solid white;
+	width: 12px;
+	height: 12px;
+	animation: ${rotate} 1s ease infinite;
+	position: absolute;
+	top: -8px;
+	left: -8px;
+`;
+
 export const Button: FC<IButtonProps> = ({
 	label,
 	size = 'medium',
 	buttonType = 'secondary',
 	disabled = false,
+	loading = false,
 	onClick,
 	icon,
 	className,
@@ -70,6 +102,11 @@ export const Button: FC<IButtonProps> = ({
 			onClick={onClick}
 			className={className}
 		>
+			<LoadingContainer loading={+loading}>
+				{loading && (
+					<Loader buttonType={buttonType} disabled={disabled} />
+				)}
+			</LoadingContainer>
 			<ButtonText size={size}>{label}</ButtonText>
 			{icon && icon}
 		</ButtonContainer>

diff --git a/src/components/buttons/type.ts b/src/components/buttons/type.ts
@@ -10,5 +10,6 @@ export interface IButtonContainerProps {
 }
 
 export interface IButtonProps extends IButtonContainerProps {
+	loading?: boolean;
 	label: string;
 }
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
@@ -18,6 +18,7 @@ Primary.args = {
 	label: 'Primary',
 	size: 'medium',
 	disabled: false,
+	loading: false,
 };
 
 export const Secondary = Template.bind({});
@@ -26,6 +27,7 @@ Secondary.args = {
 	label: 'Secondary',
 	size: 'medium',
 	disabled: false,
+	loading: false,
 };
 
 export const Texty = Template.bind({});
@@ -34,4 +36,5 @@ Texty.args = {
 	label: 'Texty',
 	size: 'medium',
 	disabled: false,
+	loading: false,
 };
diff --git a/src/styled-components/animations.tsx b/src/styled-components/animations.tsx
@@ -0,0 +1,11 @@
+import { keyframes } from 'styled-components';
+
+export const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`;