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,40 +1,53 @@
 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
    *
    * @default div
    */
-    tag?: keyof React.ReactHTML
+  tag?: keyof React.ReactHTML;
   /**
    * Classes CSS extras que deseja adicionar.
    * Feito para uso de [classes do tachyons](https://tachyons.io/)
    */
-    tachyonsClasses?: string
+  tachyonsClasses?: string;
   /**
    * Se caso quiser usar esse componente
    * para adicinar um texto simples
    */
-    text?: string
+  text?: string;
   /**
    * Tag ID para
    */
-    testId?: string
-}
+  testId?: string;
+};
 
-export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
+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
+    "data-testid": testId,
   };
-    const Children = <>{children}{text}</>;
+  const Children = (
+    <>
+      {children}
+      {text}
+    </>
+  );
   const Element = React.createElement(tag, props, Children);
 
   return <>{Element}</>;

react/components/Html/styles.css

@@ -1,24 +1,24 @@
-/*
-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 {
+[class*="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;

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
-    },
-    "children": ["product-description"]
+      "marginBottom": 7,
+      "blockClass": "descricao"
+    }
   },
   "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 {
@@ -205,3 +211,32 @@
   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;
+}