feat(Footer): add .footerCheckout__address e .footerCheckout__developedBy

This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-11 07:36:37 -03:00
parent 981f8dde94
commit 6f011f6727
2 changed files with 111 additions and 85 deletions

View File

@ -15,7 +15,7 @@ export default class Footer {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.footerCheckoutstamps = await waitElement(".footerCheckout__stamps"); this.footerCheckoutstamps = await waitElement(".footerCheckout__wrapper");
} }
onUpdate() { onUpdate() {
@ -42,37 +42,57 @@ export default class Footer {
footerCheckout() { footerCheckout() {
this.footerCheckoutstamps.innerHTML = ` this.footerCheckoutstamps.innerHTML = `
<li> <div class="container">
<div class="footerCheckout__address">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
<ul class="footerCheckout__payments"> <ul class="footerCheckout__payments">
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card"> <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa"> <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express"> <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="ícone do cartão elo"> <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="ícone do cartão elo"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="ícone do cartão hipercard"> <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="ícone do cartão hipercard"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="ícone do paypal"> <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="ícone do paypal"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="ícone de boleto"> <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="ícone de boleto"/>
</li> </li>
</ul> </ul>
<span class="footerCheckout__stamps__divider"></span> <span class="footerCheckout__stamps__divider"></span>
<ul class="footerCheckout__payments"> <ul class="footerCheckout__payments">
<li class= "vtexPCIM"> <li class="vtexPCIM">
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto"> <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto"/>
</li> </li>
</ul> </ul>
</li> </div>
<ul class="footerCheckout__developedBy">
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="ícone de boleto"/>
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="ícone de boleto"/>
</a>
</li>
</ul>
</div>
`; `;
} }

View File

@ -3,7 +3,7 @@
border-top: 1px solid #000000; border-top: 1px solid #000000;
color: $color-gray2; color: $color-gray2;
bottom: 0; bottom: 0;
position: absolute; position: absolute;
width: 100%; width: 100%;
&__wrapper { &__wrapper {
& .container { & .container {
@ -12,88 +12,94 @@
align-items: center; align-items: center;
padding: 16px 0; padding: 16px 0;
width: 100%; width: 100%;
&::before, &::after { &::before,
&::after {
content: none; content: none;
} }
} & .footerCheckout__address {
} color: $color-gray2;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 14px;
text-transform: capitalize;
color: #292929;
max-width: 40%;
&__address { @include mq(md, max) {
color: $color-gray2; margin-bottom: 24px;
font-family: $font-family; max-width: 100%;
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 14px;
text-transform: capitalize;
color: #292929;
max-width: 40%;
@include mq(md, max) {
margin-bottom: 24px;
max-width: 100%;
}
}
&__stamps {
align-items: center;
display: flex;
justify-self: center;
list-style: none;
margin: 0;
@include mq(md, max) {
align-self: center;
// margin-bottom: 12px;
}
& li {
display: flex;
& .footerCheckout__payments {
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 0;
& li {
height: 20px;
}
& .vtexPCIM {
height: 33px;
} }
} }
}
&__divider { & div {
background-color: $color-gray4; align-items: center;
display: inline-block; display: flex;
height: 24px; justify-self: center;
margin: 0 8px; & ul {
width: 1px; align-items: center;
} display: flex;
} justify-self: center;
list-style: none;
margin: 0;
@include mq(md, max) {
align-self: center;
// margin-bottom: 12px;
}
&__developedBy { & li {
align-items: center; display: flex;
display: flex; align-items: center;
list-style-type: none; justify-content: space-between;
margin: 0; margin-left: 0;
& img {
height: 20px;
margin: 0 6.675px;
}
}
& .vtexPCIM {
& img {
height: 33px;
}
}
}
& .footerCheckout__stamps__divider {
background-color: $color-gray4;
display: inline-block;
height: 24px;
margin: 0 8px;
width: 1px;
}
}
& .footerCheckout__developedBy {
align-items: center;
display: flex;
list-style-type: none;
margin: 0;
li:last-child { li:last-child {
margin-left: 16px; margin-left: 16px;
} }
a { a {
align-items: center; align-items: center;
color: $color-gray2; color: $color-gray2;
display: flex; display: flex;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 9px; font-size: 9px;
line-height: 12px; line-height: 12px;
text-decoration: none; text-decoration: none;
span { span {
margin-right: 8px; margin-right: 8px;
}
& img {
height: 16px;
}
}
} }
} }
} }