docs(components): tup-356 bootstrap.form

src/lib/_imports/components/bootstrap.form.css

@@ -1,10 +1,3 @@
-/*
-Form (Bootstrap)
-Override Bootstrap styles. See:
-- [ReactStrap Forms](https://reactstrap.github.io/components/form/)
-- [Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/forms/)
-Styleguide Components.Bootstrap.Form
-*/
 @import url('../settings/border.css');
 
 .form-control {

src/lib/_imports/components/portal/bootstrap/bootstrap.form/README.md

@@ -0,0 +1,17 @@
+To override and extend [Bootstrap Forms](https://getbootstrap.com/docs/4.3/components/forms/).
+
+> **⚠️ WARNING**
+>
+> Core Styles are negligible, because this is used **only on Portal** to extend **its** overrides of Bootstrap.
+
+> **→ TO DO**
+>
+> - [ ] **Either** migrate Portal Bootstrap form styling to this component.
+> - [ ] **Or** return these styles to Portal (and remove form Core Styles).
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

src/lib/_imports/components/portal/bootstrap/bootstrap.form/bootstrap.form.config.yml

@@ -0,0 +1 @@
+status: prototype

src/lib/_imports/components/portal/bootstrap/bootstrap.form/bootstrap.form.hbs

@@ -0,0 +1,22 @@
+{{> @bootstrap.css }}
+<link rel="stylesheet" href="{{path '/components/c-button.css'}}" />
+
+<form>
+  <label for="field-name">Name</label>
+  <input type="text" class="form-control" id="field-name" name="name" placeholder="Jane Doe">
+  <br />
+  <label for="field-username">Username</label>
+  <div class="input-group">
+    <div class="input-group-prepend">
+      <div class="input-group-text">@</div>
+    </div>
+    <input type="text" class="form-control" id="field-username" name="username" placeholder="Username">
+  </div>
+  <br />
+  <label for="field-intro">Tell us about yourself</label>
+  <textarea class="form-control" id="field-intro" name="intro" rows="3"></textarea>
+  <br />
+  <button type="submit" class="c-button c-button--primary">Submit</button>
+</form>
+
+{{> @bootstrap.js }}

src/lib/_imports/components/portal/bootstrap/bootstrap.form/bootstrap.form_docs.css

@@ -0,0 +1,4 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+form {
+    margin: 1em;
+}