Merge pull request #97 from Giveth/fix-sc-props

Fix Styled component props
Giveth · Feb 25, 2024 · 749c87a · 749c87a
2 parents c7c8703 + 15127f4
commit 749c87a
Show file tree

Hide file tree

Showing 37 changed files with 130 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.21",
+	"version": "1.11.22",
 	"files": [
 		"/lib"
 	],

diff --git a/src/components/buttonLinks/ButtonLink.tsx b/src/components/buttonLinks/ButtonLink.tsx
@@ -16,7 +16,7 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 	gap: 4px;
 	white-space: nowrap;
 	${props => {
-		switch (props.linkType) {
+		switch (props.$linkType) {
 			case 'primary':
 				return props.disabled
 					? css`
@@ -110,7 +110,7 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
   :hover {
 		${props => {
 			if (props.disabled) return '';
-			switch (props.linkType) {
+			switch (props.$linkType) {
 				case 'primary':
 					return css`
 						color: ${neutralColors.gray[100]};
@@ -169,7 +169,7 @@ export const ButtonLink: FC<IButtonLinkProps> = forwardRef(
 				href={href}
 				as={isExternal ? 'a' : 'span'}
 				target={target}
-				linkType={linkType}
+				$linkType={linkType}
 				disabled={disabled}
 				size={size}
 				className={className}

diff --git a/src/components/buttonLinks/OutlineButtonLink.tsx b/src/components/buttonLinks/OutlineButtonLink.tsx
@@ -18,7 +18,7 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 	gap: 4px;
 	white-space: nowrap;
 	${props => {
-		switch (props.linkType) {
+		switch (props.$linkType) {
 			case 'primary':
 				return props.disabled
 					? css`
@@ -55,7 +55,7 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
   :hover {
 		${props => {
 			if (props.disabled) return '';
-			switch (props.linkType) {
+			switch (props.$linkType) {
 				case 'primary':
 					return css`
 						color: ${brandColors.pinky[500]};
@@ -97,7 +97,7 @@ export const OutlineLinkButton: FC<IButtonLinkProps> = forwardRef(
 				ref={ref as any}
 				href={href}
 				target={target}
-				linkType={linkType}
+				$linkType={linkType}
 				size={size}
 				disabled={disabled}
 				className={className}

diff --git a/src/components/buttonLinks/type.ts b/src/components/buttonLinks/type.ts
@@ -1,22 +1,27 @@
 import type { ReactNode, ComponentPropsWithoutRef } from 'react';
 
+export type ButtonStyleType =
+	| 'primary'
+	| 'secondary'
+	| 'texty'
+	| 'texty-gray'
+	| 'texty-primary'
+	| 'texty-secondary';
+
+export type ButtonSize = 'small' | 'medium' | 'large';
+
 export interface IButtonLinkContainerProps {
-	linkType?:
-		| 'primary'
-		| 'secondary'
-		| 'texty'
-		| 'texty-gray'
-		| 'texty-primary'
-		| 'texty-secondary';
-	size?: 'small' | 'medium' | 'large';
+	$linkType?: ButtonStyleType;
+	size?: ButtonSize;
 	disabled?: boolean;
-	isExternal?: boolean;
 }
 
-export interface IButtonLinkProps
-	extends ComponentPropsWithoutRef<'a'>,
-		IButtonLinkContainerProps {
+export interface IButtonLinkProps extends ComponentPropsWithoutRef<'a'> {
 	icon?: ReactNode;
 	leftIcon?: ReactNode;
 	label: string;
+	linkType?: ButtonStyleType;
+	isExternal?: boolean;
+	size?: ButtonSize;
+	disabled?: boolean;
 }
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
@@ -19,39 +19,39 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	user-select: none;
 	${props => {
 		if (props.disabled) {
-			if (props.buttonType === 'texty') {
+			if (props.$buttonType === 'texty') {
 				return css`
 					color: ${brandColors.giv[500]};
 					background-color: unset;
 					padding: 8px 24px;
 					opacity: 0.5;
 				`;
 			}
-			if (props.buttonType === 'texty-gray') {
+			if (props.$buttonType === 'texty-gray') {
 				return css`
 					color: ${neutralColors.gray[300]};
 					background-color: unset;
 					padding: 8px 24px;
 					opacity: 0.5;
 				`;
 			}
-			if (props.buttonType === 'texty-primary') {
+			if (props.$buttonType === 'texty-primary') {
 				return css`
 					color: ${brandColors.pinky[500]};
 					background-color: unset;
 					padding: 8px 24px;
 					opacity: 0.5;
 				`;
 			}
-			if (props.buttonType === 'texty-secondary') {
+			if (props.$buttonType === 'texty-secondary') {
 				return css`
 					color: ${brandColors.giv[500]};
 					background-color: unset;
 					padding: 8px 24px;
 					opacity: 0.5;
 				`;
 			}
-			if (props.buttonType === 'primary') {
+			if (props.$buttonType === 'primary') {
 				return css`
 					background-color: ${brandColors.pinky[300]};
 					color: ${brandColors.pinky[200]};
@@ -63,7 +63,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 				opacity: 0.5;
 			`;
 		}
-		switch (props.buttonType) {
+		switch (props.$buttonType) {
 			case 'primary':
 				return css`
 					color: ${neutralColors.gray[100]};
@@ -109,7 +109,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
   :hover {
 		${props => {
 			if (props.disabled) return '';
-			switch (props.buttonType) {
+			switch (props.$buttonType) {
 				case 'primary':
 					return css`
 						color: ${neutralColors.gray[100]};
@@ -161,7 +161,7 @@ export const Button: FC<IButtonProps> = ({
 }) => {
 	return (
 		<ButtonContainer
-			buttonType={buttonType}
+			$buttonType={buttonType}
 			size={size}
 			disabled={disabled}
 			onClick={onClick}
@@ -170,7 +170,7 @@ export const Button: FC<IButtonProps> = ({
 		>
 			<LoadingContainer loading={+loading}>
 				{loading && (
-					<Loader buttonType={buttonType} disabled={disabled} />
+					<Loader $buttonType={buttonType} disabled={disabled} />
 				)}
 			</LoadingContainer>
 			{leftIcon && leftIcon}

diff --git a/src/components/buttons/OutlineButton.tsx b/src/components/buttons/OutlineButton.tsx
@@ -20,7 +20,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	white-space: nowrap;
 	user-select: none;
 	${props => {
-		switch (props.buttonType) {
+		switch (props.$buttonType) {
 			case 'primary':
 				return props.disabled
 					? css`
@@ -64,7 +64,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
   :hover {
 		${props => {
 			if (props.disabled) return '';
-			switch (props.buttonType) {
+			switch (props.$buttonType) {
 				case 'primary':
 					return css`
 						color: ${brandColors.pinky[500]};
@@ -99,7 +99,7 @@ export const OutlineButton: FC<IButtonProps> = ({
 }) => {
 	return (
 		<ButtonContainer
-			buttonType={buttonType}
+			$buttonType={buttonType}
 			disabled={disabled}
 			onClick={onClick}
 			className={className}
@@ -108,7 +108,7 @@ export const OutlineButton: FC<IButtonProps> = ({
 		>
 			<LoadingContainer loading={+loading}>
 				{loading && (
-					<Loader buttonType={buttonType} disabled={disabled} />
+					<Loader $buttonType={buttonType} disabled={disabled} />
 				)}
 			</LoadingContainer>
 			{leftIcon && leftIcon}

diff --git a/src/components/buttons/common.tsx b/src/components/buttons/common.tsx
@@ -13,12 +13,12 @@ export const Loader = styled.div<IButtonContainerProps>`
 	border: 3px solid
 		${props => {
 			if (props.disabled) {
-				switch (props.buttonType) {
+				switch (props.$buttonType) {
 					case 'primary':
 						return brandColors.pinky[400];
 				}
 			}
-			switch (props.buttonType) {
+			switch (props.$buttonType) {
 				case 'primary':
 					return brandColors.pinky[600];
 				case 'secondary':

diff --git a/src/components/buttons/type.ts b/src/components/buttons/type.ts
@@ -1,22 +1,18 @@
 import type { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { ButtonSize, ButtonStyleType } from '../buttonLinks/type';
 
 export interface IButtonContainerProps {
-	buttonType?:
-		| 'primary'
-		| 'secondary'
-		| 'texty'
-		| 'texty-gray'
-		| 'texty-primary'
-		| 'texty-secondary';
+	$buttonType?: ButtonStyleType;
 	disabled?: boolean;
-	size?: 'small' | 'medium' | 'large';
+	size?: ButtonSize;
 }
 
-export interface IButtonProps
-	extends ComponentPropsWithoutRef<'button'>,
-		IButtonContainerProps {
+export interface IButtonProps extends ComponentPropsWithoutRef<'button'> {
 	loading?: boolean;
 	label: string;
 	icon?: ReactNode;
 	leftIcon?: ReactNode;
+	buttonType?: ButtonStyleType;
+	disabled?: boolean;
+	size?: ButtonSize;
 }
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -30,6 +30,7 @@ export * from './buttonLinks/ButtonLink';
 export * from './buttonLinks/OutlineButtonLink';
 
 export * from './layout/Grid';
+export * from './layout/Flex';
 
 export * from './icons';
 export * from './icons/type';

diff --git a/src/components/layout/Flex.tsx b/src/components/layout/Flex.tsx
@@ -0,0 +1,39 @@
+import { type CSSProperties } from 'react';
+import styled from 'styled-components';
+
+interface IFlexProps {
+	$flexWrap?: boolean;
+	$alignItems?: CSSProperties['alignItems'];
+	$justifyContent?: CSSProperties['justifyContent'];
+	$flexDirection?: CSSProperties['flexDirection'];
+	gap?: string;
+}
+
+export const Flex = styled.div<IFlexProps>`
+	display: flex;
+	flex-direction: ${props =>
+		props.$flexDirection ? props.$flexDirection : 'initial'};
+	flex-wrap: ${props => (props.$flexWrap ? 'wrap' : 'nowrap')};
+	align-items: ${props =>
+		props.$alignItems ? props.$alignItems : 'initial'};
+	justify-content: ${props =>
+		props.$justifyContent ? props.$justifyContent : 'initial'};
+	gap: ${props => props.gap};
+`;
+
+interface IFlexCenter {
+	gap?: string;
+	direction?: CSSProperties['flexDirection'];
+}
+
+export const FlexCenter = styled.div<IFlexCenter>`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: ${props => props.gap};
+	flex-direction: ${props => props.direction};
+`;
+
+export const FlexSpacer = styled.div`
+	flex: 1;
+`;
diff --git a/src/components/typography/Overline.tsx b/src/components/typography/Overline.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export interface IOverlineProps {
-	styleType?: 'Small' | 'Regular' | 'Italic';
+	$styleType?: 'Small' | 'Regular' | 'Italic';
 }
 
 export const Overline = styled.span<IOverlineProps>`
@@ -10,7 +10,7 @@ export const Overline = styled.span<IOverlineProps>`
 	line-height: 132%;
 	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
-		switch (props.styleType) {
+		switch (props.$styleType) {
 			case 'Small':
 				return 'font-size: 0.625rem;font-style: normal;font-weight: 500;';
 			case 'Regular':

diff --git a/src/components/typography/body/Caption.tsx b/src/components/typography/body/Caption.tsx
@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 
 export interface ICaptionProps {
-	medium?: boolean;
+	$medium?: boolean;
 }
 
 export const Caption = styled.div<ICaptionProps>`
 	/* Body/Caption */
 	font-family: Red Hat Text, sans-serif;
 	font-style: normal;
-	font-weight: ${props => (props.medium ? 500 : 400)};
+	font-weight: ${props => (props.$medium ? 500 : 400)};
 	font-size: 0.875rem;
 	line-height: 150%;
 	color: ${props => (props.color ? props.color : 'inherit')};

diff --git a/src/components/typography/displays/D.tsx b/src/components/typography/displays/D.tsx
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const D = styled.div`
+	/* Display/D1 */
+	font-family: TeX Gyre Adventor, sans-serif;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: -0.04em;
+	color: ${props => (props.color ? props.color : 'inherit')};
+`;
diff --git a/src/components/typography/displays/D1.tsx b/src/components/typography/displays/D1.tsx
@@ -1,15 +1,11 @@
 import styled from 'styled-components';
 import { mediaQueries } from '../../../common/deviceSize';
+import { D } from './D';
 
-export const D1 = styled.div`
+export const D1 = styled(D)`
 	/* Display/D1 */
-	font-family: TeX Gyre Adventor, sans-serif;
-	font-style: normal;
-	font-weight: 700;
 	font-size: 5rem;
 	line-height: 130%;
-	letter-spacing: -0.04em;
-	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 6.69rem;
 	}

diff --git a/src/components/typography/displays/D2.tsx b/src/components/typography/displays/D2.tsx
@@ -1,15 +1,11 @@
 import styled from 'styled-components';
 import { mediaQueries } from '../../../common/deviceSize';
+import { D } from './D';
 
-export const D2 = styled.div`
+export const D2 = styled(D)`
 	/* Display/D2 */
-	font-family: TeX Gyre Adventor, sans-serif;
-	font-style: normal;
-	font-weight: 700;
 	font-size: 4.625rem;
 	line-height: 130%;
-	letter-spacing: -0.04em;
-	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 6.06rem;
 	}