feat(pdp): Adiciona container de descricao

manifest.json

@@ -15,7 +15,6 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",

react/components/Html/index.tsx

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

react/components/Html/styles.css

@@ -1,24 +1,24 @@
-/*
+[class*="html--codigo"] {
-0 - 600PX: Phone
-600 - 900px: Table portrait
-900 - 1200px: Tablet landscape
-[1200 - 1800] is where our nortal styles apply
-1800px + : Big desktop
-*/
-/* Media Query M3 */
-/* Grid breakpoints */
-.html--codigo {
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   text-align: end;
 }
 
-.html--qtd-btn {
+[class*="html--description-container"] {
+  display: grid;
+  grid-auto-flow: column;
+  margin-left: 40px;
+  margin-right: 40px;
+  gap: 32px;
+}
+
+[class*="html--qtd-btn"] {
   display: flex;
   height: 49px;
 }
-.html--qtd-btn :global(.vtex-button) {
+
+[class*="html--qtd-btn"] :global(.vtex-button) {
   background-color: #000000;
   border: none;
   font-style: normal;
@@ -27,4 +27,4 @@
   line-height: 25px;
   color: #ffffff;
   border-radius: 0%;
-}
+}

store/blocks/pdp/product.jsonc

@@ -4,7 +4,8 @@
       /*"html#breadcrumb",*/
       "breadcrumb#teste1",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      "html#description",
+      /*"flex-layout.row#description",*/
       "flex-layout.row#specifications-title",
       "product-specification-group#table",
       "shelf.relatedProducts",
@@ -12,6 +13,24 @@
     ]
   },
 
+  "html#description": {
+    "props": {
+      "tag": "section",
+      "testId": "description",
+      "blockClass": "description-container"
+    },
+    "children": ["html#description-image", "product-description"]
+  },
+  "html#description-image": {
+    "children": ["product-images#description"]
+  },
+  "product-images#description": {
+    "props": {
+      "displayMode": "first-image",
+      "blockClass": "description-imagem"
+    }
+  },
+
   "breadcrumb#teste1": {
     "props": {
       "blockClass": "testebread",
@@ -35,11 +54,11 @@
       "text": "##### Product Specifications"
     }
   },
-  "flex-layout.row#description": {
+  "product-description": {
     "props": {
-      "marginBottom": 7
+      "marginBottom": 7,
-    },
+      "blockClass": "descricao"
-    "children": ["product-description"]
+    }
   },
   "condition-layout.product#availability": {
     "props": {
@@ -101,7 +120,7 @@
       "thumbnailMaxHeight": 90,
       "thumbnailsOrientation": "horizontal",
       "aspectRatio": {
-        "desktop": "auto",
+        "desktop": "1:1",
         "phone": "16:9"
       },
       "displayThumbnailsArrows": false

styles/css/vtex.store-components.css

@@ -28,6 +28,7 @@
 .thumbImg {
   height: 90px;
   max-width: 90px;
+  border-radius: 8px;
 }
 
 .carouselThumbBorder {
@@ -140,7 +141,12 @@
 }
 
 .diagonalCross--skus {
-  height: 20px;
+  transform: rotate(80deg);
+  background-image: linear-gradient(to top right, transparent 44%, #d5d5d5 48%, transparent 52%);
+  max-width: 28px;
+  max-height: 30px;
+  left: 6px;
+  top: 3px;
 }
 
 .skuSelectorSelectorImageValue {
@@ -204,4 +210,33 @@
   font-size: 14px;
   line-height: 19px;
   color: #fff;
+}
+
+.productDescriptionContainer--descricao {
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+}
+
+.container--descricao {
+  margin: 0;
+}
+
+.productDescriptionTitle--descricao {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+  margin-bottom: 8px;
+}
+
+.content--descricao {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+.content--description-imagem {
+  border: 1px solid red;
 }

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1,22 +0,0 @@
-.html--codigo {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  text-align: end;
-}
-
-.html--qtd-btn {
-  display: flex;
-  height: 49px;
-
-  :global(.vtex-button) {
-    background-color: $color-black-100;
-    border: none;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 18px;
-    line-height: 25px;
-    color: #ffffff;
-    border-radius: 0%;
-  }
-}

styles/sass/pages/product/vtex.store-components.scss

@@ -20,6 +20,7 @@
 .thumbImg {
   height: 90px;
   max-width: 90px;
+  border-radius: 8px;
 }
 
 .carouselThumbBorder {
@@ -146,7 +147,17 @@
 }
 
 .diagonalCross--skus {
-  height: 20px;
+  transform: rotate(80deg);
+  background-image: linear-gradient(
+    to top right,
+    transparent 44%,
+    #d5d5d5 48%,
+    transparent 52%
+  );
+  max-width: 28px;
+  max-height: 30px;
+  left: 6px;
+  top: 3px;
 }
 
 .skuSelectorSelectorImageValue {
@@ -223,3 +234,32 @@
     }
   }
 }
+
+//DESCRIÇÃO
+
+.productDescriptionContainer--descricao {
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+}
+
+.container--descricao {
+  margin: 0;
+}
+.productDescriptionTitle--descricao {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: $color-gray8;
+  margin-bottom: 8px;
+}
+.content--descricao {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: $color-gray6;
+}
+
+.content--description-imagem {
+  border: 1px solid red;
+}