Issue 97 (#123)

* feat: adiciona tela de inserção de peso do pet * style: mudanças do lint nos estilos * style: ajustes minimos nos estilos e nomeclaturas * style: ajuste do lint * refactor: ajustes no input * feat: ajustes de nomenclatura e envio de informações de peso * feat: ajustes finais na tela de peso do pet * refactor: retira tamanhos fixos * fix: ajustes nos compomentes de checkbox, radio e textInput * style: ajustes no mobile da pagina de peso * style: ajusta estilos para tablets e telas maiores * refactor: altera nome do evento de input para change * refactor: refatora código da página de peso para ficar mais legível e modular * style: retira padding do radio input * feat: adiciona página de peso do pet no storybook * test: adiciona primeiros testes da página de peso do pet * style: retira propriedades inefetivas e espaçamento desnecessário * refactor: ajusta nome de método e altera insonsistências * style: retira comentário * style: retira propriedade overflow
devhatt · May 11, 2024 · acbb151 · acbb151
1 parent 2388259
commit acbb151
Show file tree

Hide file tree

Showing 12 changed files with 651 additions and 319 deletions.
diff --git a/src/components/Checkbox/index.scss b/src/components/Checkbox/index.scss
@@ -1,48 +1,43 @@
-@use '~styles/colors.scss' as colors;
-@use '~styles/fonts.scss' as fonts;
-
-.checkbox-container {
-  display: inline-flex;
-
-  align-items: center;
-
-  margin: 1rem;
-
-  cursor: pointer;
-
-  &__input {
-    width: 2.2rem;
-    height: 2.2rem;
-
-    margin: 0.8rem;
-    border: 0.2rem solid colors.$gray500;
-
-    border-radius: 0.5rem;
-
-    cursor: pointer;
-    appearance: none;
-
-    &:checked {
-      border-color: colors.$primary500;
-
-      background: colors.$primary500 url('./images/check.svg') no-repeat center
-        center/70%;
-    }
-
-    &:disabled {
-      border-color: colors.$gray500;
-
-      cursor: not-allowed;
-    }
-  }
-
-  &__checkboxText {
-    font-family: fonts.$primaryFont;
-    color: colors.$gray800;
-    text-align: left;
-    font-size: fonts.$xs;
-    font-weight: fonts.$semiBold;
-    line-height: 2;
-    letter-spacing: 0;
-  }
-}
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+
+.checkbox-container {
+  display: inline-flex;
+
+  align-items: center;
+
+  cursor: pointer;
+
+  &__input {
+    width: 2.2rem;
+    height: 2.2rem;
+
+    margin: 0.8rem;
+    border: 0.2rem solid colors.$gray500;
+
+    border-radius: 0.5rem;
+
+    cursor: pointer;
+    appearance: none;
+
+    &:checked {
+      border-color: colors.$primary500;
+
+      background: colors.$primary500 url('./images/check.svg') no-repeat center
+        center/70%;
+    }
+
+    &:disabled {
+      border-color: colors.$gray500;
+
+      cursor: not-allowed;
+    }
+  }
+
+  &__checkboxText {
+    font-family: fonts.$primaryFont;
+    color: colors.$gray800;
+    font-size: fonts.$xs;
+    font-weight: fonts.$semiBold;
+  }
+}
diff --git a/src/components/RadioButton/index.js b/src/components/RadioButton/index.js
@@ -10,7 +10,7 @@ const events = [
 ];
 
 const html = `
-<label class="radio-container">
+<label class="radio-container" data-select="radio-container">
     <input data-select="radio-button" type="radio" class="radio-container__input" name="" value="">
     <span data-select="radio-button-text" class="radio-container__dot"></span>
 </label>

diff --git a/src/components/RadioButton/index.scss b/src/components/RadioButton/index.scss
@@ -1,67 +1,61 @@
-@use '~styles/colors' as colors;
-@use '~styles/fonts.scss' as fonts;
-
-.radio-container {
-  display: inline-flex;
-
-  align-items: center;
-
-  margin: 1rem;
-  padding: 1rem 8rem 1rem 1rem;
-  border: 0.15rem solid colors.$gray600;
-
-  border-radius: 2rem;
-
-  transition: border-color 0.3s;
-
-  cursor: pointer;
-
-  &:focus-within {
-    border-color: colors.$primary200;
-
-    .radio-dot {
-      color: colors.$primary200;
-    }
-  }
-
-  &__input {
-    width: 2.2rem;
-    height: 2.2rem;
-
-    margin: 0.8rem;
-    border: 0.15rem solid colors.$gray600;
-    border-color: colors.$primary200;
-
-    border-radius: 50%;
-
-    cursor: pointer;
-    appearance: none;
-    appearance: none;
-
-    &:checked {
-      border-color: colors.$primary200;
-
-      background: url('./images/ellipse.svg') no-repeat center center/60%;
-    }
-
-    &:disabled {
-      border-color: colors.$gray200;
-
-      cursor: not-allowed;
-
-      + .checkmark {
-        color: colors.$gray200;
-      }
-    }
-  }
-
-  &__dot {
-    font-family: fonts.$primaryFont;
-    color: colors.$gray600;
-    text-align: left;
-    font-size: fonts.$xs;
-    font-weight: fonts.$medium;
-    line-height: 2;
-    letter-spacing: 0;
-  }
-}
+@use '~styles/colors' as colors;
+@use '~styles/fonts.scss' as fonts;
+
+.radio-container {
+  display: inline-flex;
+
+  align-items: center;
+
+  padding: 1rem 8rem 1rem 1rem;
+  border: 0.15rem solid colors.$gray600;
+
+  border-radius: 2rem;
+
+  transition: border-color 0.3s;
+
+  cursor: pointer;
+
+  &:focus-within {
+    border-color: colors.$primary200;
+
+    .radio-dot {
+      color: colors.$primary200;
+    }
+  }
+
+  &__input {
+    width: 2.2rem;
+    height: 2.2rem;
+
+    margin: 0.8rem;
+    border: 0.15rem solid colors.$gray600;
+    border-color: colors.$primary200;
+
+    border-radius: 50%;
+
+    cursor: pointer;
+    appearance: none;
+
+    &:checked {
+      border-color: colors.$primary200;
+
+      background: url('./images/ellipse.svg') no-repeat center center/60%;
+    }
+
+    &:disabled {
+      border-color: colors.$gray200;
+
+      cursor: not-allowed;
+
+      + .checkmark {
+        color: colors.$gray200;
+      }
+    }
+  }
+
+  &__dot {
+    font-family: fonts.$primaryFont;
+    color: colors.$gray600;
+    font-size: fonts.$xs;
+  }
+}