From 67a2a640db74c82267302571ad410c6642379fa9 Mon Sep 17 00:00:00 2001
From: amyleadem <amy.leadem@bixal.com>
Date: Thu, 21 Mar 2024 10:01:24 -0700
Subject: [PATCH] Add form 4 with input placeholder text

---
 .../memorable-date--text-placeholder.html     | 68 +++++++++++++++++++
 src/pages/zebra-4/index.md                    |  8 +++
 2 files changed, 76 insertions(+)
 create mode 100644 src/_includes/zebra/memorable-date--text-placeholder.html
 create mode 100644 src/pages/zebra-4/index.md

diff --git a/src/_includes/zebra/memorable-date--text-placeholder.html b/src/_includes/zebra/memorable-date--text-placeholder.html
new file mode 100644
index 00000000..74773a76
--- /dev/null
+++ b/src/_includes/zebra/memorable-date--text-placeholder.html
@@ -0,0 +1,68 @@
+<!--
+  Variations from default:
+  - Changed select to text input
+
+  Not a standard pattern - should not be reused
+-->
+<style>
+  .usa-memorable-date .usa-form-group {
+    margin-top:.25rem;
+  }
+</style>
+
+<!--start memorable date-->
+<fieldset class="usa-fieldset">
+  <legend class="usa-legend">
+    What is your date of birth?
+    <abbr title="required" class="usa-hint usa-hint--required">*</abbr>
+  </legend>
+   <div class="usa-memorable-date">
+    <div class="usa-form-group display-flex">
+      <div class="usa-form-group usa-form-group--month">
+        <label class="usa-label" for="date_of_birth_month">Month</label>
+        <input
+          class="usa-input"
+          id="date_of_birth_month"
+          name="date_of_birth_month"
+          minlength="2"
+          maxlength="2"
+          pattern="[0-9]*"
+          inputmode="numeric"
+          value=""
+          required
+          placeholder="MM"
+        />
+      </div>
+    <div class="usa-form-group usa-form-group--day">
+      <label class="usa-label" for="date_of_birth_day">Day</label>
+      <input
+        class="usa-input"
+        id="date_of_birth_day"
+        name="date_of_birth_day"
+        minlength="2"
+        maxlength="2"
+        pattern="[0-9]*"
+        inputmode="numeric"
+        value=""
+        required
+        placeholder="DD"
+      />
+    </div>
+    <div class="usa-form-group usa-form-group--year">
+      <label class="usa-label" for="date_of_birth_year">Year</label>
+      <input
+        class="usa-input"
+        id="date_of_birth_year"
+        name="date_of_birth_year"
+        minlength="4"
+        maxlength="4"
+        pattern="[0-9]*"
+        inputmode="numeric"
+        value=""
+        required
+        placeholder="YYYY"
+      />
+    </div>
+  </div>
+</fieldset>
+<!--end memorable date-->
\ No newline at end of file
diff --git a/src/pages/zebra-4/index.md b/src/pages/zebra-4/index.md
new file mode 100644
index 00000000..0083ad63
--- /dev/null
+++ b/src/pages/zebra-4/index.md
@@ -0,0 +1,8 @@
+---
+layout: zebra
+alert_type: emergency
+alert_before_banner: true
+form: true
+---
+
+{% include "zebra/memorable-date--text-placeholder.html" %}