feat(textarea): adds textarea styles

affects: @buildit/gravity-ui-nunjucks, @buildit/gravity-ui-web

ISSUES CLOSED: #404

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"
   }
-}
+}

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.

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"
+  }
+}

packages/gravity-ui-nunjucks/src/components/01-atoms/07-forms/02-textarea/textarea.njk

@@ -0,0 +1 @@
+<textarea>{{ inputText }}</textarea>

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);
+}