From 14f815665be10ad2fa5e2d5f8e18aa6616f4a834 Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Wed, 1 Feb 2023 14:50:01 -0300
Subject: [PATCH] feat: estiliza o bloco sku-selector

---
 store/blocks/pdp/product.jsonc                | 17 +++-
 styles/css/vtex.store-components.css          | 89 ++++++++++++++++-
 .../pages/product/vtex.store-components.scss  | 95 ++++++++++++++++++-
 3 files changed, 189 insertions(+), 12 deletions(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6a42453..1cb3c10 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -111,7 +111,7 @@
       "product-rating-summary",
       "flex-layout.row#selling-price",
       "product-installments#m3",
-      "sku-selector",
+      "html#sku-selector-m3",
       "product-quantity",
       "product-assembly-options",
       "product-gifts",
@@ -141,10 +141,21 @@
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
-      "showValueNameForImageVariation": true
+      "showValueNameForImageVariation": true,
+      "imageHeight": 48,
+      "imageWidth": 48
     }
   },
 
+  "html#sku-selector-m3": {
+    "props":{
+      "tag": "section",
+      "testId": "sku-selector",
+      "blockClass": "sku-selector-m3"
+    },
+    "children": ["sku-selector"]
+  },
+
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
@@ -174,7 +185,7 @@
     "children": [
       "flex-layout.row#product-name",
       "product-identifier.product",
-      "sku-selector",
+      "html#sku-selector-m3",
       "flex-layout.row#availability"
     ]
   },
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index e1d1e8c..adabe57 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -77,10 +77,6 @@
   text-align: right;
 }
 
-/*.productDescriptionContainer {
-
-
-}*/
 .productDescriptionTitle {
   font-weight: 400;
   font-size: 24px;
@@ -93,4 +89,89 @@
   font-size: 16px;
   line-height: 22px;
   color: #929292;
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.skuSelectorName,
+.skuSelectorNameSeparator,
+.skuSelectorSelectorImageValue {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+}
+
+.skuSelectorInternalBox {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid #989898;
+  position: relative;
+}
+
+.skuSelectorItemImage :global(.vtex-store-components-3-x-skuSelectorInternalBox) {
+  width: 46px;
+  height: 46px;
+}
+
+.frameAround {
+  display: none;
+}
+
+.skuSelectorItem {
+  width: 40px;
+  height: 40px;
+}
+
+.skuSelectorItemTextValue {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgba(185, 185, 185, 0.6);
+  width: 20px;
+}
+
+.skuSelectorItemImage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+}
+
+.skuSelectorItem--selected {
+  border: 2px solid #000000;
+  border-radius: 50%;
+}
+.skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorItemTextValue) {
+  color: #000000;
+}
+
+.skuSelectorOptionsList {
+  gap: 16px;
+  margin: 0;
+}
+
+.diagonalCross {
+  background-image: none;
+  border: 1px solid #D5D5D5;
+  transform: rotate(-45deg);
+  position: absolute;
+  left: -80%;
+  right: -10.46%;
+  top: 82.5%;
+  bottom: 17.5%;
+}
+
+.skuSelectorSubcontainer {
+  margin: 0;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index b9c3a55..96a83a4 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -56,11 +56,6 @@
   text-align: right;
 }
 
-/*.productDescriptionContainer {
-
-
-}*/
-
 .productDescriptionTitle {
   font-weight: 400;
   font-size: 24px;
@@ -74,3 +69,93 @@
   line-height: 22px;
   color: #929292;
 }
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.skuSelectorName,
+.skuSelectorNameSeparator,
+.skuSelectorSelectorImageValue {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+}
+
+.skuSelectorInternalBox {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid #989898;
+  position: relative;
+}
+
+.skuSelectorItemImage {
+  :global(.vtex-store-components-3-x-skuSelectorInternalBox) {
+    width: 46px;
+    height: 46px;
+  }
+}
+
+.frameAround {
+  display: none;
+}
+
+.skuSelectorItem {
+  width: 40px;
+  height: 40px;
+}
+
+.skuSelectorItemTextValue {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgba(185, 185, 185, 0.6);
+  width: 20px;
+}
+
+.skuSelectorItemImage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+}
+
+.skuSelectorItem--selected{
+  border: 2px solid #000000;
+  border-radius: 50%;
+
+  :global(.vtex-store-components-3-x-skuSelectorItemTextValue) {
+    color: #000000;
+  }
+}
+
+.skuSelectorOptionsList {
+  gap: 16px;
+  margin: 0;
+}
+
+.diagonalCross {
+  background-image: none;
+
+  border: 1px solid  #D5D5D5;
+  transform: rotate(-45deg);
+
+  position: absolute;
+  left: -80%;
+  right: -10.46%;
+  top: 82.5%;
+  bottom: 17.5%;
+}
+
+.skuSelectorSubcontainer {
+  margin: 0;
+}