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.', + }, +};