Feature/tag prop wrappers (#793)

#### 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, descrever abaixo)
- [x] A documentação no mdx foi feita ou atualizada, caso necessário
- [x] O eslint passou localmente

### 1 - Resumo
Adiciona props que permitei ao usuário escolher qual tag ele deseja que
seja renderizada nos componentes Flexbox e Grid.

### 2 - Tipo de pull request

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

### 4 - Quais são os passos para avaliar o pull request?
- Acesse a documentação do Flexbox;
- Altere a prop **tag** para uma de sua preferência;
- Abra o _Inspecionar_ do navegador;
- Verifique que a opção escolhida é a tag renderizada no HTML.

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

Author: johnn1sbo3s

package.json

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

src/components/Flexbox.vue

@@ -1,10 +1,11 @@
 <template>
-	<div
+	<component
+		:is="tag"
 		class="flexbox"
 	>
 		<!-- @slot Slot com o conteúdo interno do FlexBox -->
 		<slot />
-	</div>
+	</component>
 </template>
 
 <script setup>
@@ -52,6 +53,16 @@ const props = defineProps({
 		type: String,
 		default: 'stretch',
 	},
+	/**
+	* Define a tag que o componente deve utilizar na sua renderização. Valores aceitos: 'div', 'span', 'main', 'footer',
+	* 'form', 'header', 'aside', 'ul',  e 'li'.
+	* Por padrão o componente renderiza uma div.
+	*/
+	tag: {
+		type: String,
+		default: 'div',
+		validator: (value) => ['div', 'span', 'main', 'footer', 'form', 'header', 'aside', 'ul', 'li'].includes(value),
+	},
 });
 
 const gapAsStringResolver = (gap) => {

src/components/Grid.vue

@@ -1,10 +1,11 @@
 <template>
-	<div
+	<component
+		:is="tag"
 		class="grid"
 	>
 		<!-- @slot Slot com o conteúdo interno da grid -->
 		<slot />
-	</div>
+	</component>
 </template>
 
 <script setup>
@@ -47,6 +48,11 @@ const props = defineProps({
 		type: String,
 		default: 'stretch',
 	},
+	tag: {
+		type: String,
+		default: 'div',
+		validator: (value) => ['div', 'span', 'main', 'footer', 'form', 'header', 'aside', 'ul', 'li'].includes(value),
+	},
 });
 
 const gapAsStringResolver = (gap) => {

src/stories/components/Flexbox.stories.mdx

@@ -52,6 +52,22 @@ import Spacer from '../../components/Spacer.vue';
 				],
 			}
 		},
+		tag: {
+			control:{
+				type: 'select',
+				options: [
+					'div',
+					'span',
+					'main',
+					'footer',
+					'form',
+					'header',
+					'aside',
+					'ul',
+					'li',
+				],
+			}
+		},
 		gap: {
 			control: {
 				type: 'range',
@@ -134,6 +150,7 @@ export const Template = (args) => ({
 			wrap: 'wrap',
 			justify: 'start',
 			align: 'start',
+			tag: 'div',
 		}}
 	>
 		{ Template.bind({}) }

src/stories/components/Grid.stories.mdx

@@ -1514,7 +1514,6 @@ A prop direction aceita os seguintes valores:
 - __row (padrão):__ os itens são organizados em linhas, ocupando a largura do container antes de avançar para a próxima linha.
 - __column:__ os itens são organizados em colunas, ocupando a altura do container antes de avançar para a próxima coluna.
 
-
 <Story
 	name="subgrid"
 >
@@ -1545,3 +1544,28 @@ A prop direction aceita os seguintes valores:
 `
 ```
 <br />
+
+
+
+### __Tag renderizada__
+
+A prop `tag` permite definir a tag que o componente renderiza. Essa propriedade é utilizada para permitir que o componente 
+seja utilizado em diferentes contextos, como por exemplo, em um `footer` ou em um `header`.
+
+###### Comportamento padrão
+
+O valor default da propriedade é `div`, o que significa que o componente renderiza uma div.
+
+###### Valores Aceitos
+A prop tag é uma propriedade string que aceita os seguintes valores:
+- __div (padrão):__ renderiza uma div.
+- __span:__ renderiza uma span.
+- __main:__ renderiza um main.
+- __footer:__ renderiza um footer.
+- __form:__ renderiza um form.
+- __header:__ renderiza um header.
+- __aside:__ renderiza um aside.
+- __ul:__ renderiza uma ul.
+- __li:__ renderiza uma li.
+
+<br />