TCI-1209: update twitter, add instagram, and commit clean-up result (#…

…883)

README.md

@@ -38,12 +38,15 @@ When making changes to components in the pattern library use sass variables refe
 When adding graphic assets to the project use the appropriate directory
 
 ### Utility Icons (might no longer apply)
+
 Simple one color icons are implemented and managed via icomoon.io. To add additional icons you can import _selection.json_ back to the IcoMoon app using the _Import Icons_ button (or via Main Menu → Manage Projects) to retrieve your icon selection. See `images/icomoon`
 
-### Graphics, Photos and Logos 
+### Graphics, Photos and Logos
+
 For more complex multicolor icons, branding elements or photography, add files to `images/graphics` `images/logos` or `images/photos`
 
 #### USWDS
+
 Icons bundled with the USWDS 2.0 are available at `/img`
 
 ## Composer Install Wizard

source/_patterns/00-protons/typography/_global.scss

@@ -77,4 +77,4 @@ a {
 
 strong {
   @include u-font-weight(heavy);
-}
+}

source/_patterns/00-protons/typography/_prose.scss

@@ -2,7 +2,7 @@
   > ul li,
   > ol li {
     @include u-margin-top(1.5);
-    @include u-line-height(ui, 3);   
+    @include u-line-height(ui, 3);
   }
 
   h1,

source/_patterns/02-molecules/alert/alert.js

@@ -15,7 +15,7 @@ $(document).ready(function () {
 
         // Message loads hidden to avoid flash if cookie is found.
         if (!getCookie(cookieId)) {
-          // If the cookie doesn't exist , display the alert. 
+          // If the cookie doesn't exist , display the alert.
           alert.classList.add("active");
         }
 

source/_patterns/02-molecules/body/_body.scss

@@ -96,17 +96,14 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
     @include u-margin-bottom(3);
     @include u-margin-top(2);
   }
-  
+
   h4 {
     @extend .jcc-body__aside-title;
     @include u-margin-bottom(1);
     @include u-margin-top(3);
   }
 
-  ul li{
+  ul li {
     @include u-margin-top(1);
   }
-
 }
-
-

source/_patterns/02-molecules/chat/chat.js

@@ -10,21 +10,21 @@
  * of language switching in the CMS should trigger language change in the bot.
  */
 
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
   // Custom events dispatch on open/close so elements outside of iframe
   // can react.
   const eventChatOpen = new CustomEvent("chat-open", {
-    bubbles: true
+    bubbles: true,
   });
   const eventChatClose = new CustomEvent("chat-close", {
-    bubbles: true
+    bubbles: true,
   });
 
   var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
   var eventer = window[eventMethod];
   var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
 
-  eventer(messageEvent, function(e) {
+  eventer(messageEvent, function (e) {
     if (e.data === "open" || e.message === "open") {
       // Allow event listener to react to open.
       window.dispatchEvent(eventChatOpen);

source/_patterns/02-molecules/hero/_hero.scss

@@ -223,15 +223,15 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
   text-orientation: mixed;
   writing-mode: vertical-lr;
   transform: scale(-1, -1);
-  background: rgba(69,69,69,0.7);
+  background: rgba(69, 69, 69, 0.7);
   padding: 8px 0;
 }
 
 .jcc-hero-tiles__background::before {
-  z-index : 0 !important;
+  z-index: 0 !important;
 }
 
-.jcc-hero-tiles__side{
+.jcc-hero-tiles__side {
   position: relative;
 }
 

source/_patterns/02-molecules/read-more/_read-more.scss

@@ -98,7 +98,7 @@ h3.read-more__heading {
 
 .read-more--text .read-more__heading_text,
 .read-more--text .read-more__action {
-  padding: unset
+  padding: unset;
 }
 
 .read-more--text .read-more__heading_text {

source/_patterns/02-molecules/section/_section-heading.scss

@@ -93,4 +93,4 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
 /*Adding css for text cropping from bottom side*/
 .jcc-body__main-text .jcc-section-heading__title {
   @include u-line-height(ui, 3);
-}
+}

source/_patterns/02-molecules/section/_section.scss

@@ -63,7 +63,7 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
     // Adding table trick to avoid overflow in any section
     .usa-table td {
       white-space: normal;
-      vertical-align: top;      
+      vertical-align: top;
     }
   }
 }

source/_patterns/02-molecules/video/_video.scss

@@ -58,25 +58,25 @@
   }
 }
 
-// rules to ensure that multiple video edit items are 
+// rules to ensure that multiple video edit items are
 // not overlapping or hiding media button.
-.jcc-video__embed_items{
+.jcc-video__embed_items {
   position: relative;
-  padding-bottom:10px;
+  padding-bottom: 10px;
   height: 100%;
 }
 
-button.media-library-item__edit{
-  margin-top:10px;
-  margin-bottom:10px;
+button.media-library-item__edit {
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 // To show video stacked up with image media.
-.jcc-video__video-container{
+.jcc-video__video-container {
   position: relative;
   display: block;
   width: 100%;
   max-width: 100%;
   float: left;
   margin-top: 20px;
-}
+}

source/_patterns/03-organisms/accordion/_accordion.scss

@@ -63,8 +63,8 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
 // Override the max-width for inner-content.
 .usa-accordion__content {
   p {
-    @include at-media(desktop) {      
-      @include u-maxw(full);      
+    @include at-media(desktop) {
+      @include u-maxw(full);
     }
   }
 

source/_patterns/03-organisms/action-list/_action-list.scss

@@ -70,4 +70,4 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
 
 .jcc-action-list__item-title {
   font-size: 1.25rem;
-}
+}

source/_patterns/03-organisms/cards/cards.js

@@ -2,25 +2,25 @@
  * Function to display consistent image height for mixed card widths.
  */
 function setConsistentMediaHeight(cards) {
-  cards.forEach(function(cardset) {
+  cards.forEach(function (cardset) {
     const medias = Array.from(cardset.getElementsByClassName("usa-card__media"));
 
     if (medias.length > 0) {
       // Reset media height to default.
-      medias.forEach(function(media) {
+      medias.forEach(function (media) {
         let image = media.getElementsByTagName("img");
         media.removeAttribute("style");
         image[0].removeAttribute("style");
       });
 
       // Determine max height from smallest media found.
       let maxHeight = medias[0].offsetHeight;
-      medias.forEach(function(media) {
+      medias.forEach(function (media) {
         maxHeight = Math.min(maxHeight, media.offsetHeight);
       });
 
       // Adjust all container and image heights to max allowed.
-      medias.forEach(function(media) {
+      medias.forEach(function (media) {
         let mediaHeight = maxHeight / 16 + "rem";
         let image = media.getElementsByTagName("img");
         media.style.height = mediaHeight;
@@ -30,13 +30,15 @@ function setConsistentMediaHeight(cards) {
   });
 }
 
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
   // Detect any mixed card widths.
-  const cards = Array.from(document.querySelectorAll(".jcc-cards--2-60-40-cols, .jcc-cards--2-75-25-cols"));
+  const cards = Array.from(
+    document.querySelectorAll(".jcc-cards--2-60-40-cols, .jcc-cards--2-75-25-cols")
+  );
 
   if (cards) {
     setConsistentMediaHeight(cards);
-    window.onresize = function() {
+    window.onresize = function () {
       setConsistentMediaHeight(cards);
     };
   }

source/_patterns/03-organisms/global/_footer.scss

@@ -190,13 +190,13 @@ $_shoe: map-get($_config, shoe);
   @include u-color(map-get($_secondary, default-background-text));
   letter-spacing: 1.35px;
 
-  @include at-media(tablet-lg) {    
-    font-size: 1.2rem;     
+  @include at-media(tablet-lg) {
+    font-size: 1.2rem;
   }
 
-  @include at-media(desktop-lg) {   
-    font-size: 1.35rem;   
-  } 
+  @include at-media(desktop-lg) {
+    font-size: 1.35rem;
+  }
 
   @include at-media(widescreen) {
     @include u-font-size(heading, md);

source/_patterns/03-organisms/offcanvas/_offcanvas.scss

@@ -110,7 +110,8 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
       }
       width: 11rem;
 
-      a, iframe {
+      a,
+      iframe {
         @include u-width(full, !important);
       }
     }

source/_patterns/03-organisms/offcanvas/offcanvas.js

@@ -1,7 +1,7 @@
 // Elements.
 const $offcanvas_trigger = $('[data-offcanvas^="trigger"]');
 const $offcanvas_trigger_show = $('[data-offcanvas="trigger"]');
-const offcanvas_triggers = '.jcc-offcanvas__trigger-container .block';
+const offcanvas_triggers = ".jcc-offcanvas__trigger-container .block";
 const $offcanvas_container = $('[data-offcanvas="container"]');
 const $offcanvas_dialog = $('[data-offcanvas="dialog"]');
 const $offcanvas_confirmation = $('[data-offcanvas="container"] .webform-confirmation');
@@ -42,7 +42,7 @@ const triggersAdjust = (state) => {
     $(triggerContainer).removeAttr("style");
     $(triggerContainer).removeClass("mobile");
   }
-}
+};
 
 // Allow user to dismiss completely if confirmation is visible.
 if (offcanvasConfirmed() == true) {
@@ -108,7 +108,7 @@ $(drupalWebForm + " .js-webform-webform-buttons .ui-button").focusout(function (
 // BEGIN: JCC Chat integration via chatbot.js molecule.
 window.addEventListener(
   "chat-open",
-  function(e) {
+  function (e) {
     $offcanvas_trigger_show.hide();
     $(triggerContainer).addClass("open");
   },
@@ -117,7 +117,7 @@ window.addEventListener(
 
 window.addEventListener(
   "chat-close",
-  function(e) {
+  function (e) {
     $(triggerContainer).removeClass("open");
     $offcanvas_trigger_show.show();
   },