feat(pdp): estiliza titulo e identificador de produto

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,52 @@
 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

@@ -0,0 +1,73 @@
+/* [class*="html--pdp-breadcrumb"] {
+  background: pink;
+} */
+
+/* [class*="productNameContainer--quickview"] {
+  color: pink;
+} */
+
+[class*="flex flex-grow-1 w-100 flex-column"] {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+[class*="productNameContainer--quickview"] {
+  text-align: right;
+
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+
+  color: #575757;
+}
+
+[class*="product-identifier__label"],
+[class*="product-identifier__separator"] {
+  font-size: 0;
+  text-align: right;
+}
+
+[class*="flexColChild"]:nth-of-type(2) {
+  text-align: right;
+
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+
+[class*="flexColChild"]:nth-of-type(2) [class*="c-muted-1"] {
+  color: rgba(146, 146, 146, 0.48) !important;
+}
+
+[class*="sellingPrice"] {
+  font-weight: 700;
+  font-size: 25px !important;
+  line-height: 38px;
+
+  color: black !important;
+}
+
+[class*="installments"] {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+[class*="installmentsNumber"],
+[class*="installmentValue"] {
+  font-weight: 700;
+}
+
+[class*="skuSelectorName"],
+[class*="skuSelectorNameSeparator"],
+[class*="skuSelectorSelectorImageValue"] {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-transform: uppercase;
+}
+
+/* [class*="skuSelectorTextContainer"] [class*="c-muted-1"] {
+  color: #929292;
+} */

store/blocks/home/home.jsonc

@@ -2,9 +2,9 @@
   "store.home": {
     "blocks": [
       "list-context.image-list#demo",
-      "example-component",      /* You can make references to blocks defined in other files.
+      "example-component",
-       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
+      /* You can make references to blocks defined in other files.
-      "flex-layout.row#deals",
+       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals",
       "__fold__",
       "rich-text#shelf-title",
       "flex-layout.row#shelf",

store/blocks/pdp/product-assembly.jsonc

@@ -32,17 +32,13 @@
     "props": {
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "flex-layout.col#product-assembly-image": {
     "props": {
       "marginRight": 4
     },
-    "children": [
+    "children": ["assembly-option-item-image"]
-      "assembly-option-item-image"
-    ]
   },
   "flex-layout.col#product-assembly-middle": {
     "props": {
@@ -96,9 +92,7 @@
       "horizontalAlign": "right",
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "assembly-option-item-customize#sec-level": {
     "props": {

store/blocks/pdp/product.jsonc

@@ -87,11 +87,15 @@
   },
   "product-images": {
     "props": {
+      "showPaginationDots": false,
+      "showNavigationArrows": false,
       "aspectRatio": {
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "maxHeight": "unset",
+      "thumbnailsOrientation": "horizontal",
+      "displayThumbnailsArrows": false
     }
   },
   "flex-layout.col#right-col": {
@@ -101,12 +105,12 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
+      // "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
       "product-separator",
-      "product-identifier.product",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",

store/blocks/search.jsonc

@@ -108,7 +108,10 @@
     }
   },
   "flex-layout.row#searchinfo": {
-    "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"]
+    "children": [
+      "flex-layout.col#productCount",
+      "flex-layout.row#orderByAndSwitcher"
+    ]
   },
   "flex-layout.row#orderByAndSwitcher": {
     "children": ["order-by.v2", "gallery-layout-switcher"],
@@ -272,29 +275,19 @@
     "props": {
       "name": "grid"
     },
-    "children": [
+    "children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"]
-      "icon-grid",
-      "responsive-layout.desktop#textOptionGrid"
-    ]
   },
   "gallery-layout-option#list": {
     "props": {
       "name": "list"
     },
-    "children": [
+    "children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"]
-      "icon-inline-grid",
-      "responsive-layout.desktop#textOptionList"
-    ]
   },
   "responsive-layout.desktop#textOptionGrid": {
-    "children": [
+    "children": ["rich-text#option-grid"]
-      "rich-text#option-grid"
-    ]
   },
   "responsive-layout.desktop#textOptionList": {
-    "children": [
+    "children": ["rich-text#option-list"]
-      "rich-text#option-list"
-    ]
   },
   "rich-text#option-grid": {
     "props": {