feat: create pet avatar component

src/components/PetAvatar/index.js

@@ -0,0 +1,50 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = ['active', 'deactive'];
+
+const html = `
+  <a class="pet-container" data-select="pet-container" href="/petprofile/">
+    <img class="pet-container__img" data-select="pet-image" src="" alt=""/>
+    <p class="pet-container__title" data-select="pet-title"></p>
+  </a>
+`;
+
+// estudar frontend route / route parameter
+
+export default function PetAvatar({ id, title, imgSrc, imgAlt }) {
+  Component.call(this, { html, events });
+
+  this.selected.get('pet-container').href += id;
+
+  if (title) this.setTitle(title);
+  if (imgSrc) this.setImgSrc(imgSrc);
+  if (imgAlt) this.setImgAlt(imgAlt);
+}
+
+PetAvatar.prototype = Object.assign(PetAvatar.prototype, Component.prototype, {
+  setTitle(text) {
+    this.selected.get('pet-title').textContent = text;
+  },
+  setImgSrc(src) {
+    this.selected.get('pet-image').src = src;
+  },
+  setImgAlt(alt) {
+    this.selected.get('pet-image').alt = alt;
+  },
+  isActive() {},
+  activate() {
+    const image = this.selected.get('pet-image');
+    const title = this.selected.get('pet-title');
+    image.classList.add('pet-container__img--active');
+    title.classList.add('pet-container__title--active');
+    this.emit('active');
+  },
+  deactivate() {
+    const image = this.selected.get('pet-image');
+    const title = this.selected.get('pet-title');
+    image.classList.remove('pet-container__img--active');
+    title.classList.remove('pet-container__title--active');
+    this.emit('deactive');
+  },
+});

src/components/PetAvatar/index.scss

@@ -0,0 +1,45 @@
+@use '~styles/colors' as colors;
+@use '~styles/fonts' as fonts;
+
+.pet-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+
+  align-items: center;
+  aspect-ratio: 1/1;
+
+  &__img {
+    min-width: 6rem;
+    height: 100%;
+    min-height: 6rem;
+
+    outline: 0.15rem solid colors.$gray500;
+
+    border-radius: 50%;
+    object-fit: cover;
+    aspect-ratio: 1/1;
+
+    &--active {
+      outline: 0.3rem solid colors.$primary200;
+    }
+  }
+
+  &__title {
+    height: 100%;
+    min-height: 2.2rem;
+    max-height: 2.2rem;
+    overflow: hidden;
+
+    font-family: fonts.$secondaryFont;
+
+    color: colors.$gray200;
+    text-align: center;
+    font-weight: fonts.$regular;
+
+    &--active {
+      color: colors.$primary200;
+      font-weight: fonts.$semiBold;
+    }
+  }
+}

src/stories/PetAvatar.stories.js

@@ -0,0 +1,27 @@
+import PetAvatar from '../components/PetAvatar';
+
+import akita from '../home/components/PetRegisterPage/images/akita.svg';
+
+export default {
+  title: 'Components/PetAvatar',
+  render: (args) => {
+    const $container = document.createElement('div');
+    const petAvatar = new PetAvatar(args);
+    petAvatar.mount($container);
+
+    return $container;
+  },
+  argTypes: {
+    title: { control: 'text', description: 'Pet name' },
+    imgSrc: { control: 'text', description: 'url source for a image pet' },
+    imgAlt: { control: 'text', description: 'Pet name alt description' },
+  },
+};
+
+export const Default = {
+  args: {
+    title: 'Carlos',
+    imgSrc: akita,
+    imgAlt: 'breed alt description',
+  },
+};