feat: add html block

.all-contributorsrc

@@ -1,25 +0,0 @@
-{
-  "projectName": "store-theme",
-  "projectOwner": "vtex-apps",
-  "repoType": "github",
-  "repoHost": "https://github.com",
-  "files": [
-    "docs/README.md"
-  ],
-  "imageSize": 100,
-  "commit": true,
-  "commitConvention": "none",
-  "contributors": [
-    {
-      "login": "hugocostadev",
-      "name": "Hugo Costa",
-      "avatar_url": "https://avatars2.githubusercontent.com/u/20212776?v=4",
-      "profile": "http://www.hugoccosta.com",
-      "contributions": [
-        "doc"
-      ]
-    }
-  ],
-  "contributorsPerLine": 7,
-  "skipCi": true
-}

manifest.json

@@ -1,5 +1,5 @@
 {
-  "vendor": "agenciamagma",
+  "vendor": "agenciam3",
   "name": "store-theme",
   "version": "5.1.0",
   "builders": {

react/components/Html/index.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from "react";
+import { useCssHandles } from "vtex.css-handles";
+
+const CSS_HANDLES = ["html"] as const;
+
+type HtmlProps = {
+    children?: ReactNode,
+    /**
+     * Qual tag Html que deseja que seja usar
+     *
+     * @default div
+     */
+    tag?: keyof React.ReactHTML
+    /**
+     * Classes CSS extras que deseja adicionar.
+     * Feito para uso de [classes do tachyons](https://tachyons.io/)
+     */
+    tachyonsClasses?: string
+    /**
+     * Se caso quiser usar esse componente
+     * para adicinar um texto simples
+     */
+    text?: string
+    /**
+       * Tag ID para
+       */
+    testId?: string
+}
+
+export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
+    const { handles } = useCssHandles(CSS_HANDLES);
+
+    const props = {
+      className: `${handles.html} ${classes}`,
+      "data-testid": testId
+    };
+    const Children = <>{children}{text}</>;
+    const Element = React.createElement(tag, props, Children);
+
+    return <>{Element}</>;
+};

react/components/Html/readme.md

@@ -0,0 +1,45 @@
+# HTML
+
+## Descrição
+
+Uma componente que permite que possamos adicionar tags html direto do JSON. Para podermos estar estruturando o projeto de nossa maneira.
+Basicamente esse componente 
+
+
+## Característica
+
+- ✔ Compatível com CSS Handles
+- ✔ Menos linha de código renderizada no HTML em comparado ao Flex.layout
+- ✔ Tag HTML dinâmica para cada caso. Podendo adicionar semântica
+- ✔ Possibilidade adicionar Textos 
+
+
+## Estrutura
+```html
+    <{qualquerTagHtml} class="{acountName}-{appName}-1-x-html {acountName}-{appName}-new-theme-1-x-html--{suaBlockClass} {qualquer classe extra }">
+    {children}
+    </{qualquerTagHtml}>
+```
+
+
+## HTML vs FLEX.LAYOUT
+
+### html
+```html
+    <div class="ckm3sintese-ckm3sintese-new-theme-1-x-html">
+        {children}
+    <div>
+```
+
+### flex
+```html
+    <div class="vtex-flex-layout-0-x-flexRow">
+        <section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center">
+            <div class="vtex-flex-layout-0-x-flexRowContent pr7">
+                <div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 50%;">
+                    {children}
+                </div>
+            </div>
+        </section>
+    </div>
+```

react/html.ts

@@ -0,0 +1 @@
+export { Html as default } from "./components/Html"

react/package.json

@@ -28,6 +28,7 @@
     "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout",
     "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text",
     "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
-    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context"
+    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
+    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles"
   }
 }

react/yarn.lock

@@ -774,6 +774,10 @@ use-isomorphic-layout-effect@^1.1.2:
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
 
+"vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles":
+  version "1.0.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles#336b23ef3a9bcb2b809529ba736783acd405d081"
+
 "vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context":
   version "0.10.0"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc"

store/blocks/about-us.json

@@ -5,14 +5,12 @@
       "video#about-us"
     ]
   },
-
   "flex-layout.row#about-us": {
     "children": [
       "image#mobile-phone",
       "flex-layout.col#text-about-us"
     ]
   },
-
   "flex-layout.col#text-about-us": {
     "children": [
       "rich-text#title-about-us",
@@ -23,15 +21,12 @@
       "preventVerticalStretch": true
     }
   },
-
   "rich-text#title-about-us": {
     "props": {
-      "text":
+      "text": "# Create meaningful and relevant experiences.",
-      "# Create meaningful and relevant experiences.",
       "blockClass": "title"
     }
   },
-
   "image#mobile-phone": {
     "props": {
       "src": "https://storecomponents.vteximg.com.br/arquivos/mobile-phone.png",

store/interfaces.json

@@ -1,5 +1,8 @@
 {
-    "example-component":{
+  "example-component": {
-        "component": "Example"
+    "component": "Example"
-    }
+  },
+  "html": {
+    "component": "html"
+  }
 }