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 new file mode 100644 index 00000000..fbc15749 --- /dev/null +++ b/src/components/MyPets/index.js @@ -0,0 +1,62 @@ +import { Component } from 'pet-dex-utilities'; +import MyPetsCard from '../MyPetsCard'; +import Sliding from '../Sliding'; + +import arrowLeft from './images/arrowLeft.svg'; +import arrowRight from './images/arrowRight.svg'; + +import './index.scss'; + +const html = ` +
+ +
+ +
+`; + +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, + }); + + 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 new file mode 100644 index 00000000..643026fc --- /dev/null +++ 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 new file mode 100644 index 00000000..43e70039 --- /dev/null +++ b/src/components/MyPetsCard/index.js @@ -0,0 +1,78 @@ +import { Component } from 'pet-dex-utilities'; +import PetAvatar from '../PetAvatar'; + +import akita from '../AddPet/assets/akita.svg'; + +import './index.scss'; +import PetGender from '../PetGender'; + +const events = ['']; + +const html = ` +
+
+
+
+ +
+ +
+ +
+
+

+

+
+
+
+`; + +export default function MyPetsCard({ + name = '', + type = '', + race = '', + desc = '', + gender = 'male', + avatar = akita, +}) { + Component.call(this, { html, events }); + + 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, desc, avatar }) { + 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: avatar, + }); + 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; + $desc.textContent = desc; + }, + }, +); diff --git a/src/components/MyPetsCard/index.scss b/src/components/MyPetsCard/index.scss new file mode 100644 index 00000000..f459e18c --- /dev/null +++ b/src/components/MyPetsCard/index.scss @@ -0,0 +1,149 @@ +@use '~styles/colors.scss' as colors; +@use '~styles/fonts.scss' as fonts; +@use '~styles/breakpoints.scss' as breakpoints; + +.my-pets-card { + max-height: 13.7rem; + overflow: hidden; + + display: flex; + + justify-content: space-between; + + 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; + + color: colors.$white; + + margin: auto 0; + } + + &__pet-name { + font-family: fonts.$primaryFont; + + font-size: fonts.$md; + font-weight: fonts.$semiBold; + line-height: 2; + } + + &__pet-info { + font-family: fonts.$fourthFont; + + 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%; + } + + &__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%; + + 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; + } + + &__divider { + height: auto; + } + } +} diff --git a/src/components/PetAvatar/index.js b/src/components/PetAvatar/index.js index e4720921..9b42bd11 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); @@ -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; + } + }, +}); diff --git a/src/stories/MyPets.stories.js b/src/stories/MyPets.stories.js new file mode 100644 index 00000000..bb1abbe4 --- /dev/null +++ b/src/stories/MyPets.stories.js @@ -0,0 +1,33 @@ +import MyPets from '~src/components/MyPets'; + +export default { + title: 'Components/MyPets', + render: (args) => { + const myPets = new MyPets(args); + const $container = document.createElement('div'); + myPets.mount($container); + + return $container; + }, +}; + +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.', + }, +};