Hotfix/fix fluid clickable (#872)

#### Por favor, verifique se o seu pull request está de acordo com o
checklist abaixo:

- [x] A implementação feita possui testes (Caso haja um motivo para não
haver testes/haver apenas testes de snapshot, descrever abaixo)
- [x] A documentação no mdx foi feita ou atualizada, caso necessário
- [x] O eslint passou localmente

### 1 - Resumo

### 2 - Tipo de pull request

- [ ] 🧱 Novo componente
- [ ] ✨ Nova feature ou melhoria
- [X] 🐛 Fix
- [ ] 👨‍💻 Refatoração
- [ ] 📝 Documentação
- [ ] 🎨 Estilo
- [ ] 🤖 Build ou CI/CD


### 3 - Esse PR fecha alguma issue? Favor referenciá-la
Não

### 4 - Quais são os passos para avaliar o pull request?
Corrige fluidez do wrapper clickable/box

### 5 - Imagem ou exemplo de uso:

### 6 - Esse pull request adiciona _breaking changes_?
- [ ] Sim
- [X] Não

Author: IhGori

package.json

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

src/components/Box.vue

@@ -7,6 +7,7 @@
 		<cds-clickable
 			class="box__container"
 			:clickable="clickable"
+			:fluid="fluid"
 			@click="handleClick"
 		>
 			<!-- @slot Slot utilizado para renderização do conteúdo interno do Box.-->

src/components/Clickable.vue

@@ -25,14 +25,28 @@ export default {
 		clickable: {
 			type: Boolean,
 			default: false,
-		}
-	}
+		},
+		/**
+		 * Permite que o clickable se expanda de forma fluida
+		 */
+		fluid: {
+			type: Boolean,
+			default: false,
+			required: false,
+		},
+	},
+
+	computed: {
+		widthResolver() {
+			return this.fluid ? '100%' : 'fit-content';
+		},
+	},
 }
 </script>
 
 <style lang="scss">
 .clickable__container {
-	width: fit-content;
+	width: v-bind(widthResolver);
 
 	&--clickable {
 		@extend .clickable__container;

src/components/Spacer.vue

@@ -129,6 +129,7 @@ export default {
 
 <style lang="scss" scoped>
 .spacer {
+	width: 100%;
 	margin-bottom: v-bind(marginBottomResolver);
 	margin-left: v-bind(marginLeftResolver);
 	margin-right: v-bind(marginRightResolver);

src/components/Tile.vue

@@ -154,7 +154,7 @@ function handleClick() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '../assets/sass/tokens.scss';
 
 .cds-tile {

src/stories/components/BaseInput.stories.mdx

@@ -125,7 +125,6 @@ export const supportingText = ['We’ll use this address if', 'Ask for help'];
 			errorMessage: 'Campo obrigatório',
 			tooltip: '',
 			tooltipIcon: 'info-outline',
-			linkText: 'link',
 			trailingIcon: 'info-outline',
 			leadingIcon: 'info-outline',
 		}}

src/stories/components/Label.stories.mdx

@@ -4,26 +4,6 @@ import Label from '../../components/Label.vue';
 <Meta
 	title="Componentes/Forms/Label"
 	component={ Label }
-	argTypes={{
-		variant: {
-			control:{
-				type: 'select',
-				options: [
-					'green',
-					'teal',
-					'turquoise',
-					'blue',
-					'indigo',
-					'violet',
-					'pink',
-					'red',
-					'orange',
-					'amber',
-					'dark'
-				],
-			}
-		},
-	}}
 	parameters={{
 		viewMode: 'docs',
 		previewTabs: { canvas: { hidden: true }},
@@ -100,8 +80,8 @@ export const Template = (args) => ({
 			required: false,
 			fluid: false,
 			for: 'input-id',
-			label: 'Label',
-            tooltip: '',
+			text: 'Label',
+			tooltip: '',
 			tooltipIcon: 'info-outline',
 			supportLink: '',
 			supportLinkUrl: '',

src/tests/__snapshots__/Breadcrumb.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`Breadcrumb snapshot test > renders correctly 1`] = `
 "<nav data-v-1a0f46d9="">
   <ul data-v-1a0f46d9="" class="breadcrumb">
     <li data-v-1a0f46d9="" role="presentation">
-      <cds-clickable-stub data-v-1a0f46d9="" clickable="true"></cds-clickable-stub>
+      <cds-clickable-stub data-v-1a0f46d9="" clickable="true" fluid="false"></cds-clickable-stub>
     </li>
     <li data-v-1a0f46d9="" role="presentation">
       <cds-spacer-stub data-v-1a0f46d9="" padding="0" paddingtop="0" paddingright="0" paddingbottom="0" paddingleft="0" margin="0" margintop="0" marginright="1" marginbottom="0" marginleft="1" class="breadcrumb__item"></cds-spacer-stub>

src/tests/__snapshots__/Table.spec.ts.snap

@@ -9,23 +9,23 @@ exports[`Table > renders correctly 1`] = `
         <!--
 						@slot Slot usado para renderizar itens personalizados para o cabeçalho da tabela. Dados do item referente à coluna podem ser acessados através da propriedade \`data\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ data }
 					-->
-        <cds-clickable-stub data-v-83c58b0d="" clickable="false" id="sort-icon-field1"></cds-clickable-stub>
+        <cds-clickable-stub data-v-83c58b0d="" clickable="false" fluid="false" id="sort-icon-field1"></cds-clickable-stub>
       </div>
     </th>
     <th data-v-83c58b0d="" class="table__header-item">
       <div data-v-83c58b0d="" class="table__header-item-content">
         <!--
 						@slot Slot usado para renderizar itens personalizados para o cabeçalho da tabela. Dados do item referente à coluna podem ser acessados através da propriedade \`data\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ data }
 					-->
-        <cds-clickable-stub data-v-83c58b0d="" clickable="false" id="sort-icon-field2"></cds-clickable-stub>
+        <cds-clickable-stub data-v-83c58b0d="" clickable="false" fluid="false" id="sort-icon-field2"></cds-clickable-stub>
       </div>
     </th>
     <th data-v-83c58b0d="" class="table__header-item--last">
       <div data-v-83c58b0d="" class="table__header-item-content">
         <!--
 						@slot Slot usado para renderizar itens personalizados para o cabeçalho da tabela. Dados do item referente à coluna podem ser acessados através da propriedade \`data\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ data }
 					-->
-        <cds-clickable-stub data-v-83c58b0d="" clickable="false" id="sort-icon-field3"></cds-clickable-stub>
+        <cds-clickable-stub data-v-83c58b0d="" clickable="false" fluid="false" id="sort-icon-field3"></cds-clickable-stub>
       </div>
     </th>
   </tr>

src/tests/__snapshots__/Tile.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Tile > renders correctly 1`] = `
-"<div data-v-f9290560="" class="box--green--light">
+"<div data-v-f9290560="" data-v-b66d1b07="" class="box--green--light">
   <!--
 		Evento emitido quando o wrapper é clicado
 		@event cds-click
@@ -10,16 +10,16 @@ exports[`Tile > renders correctly 1`] = `
   <div data-v-f9290560="" class="clickable__container--clickable box__container">
     <!-- @slot Slot utilizado para renderização do conteúdo interno do Box.-->
     <div data-v-9cc3ee57="" data-v-f9290560="" class="spacer">
-      <div class="cds-tile__extra-container">
-        <div class="cds-tile__extra">
+      <div data-v-b66d1b07="" class="cds-tile__extra-container">
+        <div data-v-b66d1b07="" class="cds-tile__extra">
           <!-- @slot Slot para incluir conteúdo adicional no canto superior direito da tile.-->
         </div>
       </div>
-      <div>
-        <div class="cds-tile__image--green cds-tile__image--md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="trash-outline" role="presentation" class="cds-tile__icon">
+      <div data-v-b66d1b07="">
+        <div data-v-b66d1b07="" class="cds-tile__image--green cds-tile__image--md"><svg data-v-b66d1b07="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="trash-outline" role="presentation" class="cds-tile__icon">
             <g fill="currentColor"></g>
           </svg></div>
-        <div class="cds-tile__text--green cds-tile__text--md">Tile content</div>
+        <div data-v-b66d1b07="" class="cds-tile__text--green cds-tile__text--md">Tile content</div>
       </div>
     </div>
   </div>