feat: finish component

devhatt · Jul 2, 2024 · 485dd4c · 485dd4c
1 parent c257965
commit 485dd4c
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 14 deletions.
diff --git a/src/components/SizeSelector/index.js b/src/components/SizeSelector/index.js
@@ -10,7 +10,6 @@ const events = ['event'];
 const html = `
 <div class="container-size-selector" role="radiogroup">
   <ul class="container-size-selector__size-list" data-select="sizelist">
-  
     <li class="container-size-selector__card" role="radio" aria-checked="false" tabindex="0">
       <div class="container-size-selector__card-size">
         <div class="container-size-selector__container-img">
@@ -46,7 +45,6 @@ const html = `
         </div>
       </div>
     </li>
-
   </ul>
 </div>
 `;
@@ -77,6 +75,13 @@ SizeSelector.prototype = Object.assign(
   SizeSelector.prototype,
   Component.prototype,
   {
+    setText(index, title, subtitle) {
+      const h3 = this.$cards[index].querySelector('h3');
+      const span = this.$cards[index].querySelector('span');
+      h3.textContent = title;
+      span.textContent = subtitle;
+    },
+
     handleKeyDown(event, card) {
       let next;
       let prev;

diff --git a/src/components/SizeSelector/index.scss b/src/components/SizeSelector/index.scss
@@ -4,7 +4,7 @@
 
 .container-size-selector {
   width: 100%;
-  max-width: 80rem;
+  max-width: 60rem;
 
   display: flex;
 
@@ -14,14 +14,14 @@
 
     display: flex;
     flex-direction: row;
-    gap: 5rem;
+    gap: 1rem;
 
-    padding: 5rem 30% 5rem 0;
+    padding: 5rem 40% 5rem 0;
 
     transition: padding 0.4s;
 
     &--active-padding {
-      padding: 5rem 30%;
+      padding: 5rem 40%;
     }
   }
 
@@ -35,7 +35,9 @@
     align-items: center;
     justify-content: center;
 
-    padding: 5rem 3rem;
+    margin: 0 0.7rem;
+
+    padding: 1rem 0;
 
     box-sizing: border-box;
 
@@ -81,12 +83,12 @@
 
       .container-size-selector__title {
         color: colors.$primary200;
-        font-size: fonts.$sm;
+        font-size: fonts.$xs;
       }
 
       .container-size-selector__text {
         color: colors.$primary200;
-        font-size: fonts.$xs;
+        font-size: fonts.$xxs;
       }
 
       .container-size-selector__container-img {
@@ -144,7 +146,45 @@
   &__text {
     font-family: fonts.$primaryFont;
     color: colors.$gray600;
-    font-size: fonts.$xs;
+    font-size: fonts.$xxs;
     font-weight: fonts.$regular;
   }
 }
+
+@include breakpoints.from360 {
+  .container-size-selector {
+    &__size-list {
+      gap: 1.5rem;
+    }
+
+    &__card {
+      padding: 1rem 0;
+    }
+  }
+}
+
+@include breakpoints.from667 {
+  .container-size-selector {
+    &__size-list {
+      gap: 5rem;
+    }
+
+    &__card {
+      padding: 4rem 2rem;
+
+      &--active {
+        .container-size-selector__title {
+          font-size: fonts.$sm;
+        }
+
+        .container-size-selector__text {
+          font-size: fonts.$xs;
+        }
+      }
+    }
+
+    &__text {
+      font-size: fonts.$xs;
+    }
+  }
+}
diff --git a/src/layouts/app/pages/NoPetRegirested/index.js b/src/layouts/app/pages/NoPetRegirested/index.js
@@ -1,10 +1,17 @@
 import { Component } from 'pet-dex-utilities';
+import Button from '../../../../components/Button';
+import petUrl from './images/no-pet-regirested-page.png';
 import './index.scss';
-import SizeSelector from '../../../../components/SizeSelector';
 
 const html = `
   <div data-select="container" class="no-pet-regirested-page">
-
+    <div class="no-pet-regirested-page__content">
+      <div class="no-pet-regirested-page__description">
+        <h1 class="no-pet-regirested-page__title">Você ainda não tem nenhum pet cadastrado</h1>
+        <p class="no-pet-regirested-page__hint">Crie o perfil do seu pet e deixe o nosso site com o focinho do seu filhote!</p>
+      </div>
+      <img class="no-pet-regirested-page__image" src="${petUrl}" alt="dog in an smart phone" />
+    </div>
   </div>;
 `;
 
@@ -13,8 +20,16 @@ export default function NoPetRegirested() {
 
   const $container = this.selected.get('container');
 
-  this.sizeselector = new SizeSelector();
-  this.sizeselector.mount($container);
+  this.button = new Button({
+    text: 'Cadastrar pet',
+    isFullWidth: true,
+    isDisabled: false,
+  });
+
+  this.button.selected
+    .get('button')
+    .classList.add('no-pet-regirested-page__button');
+  this.button.mount($container);
 }
 
 NoPetRegirested.prototype = Object.assign(

diff --git a/src/stories/SizeSelector.stories.js b/src/stories/SizeSelector.stories.js
@@ -10,6 +10,9 @@ export default {
       args.selectCard,
     );
     const $container = document.createElement('div');
+    $container.style.width = '100%';
+    $container.style.display = 'flex';
+    $container.style.justifyContent = 'center';
     sizeselector.mount($container);
 
     return $container;

diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
@@ -3,6 +3,7 @@ $secondaryFont: 'Wix Madefor Display', sans-serif;
 $tertiaryFont: 'Helvetica', sans-serif;
 $fourthFont: 'Noto Sans', sans-serif;
 
+$xxs: 1.2rem;
 $xs: 1.4rem;
 $sm: 1.6rem;
 $md: 2rem;