feat: mypets

Author: juliaam

src/components/MyPets/images/arrowLeft.svg

@@ -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 = `
-  <div class="my-pets" data-select="my-pets">
+  <div class="my-pets">
+   <button class="my-pets__button" data-select="button-previous">
+    <img src=${arrowLeft}></img>
+   </button>
+   <div class="my-pets__cards-container" data-select="my-pets-cards-container"></div>
+    <button class="my-pets__button" data-select="button-next">
+      <img src=${arrowRight}></img>
+   </button>
   </div>
 `;
 
-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, {});

src/components/MyPets/images/arrowRight.svg

@@ -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;
+  }
+}

src/components/MyPets/index.js

@@ -16,7 +16,7 @@ const html = `
         <span class="my-pets-card__pet-name" data-select="name"></span>
         <div class="my-pets-card__pet-info"/>
           <span data-select="race"></span>
-          |
+          <hr class="my-pets-card__divider"/>
           <span data-select="type"></span>
         </div>
       </div>
@@ -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);
 

src/components/MyPets/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;
+    }
   }
 }

src/components/MyPetsCard/index.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.',
+      },
+    ],
+  },
+};

src/components/MyPetsCard/index.scss

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