From ea7cc02b53810ff59f7ca8703bb5d73015b2ba8f Mon Sep 17 00:00:00 2001 From: Nicolas Freitas Date: Thu, 9 May 2024 18:33:30 -0300 Subject: [PATCH] =?UTF-8?q?Issue=20189=20-=20Ajuste=20no=20espa=C3=A7ament?= =?UTF-8?q?o=20do=20padding=20e=20cria=C3=A7=C3=A3o=20de=20storie=20do=20c?= =?UTF-8?q?omponente=20(#203)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 (#213) Aproved by me, reclama dps * feat: drawer component (#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 | 6 ++-- src/components/TextInput/index.scss | 49 +++++++++++++++++++---------- src/home/main.js | 0 src/stories/TextInput.stories.js | 25 +++++++++++++++ 4 files changed, 60 insertions(+), 20 deletions(-) delete mode 100644 src/home/main.js create mode 100644 src/stories/TextInput.stories.js diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js index 29d79605..4c0c1076 100644 --- a/src/components/TextInput/index.js +++ b/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; diff --git a/src/components/TextInput/index.scss b/src/components/TextInput/index.scss index d53b0629..96ea70a7 100644 --- a/src/components/TextInput/index.scss +++ b/src/components/TextInput/index.scss @@ -1,59 +1,74 @@ +@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; @@ -61,16 +76,16 @@ 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; } } diff --git a/src/home/main.js b/src/home/main.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/stories/TextInput.stories.js b/src/stories/TextInput.stories.js new file mode 100644 index 00000000..4a2a62c5 --- /dev/null +++ b/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', + }, +};