Issue 189 - Ajuste no espaçamento do padding e criação de storie do c…

…omponente (devhatt#203)

* fix: adjusting input text position and padding

* fix: changing homepage view back to default

* feat: creating text input component

* fix: adjusting input text colors to match with colors archive

* fix: adjusting text input padding and position

* fix: changing colors style to match with reference archive

* feat: create text input storie

* fix: adjusting padding and font to match with the reviews

* fix: adding the correct color to the input text

* fix: adjusting prefix and suffix common props

* fix: removing test comment

* feat: code-style (devhatt#213)

Aproved by me, reclama dps

* feat: drawer component (devhatt#191)

* feat: drawer component

* fix: transition logic

* fix: mobile drawer

* chore: commitlint/cz-commitlint

* feat: swipe animation for mobile

* refactor: rip lil-x and lil-line, refactor improve code length

* fix: minor changes

* refactor: now emits change events

* fix: if the screen is bigger than drawer component

* fix: minor changes

* fix: color drawer__title

* fix: color name change

* feat: transition drawer

* fix: make compatible with new design

* fix: content will have scroll bar if necessary

* fix: prettier

* fix: revert changes on prettierrc

* fix: resolve pnpm-lock conflicts

* fix: slint error in scss archive

---------

Co-authored-by: juliaM <35346206+juliaam@users.noreply.github.com>
Co-authored-by: Rafael Lima <132157467+RafaelLimaC@users.noreply.github.com>

src/components/TextInput/index.js

@@ -16,11 +16,11 @@ const html = `
 `;
 
 export default function TextInput({
-  placeholder,
+  placeholder = '',
   assetUrl,
   assetPosition,
-  variation,
-}) {
+  variation = 'standard',
+} = {}) {
   Component.call(this, { html, events });
   const input = this.selected.get('input-text');
   input.disabled = false;

src/components/TextInput/index.scss

@@ -1,76 +1,91 @@
+@use '~styles/colors' as colors;
+@use '~styles/fonts' as fonts;
+
 .input-text-container {
   position: relative;
 
   &__input {
     width: 100%;
 
-    font-size: 1.5rem;
+    color: colors.$gray600;
+
+    font-size: fonts.$sm;
+    font-weight: fonts.$bold;
+
+    box-sizing: border-box;
 
     background-repeat: no-repeat;
     background-size: auto 60%;
     filter: opacity(0.85);
 
+    &::placeholder {
+      font-weight: fonts.$regular;
+    }
+
     &:disabled {
       filter: opacity(0.55);
     }
 
     &.standard {
-      padding: 0.65rem 1rem;
-      border: 1px solid rgb(163, 163, 163);
+      padding: 1.8rem 1.6rem;
+      border: 1px solid colors.$gray200;
 
-      border-radius: 8px;
+      border-radius: 14px;
 
       transition: border-color 0.3s ease-in-out;
 
-      &.prefix {
-        padding: 0.8rem 1rem 0.8rem 3.5rem;
+      &.prefix,
+      &.suffix {
+        padding: 1.8rem 1.6rem;
+
+        border-radius: 14px;
+      }
 
+      &.prefix {
         background-position: 0.8rem center;
       }
 
       &.suffix {
-        padding: 0.8rem 3.5rem 0.8rem 1rem;
-
         background-position: calc(100% - 0.8rem) center;
       }
 
       &:focus {
-        border-color: rgb(0, 123, 255);
+        border-color: colors.$primary200;
 
         filter: opacity(1);
-        outline-color: rgb(0, 123, 255);
+        outline-color: colors.$primary200;
       }
 
       &.input-error {
-        border-color: rgb(220, 53, 69);
+        border-color: colors.$error100;
 
-        background-color: rgba(238, 114, 126, 0.458);
+        background-color: colors.$error100;
         filter: opacity(0.75);
-        outline-color: rgb(220, 53, 69);
+        outline-color: colors.$error100;
       }
     }
 
     &.outlined {
       padding: 0.5rem 0.35rem;
 
-      border-bottom: 1px solid rgb(184, 184, 184);
+      border-bottom: 1px solid colors.$gray200;
       border-color: transparent;
 
       outline: none;
 
       transition: border-color 0.3s ease-in-out;
 
       &:focus {
-        border-bottom-color: rgb(0, 123, 255);
+        border-bottom-color: colors.$primary200;
       }
 
       &.input-error {
-        border-bottom-color: rgb(220, 53, 69);
+        border-bottom-color: colors.$error100;
 
         filter: opacity(0.65);
 
         &::placeholder {
-          color: rgb(220, 53, 69);
+          color: colors.$error100;
         }
       }
 

src/stories/TextInput.stories.js

@@ -0,0 +1,25 @@
+import TextInput from '../components/TextInput/index';
+
+export default {
+  title: 'components/TextInput',
+
+  render: (args) => {
+    const input = new TextInput(args);
+    const $container = document.createElement('div');
+    input.mount($container);
+
+    return $container;
+  },
+  argTypes: {
+    placeholder: { control: 'text', default: '' },
+    assetUrl: {},
+    assetPosition: {},
+    variation: {},
+  },
+};
+
+export const Default = {
+  args: {
+    placeholder: 'email@petdex.com.br',
+  },
+};