feat: Cria arquivo styles.css dentro do html

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,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,
-    /**
-     * 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}</>;
+  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/styles.css

@@ -0,0 +1,26 @@
+*
+{
+  margin:0;
+}
+
+
+[class*="productNameContainer--quickview"] {
+  color: gray;
+  text-align: right;
+}
+
+[class*="shareContainer"] {
+  display: none;
+}
+
+[class*="shippingContainer"] {
+  display: flex;
+}
+
+[class*="shippingContainer"] button {
+  margin-top: 20px;
+  width: 50px;
+  height: 50px;
+  background-color: black;
+  color: white;
+}

store/blocks/home/deals.json

@@ -12,10 +12,7 @@
   },
 
   "flex-layout.col#deals1": {
-    "children": [
-      "image#deal1",
-      "rich-text#deal1"
-    ]
+    "children": ["image#deal1", "rich-text#deal1"]
   },
   "image#deal1": {
     "props": {
@@ -30,10 +27,7 @@
     }
   },
   "flex-layout.col#deals2": {
-    "children": [
-      "image#deal2",
-      "rich-text#deal2"
-    ]
+    "children": ["image#deal2", "rich-text#deal2"]
   },
   "image#deal2": {
     "props": {
@@ -48,10 +42,7 @@
     }
   },
   "flex-layout.col#deals3": {
-    "children": [
-      "image#deal3",
-      "rich-text#deal3"
-    ]
+    "children": ["image#deal3", "rich-text#deal3"]
   },
   "image#deal3": {
     "props": {
@@ -66,10 +57,7 @@
     }
   },
   "flex-layout.col#deals4": {
-    "children": [
-      "image#deal4",
-      "rich-text#deal4"
-    ]
+    "children": ["image#deal4", "rich-text#deal4"]
   },
   "image#deal4": {
     "props": {

store/blocks/home/home.jsonc

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

store/blocks/pdp/product.jsonc

@@ -101,12 +101,12 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
       "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",

styles/css/vtex.product-identifier.css

@@ -1,3 +1,18 @@
 .product-identifier--productReference {
   margin-bottom: 1rem;
 }
+
+.product-identifier--productReference {
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: right;
+  color: gray;
+}
+
+.product-identifier__label {
+  display: none;
+}
+
+.product-identifier__separator {
+  display: none;
+}

styles/css/vtex.product-price.css

@@ -2,6 +2,7 @@
   color: #727273;
   margin-bottom: .25rem;
   font-size: 1rem;
+  display: none;
 }
 
 .sellingPrice {
@@ -22,6 +23,7 @@
 .savings {
   font-weight: 500;
   color: #79B03A;
+  display:none;
 }
 
 .sellingPriceValue--summary {