Ticket #1693: Implement "check availability" section on get.gov/domains/choosing/

_includes/content-blocks/domain-availability-form.html

@@ -0,0 +1,34 @@
+<form class="usa-search usa-search--domain-choosing" role="search">
+    <div class="grid-row">
+        <div class="grid-col grid-col__input-grid">
+            <label class="usa-sr-only" for="domain-input-choosing">Search</label>
+            <input
+                id="domain-input-choosing" 
+                class="usa-input" 
+                type="search" 
+                aria-label="Check Domain Name input"
+                title="Check Domain input"
+            />
+            <span class="padding-left-05">.gov</span>
+        </div>
+    </div>
+    <div id="grid-row--domain_message-choosing" class="grid-row margin-top-2 display-none">
+        <div class="grid-col">
+            <div class="usa-search--domain_message-choosing" id="usa-search--domain_message"></div>
+        </div>
+    </div>
+    <div class="grid-row margin-top-2">
+        <div class="grid-col">
+            <button 
+            class="usa-button" 
+            type="submit"
+            onclick="checkDomainAvailability('domain-input-choosing', true)"
+            onsubmit="return false"
+            aria-label="Check availability of Domain Name"
+            title="Check Domain Availability"
+            >
+                Check availability
+            </button>
+        </div>
+    </div>
+</form>

_includes/content-blocks/general_domain_requirements.md

@@ -1,6 +1,6 @@
 Your domain name must:
 
-- Be available [(Check availability)](../../#domain-input)
+- Be available
 - Relate to your organization’s name, location, and/or services
 - Be clear to the general public. Your domain name must not be easily confused with other organizations.
 

_includes/domain-search.html

@@ -3,65 +3,6 @@
 is available as a .gov domain.
 {% endcomment %}
 
-<script>
-    function checkDomainAvailability() {
-        // Cancel the default action
-        event.preventDefault();
-
-        const baseUrl = "https://manage.get.gov/api/v1/available/?domain="
-
-        var requested_domain = document.getElementById('domain-input').value
-
-        if (requested_domain === null || requested_domain.length === 0) {
-            render_result(``)
-        }
-
-        var searchEndpoint = new URL("", baseUrl + requested_domain);
-
-        fetch(searchEndpoint).then(function(reply) {
-            return reply.json()
-        }).then(function(response) {
-            var requested_domain_display_string = requested_domain
-                if (!requested_domain_display_string.endsWith('.gov')) {
-                    requested_domain_display_string += '.gov'
-                }
-            if (response.available) {
-                render_result(`
-                <div class="usa-alert usa-alert--success usa-alert--slim" role="alert">
-                    <div class="usa-alert__body">
-                        <p class="usa-alert__text">
-                            That domain is available!
-                            <a class="usa-link" href="{{ '/domains/before/' | url }}">
-                                Read about next steps to take before requesting your .gov domain.
-                            </a>
-                        </p>
-                    </div>
-                </div>
-                `
-                )
-            } else {
-                render_result(`
-                <div class="usa-alert usa-alert--error usa-alert--slim" role="alert">
-                    <div class="usa-alert__body">
-                        <p class="usa-alert__text">
-                            ${response.message} 
-                        </p>
-                    </div>
-                </div>
-                `
-                )
-            }
-        }).catch(function(err) {
-            console.log('parsing failed', err);
-        })
-    }
-
-    function render_result(content, append = true){
-      document.getElementById('usa-search--domain_message').innerHTML = (append == true) ? content : `<div></div>`;
-    }
-
-</script>
-
 <section class="usa-section domain-section padding-bottom-5 bg-accent-cool-lighter">
     <div class="grid-container">
         <div class="domain-section__image">

_includes/layouts/info-page.html

@@ -7,16 +7,16 @@
 {% endcomment %}
 
 <div class="usa-layout-docs" >
-  <div class="grid-container margin-top-5">
-    <div class="grid-row grid-gap">
-      {% if sidenav == true %}
-        {% assign collection = collections[tags] %}
-        {% include "sidenav.html" with collection %}
-      {% endif %}
-      <main id="main-content"class="usa-layout-docs__main desktop:grid-col-9 usa-prose margin-top-neg-1">
-        <h1>{{- title -}} </h1>
-        {{ content }}
-      </main>
+    <div class="grid-container margin-top-5">
+        <div class="grid-row grid-gap">
+            {% if sidenav == true %}
+                {% assign collection = collections[tags] %}
+                {% include "sidenav.html" with collection %}
+            {% endif %}
+            <main id="main-content"class="usa-layout-docs__main desktop:grid-col-9 usa-prose margin-top-neg-1">
+                <h1>{{- title -}} </h1>
+                {{ content }}
+            </main>
+        </div>
     </div>
-  </div>
 </div>

_includes/meta.html

@@ -61,6 +61,114 @@
     gtag('js', new Date());
 
     gtag('config', '{{ site.ga.gtag }}');
+function checkDomainAvailability(requestedDomainId="domain-input", isDomainChoosing=false, alertId="usa-search--domain_message") {
+
+      // Cancel the default action
+      event.preventDefault();
+
+      const baseUrl = "https://manage.get.gov/api/v1/available/?domain="
+
+      let requested_domain = document.getElementById(requestedDomainId).value
+
+      if (requested_domain === null || requested_domain.length === 0) {
+          render_result(``)
+      }
+
+      let searchEndpoint = new URL("", baseUrl + requested_domain);
+      fetch(searchEndpoint).then(function(reply) {
+          return reply.json()
+      }).then(function(response) {
+          let requested_domain_display_string = requested_domain
+              if (!requested_domain_display_string.endsWith('.gov')) {
+                  requested_domain_display_string += '.gov'
+              }
+
+          let successMessage = `
+          <div class="usa-alert usa-alert--success usa-alert--slim" role="alert">
+              <div class="usa-alert__body">
+                  <p class="usa-alert__text">
+                      That domain is available!
+                      <a class="usa-link" href="{{ '/domains/before/' | url }}">
+                          Read about next steps to take before requesting your .gov domain.
+                      </a>
+                  </p>
+              </div>
+          </div>
+          `
+
+          let errorMessage = null
+          if (isDomainChoosing) {
+              errorMessage = document.getElementById("grid-row--domain_message-choosing");
+              if (errorMessage) {
+                  // Check if the 'display-none' class is not already present
+                  if (!errorMessage.classList.contains("display-none")) {
+                      errorMessage.classList.add("display-none");
+                  }
+              }
+
+              successMessage = `
+              <div class="usa-alert usa-alert--success usa-alert--slim" role="alert">
+                  <div class="usa-alert__body">
+                      <p class="usa-alert__text">
+                          That domain is available!
+                          <div class="display-inline"></div>
+                          <strong>We’ll try to give you the domain you want, but it’s not guaranteed.</strong>
+                          <a class="usa-link" href="{{ '/domains/before/' | url }}">
+                              Read about next steps to take before requesting your .gov domain.
+                          </a>
+                      </p>
+                  </div>
+              </div>
+              `
+          }
+
+          let failMessage = `
+          <div class="usa-alert usa-alert--error usa-alert--slim" role="alert">
+              <div class="usa-alert__body">
+                  <p class="usa-alert__text">
+                      ${response.message} 
+                  </p>
+              </div>
+          </div>
+          `
+
+          if (response.available) {
+              render_result(alertId, successMessage)
+          } else if (isDomainChoosing && response.message.includes("That domain isn’t available.")){
+              let unavailableMessage = `
+              <div class="usa-alert usa-alert--error usa-alert--slim" role="alert">
+                  <div class="usa-alert__body">
+                      <p class="usa-alert__text">
+                          That domain isn’t available.
+                      </p>
+                  </div>
+              </div>
+              `
+              render_result(alertId, unavailableMessage)
+              /* TODO: Ticket #267
+              <a class="usa-link" href="{{ '/domains/whois/' | url }}?domain=${requested_domain_display_string}">
+                  Learn about this domain.
+              </a> 
+              */
+          }
+          else {
+              render_result(alertId, failMessage)
+          }
+
+          if (isDomainChoosing && errorMessage) {
+              errorMessage.classList.remove("display-none");
+          }
+      }).catch(function(err) {
+          console.log('parsing failed', err);
+      })
+    }
+
+    function render_result(elementId, content, append = true){
+      document.getElementById(elementId).innerHTML = (append == true) ? content : `<div></div>`;
+    }
+
   </script>
+
+
   {% endif %}
 </head>

pages/domains/domains_choosing.md

@@ -3,7 +3,7 @@ title: Choosing your .gov domain name
 permalink: /domains/choosing/
 layout: layouts/info-page
 sidenav: true
-excerpt: Requirements and tips for .gov domain names
+excerpt: Check if a domain is available and read name requirements for your organization
 tags: domains
 eleventyNavigation:
   key: domains
@@ -12,6 +12,9 @@ eleventyNavigation:
 ---
 
 
+## Start your .gov domain search
+Check if the .gov domain you want is available. We’ll work with you to find the best domain for your organization that meets our requirements.
+{% include 'content-blocks/domain-availability-form.html' %}
 
 ## General rules for .gov domain names
 Your domain name represents your organization and your services to the world online. Good domain names are memorable and easy to say out loud (like over the phone or in a presentation).

styles/_uswds-theme-custom-styles.scss

@@ -234,6 +234,42 @@ HOME
   }
 }
 
+// ## DOMAIN SEARCH (domains_choosing page) ---------------------------------------
+.usa-search--domain-choosing {
+  flex-direction: column;
+  // The default input styling has no styling on the right.
+  // Lets correct that.
+  input.usa-input {
+    border-right-style: solid;
+    border-right-width: 0.8px;
+    border-right-color: rgb(86, 92, 101);
+    max-width: 400px;
+    height: 36px;
+    font-size: inherit;
+  }
+
+  span {
+    line-height: 2;
+  }
+
+  button.usa-button {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    height: 36px;
+  }
+
+  @media (max-width: 500px) {
+    input.usa-input {
+      width: 90%;
+    }
+
+    button.usa-button {
+      width: 100%;
+    }
+  }
+
+}
+
 // ## DOMAIN SEARCH ---------------------------------------
 .usa-search--domain {
   flex-direction: column;
@@ -322,6 +358,25 @@ HOME
   line-height: 1.59rem;
 }
 
+.usa-search--domain_message-choosing {
+  max-width: 400px;
+
+  .usa-alert--success.usa-alert--slim::before {
+    height: 3.5rem;
+  }
+
+  .usa-alert--error.usa-alert--slim::before {
+    height: 3.5rem;
+  }
+
+  p:last-of-type {
+    margin-bottom: 0.5rem;
+  }
+
+}
+
+
+
 .usa-search--domain_message {
   @include at-media(mobile-lg) {
     max-width: 50%;
@@ -470,3 +525,8 @@ CHECKLIST
     padding-left: units(3);
   }
 }
+
+// This style gets overriden by other class overrides. We can fix this here.
+.display-none {
+  display: none !important;
+}

styles/_uswds-theme-settings.scss

@@ -81,5 +81,23 @@ USWDS Settings and Overrides
   $theme-summary-box-background-color: 'primary-lightest',
   $theme-summary-box-border-color: 'accent-cool-light',
 
+  /*---------------------------
+  ## Error state
+  ----------------------------*/ 
+  $theme-color-error-darker: $dhs-red-70,
+  $theme-color-error-dark: $dhs-red-60,
+  $theme-color-error: $dhs-red,
+  $theme-color-error-light: $dhs-red-30,
+  $theme-color-error-lighter: $dhs-red-15,
+
+  /*---------------------------
+  ## Success state
+  ----------------------------*/ 
+  $theme-color-success-darker: $dhs-green-70,
+  $theme-color-success-dark: $dhs-green-60,
+  $theme-color-success: $dhs-green,
+  $theme-color-success-light: $dhs-green-30,
+  $theme-color-success-lighter: $dhs-green-15,
+
 );