From ff96aaa8c2384974ee3138091b35bafa207d6ded Mon Sep 17 00:00:00 2001 From: juliaam Date: Thu, 19 Sep 2024 20:51:11 -0300 Subject: [PATCH 1/3] feat: mypetscard --- src/components/MyPets/index.js | 32 +++++++++++++++ src/components/MyPets/index.scss | 0 src/components/MyPetsCard/index.js | 59 ++++++++++++++++++++++++++++ src/components/MyPetsCard/index.scss | 41 +++++++++++++++++++ src/components/PetAvatar/index.js | 2 +- src/stories/MyPets.stories.js | 14 +++++++ 6 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 src/components/MyPets/index.js create mode 100644 src/components/MyPets/index.scss create mode 100644 src/components/MyPetsCard/index.js create mode 100644 src/components/MyPetsCard/index.scss create mode 100644 src/stories/MyPets.stories.js diff --git a/src/components/MyPets/index.js b/src/components/MyPets/index.js new file mode 100644 index 00000000..b5b85465 --- /dev/null +++ b/src/components/MyPets/index.js @@ -0,0 +1,32 @@ +import { Component } from 'pet-dex-utilities'; +import MyPetsCard from '../MyPetsCard'; +import Sliding from '../Sliding'; +import './index.scss'; + +const events = ['']; + +const html = ` +
+ +
+`; + +export default function MyPets() { + Component.call(this, { html, events }); + + const $myPetsContainer = this.selected.get('my-pets'); + + const myPetsCard = new MyPetsCard({ + name: 'Kelvo', + race: 'Cachorro', + type: 'Humano', + }); + const div = document.createElement('div'); + myPetsCard.mount(div); + + const sliding = new Sliding({ slides: [div] }); + + sliding.mount($myPetsContainer); +} + +MyPets.prototype = Object.assign(MyPets.prototype, Component.prototype, {}); diff --git a/src/components/MyPets/index.scss b/src/components/MyPets/index.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/MyPetsCard/index.js b/src/components/MyPetsCard/index.js new file mode 100644 index 00000000..a981b5c4 --- /dev/null +++ b/src/components/MyPetsCard/index.js @@ -0,0 +1,59 @@ +import { Component } from 'pet-dex-utilities'; +import PetAvatar from '../PetAvatar'; + +import akita from '../AddPet/assets/akita.svg'; + +import './index.scss'; + +const events = ['']; + +const html = ` +
+
+ +
+ + | + +
+
+
+
+
+`; + +export default function MyPetsCard({ + name = '', + type = '', + race = '', + avatar, +}) { + Component.call(this, { html, events }); + + this.insertText({ name, type, race, avatar }); +} + +MyPetsCard.prototype = Object.assign( + MyPetsCard.prototype, + Component.prototype, + { + insertText({ name, type, race }) { + const $name = this.selected.get('my-pets-card-name'); + const $type = this.selected.get('my-pets-card-type'); + const $race = this.selected.get('my-pets-card-race'); + const $avatar = this.selected.get('my-pets-card-avatar'); + + const petAvatar = new PetAvatar({ + imgAlt: 'breed alt description', + imgSrc: akita, + }); + const $petAvatarDiv = document.createElement('div'); + petAvatar.mount($petAvatarDiv); + + $name.textContent = name; + $type.textContent = type; + $race.textContent = race; + $avatar.appendChild($petAvatarDiv); + }, + }, +); diff --git a/src/components/MyPetsCard/index.scss b/src/components/MyPetsCard/index.scss new file mode 100644 index 00000000..58452087 --- /dev/null +++ b/src/components/MyPetsCard/index.scss @@ -0,0 +1,41 @@ +@use '~styles/colors.scss' as colors; +@use '~styles/fonts.scss' as fonts; + +.my-pets-card { + display: flex; + + justify-content: space-between; + + padding: 1.6rem 2rem; + border: 1px solid colors.$gray100; + + background-color: colors.$primary200; + border-radius: 14px; + + &__text { + height: 100%; + + display: flex; + flex-direction: column; + + gap: 0.4rem; + } + + &__pet-name { + font-family: fonts.$primaryFont; + + color: colors.$white; + font-size: fonts.$md; + font-weight: fonts.$semiBold; + line-height: 30px; + } + + &__pet-info { + font-family: fonts.$fourthFont; + + color: colors.$white; + font-size: fonts.$xs; + font-weight: fonts.$regular; + line-height: 20px; + } +} diff --git a/src/components/PetAvatar/index.js b/src/components/PetAvatar/index.js index e4720921..a717c273 100644 --- a/src/components/PetAvatar/index.js +++ b/src/components/PetAvatar/index.js @@ -11,7 +11,7 @@ const html = ` `; -export default function PetAvatar({ id, title, imgSrc, imgAlt } = {}) { +export default function PetAvatar({ id = '', title, imgSrc, imgAlt } = {}) { Component.call(this, { html, events }); if (id) this.setHref(id); diff --git a/src/stories/MyPets.stories.js b/src/stories/MyPets.stories.js new file mode 100644 index 00000000..d1cba674 --- /dev/null +++ b/src/stories/MyPets.stories.js @@ -0,0 +1,14 @@ +import MyPets from '../components/MyPets'; + +export default { + title: 'Components/MyPets', + render: (args) => { + const dropdown = new MyPets(args); + const $container = document.createElement('div'); + dropdown.mount($container); + + return $container; + }, +}; + +export const Default = {}; From 687351511a872fbe2c64a1ee9c06d5189b30f816 Mon Sep 17 00:00:00 2001 From: juliaam Date: Wed, 2 Oct 2024 19:52:47 -0300 Subject: [PATCH 2/3] feat: code-style --- src/components/MyPets/index.js | 4 +- src/components/MyPetsCard/index.js | 51 ++++++--- src/components/MyPetsCard/index.scss | 103 +++++++++++++++++- src/components/PetAvatar/index.js | 3 + src/components/PetAvatar/index.scss | 4 + .../PetGender/images/femaleIcon.svg | 4 + src/components/PetGender/images/maleIcon.svg | 4 + src/components/PetGender/index.js | 30 +++++ 8 files changed, 181 insertions(+), 22 deletions(-) create mode 100644 src/components/PetGender/images/femaleIcon.svg create mode 100644 src/components/PetGender/images/maleIcon.svg create mode 100644 src/components/PetGender/index.js diff --git a/src/components/MyPets/index.js b/src/components/MyPets/index.js index b5b85465..b0c8b652 100644 --- a/src/components/MyPets/index.js +++ b/src/components/MyPets/index.js @@ -7,7 +7,6 @@ const events = ['']; const html = `
-
`; @@ -18,9 +17,12 @@ export default function MyPets() { const myPetsCard = new MyPetsCard({ name: 'Kelvo', + gender: 'male', race: 'Cachorro', type: 'Humano', + desc: 'Mistura marrom-escura-branca, com sobrancelhas claras e uma mancha em forma de coração na pata esquerda.', }); + const div = document.createElement('div'); myPetsCard.mount(div); diff --git a/src/components/MyPetsCard/index.js b/src/components/MyPetsCard/index.js index a981b5c4..a99b160d 100644 --- a/src/components/MyPetsCard/index.js +++ b/src/components/MyPetsCard/index.js @@ -4,21 +4,26 @@ import PetAvatar from '../PetAvatar'; import akita from '../AddPet/assets/akita.svg'; import './index.scss'; +import PetGender from '../PetGender'; const events = ['']; const html = `
- -
- - | - +
+
+ +
+ + | + +
+

+

-
-
+
`; @@ -26,34 +31,48 @@ export default function MyPetsCard({ name = '', type = '', race = '', + desc = '', + gender = 'male', avatar, }) { Component.call(this, { html, events }); - this.insertText({ name, type, race, avatar }); + this.insertText({ name, type, race, avatar, desc }); + + const $iconContainer = this.selected.get('icon-container'); + + const petGender = new PetGender({ gender }); + petGender.selected + .get('pet-gender-icon') + .classList.add('my-pets-card__pet-gender'); + + petGender.mount($iconContainer); } MyPetsCard.prototype = Object.assign( MyPetsCard.prototype, Component.prototype, { - insertText({ name, type, race }) { - const $name = this.selected.get('my-pets-card-name'); - const $type = this.selected.get('my-pets-card-type'); - const $race = this.selected.get('my-pets-card-race'); - const $avatar = this.selected.get('my-pets-card-avatar'); + insertText({ name, type, race, desc }) { + const $name = this.selected.get('name'); + const $type = this.selected.get('type'); + const $race = this.selected.get('race'); + const $desc = this.selected.get('desc'); + const $avatar = this.selected.get('avatar'); const petAvatar = new PetAvatar({ imgAlt: 'breed alt description', imgSrc: akita, }); - const $petAvatarDiv = document.createElement('div'); - petAvatar.mount($petAvatarDiv); + petAvatar.mount($avatar); + + const $petAvatarImg = petAvatar.selected.get('pet-image'); + $petAvatarImg.classList.add('my-pets-card__pet-avatar-image'); $name.textContent = name; $type.textContent = type; $race.textContent = race; - $avatar.appendChild($petAvatarDiv); + $desc.textContent = desc; }, }, ); diff --git a/src/components/MyPetsCard/index.scss b/src/components/MyPetsCard/index.scss index 58452087..43e41248 100644 --- a/src/components/MyPetsCard/index.scss +++ b/src/components/MyPetsCard/index.scss @@ -1,41 +1,134 @@ @use '~styles/colors.scss' as colors; @use '~styles/fonts.scss' as fonts; +@use '~styles/breakpoints.scss' as breakpoints; .my-pets-card { + max-width: 63.8rem; + height: 100%; + max-height: 13.7rem; + display: flex; justify-content: space-between; - padding: 1.6rem 2rem; + padding: 1.5rem 2rem; + border: 1px solid colors.$gray100; background-color: colors.$primary200; border-radius: 14px; &__text { + width: 50%; height: 100%; display: flex; flex-direction: column; - gap: 0.4rem; + color: colors.$white; + + margin: auto 0; } &__pet-name { font-family: fonts.$primaryFont; - color: colors.$white; font-size: fonts.$md; font-weight: fonts.$semiBold; - line-height: 30px; + line-height: 2; } &__pet-info { font-family: fonts.$fourthFont; - color: colors.$white; font-size: fonts.$xs; font-weight: fonts.$regular; line-height: 20px; } + + &__pet-desc { + display: none; + } + + &__gradient { + height: 100%; + + padding: 2rem; + + background: rgba(255, 255, 255, 0.0392156862745098); + + border-radius: 50%; + } + + &__avatar { + max-width: 50%; + max-height: 50%; + + padding: 2rem; + + background: rgb(62, 152, 244); + + box-shadow: + 0 0 0 2rem rgb(45, 143, 243), + 0 0 0 4rem rgb(36, 138, 243); + + border-radius: 50%; + } + + &__pet-avatar-image { + max-width: 100px; + max-height: 100px; + + background: colors.$white !important; + } + + &__pet-gender { + display: none; + } +} + +@include breakpoints.from667 { + .my-pets-card { + max-height: none; + + padding: 4rem; + + &__pet-name { + font-family: fonts.$primaryFont; + + font-size: fonts.$lg; + font-weight: fonts.$semiBold; + line-height: 34px; + + margin-top: 0.4rem; + } + + &__pet-info { + font-family: fonts.$fourthFont; + + font-size: fonts.$md; + font-weight: fonts.$regular; + line-height: 2; + + margin-top: 0.2rem; + } + + &__pet-desc { + display: block; + + font-family: fonts.$fourthFont; + font-size: 1.6rem; + font-weight: fonts.$regular; + line-height: 24px; + + margin-top: 3.6rem; + } + + &__pet-avatar-image { + max-width: none; + max-height: none; + + background: colors.$white; + } + } } diff --git a/src/components/PetAvatar/index.js b/src/components/PetAvatar/index.js index a717c273..9b42bd11 100644 --- a/src/components/PetAvatar/index.js +++ b/src/components/PetAvatar/index.js @@ -19,6 +19,9 @@ export default function PetAvatar({ id = '', title, imgSrc, imgAlt } = {}) { if (imgSrc) this.setImgSrc(imgSrc); if (imgAlt) this.setImgAlt(imgAlt); + const $title = this.selected.get('pet-title'); + if (!title) $title.classList.add('hidden'); + if (routeLocation().pathname === `/petperfil/${id}`) { this.activate(); } diff --git a/src/components/PetAvatar/index.scss b/src/components/PetAvatar/index.scss index 3b83c8eb..02a63510 100644 --- a/src/components/PetAvatar/index.scss +++ b/src/components/PetAvatar/index.scss @@ -45,6 +45,10 @@ color: colors.$primary200; font-weight: fonts.$semiBold; } + + &--hidden { + display: none; + } } &:hover { diff --git a/src/components/PetGender/images/femaleIcon.svg b/src/components/PetGender/images/femaleIcon.svg new file mode 100644 index 00000000..d8919d0d --- /dev/null +++ b/src/components/PetGender/images/femaleIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/PetGender/images/maleIcon.svg b/src/components/PetGender/images/maleIcon.svg new file mode 100644 index 00000000..c69f3e6e --- /dev/null +++ b/src/components/PetGender/images/maleIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/PetGender/index.js b/src/components/PetGender/index.js new file mode 100644 index 00000000..e859b38f --- /dev/null +++ b/src/components/PetGender/index.js @@ -0,0 +1,30 @@ +import { Component } from 'pet-dex-utilities'; +import female from './images/femaleIcon.svg'; +import male from './images/maleIcon.svg'; + +const events = ['']; + +const html = ` + +`; + +export default function PetGender({ gender = 'male' }) { + Component.call(this, { html, events }); + + if (gender === 'male') this.setGender('male'); + if (gender === 'female') this.setGender('female'); +} + +PetGender.prototype = Object.assign(PetGender.prototype, Component.prototype, { + getGender() {}, + setGender(gender) { + const icon = this.selected.get('pet-gender-icon'); + + if (gender === 'male') { + icon.src = male; + } + if (gender === 'female') { + icon.src = female; + } + }, +}); From 93bc2238a4ce88ede34012aaabc6d7e3d61baa05 Mon Sep 17 00:00:00 2001 From: juliaam Date: Mon, 7 Oct 2024 19:47:24 -0300 Subject: [PATCH 3/3] feat: mypets --- src/components/MyPets/images/arrowLeft.svg | 3 + src/components/MyPets/images/arrowRight.svg | 3 + src/components/MyPets/index.js | 66 +++++++++++++++------ src/components/MyPets/index.scss | 25 ++++++++ src/components/MyPetsCard/index.js | 8 +-- src/components/MyPetsCard/index.scss | 19 +++++- src/stories/MyPets.stories.js | 27 +++++++-- src/stories/MyPetsCard.stories.js | 22 +++++++ 8 files changed, 144 insertions(+), 29 deletions(-) create mode 100644 src/components/MyPets/images/arrowLeft.svg create mode 100644 src/components/MyPets/images/arrowRight.svg create mode 100644 src/stories/MyPetsCard.stories.js diff --git a/src/components/MyPets/images/arrowLeft.svg b/src/components/MyPets/images/arrowLeft.svg new file mode 100644 index 00000000..6f75f00d --- /dev/null +++ b/src/components/MyPets/images/arrowLeft.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/MyPets/images/arrowRight.svg b/src/components/MyPets/images/arrowRight.svg new file mode 100644 index 00000000..5d9507cc --- /dev/null +++ b/src/components/MyPets/images/arrowRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/MyPets/index.js b/src/components/MyPets/index.js index b0c8b652..fbc15749 100644 --- a/src/components/MyPets/index.js +++ b/src/components/MyPets/index.js @@ -1,34 +1,62 @@ import { Component } from 'pet-dex-utilities'; import MyPetsCard from '../MyPetsCard'; import Sliding from '../Sliding'; -import './index.scss'; -const events = ['']; +import arrowLeft from './images/arrowLeft.svg'; +import arrowRight from './images/arrowRight.svg'; + +import './index.scss'; const html = ` -
+
+ +
+
`; -export default function MyPets() { - Component.call(this, { html, events }); - - const $myPetsContainer = this.selected.get('my-pets'); - - const myPetsCard = new MyPetsCard({ - name: 'Kelvo', - gender: 'male', - race: 'Cachorro', - type: 'Humano', - desc: 'Mistura marrom-escura-branca, com sobrancelhas claras e uma mancha em forma de coração na pata esquerda.', +export default function MyPets({ + pets = [ + { + name: '', + gender: '', + race: '', + type: '', + desc: '', + }, + ], +}) { + Component.call(this, { html }); + + const $myPetsContainer = this.selected.get('my-pets-cards-container'); + const $previousButton = this.selected.get('button-previous'); + const $nextButton = this.selected.get('button-next'); + + const cards = []; + pets.forEach((pet) => { + const petCard = new MyPetsCard(pet); + const div = document.createElement('div'); + petCard.mount(div); + cards.push(div); + }); + const sliding = new Sliding({ + slides: cards, + shuffleMode: true, + slideSideSpacing: 80, }); - - const div = document.createElement('div'); - myPetsCard.mount(div); - - const sliding = new Sliding({ slides: [div] }); sliding.mount($myPetsContainer); + + $previousButton.onclick = () => { + sliding.previous(); + }; + $nextButton.onclick = () => { + sliding.next(); + }; } MyPets.prototype = Object.assign(MyPets.prototype, Component.prototype, {}); diff --git a/src/components/MyPets/index.scss b/src/components/MyPets/index.scss index e69de29b..643026fc 100644 --- a/src/components/MyPets/index.scss +++ b/src/components/MyPets/index.scss @@ -0,0 +1,25 @@ +.my-pets { + display: flex; + + gap: 4rem; + + align-items: center; + + &__button { + font: inherit; + color: inherit; + + padding: 0; + + padding: 1.7rem; + border: 0; + + background: none; + + box-shadow: 0 1px 4px 0 rgba(139, 158, 184, 0.2); + outline: inherit; + border-radius: 14px; + + cursor: pointer; + } +} diff --git a/src/components/MyPetsCard/index.js b/src/components/MyPetsCard/index.js index a99b160d..43e70039 100644 --- a/src/components/MyPetsCard/index.js +++ b/src/components/MyPetsCard/index.js @@ -16,7 +16,7 @@ const html = `
- | +
@@ -33,7 +33,7 @@ export default function MyPetsCard({ race = '', desc = '', gender = 'male', - avatar, + avatar = akita, }) { Component.call(this, { html, events }); @@ -53,7 +53,7 @@ MyPetsCard.prototype = Object.assign( MyPetsCard.prototype, Component.prototype, { - insertText({ name, type, race, desc }) { + insertText({ name, type, race, desc, avatar }) { const $name = this.selected.get('name'); const $type = this.selected.get('type'); const $race = this.selected.get('race'); @@ -62,7 +62,7 @@ MyPetsCard.prototype = Object.assign( const petAvatar = new PetAvatar({ imgAlt: 'breed alt description', - imgSrc: akita, + imgSrc: avatar, }); petAvatar.mount($avatar); diff --git a/src/components/MyPetsCard/index.scss b/src/components/MyPetsCard/index.scss index 43e41248..f459e18c 100644 --- a/src/components/MyPetsCard/index.scss +++ b/src/components/MyPetsCard/index.scss @@ -3,9 +3,8 @@ @use '~styles/breakpoints.scss' as breakpoints; .my-pets-card { - max-width: 63.8rem; - height: 100%; max-height: 13.7rem; + overflow: hidden; display: flex; @@ -60,6 +59,18 @@ border-radius: 50%; } + &__divider { + width: 1px; + height: 10px; + + align-self: stretch; + + border: 0; + + background: rgb(116, 180, 255); + margin-inline: 0.7rem; + } + &__avatar { max-width: 50%; max-height: 50%; @@ -130,5 +141,9 @@ background: colors.$white; } + + &__divider { + height: auto; + } } } diff --git a/src/stories/MyPets.stories.js b/src/stories/MyPets.stories.js index d1cba674..bb1abbe4 100644 --- a/src/stories/MyPets.stories.js +++ b/src/stories/MyPets.stories.js @@ -1,14 +1,33 @@ -import MyPets from '../components/MyPets'; +import MyPets from '~src/components/MyPets'; export default { title: 'Components/MyPets', render: (args) => { - const dropdown = new MyPets(args); + const myPets = new MyPets(args); const $container = document.createElement('div'); - dropdown.mount($container); + myPets.mount($container); return $container; }, }; -export const Default = {}; +export const Default = { + args: { + pets: [ + { + name: 'Um super cachorro', + gender: 'male', + race: 'Border Collie', + type: 'Cachorro', + desc: 'Mistura marrom-escura-branca, com sobrancelhas claras e uma mancha em forma de coração na pata esquerda.', + }, + { + name: 'Tobias', + gender: 'male', + race: 'Border Collie', + type: 'Cachorro', + desc: 'Mistura marrom-escura-branca, com sobrancelhas claras e uma mancha em forma de coração na pata esquerda.', + }, + ], + }, +}; diff --git a/src/stories/MyPetsCard.stories.js b/src/stories/MyPetsCard.stories.js new file mode 100644 index 00000000..b898ae16 --- /dev/null +++ b/src/stories/MyPetsCard.stories.js @@ -0,0 +1,22 @@ +import MyPetsCard from '../components/MyPetsCard'; + +export default { + title: 'Components/MyPetsCard', + render: (args) => { + const myPetsCard = new MyPetsCard(args); + const $container = document.createElement('div'); + myPetsCard.mount($container); + + return $container; + }, +}; + +export const Default = { + args: { + name: 'Jake', + gender: 'male', + race: 'Border Collie', + type: 'Cachorro', + desc: 'Mistura marrom-escura-branca, com sobrancelhas claras e uma mancha em forma de coração na pata esquerda.', + }, +};