Merge pull request #86 from Giveth/add-text-gray-variant

Add text gray variant

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.6",
+	"version": "1.11.7",
 	"files": [
 		"/lib"
 	],

src/components/buttonLinks/ButtonLink.tsx

@@ -49,6 +49,19 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 							background-color: unset;
 							padding: 8px 24px;
 					  `;
+			case 'texty-gray':
+				return props.disabled
+					? css`
+							color: ${neutralColors.gray[500]};
+							background-color: unset;
+							padding: 8px 24px;
+							opacity: 0.5;
+					  `
+					: css`
+							color: ${neutralColors.gray[500]};
+							background-color: unset;
+							padding: 8px 24px;
+					  `;
 			case 'texty-primary':
 				return props.disabled
 					? css`
@@ -113,20 +126,21 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 						color: ${brandColors.deep[100]};
 						background-color: ${brandColors.giv[700]};
 					`;
+				case 'texty-gray':
+					return css`
+						color: ${neutralColors.gray[700]};
+					`;
 				case 'texty-primary':
 					return css`
 						color: ${neutralColors.gray[100]};
-						background-color: ${brandColors.pinky[600]};
 					`;
 				case 'texty-secondary':
 					return css`
 						color: ${neutralColors.gray[100]};
-						background-color: ${brandColors.giv[700]};
 					`;
 				default:
 					return css`
 						color: ${brandColors.deep[100]};
-						background-color: ${brandColors.giv[700]};
 					`;
 			}
 		}}

src/components/buttonLinks/type.ts

@@ -5,6 +5,7 @@ export interface IButtonLinkContainerProps {
 		| 'primary'
 		| 'secondary'
 		| 'texty'
+		| 'texty-gray'
 		| 'texty-primary'
 		| 'texty-secondary';
 	size?: 'small' | 'medium' | 'large';

src/components/buttons/Button.tsx

@@ -27,6 +27,14 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 					opacity: 0.5;
 				`;
 			}
+			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') {
 				return css`
 					color: ${brandColors.pinky[500]};
@@ -72,6 +80,12 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 					background-color: unset;
 					padding: 8px 24px;
 				`;
+			case 'texty-gray':
+				return css`
+					color: ${neutralColors.gray[500]};
+					background-color: unset;
+					padding: 8px 24px;
+				`;
 			case 'texty-primary':
 				return css`
 					color: ${brandColors.pinky[500]};
@@ -111,6 +125,10 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 						color: ${brandColors.deep[100]};
 						background-color: ${brandColors.giv[700]};
 					`;
+				case 'texty-gray':
+					return css`
+						color: ${neutralColors.gray[700]};
+					`;
 				case 'texty-primary':
 					return css`
 						color: ${brandColors.pinky[700]};

src/components/buttons/type.ts

@@ -5,6 +5,7 @@ export interface IButtonContainerProps {
 		| 'primary'
 		| 'secondary'
 		| 'texty'
+		| 'texty-gray'
 		| 'texty-primary'
 		| 'texty-secondary';
 	disabled?: boolean;

src/stories/Button.stories.tsx

@@ -40,6 +40,15 @@ Texty.args = {
 	loading: false,
 };
 
+export const TextyGray = Template.bind({});
+TextyGray.args = {
+	buttonType: 'texty-gray',
+	label: 'Texty',
+	size: 'medium',
+	disabled: false,
+	loading: false,
+};
+
 export const TextyPrimary = Template.bind({});
 TextyPrimary.args = {
 	buttonType: 'texty-primary',

src/stories/ButtonLink.stories.tsx

@@ -36,6 +36,15 @@ Texty.args = {
 	disabled: false,
 };
 
+export const TextyGray = Template.bind({});
+
+TextyGray.args = {
+	linkType: 'texty-gray',
+	label: 'Texty',
+	size: 'medium',
+	disabled: false,
+};
+
 export const TextyPrimary = Template.bind({});
 
 TextyPrimary.args = {