From e5b2421e1be656b9d70fa6bc2c62fc86f1873de3 Mon Sep 17 00:00:00 2001 From: juliaM <35346206+juliaam@users.noreply.github.com> Date: Thu, 6 Jun 2024 17:14:32 -0300 Subject: [PATCH] feat: petvet page - cadastro de pet etapa 8 (#114) * feat: desktop css and html petdex componente page * fix: html and css finished * fix: button and content * fix: emit * fix: index js * fix: remove import petvet * fix: fonts * fix: send events * fix: add semicolon * fix: base desktop * feat: add radios * fix: styles of petvet * fix: petvetpage and vacine improvments * fix: directory name * feat: radio groups and new format * feat: list vaccines * feat: component storybook * fix: font name * fix: stories, nomenclature and indentation * fix: box shadow vaccine * fix: heieght to container in storybook * fix: page and component scroll * fix: petvetpage footer * fix: margin in footer * fix: stories home behavior * fix: better reading stories --- .husky/prepare-commit-msg | 4 - src/components/Vaccine/index.js | 13 +- src/components/Vaccine/index.scss | 27 +-- src/components/VaccineGroup/index.js | 13 ++ .../PetVetPage/images/cuidadosEspeciais.svg | 19 ++ .../PetVetPage/images/estetoscopio.svg | 21 ++ src/home/components/PetVetPage/index.js | 127 ++++++++++++ src/home/components/PetVetPage/index.scss | 159 +++++++++++++++ src/home/index.js | 5 + src/home/index.scss | 184 +++++++++--------- src/stories/PetVetPage.stories.js | 42 ++++ src/styles/fonts.scss | 1 + 12 files changed, 505 insertions(+), 110 deletions(-) delete mode 100755 .husky/prepare-commit-msg create mode 100644 src/home/components/PetVetPage/images/cuidadosEspeciais.svg create mode 100644 src/home/components/PetVetPage/images/estetoscopio.svg create mode 100644 src/home/components/PetVetPage/index.js create mode 100644 src/home/components/PetVetPage/index.scss create mode 100644 src/stories/PetVetPage.stories.js diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg deleted file mode 100755 index cb932df0..00000000 --- a/.husky/prepare-commit-msg +++ /dev/null @@ -1,4 +0,0 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - -exec < /dev/tty && npx cz --hook || true diff --git a/src/components/Vaccine/index.js b/src/components/Vaccine/index.js index b408bd6a..1e07a5df 100644 --- a/src/components/Vaccine/index.js +++ b/src/components/Vaccine/index.js @@ -20,8 +20,8 @@ const html = ` -
-
+
+
`; @@ -74,6 +74,15 @@ Vaccine.prototype = Object.assign(Vaccine.prototype, Component.prototype, { this.setGroup(vaccine); }); }, + listVaccines() { + const vaccines = []; + + this.groups.values().forEach((group) => { + const items = group.listItems(); + vaccines.push(...items); + }); + return vaccines; + }, openDrawer() { this.emit('drawer:open'); }, diff --git a/src/components/Vaccine/index.scss b/src/components/Vaccine/index.scss index ea7f4b42..a2d84153 100644 --- a/src/components/Vaccine/index.scss +++ b/src/components/Vaccine/index.scss @@ -13,16 +13,9 @@ padding: 2rem; border: 1px solid colors.$gray150; - box-shadow: rgb(50, 50, 71); - border-radius: 1.8rem; - - &__sections { - display: flex; - flex-direction: column; - gap: 2rem; + box-shadow: 0 0 2px 2px rgba(50, 50, 71, 0.04); - margin-right: 1rem; - } + border-radius: 1.8rem; &__header { display: flex; @@ -84,8 +77,8 @@ display: none; } - &__list-group { - overflow-y: auto; + &__sections { + margin-right: 2rem; } } @@ -102,9 +95,17 @@ &__add-vacine-text { display: block; } + } +} + +@container (min-height: 790px) { + @include breakpoints.from667 { + .vaccine { + overflow: auto; - &__sections { - margin-right: 2rem; + &__scroll { + overflow: auto; + } } } } diff --git a/src/components/VaccineGroup/index.js b/src/components/VaccineGroup/index.js index 0224d44d..b507d7c8 100644 --- a/src/components/VaccineGroup/index.js +++ b/src/components/VaccineGroup/index.js @@ -40,5 +40,18 @@ VaccineGroup.prototype = Object.assign( this.items.set(item.id, vaccineItem); this.emit('item:change', vaccineItem); }, + listItems() { + const items = []; + + this.items.values().forEach((item) => { + items.push({ + id: item.id, + title: item.getTitle(), + veterinary: item.getVeterinary(), + date: item.getDate(), + }); + }); + return items; + }, }, ); diff --git a/src/home/components/PetVetPage/images/cuidadosEspeciais.svg b/src/home/components/PetVetPage/images/cuidadosEspeciais.svg new file mode 100644 index 00000000..cf3c0a71 --- /dev/null +++ b/src/home/components/PetVetPage/images/cuidadosEspeciais.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/home/components/PetVetPage/images/estetoscopio.svg b/src/home/components/PetVetPage/images/estetoscopio.svg new file mode 100644 index 00000000..6d34411e --- /dev/null +++ b/src/home/components/PetVetPage/images/estetoscopio.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/home/components/PetVetPage/index.js b/src/home/components/PetVetPage/index.js new file mode 100644 index 00000000..19e49de9 --- /dev/null +++ b/src/home/components/PetVetPage/index.js @@ -0,0 +1,127 @@ +import { Component } from 'pet-dex-utilities'; +import Button from '../../../components/Button'; +import Radio from '../../../components/RadioButton'; +import Vaccine from '../../../components/Vaccine'; + +import estetoscopio from './images/estetoscopio.svg'; +import cuidadosEspeciais from './images/cuidadosEspeciais.svg'; + +import './index.scss'; + +const html = ` +
+
+

Conte-nos um pouco mais do seu animal

+

Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!

+
+
+
+
+
+ estetoscopio +
+
+

O seu pet amigo foi castrado?

+
+
+
+
+
+
+
+ cuidados especiais +
+
+

Cuidados especiais

+
+
+
+
+
+
+
+`; + +const events = ['submit']; + +function createAndMount({ name, text, mountTo }) { + const radio = new Radio({ name, text }); + radio.mount(mountTo); + return radio; +} + +export default function PetVetPage({ vaccines = [] } = {}) { + Component.call(this, { html, events }); + + const $footer = this.selected.get('footer'); + const $specialCareRadio = this.selected.get('special-care-radio'); + const $neuteredRadio = this.selected.get('neutered-radio'); + const $cardGroup = this.selected.get('card-group'); + + this.vaccine = new Vaccine({ vaccines }); + this.vaccine.mount($cardGroup); + + const form = { + isNeutered: undefined, + isSpecialCare: undefined, + specialCareText: '', + vaccines: undefined, + }; + + const specialCare = [ + createAndMount({ + name: 'specialCare', + text: 'Não', + mountTo: $specialCareRadio, + }), + createAndMount({ + name: 'specialCare', + text: 'Sim', + mountTo: $specialCareRadio, + }), + ]; + const neutered = [ + createAndMount({ + name: 'neutered', + text: 'Não', + mountTo: $neuteredRadio, + }), + createAndMount({ + name: 'neutered', + text: 'Sim', + mountTo: $neuteredRadio, + }), + ]; + + neutered.forEach((radio) => { + radio.listen('change', (value) => { + const text = radio.getText(); + form.isNeutered = text === 'Yes' ? value : !value; + }); + }); + + specialCare.forEach((radio) => { + radio.listen('change', (value) => { + const text = radio.getText(); + form.isSpecialCare = text === 'Yes' ? value : !value; + }); + }); + + this.button = new Button({ + text: 'Concluir', + isFullWidth: false, + isDisabled: false, + }); + + this.button.selected.get('button').classList.add('petvet-page__button'); + this.button.mount($footer); + + const emitForm = () => { + form.vaccines = this.vaccine.listVaccines(); + this.emit('submit', form); + }; + + this.button.listen('click', emitForm); +} + +PetVetPage.prototype = Object.assign(PetVetPage.prototype, Component.prototype); diff --git a/src/home/components/PetVetPage/index.scss b/src/home/components/PetVetPage/index.scss new file mode 100644 index 00000000..f0136cd4 --- /dev/null +++ b/src/home/components/PetVetPage/index.scss @@ -0,0 +1,159 @@ +@use '~styles/colors.scss' as colors; +@use '~styles/fonts.scss' as fonts; +@use '~styles/breakpoints' as breakpoints; + +.petvet-page { + height: 100%; + + display: flex; + flex-direction: column; + + align-items: center; + + &__header { + text-align: center; + + margin-bottom: 2.4rem; + + &--text { + font-family: fonts.$primaryFont; + color: colors.$gray800; + font-size: 1.8rem; + font-weight: fonts.$semiBold; + + line-height: 2.6; + } + + &--subtext { + font-family: fonts.$fourthFont; + color: colors.$gray700; + font-size: fonts.$sm; + font-weight: fonts.$regular; + + line-height: 2.2; + } + } + + &__card-group { + display: flex; + flex-direction: column; + + gap: 1.6rem; + } + + &__card { + font-family: fonts.$primaryFont; + color: colors.$gray800; + font-size: 1.4rem; + font-weight: fonts.$semiBold; + line-height: 2rem; + + padding: 1.6rem; + + box-shadow: 0 0 2px 2px rgba(50, 50, 71, 0.04); + + border-radius: 1.4rem; + } + + &__card-header { + display: flex; + gap: 1rem; + + align-items: center; + } + + &__card-content { + width: 100%; + + display: flex; + + flex-direction: column; + + gap: 2rem; + } + + &__img { + max-width: 5.4rem; + max-height: 5.4rem; + + display: flex; + + align-items: center; + } + + &__footer { + width: 100%; + + display: flex; + + justify-content: center; + } + + &__button { + width: min(100%, 42rem); + + margin-top: 2.4rem; + margin-bottom: 2.4rem; + } +} + +@include breakpoints.from667 { + .petvet-page { + &__img { + min-width: 6rem; + min-height: 6rem; + + display: flex; + + align-items: center; + } + + &__card { + padding: 2rem; + + border: 1px solid colors.$gray150; + + box-shadow: none; + border-radius: 1.8rem; + } + + &__card-header { + display: flex; + gap: 2rem; + + align-items: center; + } + + &__card-content { + flex-direction: row; + + align-items: center; + + justify-content: space-between; + } + + &__header { + &--subtext { + font-size: fonts.$sm; + } + } + + &__card-group { + gap: 2.4rem; + } + + &__button { + margin-bottom: 0; + } + } +} + +@container (min-height: 790px) { + @include breakpoints.from667 { + .petvet-page { + &__card-group { + overflow: auto; + } + } + } +} diff --git a/src/home/index.js b/src/home/index.js index d6d0e212..9ee5ef62 100644 --- a/src/home/index.js +++ b/src/home/index.js @@ -1,6 +1,7 @@ import { extractElements } from 'pet-dex-utilities'; import { initializeSwiper } from '../utils/swiper'; import Navigation from './components/Navigation'; +import NoPetRegirestedPage from './components/NoPetRegirestedPage'; import SideMenu from './components/SideMenu'; import './index.scss'; import initializeScrollable from './utils/scrollable-sidemenu'; @@ -19,6 +20,10 @@ document.addEventListener('DOMContentLoaded', () => { const navigation = new Navigation(); navigation.mount($navigation); + const $content = selected.get('content'); + const noPetRegirestedPage = new NoPetRegirestedPage(); + noPetRegirestedPage.mount($content); + const $hamburgerMenu = navigation.selected.get('hamburger-menu'); const $exitMenu = sideMenu.selected.get('exitMenu'); const $itemsMenu = sideMenu.selected.get('menuitens').querySelectorAll('li'); diff --git a/src/home/index.scss b/src/home/index.scss index 885f8ddb..c7c594eb 100644 --- a/src/home/index.scss +++ b/src/home/index.scss @@ -1,91 +1,93 @@ -@use '~styles/base.scss'; -@use '~styles/colors.scss' as colors; -@use '~styles/breakpoints.scss' as breakpoints; -@use '~styles/fonts.scss' as fonts; - -.home { - width: 200vw; - height: 100dvh; - overflow-x: hidden; - - display: grid; - grid-template-areas: - 'sidemenu nav' - 'sidemenu content'; - grid-template-rows: 8.1rem 1fr; - grid-template-columns: 100vw 100vw; - - background-color: colors.$primary600; - transform: translateX(-100vw); - - &--open-menu { - width: 100vw; - - transform: translateX(0); - - transition: transform 0.3s; - } - - &--exit-menu { - width: 200vw; - - transform: translateX(-100vw); - - transition: transform 0.3s; - } - - &__navigation { - display: flex; - grid-area: nav; - - align-items: center; - } - - &__sidemenu { - display: grid; - grid-area: sidemenu; - grid-template-rows: 8.1rem 1fr; - } - - &__content { - overflow: auto; - - grid-area: content; - - background-color: colors.$secondary100; - - padding-inline: 2rem; - padding-block: 3.2rem; - } - - &__content-page { - width: 100%; - height: 100%; - } -} - -@include breakpoints.from1024 { - .home { - width: 100vw; - - grid-template-areas: - 'sidemenu nav' - 'sidemenu content'; - grid-template-rows: 8.1rem 1fr; - grid-template-columns: 31.3rem 1fr; - - transform: translateX(0); - - &__content { - margin-inline: 2.4rem; - - margin-bottom: 2.4rem; - - border-radius: 1.6rem; - } - - &__sidemenu { - display: block; - } - } -} +@use '~styles/base.scss'; +@use '~styles/colors.scss' as colors; +@use '~styles/breakpoints.scss' as breakpoints; +@use '~styles/fonts.scss' as fonts; + +.home { + width: 200vw; + height: 100dvh; + overflow-x: hidden; + + container-type: size; + + display: grid; + grid-template-areas: + 'sidemenu nav' + 'sidemenu content'; + grid-template-rows: 8.1rem 1fr; + grid-template-columns: 100vw 100vw; + + background-color: colors.$primary600; + transform: translateX(-100vw); + + &--open-menu { + width: 100vw; + + transform: translateX(0); + + transition: transform 0.3s; + } + + &--exit-menu { + width: 200vw; + + transform: translateX(-100vw); + + transition: transform 0.3s; + } + + &__navigation { + display: flex; + grid-area: nav; + + align-items: center; + } + + &__sidemenu { + display: grid; + grid-area: sidemenu; + grid-template-rows: 8.1rem 1fr; + } + + &__content { + overflow: auto; + + grid-area: content; + + background-color: colors.$secondary100; + + padding-inline: 2rem; + padding-block: 3.2rem; + } + + &__content-page { + width: 100%; + height: 100%; + } +} + +@include breakpoints.from1024 { + .home { + width: 100vw; + + grid-template-areas: + 'sidemenu nav' + 'sidemenu content'; + grid-template-rows: 8.1rem 1fr; + grid-template-columns: 31.3rem 1fr; + + transform: translateX(0); + + &__content { + margin-inline: 2.4rem; + + margin-bottom: 2.4rem; + + border-radius: 1.6rem; + } + + &__sidemenu { + display: block; + } + } +} diff --git a/src/stories/PetVetPage.stories.js b/src/stories/PetVetPage.stories.js new file mode 100644 index 00000000..b90912eb --- /dev/null +++ b/src/stories/PetVetPage.stories.js @@ -0,0 +1,42 @@ +import PetVetPage from '../home/components/PetVetPage'; + +export default { + title: 'Pages/PetVetPage', + render: (args) => { + const petVetPage = new PetVetPage(args); + const $container = document.createElement('div'); + + $container.style.height = '826px'; + $container.style.containerType = 'size'; + $container.style.overflow = 'auto'; + + petVetPage.mount($container); + + return $container; + }, + args: { + vaccines: [ + { + id: '1', + veterinary: 'Dr octopus', + title: 'Antirrábica', + date: new Date().toISOString(), + }, + { + id: '2', + veterinary: 'Dr Felipa', + title: 'Raiva', + date: new Date(2023, 5, 2).toISOString(), + }, + { + id: '3', + veterinary: 'Dr octopus', + title: 'Raiva', + date: new Date(2023, 2, 2).toISOString(), + }, + ], + }, + component: PetVetPage, +}; + +export const PetVetPageStory = {}; diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss index 8e978d17..6c510fff 100644 --- a/src/styles/fonts.scss +++ b/src/styles/fonts.scss @@ -1,6 +1,7 @@ $primaryFont: 'Montserrat', sans-serif; $secondaryFont: 'Wix Madefor Display', sans-serif; $tertiaryFont: 'Helvetica', sans-serif; +$fourthFont: 'Noto Sans', sans-serif; $xs: 1.4rem; $sm: 1.6rem;