Feature/dp 13100 topic card links (#542)

* DP-13100 - styled links WIP need to finish the footer links text

* DP-13100 - updating topic.json

* DP-13100 - styling footer links

* DP-13100 - adding change log file

* DP-13100 - adding backstop files

* DP-13100 - updating mobile and ipad style adjustments

* DP-13100 - adding backstopjs files

* DP-13100 - updating ipad mid breakpoint to allow footer space

* DP-13100 - backstopjs files

* DP-13100 - fixing client feedback issues for card stacking

* DP-13100 - fixing padding on top of card for desktop width

* DP-13100 - adding backstop files

assets/scss/00-base/_colors.scss

@@ -25,6 +25,7 @@ $c-granite-gray: #535353;
 $c-overcast-gray: #DCDCDC;
 $c-platinum-gray: #F2F2F2;
 $c-atlantic-gray: #707070;
+$c-very-light-gray: #CCCCCC;
 
 // Error Colors
 $c-error-red: #CD0D0D;

assets/scss/02-molecules/_section-links.scss

@@ -24,14 +24,21 @@
 
   &__content {
     height: 100%;
-    padding: 15px 20px 0;
+    padding: 10px 20px 0 10px;
 
     @media ($bp-x-small-min) {
+      padding: 10px 20px 20px 10px;
+    }
+
+    @media ($bp-small-min) {
       display: flex;
         align-items: flex-start;
         flex-direction: column;
         flex-wrap: wrap;
-      padding: 40px 30px 0;
+      padding: 12px 30px 0;
+    }
+    @media ($bp-small-min) {
+      padding: 20px 30px 0;
     }
   }
 
@@ -48,7 +55,7 @@
     border-top: 1px solid;
     display: block;
     font-size: 1.25rem;
-    padding: 0 20px 20px 0;
+    padding: 5px 0;
     width: 100%;
 
     @media ($bp-x-small-max) {
@@ -102,11 +109,6 @@
       border: none;
     }
 
-    a:hover {
-      border: none;
-      opacity: .6;
-    }
-
 
     @media ($bp-x-small-max) {
       align-self: flex-start;
@@ -153,14 +155,14 @@
     flex-basis: auto;
     flex-grow: 1;
     flex-shrink: 1;
-    padding: 10px 0 30px;
     width: 100%;
 
     @media ($bp-x-small-max) {
       display: none;
 
       .is-open & {
         display: block;
+        padding-bottom: 20px;
       }
     }
   }
@@ -185,6 +187,7 @@
     &__item > .ma__decorative-link {
     font-size: 1.625rem;
     line-height: 1.3;
+    color: $c-primary;
   }
   }
 }
@@ -206,25 +209,31 @@
   }
 
   &__footer {
+    background-color: $c-overcast-gray;
     border-top-color: $c-bd-divider;
-  }
 
-  &__title {
+    &:hover,
+    &:focus {
+      background-color: $c-very-light-gray;
+    }
 
-    @media ($bp-x-small-min) {
-      @include ma-border-decorative($c-highlight,1);
+    .ma__decorative-link {
+      padding: 15px 0 15px 30px;
     }
+  }
+
+  &__title {
 
     &:after {
       color: $c-primary-alt;
     }
 
     a {
-      color: inherit;
+      color: $c-primary;
     }
 
     svg {
-      fill: rgba($c-font-heading,.5);
+      fill: rgba($c-primary,.5);
     }
 
   }

assets/scss/03-organisms/_sections-three-up.scss

@@ -13,6 +13,11 @@ $bp-section-3up-large-max: "max-width:950px";
     display: flex;
       align-items: stretch;
       flex-wrap: wrap;
+      flex-direction: column;
+
+      @media ($bp-small-min) {
+        flex-flow: row wrap;
+      }
 
     & > * {
 
@@ -24,7 +29,10 @@ $bp-section-3up-large-max: "max-width:950px";
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: auto;
-        margin-bottom: 30px;
+        margin-bottom: 80px;
+      }
+      @media ($bp-medium-min) {
+        margin-bottom: 80px;
       }
 
       @media ($bp-small-min) and ($bp-section-3up-large-max) {
@@ -33,7 +41,7 @@ $bp-section-3up-large-max: "max-width:950px";
       }
 
       @media ($bp-section-3up-large-min) {
-          margin-bottom: 20px;
+          margin-top: 60px;
           @include span-columns(4 of 12);
           @include omega(3n);
       }

changelogs/dp-13100.md

@@ -0,0 +1,3 @@
+Minor
+Added
+- (Patternlab) [SectionLinks] DP-13100: Changed topic card heading styles, and footer CTA styles

patternlab/styleguide/source/_patterns/02-molecules/section-links.twig

@@ -50,7 +50,8 @@
         {% endblock %}
       </ul>
     </nav>
-    {% if sectionLinks.seeAll %}
+  </div>
+  {% if sectionLinks.seeAll %}
       <div class="ma__section-links__footer">
       {% set decorativeLink = {
           "type": "",
@@ -63,5 +64,4 @@
 
       </div>
     {% endif %}
-  </div>
 </section>

patternlab/styleguide/source/_patterns/05-pages/topic.json

@@ -85,7 +85,7 @@
         ],
         "seeAll": {
           "href": "#",
-          "text": "more",
+          "text": "More about this service",
           "info": "learn more about the Recreation Service"
         }
       },
@@ -113,7 +113,7 @@
         ],
         "seeAll": {
           "href": "#",
-          "text": "more",
+          "text": "More about this topic",
           "info": "learn more about Active & Team Sports"
         }
       },
@@ -141,8 +141,8 @@
         ],
         "seeAll": {
           "href": "#",
-          "text": "more",
-          "info": "learn more about Nature & Outdooe Activities"
+          "text": "More about this topic",
+          "info": "learn more about Nature & Outdoor Activities"
         }
       },
       {
@@ -169,13 +169,13 @@
         ],
         "seeAll": {
           "href": "#",
-          "text": "more"
+          "text": "More about this topic"
         }
       }
     ],
     "seeAll": {
       "href": "#",
-      "text": "more",
+      "text": "More about this",
       "info": "learn more about Water Related Activities"
     }
   },