Merge pull request #614 from Sysvale/feat/icon-button-primary-prop

feat(component): Implementa variantes no IconButton
Sysvale · Apr 19, 2024 · cf51ccc · cf51ccc
2 parents c398868 + 94eb788
commit cf51ccc
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.1.0",
+	"version": "3.2.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
@@ -46,8 +46,8 @@ export default {
 			},
 		},
 		/**
-		 * Especifica o `name` do ícone do ion-icons a ser apresentado no corpo do botão.
-		 */
+		* Especifica o `name` do ícone do cuida icons a ser apresentado no corpo do botão.
+		*/
 		icon: {
 			type: String,
 			default: 'create-outline',
@@ -80,6 +80,14 @@ export default {
 			type: String,
 			default: 'check-outline',
 		},
+		/**
+		* A variante de cor. São 9 variantes implementadas: 'green', 'teal',
+		* 'blue', 'indigo', 'violet', 'pink', 'red', 'orange', 'amber', 'gray' e 'dark'.
+		*/
+		variant: {
+			type: String,
+			default: 'white',
+		},
 	},
 
 	data() {
@@ -98,7 +106,9 @@ export default {
 
 		computedModifiers() {
 			const status = this.disabled ? 'cds-icon-button--disabled' : '';
-			return `${status} ${this.predefinedSize}`;
+			const variantClass = `cds-icon-button__container--${this.variant}`;
+
+			return `${status} ${this.predefinedSize} ${variantClass}`;
 		},
 	},
 
@@ -152,9 +162,7 @@ export default {
 
 .cds-icon-button {
 	&__container {
-		color: $n-600;
-		background-color: $n-0;
-		border: 1px solid $n-50 !important;
+		border: none !important;
 		border-radius: $border-radius-extra-small;
 		cursor: pointer;
 		box-sizing: border-box;
@@ -163,20 +171,40 @@ export default {
 			outline: none !important;
 		}
 
-		&:hover {
-			border-color: $n-100 !important;
+		@include variantResolver using ($color-name, $shade-50, $shade-100, $shade-200, $shade-300, $base-color, $shade-500, $shade-600) {
+			@extend .cds-icon-button__container;
+			background-color: $base-color;
+			color: $n-0;
+
+			@if ($color-name == 'gray') {
+				background-color: $shade-100;
+				color: $n-600;
+			}
+
+			@if ($color-name == 'white') {
+				color: $n-600;
+				outline: 1px solid $n-50 !important;
+
+				&:hover {
+					background-color: $n-10;
+				}
+			} @else {
+				&:hover {
+					background-color: $shade-500;
+				}
+			}
 		}
 	}
 
 	&--disabled {
 		box-sizing: border-box;
-		border: 1px solid transparent !important;
+		outline: 1px solid transparent !important;
 		color: $n-300 !important;
 		background-color: $n-20 !important;
 		cursor: default !important;
 
 		&:hover {
-			border: 1px solid transparent !important;
+			outline: 1px solid transparent !important;
 		}
 	}
 

diff --git a/src/stories/components/IconButton.stories.mdx b/src/stories/components/IconButton.stories.mdx
@@ -5,6 +5,26 @@ import IconButton from '../../components/IconButton.vue';
 	title="Componentes/Forms/IconButton"
 	component={ IconButton }
 	argTypes={{
+		variant: {
+			control:{
+				type: 'select',
+				options: [
+					'white',
+					'green',
+					'teal',
+					'turquoise',
+					'blue',
+					'indigo',
+					'violet',
+					'pink',
+					'red',
+					'orange',
+					'amber',
+					'gray',
+					'dark'
+				],
+			}
+		},
 		size: {
 			control:{
 				type: 'select',
@@ -77,6 +97,7 @@ Nesse caso, recomendamos o uso de links.
 		args={{
 			size: 'sm',
 			icon: 'trash-outline',
+			variant: 'white',
 			tooltipText: 'Excluir',
 			disabled: false,
 			feedbackOnClick: true,