diff --git a/public/index.html b/public/index.html index b27e247..a80ce2f 100644 --- a/public/index.html +++ b/public/index.html @@ -17,6 +17,12 @@ + + + Challenge - 5 | Institutional diff --git a/src/assets/icons/facebook.svg b/src/assets/icons/facebook.svg new file mode 100644 index 0000000..c1eee79 --- /dev/null +++ b/src/assets/icons/facebook.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/instagram.svg b/src/assets/icons/instagram.svg new file mode 100644 index 0000000..1e20d6f --- /dev/null +++ b/src/assets/icons/instagram.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/linkedin.svg b/src/assets/icons/linkedin.svg new file mode 100644 index 0000000..d8aa438 --- /dev/null +++ b/src/assets/icons/linkedin.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/twitter.svg b/src/assets/icons/twitter.svg new file mode 100644 index 0000000..3b51e7a --- /dev/null +++ b/src/assets/icons/twitter.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/youtube.svg b/src/assets/icons/youtube.svg new file mode 100644 index 0000000..8973940 --- /dev/null +++ b/src/assets/icons/youtube.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Accordion/@types/index.d.ts b/src/components/Accordion/@types/index.d.ts index 9693bd9..8435179 100644 --- a/src/components/Accordion/@types/index.d.ts +++ b/src/components/Accordion/@types/index.d.ts @@ -7,7 +7,7 @@ export interface MainProps } export interface HeaderProps - extends AccordionProps, + extends Omit, HTMLAttributes { children: ReactNode | ReactNode[] } diff --git a/src/components/Accordion/context/Items.tsx b/src/components/Accordion/context/Items.tsx index 7e3c4a8..459079e 100644 --- a/src/components/Accordion/context/Items.tsx +++ b/src/components/Accordion/context/Items.tsx @@ -2,24 +2,25 @@ import { createContext, ReactNode } from 'react' interface IAccordionItemsValues { current: string | number | '' + handleSetCurrent: (customKey: string | number | '') => void } export let AccordionContextItems = createContext({ current: '', -}) +} as IAccordionItemsValues) interface AccordionProviderItemsProps { children: ReactNode | ReactNode[] - current: string | number | '' + value: IAccordionItemsValues } export const AccordionProviderItems = ({ children, - current, + value, }: AccordionProviderItemsProps) => { return ( <> - + {children} diff --git a/src/components/Accordion/index.scss b/src/components/Accordion/index.scss index 701194b..e61397f 100644 --- a/src/components/Accordion/index.scss +++ b/src/components/Accordion/index.scss @@ -18,6 +18,12 @@ } } +.accordion.active { + .accordion-content { + margin-top: 12px; + } +} + .accordion { header { width: 100%; diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx index 4fbd82e..b1d2d9d 100644 --- a/src/components/Accordion/index.tsx +++ b/src/components/Accordion/index.tsx @@ -5,10 +5,10 @@ import { AccordionContextItems } from './context/Items' import './index.scss' const Main = ({ customKey, children, className, ...props }: MainProps) => { - const currentTargetItem = useContext(AccordionContextItems) + const { current } = useContext(AccordionContextItems) const isOpen = () => { - if (currentTargetItem.current === customKey) { + if (current === customKey) { return 'active' } else { return '' @@ -16,33 +16,23 @@ const Main = ({ customKey, children, className, ...props }: MainProps) => { } return ( -
+
{children}
) } -const Header = ({ - setCurrentAccordion, - customKey, - children, - className, - ...props -}: HeaderProps) => { - const currentTargetItem = useContext(AccordionContextItems) - - function handleEvent() { - if (customKey === currentTargetItem.current) { - setCurrentAccordion('') - } else { - setCurrentAccordion(customKey) - } - } +const Header = ({ customKey, children, className, ...props }: HeaderProps) => { + const { handleSetCurrent } = useContext(AccordionContextItems) return (
handleSetCurrent(customKey)} role={'button'} data-jsx="event" {...props} diff --git a/src/template/Footer/components/Item.tsx b/src/template/Footer/components/Item.tsx new file mode 100644 index 0000000..3d20dc2 --- /dev/null +++ b/src/template/Footer/components/Item.tsx @@ -0,0 +1,14 @@ +import { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react' + +interface ItemProps extends AnchorHTMLAttributes { + children: ReactNode | ReactNode[] + $container?: HTMLAttributes +} + +export function Item({ children, $container, ...props }: ItemProps) { + return ( +
  • + {children} +
    • + ) +} diff --git a/src/template/Footer/fragments/Lists.tsx b/src/template/Footer/fragments/Lists.tsx index b0d56ac..9c1d075 100644 --- a/src/template/Footer/fragments/Lists.tsx +++ b/src/template/Footer/fragments/Lists.tsx @@ -1,163 +1,45 @@ -import { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react' -import { Accordion } from '../../../components/Accordion' -import { AccordionProps } from '../../../components/Accordion/@types' - -import BoletoImg from '../../../assets/brands/Boleto.png' -import DinersBrandImg from '../../../assets/brands/Diners.png' -import EloBrandImg from '../../../assets/brands/Elo.png' -import HiperBrandImg from '../../../assets/brands/Hiper.png' -import PaypalBrandImg from '../../../assets/brands/Paypal.png' -import MasterCardBrandImg from '../../../assets/brands/Master.png' -import VisaBrandImg from '../../../assets/brands/Visa.png' -import VtexPCIImg from '../../../assets/brands/vtex-pci-200.png' +import { AccordionProviderItems } from '../../../components/Accordion/context/Items' +import { ContactList } from './Lists/Contact' +import { InstitutionalList } from './Lists/Institutional' +import { QuestionsList } from './Lists/Question' +import { Socials } from './Lists/Socials' import css from '../index.module.scss' -export function PaymentsList() { - let images = [ - MasterCardBrandImg, - VisaBrandImg, - DinersBrandImg, - EloBrandImg, - HiperBrandImg, - PaypalBrandImg, - BoletoImg, - ] +interface ListProps { + accordionCurrentIsOpen: string | number | '' + handleSetCurrentAccordion: (customKey: string | number | '') => void +} +export function List({ + accordionCurrentIsOpen, + handleSetCurrentAccordion, +}: ListProps) { return ( -
      - {images.map((image, index) => { - return ( -
    • - + <> + +
        +
      • + +
        • +
      • +
        • - ) - })} -
        - -
      • - -
        • -
      - ) -} - -interface InstitutionalListProps extends AccordionProps {} - -export function InstitutionalList({ - setCurrentAccordion, - customKey, -}: InstitutionalListProps) { - return ( - - -

      Institucional

      -       - -
        - - Quem somos nós - - - Política de Privacidade - - - Segurança - - - Seja um Revendedor - +
      • + +
      -       -       - ) -} - -interface QuestionsListProps extends AccordionProps {} - -export function QuestionsList({ - setCurrentAccordion, - customKey, -}: QuestionsListProps) { - return ( - - -

      Dúvidas

      -       - -
        - - Entrega - - - Pagamento - - - Trocas e Devoluções - - - Dúvidas Frequentes - -
      -       -       - ) -} - -interface ContactListProps extends AccordionProps {} - -export function ContactList({ - setCurrentAccordion, - customKey, -}: ContactListProps) { - return ( - - -

      Fale Conosco

      -       - - -
        - - Atendimento ao Consumidor - - - (11) 4159 9504 - - - Atendimento Online - - - (11) 99433-8825 - -
      -       -       - ) -} - -interface ItemProps extends AnchorHTMLAttributes { - children: ReactNode | ReactNode[] - $container?: HTMLAttributes -} - -function Item({ children, $container, ...props }: ItemProps) { - return ( -
    • - {children} -
      • + + + ) } diff --git a/src/template/Footer/fragments/Lists/Contact.tsx b/src/template/Footer/fragments/Lists/Contact.tsx new file mode 100644 index 0000000..6bd8f08 --- /dev/null +++ b/src/template/Footer/fragments/Lists/Contact.tsx @@ -0,0 +1,38 @@ +import { Accordion } from '../../../../components/Accordion' +import { AccordionProps } from '../../../../components/Accordion/@types' +import { Item } from '../../components/Item' + +import css from '../../index.module.scss' + +interface ContactListProps + extends Omit {} + +export function ContactList({ customKey }: ContactListProps) { + return ( + + +

      Fale Conosco

      +       + + +
        + + Atendimento ao Consumidor + + + (11) 4159 9504 + + + Atendimento Online + + + (11) 99433-8825 + +
      +       +       + ) +} diff --git a/src/template/Footer/fragments/Lists/Institutional.tsx b/src/template/Footer/fragments/Lists/Institutional.tsx new file mode 100644 index 0000000..ad3e131 --- /dev/null +++ b/src/template/Footer/fragments/Lists/Institutional.tsx @@ -0,0 +1,37 @@ +import { Accordion } from '../../../../components/Accordion' +import { AccordionProps } from '../../../../components/Accordion/@types' +import { Item } from '../../components/Item' + +import css from '../../index.module.scss' + +interface InstitutionalListProps + extends Omit {} + +export function InstitutionalList({ customKey }: InstitutionalListProps) { + return ( + + +

      Institucional

      +       + +
        + + Quem somos nós + + + Política de Privacidade + + + Segurança + + + Seja um Revendedor + +
      +       +       + ) +} diff --git a/src/template/Footer/fragments/Lists/Payment.tsx b/src/template/Footer/fragments/Lists/Payment.tsx new file mode 100644 index 0000000..0a6cbee --- /dev/null +++ b/src/template/Footer/fragments/Lists/Payment.tsx @@ -0,0 +1,40 @@ +import BoletoImg from '../../../../assets/brands/Boleto.png' +import DinersBrandImg from '../../../../assets/brands/Diners.png' +import EloBrandImg from '../../../../assets/brands/Elo.png' +import HiperBrandImg from '../../../../assets/brands/Hiper.png' +import PaypalBrandImg from '../../../../assets/brands/Paypal.png' +import MasterCardBrandImg from '../../../../assets/brands/Master.png' +import VisaBrandImg from '../../../../assets/brands/Visa.png' +import VtexPCIImg from '../../../../assets/brands/vtex-pci-200.png' + +import css from '../../index.module.scss' + +export function PaymentsList() { + let images = [ + MasterCardBrandImg, + VisaBrandImg, + DinersBrandImg, + EloBrandImg, + HiperBrandImg, + PaypalBrandImg, + BoletoImg, + ] + + return ( +
        + {images.map((image, index) => { + return ( +
      • + +
        • + ) + })} + +
        + +
      • + +
        • +
      + ) +} diff --git a/src/template/Footer/fragments/Lists/Question.tsx b/src/template/Footer/fragments/Lists/Question.tsx new file mode 100644 index 0000000..6c0c17e --- /dev/null +++ b/src/template/Footer/fragments/Lists/Question.tsx @@ -0,0 +1,37 @@ +import { Accordion } from '../../../../components/Accordion' +import { AccordionProps } from '../../../../components/Accordion/@types' +import { Item } from '../../components/Item' + +import css from '../../index.module.scss' + +interface QuestionsListProps + extends Omit {} + +export function QuestionsList({ customKey }: QuestionsListProps) { + return ( + + +

      Dúvidas

      +       + +
        + + Entrega + + + Pagamento + + + Trocas e Devoluções + + + Dúvidas Frequentes + +
      +       +       + ) +} diff --git a/src/template/Footer/fragments/Lists/Socials.tsx b/src/template/Footer/fragments/Lists/Socials.tsx new file mode 100644 index 0000000..b30ddad --- /dev/null +++ b/src/template/Footer/fragments/Lists/Socials.tsx @@ -0,0 +1,39 @@ +import facebookIcon from '../../../../assets/icons/facebook.svg' +import instagramIcon from '../../../../assets/icons/instagram.svg' +import linkedinIcon from '../../../../assets/icons/linkedin.svg' +import twitterIcon from '../../../../assets/icons/twitter.svg' +import youtubeIcon from '../../../../assets/icons/youtube.svg' + +import css from '../../index.module.scss' + +export function Socials() { + return ( + + ) +} diff --git a/src/template/Footer/index.module.scss b/src/template/Footer/index.module.scss index f8498ae..152f87b 100644 --- a/src/template/Footer/index.module.scss +++ b/src/template/Footer/index.module.scss @@ -14,13 +14,25 @@ } .container-top { + display: flex; + align-items: flex-start; + flex-direction: column; padding-top: 17px; padding-bottom: 24px; @media screen and (min-width: 1025px) { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + width: function.fluid(1080px, 1280px); margin: 0 auto; } + + @media screen and (min-width: 2500px) { + width: function.fluid(2299.68px, 2500px); + } } .container-bottom { @@ -30,10 +42,6 @@ background-color: var(--clr-common-black); - .phrase { - font-size: var(--txt-xxs); - } - * p, * li { color: var(--clr-common-white); @@ -65,6 +73,13 @@ } } +.accordion { + display: flex; + align-items: flex-start; + flex-direction: column; + justify-content: center; +} + // moved container bottom actions footer for large, medium devices .container-bottom { .actions-bottom { @@ -86,28 +101,21 @@ padding: 15px 0; margin: 0 auto; } + + @media screen and (min-width: 2500px) { + width: function.fluid(2299.68px, 2500px); + } } } .lists { + width: 100%; display: flex; align-items: stretch; flex-direction: column; - gap: 5px; - - @media screen and (min-width: 1025px) { - flex-direction: row; - - .content { - height: auto; - overflow: unset; - transform: translate(0, 0); - } - } + gap: 12px; .content { - margin-top: 7px; - ul { display: flex; align-items: flex-start; @@ -121,14 +129,44 @@ font-size: var(--txt-xs); color: var(--clr-gray-800); + transition: color 200ms ease; + + &:hover { + color: var(--clr-primary-blue-500); + } + } + } + + @media screen and (min-width: 1025px) { + flex-direction: row; + justify-content: space-between; + + width: function.fluid(707px, 1080px); + + & > li { + width: function.fluid(155px, 707px); + } + + .content { + height: auto; + overflow: unset; + transform: translate(0, 0); + } + } + + @media screen and (min-width: 2500px) { + width: function.fluid(1531px, 2500px); + + & > li { + width: function.fluid(315px, 1531px); } } } .list-header { - padding: 7px 0; - @media screen and (min-width: 1025px) { + margin-bottom: 12px; + i { display: none; } @@ -174,6 +212,53 @@ } } +.social { + & > a { + display: none; + + @media screen and (min-width: 1025px) { + display: block; + font-size: var(--txt-normal); + + color: var(--clr-gray-800); + + &:hover { + color: var(--clr-primary-blue-500); + } + } + } + + @media screen and (min-width: 1025px) { + width: function.fluid(215px, 1080px); + } + + @media screen and (min-width: 2500px) { + width: function.fluid(390px, 2299.68px); + } +} + +.socials { + display: inline-flex; + align-items: center; + gap: 10px; + + a { + display: flex; + align-items: center; + justify-content: center; + + img { + width: 100%; + height: 100%; + + @media screen and (min-width: 2500px) { + width: 75px; + height: 75px; + } + } + } +} + .container-bottom { .phrase { order: 2; diff --git a/src/template/Footer/index.tsx b/src/template/Footer/index.tsx index a123473..8870b9d 100644 --- a/src/template/Footer/index.tsx +++ b/src/template/Footer/index.tsx @@ -1,54 +1,36 @@ +import { useState } from 'react' + import vtexIcon from '../../assets/brands/svgs/Vtex.svg' import m3Icon from '../../assets/brands/svgs/M3.svg' -import { AccordionProviderItems } from '../../components/Accordion/context/Items' - -import { - ContactList, - InstitutionalList, - PaymentsList, - QuestionsList, -} from './fragments/Lists' +import { List } from './fragments/Lists' +import { PaymentsList } from './fragments/Lists/Payment' import css from './index.module.scss' -import { useState } from 'react' export function Footer() { - const [AccordionCurrentIsOpen, setAccordionCurrentIsOpen] = useState< + const [accordionCurrentIsOpen, setAccordionCurrentIsOpen] = useState< string | number | '' >('') function handleSetCurrentAccordion(customkey: string | number | '') { - if (window.innerWidth < 1024) setAccordionCurrentIsOpen(customkey) + if (window.innerWidth < 1024) { + if (customkey === accordionCurrentIsOpen) { + setAccordionCurrentIsOpen('') + } else { + setAccordionCurrentIsOpen(customkey) + } + } } return (