From ebca3ec39623d577842cd680c65c79162b81a15a Mon Sep 17 00:00:00 2001 From: ueberjames Date: Thu, 12 Jan 2023 00:09:09 -0300 Subject: [PATCH] =?UTF-8?q?cria=C3=A7=C3=A3o=20das=20lis[?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Header/styles/submenu.module.scss | 10 +++ .../src/components/main/assets/arrow-icon.svg | 10 +++ .../src/components/main/assets/home-icon.svg | 3 + .../main/components/ContentMain.tsx | 16 +++++ .../src/components/main/components/Lis.tsx | 21 ++++++ .../components/main/components/Selected.tsx | 33 +++++++++ .../components/main/components/breacrumbs.tsx | 22 ++++++ .../main/components/form/FieldForm.tsx | 28 ++++++++ .../components/main/components/form/Form.tsx | 64 +++++++++++++++++ .../main/components/form/TermForm.tsx | 32 +++++++++ .../components/main/components/navigation.tsx | 26 +++++++ .../main/components/selected/entrega.tsx | 34 +++++++++ .../components/selected/formadepagamento.tsx | 23 ++++++ .../main/components/selected/seguranca.tsx | 23 ++++++ .../main/components/selected/sobre.tsx | 41 +++++++++++ .../main/components/selected/troca.tsx | 41 +++++++++++ desafio-5/src/components/main/main.tsx | 14 ++++ .../main/style/ContentMain.module.scss | 23 ++++++ .../main/style/Selected.module.scss | 42 +++++++++++ .../main/style/breadcrumbs.module.scss | 41 +++++++++++ .../main/style/form/fieldForm.module.css | 31 ++++++++ .../main/style/form/form.module.css | 54 ++++++++++++++ .../main/style/form/termForm.module.css | 70 +++++++++++++++++++ .../src/components/main/style/lis.module.scss | 32 +++++++++ .../main/style/navigation.module.scss | 29 ++++++++ desafio-5/src/components/news/news.tsx | 6 +- .../components/news/style/news.module.scss | 5 +- desafio-5/src/pages/Home.tsx | 2 + desafio-5/src/schema/FormSchema.ts | 25 +++++++ 29 files changed, 792 insertions(+), 9 deletions(-) create mode 100644 desafio-5/src/components/main/assets/arrow-icon.svg create mode 100644 desafio-5/src/components/main/assets/home-icon.svg create mode 100644 desafio-5/src/components/main/components/ContentMain.tsx create mode 100644 desafio-5/src/components/main/components/Lis.tsx create mode 100644 desafio-5/src/components/main/components/Selected.tsx create mode 100644 desafio-5/src/components/main/components/breacrumbs.tsx create mode 100644 desafio-5/src/components/main/components/form/FieldForm.tsx create mode 100644 desafio-5/src/components/main/components/form/Form.tsx create mode 100644 desafio-5/src/components/main/components/form/TermForm.tsx create mode 100644 desafio-5/src/components/main/components/navigation.tsx create mode 100644 desafio-5/src/components/main/components/selected/entrega.tsx create mode 100644 desafio-5/src/components/main/components/selected/formadepagamento.tsx create mode 100644 desafio-5/src/components/main/components/selected/seguranca.tsx create mode 100644 desafio-5/src/components/main/components/selected/sobre.tsx create mode 100644 desafio-5/src/components/main/components/selected/troca.tsx create mode 100644 desafio-5/src/components/main/main.tsx create mode 100644 desafio-5/src/components/main/style/ContentMain.module.scss create mode 100644 desafio-5/src/components/main/style/Selected.module.scss create mode 100644 desafio-5/src/components/main/style/breadcrumbs.module.scss create mode 100644 desafio-5/src/components/main/style/form/fieldForm.module.css create mode 100644 desafio-5/src/components/main/style/form/form.module.css create mode 100644 desafio-5/src/components/main/style/form/termForm.module.css create mode 100644 desafio-5/src/components/main/style/lis.module.scss create mode 100644 desafio-5/src/components/main/style/navigation.module.scss create mode 100644 desafio-5/src/schema/FormSchema.ts diff --git a/desafio-5/src/components/Header/styles/submenu.module.scss b/desafio-5/src/components/Header/styles/submenu.module.scss index 4e387dd..c65c1d7 100644 --- a/desafio-5/src/components/Header/styles/submenu.module.scss +++ b/desafio-5/src/components/Header/styles/submenu.module.scss @@ -92,6 +92,14 @@ } +@media screen and (max-width: 375px) { + + .submenu--absolute.is-open{ + height: 339px; + } + +} + @media screen and (max-width: 1024px) { .submenu { border-top: none; @@ -107,6 +115,7 @@ // width: 100%; padding: 10px 0; padding: 0 0 12px 16px; + // text-align: center; color: var(--gray-400); @@ -140,6 +149,7 @@ .submenu--absolute.is-open { opacity: 1; visibility: visible; + height: 988px; } .submenu-links--mobile.is-open { diff --git a/desafio-5/src/components/main/assets/arrow-icon.svg b/desafio-5/src/components/main/assets/arrow-icon.svg new file mode 100644 index 0000000..b123ffb --- /dev/null +++ b/desafio-5/src/components/main/assets/arrow-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/desafio-5/src/components/main/assets/home-icon.svg b/desafio-5/src/components/main/assets/home-icon.svg new file mode 100644 index 0000000..7d137cd --- /dev/null +++ b/desafio-5/src/components/main/assets/home-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-5/src/components/main/components/ContentMain.tsx b/desafio-5/src/components/main/components/ContentMain.tsx new file mode 100644 index 0000000..60100ec --- /dev/null +++ b/desafio-5/src/components/main/components/ContentMain.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import style from "../style/ContentMain.module.scss"; +import { Navigation } from "./navigation"; + +const Content = () => { + return ( +
+
+

INSTITUCIONAL

+ +
+
+ ); +}; + +export { Content }; diff --git a/desafio-5/src/components/main/components/Lis.tsx b/desafio-5/src/components/main/components/Lis.tsx new file mode 100644 index 0000000..a8b3e56 --- /dev/null +++ b/desafio-5/src/components/main/components/Lis.tsx @@ -0,0 +1,21 @@ +import React, { useContext } from "react"; +import { PageContext } from "../../../contexts/PageContext"; +import style from "../style/lis.module.scss"; + +interface Itext { + text: string; +} + + +const Lis = ({ text }: Itext) => { + + const { content, aba } = useContext(PageContext); + + return ( +
  • + +
    • + ); +}; + +export { Lis }; diff --git a/desafio-5/src/components/main/components/Selected.tsx b/desafio-5/src/components/main/components/Selected.tsx new file mode 100644 index 0000000..5b06056 --- /dev/null +++ b/desafio-5/src/components/main/components/Selected.tsx @@ -0,0 +1,33 @@ +import React, { useContext } from "react"; +import { PageContext } from "../../../contexts/PageContext"; +import { Sobre } from "./selected/sobre"; +import { Entrega } from "./selected/entrega"; +import { Troca } from "./selected/troca"; +import { FormaPagamento } from "./selected/formadepagamento"; +import { Seguranca } from "./selected/seguranca"; +// import { CustomForm } from "./selectedContent/form/Form"; + +function renderSwitch(param: string) { + switch (param) { + case "Sobre": + return ; + case "Forma de Pagamento": + return ; + case "Entrega": + return ; + case "Troca e Devolução": + return ; + case "Segurança e Privacidade": + return ; + // default: + // return ; + } +} + +const SelectedContent = () => { + const { content } = useContext(PageContext); + + return renderSwitch(content); +}; + +export { SelectedContent }; diff --git a/desafio-5/src/components/main/components/breacrumbs.tsx b/desafio-5/src/components/main/components/breacrumbs.tsx new file mode 100644 index 0000000..8959bf1 --- /dev/null +++ b/desafio-5/src/components/main/components/breacrumbs.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import style from "../style/breadcrumbs.module.scss"; +import {ReactComponent as HomeIcon} from "../assets/home-icon.svg"; +import {ReactComponent as ArrowIcon} from "../assets/arrow-icon.svg"; + +const Breadcrumbs = () => { + return ( +
    + +
    + ); +}; + +export { Breadcrumbs }; \ No newline at end of file diff --git a/desafio-5/src/components/main/components/form/FieldForm.tsx b/desafio-5/src/components/main/components/form/FieldForm.tsx new file mode 100644 index 0000000..44bcaba --- /dev/null +++ b/desafio-5/src/components/main/components/form/FieldForm.tsx @@ -0,0 +1,28 @@ +import React, { ReactNode } from "react"; +import { ErrorMessage, Field, FieldProps } from "formik"; +import MaskedInput, {} from "react-input-mask"; +import style from "../../../../../styles/main/form/fieldForm.module.css"; + +interface IFieldForm { + lab: string; + camp: string; + place: string; +} + +const FieldForm = ({ lab, camp, place }: IFieldForm) => { + return ( +
    + + + +
    + ); +}; + +export { FieldForm }; diff --git a/desafio-5/src/components/main/components/form/Form.tsx b/desafio-5/src/components/main/components/form/Form.tsx new file mode 100644 index 0000000..95bec0f --- /dev/null +++ b/desafio-5/src/components/main/components/form/Form.tsx @@ -0,0 +1,64 @@ +import React from "react"; +import { Formik, Form as FormikForm, FormikHelpers } from "formik"; + +import FormSchema from "../../../../schema/FormSchema"; +import style from "../../../../../styles/main/form/form.module.css"; +import { FieldForm } from "./FieldForm"; +import { TermForm } from "./TermForm"; + +interface IFormikValues { + name: string; + email: string; + cpf: string; + dataNascimento: string; + telefone: string; + instagram: string; +} +const initialValues = { + name: "", + email: "", + cpf: "", + dataNascimento: "", + telefone: "", + instagram: "", +}; + +const CustomForm = () => { + const handleFormikSubmit = ( + values: IFormikValues, + actions: FormikHelpers + ) => { + console.log(values); + actions.resetForm(); + }; + + return ( +
    + + +

    PREENCHA O FORMULÁRIO

    + + + + + + + + +     +     +
    + ); +}; + +export { CustomForm }; diff --git a/desafio-5/src/components/main/components/form/TermForm.tsx b/desafio-5/src/components/main/components/form/TermForm.tsx new file mode 100644 index 0000000..e0d080a --- /dev/null +++ b/desafio-5/src/components/main/components/form/TermForm.tsx @@ -0,0 +1,32 @@ +import { ErrorMessage, Field } from "formik"; +import React from "react"; +import style from "../../../../../styles/main/form/termForm.module.css"; + +const TermForm = () => { + return ( +
    +
    + +
    + +
    +
    +
    + +
    + ); +}; + +export { TermForm }; diff --git a/desafio-5/src/components/main/components/navigation.tsx b/desafio-5/src/components/main/components/navigation.tsx new file mode 100644 index 0000000..4cb96bf --- /dev/null +++ b/desafio-5/src/components/main/components/navigation.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import style from "../style/navigation.module.scss"; +import { Lis } from "./Lis"; +import { SelectedContent } from "./Selected"; + +const Navigation = () => { + return ( +
    + + + < SelectedContent /> + +
    + ); +}; + +export { Navigation }; diff --git a/desafio-5/src/components/main/components/selected/entrega.tsx b/desafio-5/src/components/main/components/selected/entrega.tsx new file mode 100644 index 0000000..4f7b2c2 --- /dev/null +++ b/desafio-5/src/components/main/components/selected/entrega.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import style from "../../style/Selected.module.scss"; + +const Entrega = () => { + return ( +
    +

    Entrega

    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

    +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

    +
    +
    + ); +}; + +export { Entrega }; diff --git a/desafio-5/src/components/main/components/selected/formadepagamento.tsx b/desafio-5/src/components/main/components/selected/formadepagamento.tsx new file mode 100644 index 0000000..237f08f --- /dev/null +++ b/desafio-5/src/components/main/components/selected/formadepagamento.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import style from "../../style/Selected.module.scss"; + +const FormaPagamento = () => { + return ( +
    +

    Forma de Pagamento

    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    + ); +}; + +export { FormaPagamento }; diff --git a/desafio-5/src/components/main/components/selected/seguranca.tsx b/desafio-5/src/components/main/components/selected/seguranca.tsx new file mode 100644 index 0000000..521f9f1 --- /dev/null +++ b/desafio-5/src/components/main/components/selected/seguranca.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import style from "../../style/Selected.module.scss"; + +const Seguranca = () => { + return ( +
    +

    Segurança e Privacidade

    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    + ); +}; + +export { Seguranca }; diff --git a/desafio-5/src/components/main/components/selected/sobre.tsx b/desafio-5/src/components/main/components/selected/sobre.tsx new file mode 100644 index 0000000..893454d --- /dev/null +++ b/desafio-5/src/components/main/components/selected/sobre.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import style from "../../style/Selected.module.scss"; + +const Sobre = () => { + return ( +
    +

    Sobre

    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

    +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

    +

    + Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

    +
    +
    + ); +}; + +export { Sobre }; diff --git a/desafio-5/src/components/main/components/selected/troca.tsx b/desafio-5/src/components/main/components/selected/troca.tsx new file mode 100644 index 0000000..e6fac92 --- /dev/null +++ b/desafio-5/src/components/main/components/selected/troca.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import style from "../../style/Selected.module.scss"; + +const Troca = () => { + return ( +
    +

    Troca e Devolução

    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

    +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

    +

    + Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

    +
    +
    + ); +}; + +export { Troca }; diff --git a/desafio-5/src/components/main/main.tsx b/desafio-5/src/components/main/main.tsx new file mode 100644 index 0000000..0c856d9 --- /dev/null +++ b/desafio-5/src/components/main/main.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { Breadcrumbs } from "./components/breacrumbs"; +import { Content } from "./components/ContentMain"; + +const Main = () => { + return ( +
    + + +
    + ); +}; + +export { Main }; diff --git a/desafio-5/src/components/main/style/ContentMain.module.scss b/desafio-5/src/components/main/style/ContentMain.module.scss new file mode 100644 index 0000000..38f81fa --- /dev/null +++ b/desafio-5/src/components/main/style/ContentMain.module.scss @@ -0,0 +1,23 @@ +.container { + padding: 0 40px 0 128px; +} + +.title { + font-family: var(--roboto); + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + text-align: center; + + + width: 100%; +} + +@media screen and (max-width: 768px) { + .container { + padding: 0 16px; + } +} \ No newline at end of file diff --git a/desafio-5/src/components/main/style/Selected.module.scss b/desafio-5/src/components/main/style/Selected.module.scss new file mode 100644 index 0000000..41acc8b --- /dev/null +++ b/desafio-5/src/components/main/style/Selected.module.scss @@ -0,0 +1,42 @@ +.contentSelected { + max-width: 715px; + width: 100%; + padding-left: 32px; +} +.content-title { + font-size: 24px; + font-weight: 700; + line-height: 28px; + color: var(--black-300); +} +.content { + padding-top: 12px; +} +.content-paragraph { + font-weight: 400; + font-size: 13px; + line-height: 15px; + color: var(--gray-600); + + padding-bottom: 24px; +} + +@media screen and (max-width: 768px) { + .contentSelected { + max-width: 100%; + padding-left: 0; + } + .content { + padding-top: 16px; + } + .content-title { + text-align: center; + } + .content-paragraph { + padding-bottom: 30px; + + text-align: justify; + font-size: 12px; + line-height: 18px; + } +} diff --git a/desafio-5/src/components/main/style/breadcrumbs.module.scss b/desafio-5/src/components/main/style/breadcrumbs.module.scss new file mode 100644 index 0000000..2ee4305 --- /dev/null +++ b/desafio-5/src/components/main/style/breadcrumbs.module.scss @@ -0,0 +1,41 @@ +.container{ + padding: 0 40px 0 100px; + } + .breadcrumbs { + display: flex; + align-items: center; + justify-content: flex-start; + + margin: 30px 0 80px; + } + .breadcrumbs-link { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: var( --gray-400); + text-decoration: none; + + margin: 0 8px; + + transition: color .2s linear; + } + .breadcrumbs-link svg{ + transition: fill .2s linear; + } + .breadcrumbs-link svg:hover{ + fill: var(--black-300) + } + .breadcrumbs-link:hover{ + color: var(--black-300); + } + + @media screen and (max-width: 768px) { + .container{ + padding: 0 16px 0 8px; + } + .breadcrumbs { + margin: 16px 0 32px; + } + } \ No newline at end of file diff --git a/desafio-5/src/components/main/style/form/fieldForm.module.css b/desafio-5/src/components/main/style/form/fieldForm.module.css new file mode 100644 index 0000000..b429fcb --- /dev/null +++ b/desafio-5/src/components/main/style/form/fieldForm.module.css @@ -0,0 +1,31 @@ +.form-inputGroup { + display: flex; + flex-direction: column; + position: relative; +} +.form__label { + margin-left: 14px; + font-weight: 400; + font-size: 14px; + line-height: 23px; + color: var(--black-400); + padding: 12px 0 4px; +} +.form__input { + border: 1px solid var(--black-400); + border-radius: 25px; + padding: 12px 28px; +} +.form__input::placeholder { + font-weight: 400; + font-size: 14px; + line-height: 23px; + color: var(--gray-500); +} +.form__error{ + position: absolute; + top: 20px; + right: 0; + color: #dc143c; + font-size: 12px; +} \ No newline at end of file diff --git a/desafio-5/src/components/main/style/form/form.module.css b/desafio-5/src/components/main/style/form/form.module.css new file mode 100644 index 0000000..2f4583f --- /dev/null +++ b/desafio-5/src/components/main/style/form/form.module.css @@ -0,0 +1,54 @@ +.content-selected { + max-width: 715px; + width: 100%; +} +.form{ + max-width: 390px; + width: 100%; + margin: 0 auto; +} +.form__title { + font-size: 24px; + line-height: 23px; + font-weight: 400; + color: var(--black-500); + + margin-bottom: 22px; +} +.form-button { + width: 100%; + padding: 8px 0; + background: var(--blue-400); + + border-radius: 25px; + border: 0; + outline: 0; + + font-family: "Montserrat", sans-serif; + font-size: 16px; + line-height: 34px; + font-weight: 700; + letter-spacing: 0.05em; + color: white; + + cursor: pointer; +} +@media screen and (max-width: 1024px) { + .content-selected{ + margin-left: 32px; + } +} + +@media screen and (max-width: 768px) { + .form{ + max-width: 100%; + } + .form__title { + font-size: 18px; + line-height: 18px; + text-align: center; + } + .content-selected{ + margin-left: 0; + } +} \ No newline at end of file diff --git a/desafio-5/src/components/main/style/form/termForm.module.css b/desafio-5/src/components/main/style/form/termForm.module.css new file mode 100644 index 0000000..0e4c118 --- /dev/null +++ b/desafio-5/src/components/main/style/form/termForm.module.css @@ -0,0 +1,70 @@ +.form-term { + padding: 20px 0; + display: flex; + align-items: center; + flex-direction: column; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-touch-callout: none; + user-select: none; +} +.form-term__group { + display: flex; +} +.form-term__label { + font-weight: 400; + font-size: 14px; + line-height: 23px; + text-decoration: underline; + color: var(--black-400); + cursor: pointer; +} +.form-term__span { + color: var(--blue-500); + cursor: help; +} +.form-term__input-group { + display: flex; + align-items: center; + position: relative; + margin-left: 12px; +} +.form-term__input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 18px; + width: 18px; +} +.form-term__input--custom { + width: 18px; + height: 18px; + border: 1px solid #000000; + border-radius: 3px; + position: relative; + pointer-events: none; +} +.form-term__input--custom::after { + content: ""; + position: absolute; + display: none; + + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 14px; + height: 14px; + border-radius: 3px; + background-color: var(--blue-500); +} + +.form-term__input:checked ~ .form-term__input--custom::after { + display: block; +} +.form-term__error { + color: #dc143c; + font-size: 12px; + margin-top: 5px; +} diff --git a/desafio-5/src/components/main/style/lis.module.scss b/desafio-5/src/components/main/style/lis.module.scss new file mode 100644 index 0000000..97259c3 --- /dev/null +++ b/desafio-5/src/components/main/style/lis.module.scss @@ -0,0 +1,32 @@ +.item-button { + width: 100%; + outline: 0; + border: 0; + background: transparent; + cursor: pointer; + + font-family: var(--roboto); + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 19px; + color: var(--gray-600); + text-align: left; + + padding: 10px 16px; + transition: all .2s ease-in-out; +} + +.item-button:hover:not(.is-selected) { + background-color: var(--gray-200); + color: var(--black-500); +} + +.is-selected { + font-weight: 700; + font-size: 16px; + line-height: 19px; + + background-color: var(--blue-500); + color: #fff; +} \ No newline at end of file diff --git a/desafio-5/src/components/main/style/navigation.module.scss b/desafio-5/src/components/main/style/navigation.module.scss new file mode 100644 index 0000000..a5b02de --- /dev/null +++ b/desafio-5/src/components/main/style/navigation.module.scss @@ -0,0 +1,29 @@ +.navigationContent { + display: flex; + justify-content: flex-start; + width: 100%; + margin-top: 40px; + } + + .navigation { + max-width: 270px; + width: 100%; + } + + .navigation-list { + border-right: 1px solid var(--gray-300); + } + + @media screen and (max-width: 768px) { + .navigationContent{ + flex-direction: column; + margin-top: 22px; + } + .navigation{ + max-width: 100%; + margin-bottom: 40px; + } + .navigation-list{ + border: none; + } + } \ No newline at end of file diff --git a/desafio-5/src/components/news/news.tsx b/desafio-5/src/components/news/news.tsx index 65fe728..3ad239f 100644 --- a/desafio-5/src/components/news/news.tsx +++ b/desafio-5/src/components/news/news.tsx @@ -44,11 +44,7 @@ import { ENVIAR - + diff --git a/desafio-5/src/components/news/style/news.module.scss b/desafio-5/src/components/news/style/news.module.scss index bf4aa90..e2c0ae7 100644 --- a/desafio-5/src/components/news/style/news.module.scss +++ b/desafio-5/src/components/news/style/news.module.scss @@ -87,10 +87,7 @@ // background-color: var(--blue-500); // } -.form__error { - color: #dc143c; - font-size: 12px; -} + @media screen and (max-width: 1024px) { diff --git a/desafio-5/src/pages/Home.tsx b/desafio-5/src/pages/Home.tsx index e6eec1b..6ed8f0d 100644 --- a/desafio-5/src/pages/Home.tsx +++ b/desafio-5/src/pages/Home.tsx @@ -4,6 +4,7 @@ import { Header } from "../components/Header/header" import { Footer } from "../components/Footer/footer" import { Informacoes } from "../components/informacoes/informacoes" import { Newsletter } from "../components/news/news" +import { Main } from "../components/main/main"; const Home = () => { @@ -11,6 +12,7 @@ const Home = () => { <> < Header /> + < Main/> < Newsletter/> diff --git a/desafio-5/src/schema/FormSchema.ts b/desafio-5/src/schema/FormSchema.ts new file mode 100644 index 0000000..5d5d79c --- /dev/null +++ b/desafio-5/src/schema/FormSchema.ts @@ -0,0 +1,25 @@ +import * as Yup from "yup"; +import "yup-phone"; +import { parse } from "date-fns"; +import CPF from "cpf"; + +export default Yup.object().shape({ + name: Yup.string().min(3, "Nome inválido").required("Campo obrigatório"), + email: Yup.string().email("Email inválido").required("Campo obrigatório"), + telefone: Yup.string() + .required("Campo obrigatório") + .phone("BR", true, "Telefone Inválido"), + instagram: Yup.string().min(3, "Instagram inválido").required("Campo Obrigatório"), + dataNascimento: Yup.date() + .transform((value, originalValue, context) => { + if (context.isType(value)) return value; + return parse(originalValue, "dd.MM.yyyy", new Date()); + }) + .typeError("Data Inválida") + .max(new Date(), "Data Inválida") + .required("Campo Obrigatório"), + cpf: Yup.string() + .required("Campo Obrigatório") + .test("test-cpf", "Cpf inválido", (cpf) => CPF.isValid(cpf!)), + term: Yup.bool().oneOf([true], 'Termo Obrigatório') +});