Memorable Date: Create dynamic disabled styling

uswds · thisisdano · May 17, 2023 · Oct 24, 2022 · Oct 24, 2022 · Oct 24, 2022
commit 9586aa6be84c61d5d494cd950f5afd701b62a2b9
diff --git a/packages/usa-memorable-date/src/content/usa-memorable-date~disabled.json b/packages/usa-memorable-date/src/content/usa-memorable-date~disabled.json
@@ -0,0 +1,3 @@
+{
+  "disabledClass": true
+}
diff --git a/packages/usa-memorable-date/src/index.js b/packages/usa-memorable-date/src/index.js
@@ -0,0 +1,43 @@
+const behavior = require("../../uswds-core/src/js/utils/behavior");
+const { prefix: PREFIX } = require("../../uswds-core/src/js/config");
+const selectOrMatches = require("../../uswds-core/src/js/utils/select-or-matches");
+
+const MEMORABLE_DATE_CLASS = `.${PREFIX}-memorable-date`;
+const MD_DISABLED = `${PREFIX}-memorable-date--disabled`;
+
+
+const getMemorableDateForms = (el) => {
+  const MemDateEl = el.closest(MEMORABLE_DATE_CLASS);
+  const MemDateForms = []
+
+  const inputs = MemDateEl.getElementsByTagName("input");
+  MemDateForms.push(...inputs)
+
+  const selects = MemDateEl.getElementsByTagName("select");
+  MemDateForms.push(...selects);
+
+  return MemDateForms;
+}
+
+const disable = (el) => {
+  const children = getMemorableDateForms(el);
+
+  children.forEach(childEl => {
+    childEl.setAttribute('disabled', '')
+  })
+}
+
+const memorableDate = behavior(
+  {},
+  {
+    init(root) {
+      selectOrMatches(MEMORABLE_DATE_CLASS, root).forEach((MemDateEl) => {
+        if (MemDateEl.classList.contains(MD_DISABLED)) {
+          disable(MemDateEl);
+        }
+      })
+    }
+  }
+);
+
+module.exports = memorableDate;
diff --git a/packages/usa-memorable-date/src/usa-memorable-date.stories.js b/packages/usa-memorable-date/src/usa-memorable-date.stories.js
@@ -1,9 +1,14 @@
 import Component from "./usa-memorable-date.twig";
 
+import memorableDateDisabled from "./content/usa-memorable-date~disabled.json";
+
 export default {
   title: "Components/Form Inputs/Memorable Date",
 };
 
 const Template = (args) => Component(args);
 
 export const MemorableDate = Template.bind({});
+
+export const MemorableDateDisabled = Template.bind({});
+MemorableDateDisabled.args = memorableDateDisabled;
diff --git a/packages/usa-memorable-date/src/usa-memorable-date.twig b/packages/usa-memorable-date/src/usa-memorable-date.twig
@@ -1,7 +1,7 @@
 <fieldset class="usa-fieldset">
   <legend class="usa-legend">Date of Birth</legend>
   <span class="usa-hint" id="mdHint">For example: January 19 2000</span>
-  <div class="usa-memorable-date">
+  <div class="usa-memorable-date {% if disabledClass == true %} usa-memorable-date--disabled {%- endif %}">
     <div class="usa-form-group usa-form-group--month usa-form-group--select">
       <label class="usa-label" for="date_of_birth_month">Month</label>
       <select class="usa-select" id="date_of_birth_month" name="date_of_birth_month" aria-describedby="mdHint" >

diff --git a/packages/uswds-core/src/js/index.js b/packages/uswds-core/src/js/index.js
@@ -10,6 +10,7 @@ const inPageNavigation = require("../../../usa-in-page-navigation/src/index");
 const inputMask = require("../../../usa-input-mask/src/index");
 const inputPrefixSuffix = require("../../../usa-input-prefix-suffix/src/index");
 const languageSelector = require("../../../usa-language-selector/src/index");
+const memorableDate = require("../../../usa-memorable-date/src/index");
 const modal = require("../../../usa-modal/src/index");
 const navigation = require("../../../usa-header/src/index");
 const password = require("../../../_usa-password/src/index");
@@ -42,4 +43,6 @@ module.exports = {
   timePicker,
   tooltip,
   validator,
+
+  memorableDate,
 };