Merge pull request #750 from CityOfBoston/develop

DIG-4058: Text Box treatments for data entry states and required fields
CityOfBoston · May 7, 2024 · 3948c83 · 3948c83
2 parents f049c42 + 5932f87
commit 3948c83
Show file tree

Hide file tree

Showing 8 changed files with 214 additions and 9 deletions.
diff --git a/.github/workflows/deploy_to_s3.yml b/.github/workflows/deploy_to_s3.yml
@@ -0,0 +1,132 @@
+# @file: deploy_to_s3.yml
+# This Action builds a deploy artifact (which in this case is a fully populated config, vendor and docroot folder for a
+# Dupal website) and copies the built folders+files to an s3 bucket.
+#
+# Attached resources:
+# - GitHub SECRETS:
+#     -> global: AWS_ACCESS_KEY -> AWS Authentication using a SERVICE ACCOUNT
+#     -> global: AWS_SECRET_ACCESS_KEY -> WeAWS Authentication using a SERVICE ACCOUNT
+#     -> global: SLACK_DOIT_WEBHOOK_URL -> Webhook URL for posting messages to slack
+#     -> local: CLOUDFRONT_DISTRIBUTION_ID -> The cloudfront distributionIDF so we can invalidate AWS cache for patterns
+# - GitHub VARIABLES:
+#     -> global: SLACK_MONITORING_CHANNEL -> Channel to post devops messages into
+#     -> local: S3_DRY_RUN -> Copies a single file into the s3 bucket DRY_RUN folder (for testing)
+#     -> local: DEPLOY_DEBUG -> Debug mode, generally prints more output for debugging
+#     -> local: RUN_PERCY -> Launch Percy tests as part of action
+#     -> local: RUN_JEST -> Launch Jest tests as part of action
+name: "Deploy Patterns to Amazon S3"
+on:
+  workflow_dispatch:
+  push:
+    branches:   # we can add branches to this list which will deploy code to Acquia GitLab as we push code to those branches.
+     - develop
+     - production
+      # - dummy
+env:
+  SLACK_WEBHOOK_URL: ${{ secrets.SLACK_DOIT_WEBHOOK_URL }}    # for slack
+  NODE_VERSION: 14
+  TZ: "America/New_York"
+
+jobs:
+  Deploy:
+    # installed software: https://github.com/actions/runner-images/blob/main/images/linux/Ubuntu2004-Readme.md
+    runs-on: ubuntu-20.04
+    defaults:
+      run:
+        shell: bash
+
+    steps:
+      # checkout the cob repository that has been pushed to.
+      - name: Set Variables
+        run: |
+          if [[ "{{ github.ref_name }}" == "develop" ]]; then
+            echo "BUCKET_NAME=patterns-stg.boston.gov" >> "${GITHUB_ENV}"
+          elif [[ "{{ github.ref_name }}" == "production" ]]; then
+            echo "BUCKET_NAME=patterns.boston.gov" >> "${GITHUB_ENV}"
+          else
+            echo "BUCKET_NAME=patterns-uat.boston.gov" >> "${GITHUB_ENV}"
+          fi
+          if [[ ${{ vars.S3_DRY_RUN }} == 1 ]];then
+            echo "S3_DEST_DIR='DRY_RUN/'" >> "${GITHUB_ENV}"
+            echo "SOURCE_DIR='public/legacy'" >> "${GITHUB_ENV}"
+          else
+            echo "S3_DEST_DIR=''" >> "${GITHUB_ENV}"
+            echo "SOURCE_DIR=public" >> "${GITHUB_ENV}"
+          fi
+
+      - name: Post to Slack
+        uses: act10ns/[email protected]
+        with:
+          status: Starting
+          channel: ${{ vars.SLACK_MONITORING_CHANNEL }}
+
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+
+      - name: Downgrade node 14
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Build the public folder
+        id: Build-Patterns-And-CDN-Assets
+        run: |
+          npm install
+          npm run build
+
+      - name: Printout vars
+        if: ${{ vars.DEPLOY_DEBUG == 1 }}
+        run: |
+          du ./public
+
+      - name: Run Percy Tests
+        if: ${{ vars.RUN_PERCY == 1 }}
+        run: |
+          gem install faraday -v 1.8.0
+          percy snapshot public --snapshots_regex="(components\/preview.).*\.html$" --enable_javascript --trace --widths "375,1280"
+
+      - name: Run Jest Tests
+        if: ${{ vars.RUN_JEST == 1 }}
+        run: |
+          npm run jest.ci
+
+      - name: Upload to Amazon
+        id: Deploy-To-Amazon
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks # --delete
+        env:
+          AWS_S3_BUCKET: ${{ env.BUCKET_NAME }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: 'us-east-2'
+          SOURCE_DIR: ${{ env.SOURCE_DIR }}
+          DEST_DIR: ${{ env.S3_DEST_DIR }}
+
+      - name: Invalidate AWS CloudFront
+        id: Invalidate-Cache
+        uses: chetan/invalidate-cloudfront-action@v2
+        env:
+          DISTRIBUTION: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
+          PATHS: "/*"
+          AWS_REGION: "us-east-1"
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          DEBUG: ${{ env.DEPLOY_DEBUG }}
+
+      - name: Post to Slack - success
+        uses: act10ns/[email protected]
+        if: ${{ success()  }}
+        with:
+          status: ${{ job.status }}
+          steps: ${{ toJson(steps) }}
+          channel: ${{ vars.SLACK_MONITORING_CHANNEL }}
+
+      - name: Post to Slack - failure
+        uses: act10ns/[email protected]
+        if: ${{ failure() }}
+        with:
+          status: ${{ job.status }}
+          steps: ${{ toJson(steps) }}
+          channel: ${{ vars.SLACK_MONITORING_CHANNEL }}
diff --git a/components/base/form/textbox/textbox--input-states.hbs b/components/base/form/textbox/textbox--input-states.hbs
@@ -0,0 +1,22 @@
+{{#each states as |textbox|}}
+  <label class="txt">
+    <span class="txt-l">
+      {{label}}
+      {{#if required}}
+        <span class="t--req">Required</span>
+      {{/if}}
+      {{#if soft-required}}
+        <span class="t--req">Required</span>
+      {{/if}}
+    </span>
+    <input
+      type="{{#if type}}{{type}}{{else}}text{{/if}}"
+      value="{{#if value}} {{value}}{{/if}}"
+      placeholder="{{placeholder}}"
+      class="txt-f{{#if error }} txt-f--err{{#if soft-required}} txt-f--sr{{/if}}{{/if}}{{#if classes}} {{classes}}{{/if}}"
+    >
+    {{#if error }}
+      <div class="t--subinfo t--err m-t100">{{ error }}</div>
+    {{/if}}
+  </label>
+{{/each}}
diff --git a/components/base/form/textbox/textbox.config.yml b/components/base/form/textbox/textbox.config.yml
@@ -26,6 +26,18 @@ context:
       id: password
       type: password
       value: "password"
+  states:
+    - label: Default
+      type: text
+    - label: Input Label
+      required: true
+    - label: Soft Require - Required/Validation on Submit
+      error: Please enter an email address
+      soft-required: true
+    - label: Error
+      placeholder: Your email address
+      value: "Not an email address string"
+      error: Please enter an email address
 variants:
   - name: Combo
     context:

diff --git a/components/base/form/textbox/textbox.hbs b/components/base/form/textbox/textbox.hbs
@@ -2,7 +2,14 @@
   <div class="txt">
     <label for="{{id}}" class="txt-l{{#if error }} t--err{{/if}}">{{label}}</label>
     {{#if ../inputType }}
-      <input id="{{id}}" type="{{#if type}}{{type}}{{else}}text{{/if}}" value="{{value}}" placeholder="{{placeholder}}" class="txt-f{{#if error }} txt-f--err{{/if}}{{#if classes}} {{classes}}{{/if}}"{{#if size }} size="{{ size }}"{{/if}}>
+      <input
+        id="{{id}}"
+        type="{{#if type}}{{type}}{{else}}text{{/if}}"
+        value="{{value}}"
+        placeholder="{{placeholder}}"
+        class="txt-f{{#if error }} txt-f--err{{/if}}{{#if classes}} {{classes}}{{/if}}"{{#if size }}
+        size="{{ size }}"{{/if}}
+      >
     {{/if}}
     {{#if ../textareaType }}
       <textarea id="{{id}}" placeholder="{{placeholder}}" class="txt-f" rows="10">{{value}}</textarea>

diff --git a/components/base/modal/modal.config.yml b/components/base/modal/modal.config.yml
@@ -0,0 +1,3 @@
+title: Modal
+handle: md
+status: ready
diff --git a/components/base/modal/modal.hbs b/components/base/modal/modal.hbs
@@ -0,0 +1,10 @@
+<div role="dialog">
+  <div class="md">
+    <div class="md-c">
+      <button class="md-cb">Close</button>
+      <div class="mb-b p-a300 p-a600--xl">
+        Modal Content ...
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/scripts/components/contact.js b/scripts/components/contact.js
@@ -30,6 +30,14 @@ var BostonContact = (function () {
         document.getElementById('contactMessage').innerHTML = ev.target.title;
       }
 
+      // -> DU Jan 2024: DIG-3829
+      let title;
+      document.getElementById('contactFormModal').getElementsByClassName('sh-title')[0].innerHTML = "Contact Us";
+      if ((title = extract(ev.target.getAttribute('href'), "title")) && title !== '') {
+        document.getElementById('contactFormModal').getElementsByClassName('sh-title')[0].innerHTML = decodeURIComponent(title);
+      }
+      // <- DU Jan 2024: DIG-3829
+
       var btn = document.getElementById("contactFormModal");
       // Setting new role attributes
       btn.setAttribute("role", "dialog");
@@ -59,7 +67,7 @@ var BostonContact = (function () {
     var inputFields = document.getElementsByClassName('txt-f');
     for (var i = 0; i < inputFields.length; i++) {
       inputFields[i].addEventListener("keyup", function() {
-        var errorMessage = this.nextElementSibling; 
+        var errorMessage = this.nextElementSibling;
         if (errorMessage) {
           errorMessage.remove("t--err");
         }
@@ -138,7 +146,7 @@ var BostonContact = (function () {
           valid = false;
         }
 
-      } 
+      }
     } else {
       valid = true;
     }
@@ -165,13 +173,13 @@ var BostonContact = (function () {
     if (o_subject && subject[0].value !== o_subject) {
       valid = false;
     }
-    
+
     if (phone[0].value !== '') {
       if (!phone_input.value.match(phoneno)) {
           Boston.invalidateField(phone[0], "Please enter a valid phone number");
           valid = false;
       }
-    }  
+    }
 
     return valid;
   }
@@ -221,7 +229,7 @@ var BostonContact = (function () {
         success: function (response) {
           if (response.status === 200) {
             var token = JSON.parse(response.response).token_session;
-            document.getElementById('contact-token').value = token;            
+            document.getElementById('contact-token').value = token;
           } else {
             console.log("token response error");
           }

diff --git a/stylesheets/components/form/_textbox.styl b/stylesheets/components/form/_textbox.styl
@@ -25,7 +25,7 @@
     margin: 0 0 $sizing-300
 
   &-f
-    field-height = "calc(%srem + %s * 2)" % ($line-height-600 $border-200)
+    field-height = "calc(%srem + %s * 1)" % ($line-height-600 $border-200)
 
     font-family: $serif
     font-size: 1rem
@@ -43,8 +43,16 @@
     padding-left: $sizing-300
     padding-right: $sizing-300
 
+    &--sr
+      border-width: $border-150
+      border-color: $error-border-color
+
+    &--focused
+      box-shadow: 0 0 0 3px $focus-indicator-color
+      border-color: $focus-indicator-color
+
     &--sm
-      field-height-sm = "calc(%srem + %s * 2)" % ($line-height-400 $border-200)
+      field-height-sm = "calc(%srem + %s * 1)" % ($line-height-400 $border-200)
 
       padding-left: $sizing-200
       padding-right: $sizing-200
@@ -66,7 +74,7 @@
     textarea&
       &.txt-f--combo
         // Need to leave space for a .sel-f--sq element, and its borders
-        width: "calc(100% - %s - %s * 2)" % ($select-arrow-box-width $border-200)
+        width: "calc(100% - %s - %s * 1)" % ($select-arrow-box-width $border-200)
 
     input[type=email]&--auto,
     input[type=tel]&--auto,
@@ -92,10 +100,13 @@
 
     &:focus
       box-shadow: 0 0 0 3px $focus-indicator-color
+      border-color: $focus-indicator-color
 
     &--combo
       border-right: 0
       float: left
+    :focus
+      outline: none;
 
   &-l
     color: $charles-blue