From 4618376dfbb3ee92c30184e851d19aac7e2e5218 Mon Sep 17 00:00:00 2001
From: marlon passos <marlonpassos@agenciam3.com>
Date: Fri, 20 Jan 2023 13:35:32 -0300
Subject: [PATCH] docs: documentao + dica do componente html

---
 docs/README.md                  |  4 ++++
 react/components/Html/readme.md | 10 ++++++++++
 store/blocks/pdp/product.jsonc  |  2 +-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/docs/README.md b/docs/README.md
index 55bc09f..7a63d23 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -52,3 +52,7 @@ vtex link
 ```
 
 
+## Dicas de desenvolvimento
+
+### Alternativa para o Flex layout 
+- A VTEX acaba impondo algumas limitacoes e verbosidade a mais nos blocos vtex.flex-layout. Para facilitar o desenvolvimento, criamos um bloco custom chamado `html`. Ele funciona da mesma forma que o flex-layout, mas com uma sintaxe mais simples que permite a escrita de um html mais semântico. [Veja a documentação do bloco aqui](../react/components/Html/readme.md).
diff --git a/react/components/Html/readme.md b/react/components/Html/readme.md
index 53ed2b7..3d97911 100644
--- a/react/components/Html/readme.md
+++ b/react/components/Html/readme.md
@@ -21,6 +21,16 @@ Basicamente esse componente
     </{qualquerTagHtml}>
 ```
 
+## Propriedades
+
+| Propriedade | Tipo | Descrição | Padrão |
+| --- | --- | --- | --- |
+| `tag` | `string` | Tag HTML que será renderizada | `div` |
+| `blockClass` | `string` | Classe CSS que será adicionada no componente | `` |
+| `text` | `string` | Texto que será renderizado | `''` |
+| `testId` | `string` | Id para testes | `''` |
+| `tachyonsClasses` | `string` | Classe tachyons que será adicionada no componente | `''` |
+
 
 ## HTML vs FLEX.LAYOUT
 
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 059e20d..197a8d9 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -13,7 +13,7 @@
   "html#breadcrumb": {
     "props": {
       "tag": "section",
-      "testId": "a1",
+      "testId": "breadcrumbs",
       "blockClass": "pdp-breadcrumb"
     },
     "children": ["breadcrumb"]