From f7e573db2ef45ea78a8fe35967092aeb3ca62198 Mon Sep 17 00:00:00 2001 From: Nathalia Date: Sat, 1 Jun 2024 15:08:47 -0300 Subject: [PATCH 1/7] feat: create pet avatar component --- src/components/PetAvatar/index.js | 50 +++++++++++++++++++++++++++++ src/components/PetAvatar/index.scss | 45 ++++++++++++++++++++++++++ src/stories/PetAvatar.stories.js | 27 ++++++++++++++++ 3 files changed, 122 insertions(+) create mode 100644 src/components/PetAvatar/index.js create mode 100644 src/components/PetAvatar/index.scss create mode 100644 src/stories/PetAvatar.stories.js diff --git a/src/components/PetAvatar/index.js b/src/components/PetAvatar/index.js new file mode 100644 index 00000000..c5234811 --- /dev/null +++ b/src/components/PetAvatar/index.js @@ -0,0 +1,50 @@ +import { Component } from 'pet-dex-utilities'; +import './index.scss'; + +const events = ['active', 'deactive']; + +const html = ` + + +

+ +`; + +// estudar frontend route / route parameter + +export default function PetAvatar({ id, title, imgSrc, imgAlt }) { + Component.call(this, { html, events }); + + this.selected.get('pet-container').href += id; + + if (title) this.setTitle(title); + if (imgSrc) this.setImgSrc(imgSrc); + if (imgAlt) this.setImgAlt(imgAlt); +} + +PetAvatar.prototype = Object.assign(PetAvatar.prototype, Component.prototype, { + setTitle(text) { + this.selected.get('pet-title').textContent = text; + }, + setImgSrc(src) { + this.selected.get('pet-image').src = src; + }, + setImgAlt(alt) { + this.selected.get('pet-image').alt = alt; + }, + isActive() {}, + activate() { + const image = this.selected.get('pet-image'); + const title = this.selected.get('pet-title'); + image.classList.add('pet-container__img--active'); + title.classList.add('pet-container__title--active'); + this.emit('active'); + }, + deactivate() { + const image = this.selected.get('pet-image'); + const title = this.selected.get('pet-title'); + image.classList.remove('pet-container__img--active'); + title.classList.remove('pet-container__title--active'); + this.emit('deactive'); + }, +}); diff --git a/src/components/PetAvatar/index.scss b/src/components/PetAvatar/index.scss new file mode 100644 index 00000000..6f59f8fc --- /dev/null +++ b/src/components/PetAvatar/index.scss @@ -0,0 +1,45 @@ +@use '~styles/colors' as colors; +@use '~styles/fonts' as fonts; + +.pet-container { + display: flex; + flex-direction: column; + gap: 0.6rem; + + align-items: center; + aspect-ratio: 1/1; + + &__img { + min-width: 6rem; + height: 100%; + min-height: 6rem; + + outline: 0.15rem solid colors.$gray500; + + border-radius: 50%; + object-fit: cover; + aspect-ratio: 1/1; + + &--active { + outline: 0.3rem solid colors.$primary200; + } + } + + &__title { + height: 100%; + min-height: 2.2rem; + max-height: 2.2rem; + overflow: hidden; + + font-family: fonts.$secondaryFont; + + color: colors.$gray200; + text-align: center; + font-weight: fonts.$regular; + + &--active { + color: colors.$primary200; + font-weight: fonts.$semiBold; + } + } +} diff --git a/src/stories/PetAvatar.stories.js b/src/stories/PetAvatar.stories.js new file mode 100644 index 00000000..78b4e819 --- /dev/null +++ b/src/stories/PetAvatar.stories.js @@ -0,0 +1,27 @@ +import PetAvatar from '../components/PetAvatar'; + +import akita from '../home/components/PetRegisterPage/images/akita.svg'; + +export default { + title: 'Components/PetAvatar', + render: (args) => { + const $container = document.createElement('div'); + const petAvatar = new PetAvatar(args); + petAvatar.mount($container); + + return $container; + }, + argTypes: { + title: { control: 'text', description: 'Pet name' }, + imgSrc: { control: 'text', description: 'url source for a image pet' }, + imgAlt: { control: 'text', description: 'Pet name alt description' }, + }, +}; + +export const Default = { + args: { + title: 'Carlos', + imgSrc: akita, + imgAlt: 'breed alt description', + }, +}; From 150ac9484e9651e34366823e8800b2b04552de82 Mon Sep 17 00:00:00 2001 From: Nathalia Date: Fri, 7 Jun 2024 22:03:58 -0300 Subject: [PATCH 2/7] feat: create pet avatar component --- src/components/PetAvatar/index.js | 27 +++++++-------- src/components/PetAvatar/index.scss | 5 +-- src/layouts/app/components/SideMenu/index.js | 33 +++++++++++++++++++ .../app/components/SideMenu/index.scss | 9 +++++ src/stories/PetAvatar.stories.js | 2 ++ 5 files changed, 59 insertions(+), 17 deletions(-) diff --git a/src/components/PetAvatar/index.js b/src/components/PetAvatar/index.js index c5234811..dbe6b83f 100644 --- a/src/components/PetAvatar/index.js +++ b/src/components/PetAvatar/index.js @@ -1,25 +1,27 @@ import { Component } from 'pet-dex-utilities'; import './index.scss'; +import { routeLocation } from 'vanilla-routing'; -const events = ['active', 'deactive']; +const events = ['active']; const html = ` - +

`; -// estudar frontend route / route parameter - -export default function PetAvatar({ id, title, imgSrc, imgAlt }) { +export default function PetAvatar({ id, title, imgSrc, imgAlt } = {}) { Component.call(this, { html, events }); - this.selected.get('pet-container').href += id; - + if (id) this.setHref(id); if (title) this.setTitle(title); if (imgSrc) this.setImgSrc(imgSrc); if (imgAlt) this.setImgAlt(imgAlt); + + if (routeLocation().pathname === `/petperfil/${id}`) { + this.activate(); + } } PetAvatar.prototype = Object.assign(PetAvatar.prototype, Component.prototype, { @@ -32,7 +34,9 @@ PetAvatar.prototype = Object.assign(PetAvatar.prototype, Component.prototype, { setImgAlt(alt) { this.selected.get('pet-image').alt = alt; }, - isActive() {}, + setHref(id) { + this.selected.get('pet-container').href += id; + }, activate() { const image = this.selected.get('pet-image'); const title = this.selected.get('pet-title'); @@ -40,11 +44,4 @@ PetAvatar.prototype = Object.assign(PetAvatar.prototype, Component.prototype, { title.classList.add('pet-container__title--active'); this.emit('active'); }, - deactivate() { - const image = this.selected.get('pet-image'); - const title = this.selected.get('pet-title'); - image.classList.remove('pet-container__img--active'); - title.classList.remove('pet-container__title--active'); - this.emit('deactive'); - }, }); diff --git a/src/components/PetAvatar/index.scss b/src/components/PetAvatar/index.scss index 6f59f8fc..3454b2ec 100644 --- a/src/components/PetAvatar/index.scss +++ b/src/components/PetAvatar/index.scss @@ -4,7 +4,7 @@ .pet-container { display: flex; flex-direction: column; - gap: 0.6rem; + gap: 1rem; align-items: center; aspect-ratio: 1/1; @@ -31,10 +31,11 @@ max-height: 2.2rem; overflow: hidden; - font-family: fonts.$secondaryFont; + font-family: fonts.$quaternaryFont; color: colors.$gray200; text-align: center; + font-size: 1.4rem; font-weight: fonts.$regular; &--active { diff --git a/src/layouts/app/components/SideMenu/index.js b/src/layouts/app/components/SideMenu/index.js index d4407b25..e8b38b84 100644 --- a/src/layouts/app/components/SideMenu/index.js +++ b/src/layouts/app/components/SideMenu/index.js @@ -10,6 +10,7 @@ import notificacoes from './images/notifications.svg'; import perfil from './images/perfil.svg'; import petdex from './images/petdex.svg'; import './index.scss'; +import PetAvatar from '../../../components/PetAvatar'; const html = `