DP-13951 add more links to suggested pages template

assets/scss/03-organisms/_related-locations.scss

@@ -17,7 +17,6 @@
         margin-left: 210px;
       }
     }
-
   }
 
   &__title {
@@ -28,7 +27,6 @@
   }
 
   &__items {
-
     @media ($bp-small-min) {
       display: flex;
       justify-content: space-between;
@@ -53,13 +51,10 @@
       @media ($bp-large-extended-min) {
         width: 39%;
         border-left: 1px solid $c-gray-light;
-
         a {
           margin: 0 auto;
         }
       }
-
-
     }
 
     &:nth-child(3) {
@@ -89,14 +84,15 @@
         padding-right: 20px;
         text-align: left;
         line-height: 1.2;
-  
+
         svg {
           display: inline-block;
           height: .6em;
           width: .6em;
           fill: rgba($c-font-link,.5);
+          margin-left: 5px;
         }
-  
+
         @media ($bp-large-min) {
           padding: 0;
           font-size: 1.65rem;

assets/scss/03-organisms/_suggested-pages.scss

@@ -1,6 +1,18 @@
 .ma__suggested-pages {
 
-  text-align: center;
+  &.guide {
+    text-align: center;
+    .ma__suggested-pages__title {
+      display: block;
+      &:after {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+    .ma__suggested-pages__items {
+      justify-content: center;
+    }
+  }
 
   &__container {
     @include ma-container;
@@ -13,19 +25,23 @@
     margin-bottom: 45px;
     padding-top: 60px;
     padding-bottom: 16px;
-    text-align: center;
+    display: inline-block;
+    &:after {
+      left: 0.075em;
+    }
+  }
 
+  h3.ma__comp-heading {
+    margin-bottom: 0;
     &:after {
-      left: 50%;
-      transform: translateX(-50%);
+      content: none;
     }
   }
 
   &__items {
     @include clearfix;
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
   }
 
   &__item {
@@ -34,7 +50,6 @@
   }
 
   &__item--guide {
-
     @media (min-width: 750px) and ($bp-x-large-max) {
       @include span-columns(4 of 8);
       @include omega(2n);
@@ -46,37 +61,56 @@
     }
   }
 
-  &__item--figure {
-    display: block;
-    margin: 0 0 35px 0;
+  .ma__link-list {
+    text-align: left;
+  }
 
+  &__item {
     a {
       height: 100%;
       width: 100%;
     }
+    &--suggested {
+      .ma__decorative-link {
+        display: block;
+        font-size: 1.625rem;
+        line-height: 1.2;
+        margin-top: 10px;
+      }
 
-    .ma__decorative-link {
-      display: block;
-      font-size: 1.625rem;
-      line-height: 1.2;
-      margin-top: 10px;
-    }
-
-    @media ($bp-x-small-min) {
-      float: left;
-      padding: 0 10px;
-      width: 50%;
-    }
+      @media ($bp-x-large-min) {
+        @include span-columns(4 of 13);
+        @include omega(2n);
+        margin-right: 0;
+        border-right: 1px solid $c-bd-divider;
+        &-figure {
+          max-width: 230px;
+          margin: auto;
+        }
+        &:nth-child(2):not(:nth-last-child(3n+1)) {
+          @include span-columns(5 of 13);
+          @include omega(2n);
+          margin-right: 0;
+        }
+        &:nth-child(1) {
+          .ma__suggested-pages__item--suggested-figure {
+            margin-left: 0;
+          }
+        }
+        &:nth-last-child(3n+1) {
+          border-right: 0;
+          .ma__suggested-pages__item--suggested-figure {
+            margin-right: 0;
+          }
+        }
+      }
 
-    @media ($bp-large-min) {
-      padding: 0 45px;
-      width: 25%;
-      & + & {
-        border-left: 1px solid;
+      @media (min-width: 750px) and ($bp-x-large-max) {
+        @include span-columns(4 of 8);
+        @include omega(2n);
       }
     }
   }
-
 }
 
 //theme

changelogs/DP-13951.md

@@ -0,0 +1,3 @@
+Minor
+Added
+- (Patternlab) [SuggestedPages] DP-13951: Add option for link list instead of more link to suggested pages.

patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.json

@@ -9,7 +9,7 @@
     },
     "pages": [{
       "image": {
-        "alt": "Place Holder Image", 
+        "alt": "Place Holder Image",
         "src": "../../assets/images/placeholder/230x130.png",
         "height": "130",
         "width": "230"
@@ -21,7 +21,7 @@
       }
     },{
       "image": {
-        "alt": "Place Holder Image", 
+        "alt": "Place Holder Image",
         "src": "../../assets/images/placeholder/230x130.png",
         "height": "130",
         "width": "230"
@@ -33,7 +33,7 @@
       }
     },{
       "image": {
-        "alt": "Place Holder Image", 
+        "alt": "Place Holder Image",
         "src": "../../assets/images/placeholder/230x130.png",
         "height": "130",
         "width": "230"
@@ -45,7 +45,7 @@
       }
     },{
       "image": {
-        "alt": "Place Holder Image", 
+        "alt": "Place Holder Image",
         "src": "../../assets/images/placeholder/230x130.png",
         "height": "130",
         "width": "230"
@@ -56,6 +56,22 @@
         "info": ""
       }
     }],
+    "moreLinks":{
+      "compHeading": {
+        "title": "More Locations",
+        "titleContext": "",
+        "sub": 7
+      },
+      "links": [{
+          "href": "#",
+          "text": "More link 1",
+          "info": ""
+        },{
+          "href": "#",
+          "text": "More link 2",
+          "info": ""
+      }]
+    },
     "more":{
       "href": "#",
       "text": "See all related pages",

patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.md

@@ -20,19 +20,24 @@ This Pattern shows a collection of images and links to other pages on the site.
 ### Variables
 ~~~
 "suggestedPages": {
-  "title": 
+  "title":
     type: string / required,
-  "titleContext": 
+  "titleContext":
     type: string / optional,
-  "view": 
+  "view":
     type: string ('', 'guide') / optional,
   "pages": [{
-    "image": 
+    "image":
       type: image / required,
     "link": {
       type: decorativeLink / required
     }
   }]
+  "moreLinks": [{
+    "links": [{
+      'type': linkList / optional
+    }]
+  }]
   "more": {
     type: link / optional
   }

patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig

@@ -1,37 +1,49 @@
+{% set pageType = '' %}
+{% if suggestedPages.view == 'guide' %}
+  {% set pageType = 'guide' %}
+{% endif %}
 
-<section class="ma__suggested-pages">
+<section class="ma__suggested-pages {{ pageType }}">
   <div class="ma__suggested-pages__container">
-    <h2 class="ma__suggested-pages__title">{{ suggestedPages.title }}{% if suggestedPages.titleContext %}<span class="visually-hidden"> {{suggestedPages.titleContext}}</span>{% endif %}</h2>
-    <div class="ma__suggested-pages__items">
-      {% if suggestedPages.view == "guide" %}
-        {% for page in suggestedPages.pages %}
-          {% set illustratedLink = { 
-            "href": page.link.href, 
-            "text": page.link.text, 
-            "info": page.link.info, 
-            "image": page.image.src ? : page.image } %}
-          <div class="ma__suggested-pages__item ma__suggested-pages__item--guide">
-            {% include "@molecules/illustrated-link.twig" %}
-          </div>
-        {% endfor %}
-      {% else %}
-        {% for page in suggestedPages.pages %}
-          <figure class="ma__suggested-pages__item ma__suggested-pages__item--figure">
-            <a href="{{ page.link.href }}" title="{{ page.link.info }}">
-              {% set image = page.image.src ? page.image : { "alt": page.altTag, "src": page.image } %}
-              {% include "@atoms/09-media/image.twig" %}
-            </a>
-            {% set decorativeLink = page.link %}
-            {% include "@atoms/decorative-link.twig" %}
-          </figure>
-        {% endfor %}
+    <div class="ma__suggested-pages__inner-container">
+      <h2 class="ma__suggested-pages__title">{{ suggestedPages.title }}{% if suggestedPages.titleContext %}<span class="visually-hidden"> {{suggestedPages.titleContext}}</span>{% endif %}</h2>
+      <div class="ma__suggested-pages__items">
+        {% if suggestedPages.view == "guide" %}
+          {% for page in suggestedPages.pages %}
+            {% set illustratedLink = {
+              "href": page.link.href,
+              "text": page.link.text,
+              "info": page.link.info,
+              "image": page.image.src ? : page.image } %}
+            <div class="ma__suggested-pages__item ma__suggested-pages__item--guide">
+              {% include "@molecules/illustrated-link.twig" %}
+            </div>
+          {% endfor %}
+        {% else %}
+          {% for page in suggestedPages.pages|slice(0,3) %}
+            <div class="ma__suggested-pages__item ma__suggested-pages__item--suggested">
+              <figure class="ma__suggested-pages__item--suggested-figure">
+                <a href="{{ page.link.href }}" title="{{ page.link.info }}">
+                  {% set image = page.image.src ? page.image : { "alt": page.altTag, "src": page.image } %}
+                  {% include "@atoms/09-media/image.twig" %}
+                </a>
+                {% set decorativeLink = page.link %}
+                {% include "@atoms/decorative-link.twig" %}
+              </figure>
+            </div>
+          {% endfor %}
+        {% endif %}
+      </div>
+      {% if suggestedPages.moreLinks %}
+        {% set linkList = suggestedPages.moreLinks %}
+        {% include "@organisms/by-author/link-list.twig" %}
+      {% endif %}
+      {% if suggestedPages.more %}
+        <div class="ma__suggested-pages__more">
+          {% set link = suggestedPages.more %}
+          {% include "@atoms/11-text/link.twig" %}
+        </div>
       {% endif %}
     </div>
-    {% if suggestedPages.more %}
-      <div class="ma__suggested-pages__more">
-        {% set link = suggestedPages.more %}
-        {% include "@atoms/11-text/link.twig" %}
-      </div>
-    {% endif %}
   </div>
 </section>