Merge pull request #613 from Sysvale/feat/button-block

feat(component): Adiciona prop block no cds-button, para torná-lo fluido

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.0.1",
+	"version": "3.1.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

src/components/Button.vue

@@ -19,6 +19,7 @@
 		</slot>
 	</button>
 </template>
+
 <script>
 import CdsSpinner from '../components/Spinner.vue';
 import Cdstip from '../utils/directives/cdstip';
@@ -49,6 +50,13 @@ export default {
 			type: String,
 			default: 'md',
 		},
+		/**
+		* Quando true, torna a largura do botão fluida
+		*/
+		block: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Especifica o texto a ser apresentado no corpo do botão.
 		 * Este texto será exibido apenas se o slot default não for utilizado.
@@ -111,6 +119,9 @@ export default {
 	},
 
 	computed: {
+		widthResolver() {
+			return this.block ? '100%' : 'max-content';
+		},
 
 		tooltipDisabled() {
 			return this.disabled && this.tooltipText !== '' ? this.tooltipText : null;
@@ -188,7 +199,8 @@ export default {
 		font-family: Satoshi, Inter, Avenir, Helvetica, Arial, sans-serif;
 		display: flex;
 		align-items: center;
-		width: max-content;
+		justify-content: center;
+		width: v-bind(widthResolver);
 		border: none;
 		cursor: pointer;
 
@@ -282,7 +294,7 @@ export default {
 
 	&--lg {
 		@include button-1;
-		padding: pYX(3, 6);
+		padding: pYX(4, 8);
 		border-radius: $border-radius-extra-small;
 	}
 }

src/stories/components/Button.stories.mdx

@@ -99,6 +99,7 @@ Nesse caso, recomendamos o uso de links.
 			variant: 'green',
 			size: 'md',
 			text: 'Button',
+			block: false,
 		}}
 	>
 		{ Template.bind({}) }