uswds · thisisdano · Mar 10, 2021 · Jan 28, 2021 · Jan 29, 2021 · Jan 29, 2021
diff --git a/spec/unit/input-prefix/input-prefix.spec.js b/spec/unit/input-prefix/input-prefix.spec.js
@@ -0,0 +1,43 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+const behavior = require("../../../src/js/components/input-prefix-suffix");
+
+const TEMPLATE = fs.readFileSync(path.join(__dirname, "/template.html"));
+
+describe("input prefix", () => {
+  const { body } = document;
+
+  let input;
+  let container;
+  let prefix;
+
+  beforeEach(() => {
+    body.innerHTML = TEMPLATE;
+    input = body.querySelector(".usa-input");
+    container = body.querySelector(".usa-input-group");
+    prefix = body.querySelector(".usa-input-prefix");
+    behavior.on(body);
+  });
+
+  afterEach(() => {
+    body.innerHTML = "";
+    behavior.off(body);
+  });
+
+  it('it should add "is-focused" class name to container when the prefix is clicked', () => {
+    prefix.click();
+    assert.strictEqual(container.classList.contains("is-focused"), true);
+  });
+
+  it('it should add "is-focused" class name to container when input recieves focus()', () => {
+    input.focus();
+    assert.strictEqual(container.classList.contains("is-focused"), true);
+  });
+
+  it('it should remove "is-focused" class name from container on input blur() event', () => {
+    input.focus();
+    input.blur();
+    assert.strictEqual(container.classList.contains("is-focused"), false);
+  });
+});
diff --git a/spec/unit/input-prefix/template.html b/spec/unit/input-prefix/template.html
@@ -0,0 +1,9 @@
+<label class="usa-label" for="input-prefix">Annual income</label>
+<div class="usa-input-group">
+  <div class="usa-input-prefix" aria-hidden="true">
+    <svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/img/sprite.svg#attach_money"></use>
+    </svg>
+  </div>
+  <input type="text" id="input-prefix" class="usa-input">
+</div>
diff --git a/src/components/icons/icons--sizes.config.yml → src/components/icon/icon--sizes.config.yml b/src/components/icons/icons--sizes.config.yml → src/components/icon/icon--sizes.config.yml
diff --git a/src/components/icons/icons--sizes.njk → src/components/icon/icon--sizes.njk b/src/components/icons/icons--sizes.njk → src/components/icon/icon--sizes.njk
diff --git a/src/components/icons/icons.config.yml → src/components/icon/icon.config.yml b/src/components/icons/icons.config.yml → src/components/icon/icon.config.yml
@@ -1,4 +1,4 @@
-label: Icons
+label: Icon
 status: ready
 preview: "@uswds-content"
 

diff --git a/src/components/icons/icons.njk → src/components/icon/icon.njk b/src/components/icons/icons.njk → src/components/icon/icon.njk
diff --git a/src/components/input-prefix-suffix/input-prefix-suffix.config.yml b/src/components/input-prefix-suffix/input-prefix-suffix.config.yml
@@ -0,0 +1 @@
+preview: "@uswds-form"
diff --git a/src/components/input-prefix-suffix/input-prefix-suffix.njk b/src/components/input-prefix-suffix/input-prefix-suffix.njk
@@ -0,0 +1,18 @@
+
+<label class="usa-label" for="example-input-prefix">Credit card number</label>
+<div class="usa-input-group">
+  <div class="usa-input-prefix" aria-hidden="true">
+    <svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/img/sprite.svg#credit_card"></use>
+    </svg>
+  </div>
+  <input type="text" id="example-input-prefix" class="usa-input" pattern="[0-9]*" inputmode="numeric">
+</div>
+
+<label class="usa-label" for="example-input-suffix">Weight, in pounds</label>
+<div class="usa-input-group width-10">
+  <input type="text" id="example-input-suffix" class="usa-input" pattern="[0-9]*" inputmode="numeric">
+  <div class="usa-input-suffix" aria-hidden="true">
+    lbs.
+  </div>
+</div>
diff --git a/src/js/components/index.js b/src/js/components/index.js
@@ -4,6 +4,7 @@ const characterCount = require("./character-count");
 const comboBox = require("./combo-box");
 const fileInput = require("./file-input");
 const footer = require("./footer");
+const inputPrefixSuffix = require("./input-prefix-suffix");
 const navigation = require("./navigation");
 const password = require("./password");
 const search = require("./search");
@@ -23,6 +24,7 @@ module.exports = {
   dateRangePicker,
   fileInput,
   footer,
+  inputPrefixSuffix,
   navigation,
   password,
   search,

diff --git a/src/js/components/input-prefix-suffix.js b/src/js/components/input-prefix-suffix.js
@@ -0,0 +1,41 @@
+const behavior = require("../utils/behavior");
+const select = require("../utils/select");
+const { prefix: PREFIX } = require("../config");
+const { CLICK } = require("../events");
+
+const CONTAINER = `.${PREFIX}-input-group`;
+const INPUT = `${CONTAINER} .${PREFIX}-input`;
+const DECORATION = `${CONTAINER} .${PREFIX}-input-prefix, ${CONTAINER} .${PREFIX}-input-suffix`;
+const FOCUS_CLASS = "is-focused";
+
+function setFocus(el) {
+  el.closest(CONTAINER).querySelector(`.${PREFIX}-input`).focus();
+}
+
+function handleFocus() {
+  this.closest(CONTAINER).classList.add(FOCUS_CLASS);
+}
+
+function handleBlur() {
+  this.closest(CONTAINER).classList.remove(FOCUS_CLASS);
+}
+
+const inputPrefixSuffix = behavior(
+  {
+    [CLICK]: {
+      [DECORATION]() {
+        setFocus(this);
+      },
+    },
+  },
+  {
+    init(root) {
+      select(INPUT, root).forEach((inputEl) => {
+        inputEl.addEventListener("focus", handleFocus, false);
+        inputEl.addEventListener("blur", handleBlur, false);
+      });
+    },
+  }
+);
+
+module.exports = inputPrefixSuffix;
diff --git a/src/stylesheets/elements/form-controls/_text-input.scss b/src/stylesheets/elements/form-controls/_text-input.scss
@@ -11,3 +11,51 @@
 .usa-input--error {
   @include u-border($theme-input-state-border-width, "error-dark");
 }
+
+// Input prefixes / suffixes
+
+.usa-input-group {
+  @extend %block-input-general;
+  @extend %block-input-styles;
+  align-items: center;
+  display: flex;
+  padding: 0;
+
+  &.is-focused {
+    @include focus-outline();
+  }
+
+  input {
+    border: 0;
+    height: 100%;
+    margin-top: 0;
+    min-width: 0;
+    width: 100%;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.usa-input-prefix,
+.usa-input-suffix {
+  color: color("base");
+  line-height: 0;
+  padding: 0 units(1);
+  user-select: none;
+  white-space: nowrap;
+
+  .usa-icon {
+    height: units(3);
+    width: units(3);
+  }
+}
+
+.usa-input-prefix {
+  padding-right: 0;
+}
+
+.usa-input-suffix {
+  padding-left: 0;
+}