diff --git a/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/.gitkeep b/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/00-text-input/text-input.config.json b/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/00-text-input/text-input.config.json index e65872f3..472548da 100644 --- a/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/00-text-input/text-input.config.json +++ b/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/00-text-input/text-input.config.json @@ -1,5 +1,6 @@ { + "preview": "@form-input-preview", "context": { "type": "text" } -} \ No newline at end of file +} diff --git a/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/02-textarea/README.md b/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/02-textarea/README.md new file mode 100644 index 00000000..dbe5c71e --- /dev/null +++ b/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/02-textarea/README.md @@ -0,0 +1,5 @@ +## Purpose + +A `textarea` is used to capture multiline text input from the user. + +If the input must be completed in order to process the form successfully then a `required` attribute can be added. This will prevent the form being submitted until the `textarea` has a value. diff --git a/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/02-textarea/textarea.config.json b/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/02-textarea/textarea.config.json new file mode 100644 index 00000000..28c93ee3 --- /dev/null +++ b/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/02-textarea/textarea.config.json @@ -0,0 +1,6 @@ +{ + "preview": "@form-input-preview", + "context": { + "inputText": "Pedantic shitpost comment goes in here" + } +} diff --git a/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/02-textarea/textarea.njk b/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/02-textarea/textarea.njk new file mode 100644 index 00000000..00a8b8fd --- /dev/null +++ b/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/02-textarea/textarea.njk @@ -0,0 +1 @@ + diff --git a/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/00-text-input/_preview.njk b/packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/_form-input-preview.njk similarity index 100% rename from packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/00-text-input/_preview.njk rename to packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/_form-input-preview.njk diff --git a/packages/gravity-ui-web/src/sass/03-elements/_input.scss b/packages/gravity-ui-web/src/sass/03-elements/_input.scss index 8e1d96aa..b852568f 100644 --- a/packages/gravity-ui-web/src/sass/03-elements/_input.scss +++ b/packages/gravity-ui-web/src/sass/03-elements/_input.scss @@ -1,3 +1,12 @@ +label { + display: block; + + > textarea { + width: 100%; + margin-top: $grav-sp-s; + } +} + input:not([type=radio]):not([type=checkbox]) { width: 100%; max-width: 40ch; @@ -6,3 +15,11 @@ input:not([type=radio]):not([type=checkbox]) { border: grav-px2rem(1) solid var(--grav-co-grp-b-neutral); background-color: var(--grav-co-grp-a-neutral); } + +textarea { + display: block; + padding-right: $grav-sp-xs; + padding-left: $grav-sp-xs; + border: grav-px2rem(1) solid var(--grav-co-grp-b-neutral); + background-color: var(--grav-co-grp-a-neutral); +}