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 ``` +## 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"]