feat: code-style

Author: juliaam

src/components/MyPets/index.js

@@ -7,7 +7,6 @@ const events = [''];
 
 const html = `
   <div class="my-pets" data-select="my-pets">
-  
   </div>
 `;
 
@@ -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);
 

src/components/MyPetsCard/index.js

@@ -4,56 +4,75 @@ import PetAvatar from '../PetAvatar';
 import akita from '../AddPet/assets/akita.svg';
 
 import './index.scss';
+import PetGender from '../PetGender';
 
 const events = [''];
 
 const html = `
   <div class="my-pets-card" data-select="my-pets-card">
     <div class="my-pets-card__text">
-      <span class="my-pets-card__pet-name" data-select="my-pets-card-name"></span>
-      <div class="my-pets-card__pet-info"/>
-        <span data-select="my-pets-card-race"></span>
-        |
-        <span data-select="my-pets-card-type"></span>
+      <div data-select="icon-container"></div>
+      <div>
+        <span class="my-pets-card__pet-name" data-select="name"></span>
+        <div class="my-pets-card__pet-info"/>
+          <span data-select="race"></span>
+          |
+          <span data-select="type"></span>
+        </div>
       </div>
+      <p class="my-pets-card__pet-desc" data-select="desc">
+      </p>
     </div>
-    <div data-select="my-pets-card-avatar">
-    </div>
+    <div class="my-pets-card__avatar" data-select="avatar"/>
   </div>
 `;
 
 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;
     },
   },
 );

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

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();
   }

src/components/PetAvatar/index.scss

@@ -45,6 +45,10 @@
       color: colors.$primary200;
       font-weight: fonts.$semiBold;
     }
+
+    &--hidden {
+      display: none;
+    }
   }
 
   &:hover {

src/components/PetGender/images/femaleIcon.svg

@@ -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 = `
+    <img class="pet-gender__img" data-select="pet-gender-icon"/>
+`;
+
+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;
+    }
+  },
+});