feat(placeholder): Adiciona placeholder ao input de cep e ajusta a tabela de cep

This commit is contained in:
Filipe Quintanilha Evangelista 2023-02-07 19:03:10 -03:00
parent e28c9545a6
commit b560896690
8 changed files with 67 additions and 3 deletions

1
react/Placeholder.tsx Normal file
View File

@ -0,0 +1 @@
export { Placeholder as default } from './components/PlaceHolder'

View File

@ -0,0 +1,31 @@
import React, { useEffect } from 'react'
export const Placeholder = () => {
async function QuerySelect(selector: string) {
return new Promise<HTMLInputElement>(resolve => {
const getElement = () => {
const element = document.querySelector<HTMLInputElement>(selector)
if (element) {
resolve(element)
} else {
requestAnimationFrame(getElement)
}
}
getElement()
})
}
async function alterInput() {
const cep = await QuerySelect(
'form[class*=vtex-address-form__postalCode] input'
)
console.log(cep)
cep?.setAttribute('placeholder', 'Digite seu CEP')
}
useEffect(() => {
alterInput()
}, [])
return <></>
}

View File

@ -119,7 +119,8 @@
// "product-gifts", // "product-gifts",
// "flex-layout.row#buy-button", // "flex-layout.row#buy-button",
"availability-subscriber", "availability-subscriber",
"html#shipping-simulator" "html#shipping-simulator",
"placeholder"
// "share#default" // "share#default"
] ]
}, },

View File

@ -5,5 +5,9 @@
"html": { "html": {
"component": "html", "component": "html",
"composition": "children" "composition": "children"
},
"placeholder": {
"component": "Placeholder"
} }
} }

View File

@ -10,4 +10,12 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.input { .input {
height: 49px; height: 49px;
padding: 0 0 0 16px;
display: flex;
justify-content: center;
}
.input::placeholder {
font-size: 12px;
line-height: 16px;
color: #afafaf;
} }

View File

@ -154,6 +154,8 @@
.shippingContainer :global(.vtex-input-prefix__group) { .shippingContainer :global(.vtex-input-prefix__group) {
height: 49px; height: 49px;
padding-right: 21px; padding-right: 21px;
display: flex;
align-items: center;
} }
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
display: none; display: none;
@ -190,6 +192,10 @@
.shippingTable .shippingTableHead { .shippingTable .shippingTableHead {
display: table-row; display: table-row;
} }
.shippingTable .shippingTableHead .shippingTableRow {
display: grid;
grid-template-columns: 35% 25% 40%;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice,
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
@ -215,7 +221,7 @@
} }
.shippingTable .shippingTableBody .shippingTableRow { .shippingTable .shippingTableBody .shippingTableRow {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: 35% 25% 40%;
grid-template-rows: 1; grid-template-rows: 1;
} }
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {

View File

@ -1,3 +1,12 @@
.input { .input {
height: 49px; height: 49px;
padding: 0 0 0 16px;
display: flex;
justify-content: center;
&::placeholder {
font-size: 12px;
line-height: 16px;
color: $color-gray9;
}
} }

View File

@ -178,6 +178,8 @@
:global(.vtex-input-prefix__group) { :global(.vtex-input-prefix__group) {
height: 49px; height: 49px;
padding-right: 21px; padding-right: 21px;
display: flex;
align-items: center;
:global(.vtex-input__suffix) { :global(.vtex-input__suffix) {
display: none; display: none;
} }
@ -219,6 +221,8 @@
display: table-row; display: table-row;
.shippingTableRow { .shippingTableRow {
display: grid;
grid-template-columns: 35% 25% 40%;
.shippingTableHeadDeliveryName, .shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryPrice, .shippingTableHeadDeliveryPrice,
.shippingTableHeadDeliveryEstimate { .shippingTableHeadDeliveryEstimate {
@ -254,7 +258,7 @@
.shippingTableBody { .shippingTableBody {
.shippingTableRow { .shippingTableRow {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: 35% 25% 40%;
grid-template-rows: 1; grid-template-rows: 1;
.shippingTableCellDeliveryEstimate { .shippingTableCellDeliveryEstimate {