Merge pull request #496 from massgov/patternlab/DP-12843--changes-to-…

…location-page-to-show-links-to-all-locations

Patternlab/DP-12843  changes to location page to show links to all locations

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

@@ -0,0 +1,119 @@
+.ma__related-locations {
+  background-color: $c-bg-section;
+
+  &__container {
+    @include ma-container;
+    border-bottom: 2px solid $c-bd-divider;
+    padding-top: 60px;
+    padding-bottom: 50px;
+
+    & > * {
+
+      @media ($bp-large-min) {
+        margin-left: 160px;
+      }
+
+      @media ($bp-x-large-min) {
+        margin-left: 210px;
+      }
+    }
+
+  }
+
+  &__title {
+    @include ma-border-decorative;
+    @include ma-border-decorative($c-primary-alt);
+    margin-bottom: 45px;
+    padding-bottom: 16px;
+  }
+
+  &__items {
+
+    @media ($bp-small-min) {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    @media ($bp-large-extended-min) {
+      justify-content: flex-start;
+    }
+  }
+
+  &__item {
+    margin-bottom: 30px;
+    width: 100%;
+    position: relative;
+
+    @media ($bp-small-min) {
+      width: 30%;
+    }
+
+    &:nth-child(2) {
+
+      @media ($bp-large-extended-min) {
+        width: 39%;
+        border-left: 1px solid $c-gray-light;
+
+        a {
+          margin: 0 auto;
+        }
+      }
+
+
+    }
+
+    &:nth-child(3) {
+
+      @media ($bp-large-extended-min) {
+        border-left: 1px solid $c-gray-light;
+
+        a {
+          float: right;
+        }
+      }
+    }
+
+    &:hover {
+
+      .ma__related-location__title {
+        text-decoration: underline;
+      }
+    }
+
+    .ma__related-location {
+      max-width: 230px;
+      display: block;
+
+      &__title {
+        display: block;
+        padding-right: 20px;
+        text-align: left;
+        line-height: 1.2;
+
+        svg {
+          display: inline-block;
+          height: .6em;
+          width: .6em;
+          fill: rgba($c-font-link,.5);
+        }
+
+        @media ($bp-large-min) {
+          padding: 0;
+          font-size: 1.65rem;
+        }
+      }
+    }
+  }
+
+  .ma__more-locations__items {
+
+    h3 {
+      padding-bottom: 0;
+      margin-bottom: 1rem;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -49,7 +49,6 @@
   &__item--figure {
     display: block;
     margin: 0 0 35px 0;
-    vertical-align: top;
 
     a {
       height: 100%;

changelogs/DP-12843.txt

@@ -0,0 +1,4 @@
+___DESCRIPTION___
+Changed
+Patch
+- patternlab / DP-12843: Changes to location page to show link to all locations

patternlab/styleguide/source/_patterns/03-organisms/by-author/related-locations.json

@@ -0,0 +1,64 @@
+{
+  "relatedLocations": {
+    "customTitle": true,
+    "titleContext": "",
+    "pages": [
+      {
+        "image": {
+          "alt": "Place Holder Image",
+          "src": "../../assets/images/placeholder/230x130.png",
+          "height": "130",
+          "width": "230"
+        },
+        "link": {
+          "href": "#",
+          "text": "Ashuwillticook Rail Trail ",
+          "info": ""
+        }
+      },
+      {
+        "image": {
+          "alt": "Place Holder Image",
+          "src": "../../assets/images/placeholder/230x130.png",
+          "height": "130",
+          "width": "230"
+        },
+        "link": {
+          "href": "#",
+          "text": "October Mountain State Forest ",
+          "info": ""
+        }
+      },
+      {
+        "image": {
+          "alt": "Place Holder Image",
+          "src": "../../assets/images/placeholder/230x130.png",
+          "height": "130",
+          "width": "230"
+        },
+        "link": {
+          "href": "#",
+          "text": "Sandisfield State Forest (York Lake) ",
+          "info": ""
+        }
+      }
+    ],
+    "linkList": {
+      "stacked": true,
+      "links": [
+        {
+          "href": "#",
+          "text": "Related Location #1"
+        },
+        {
+          "href": "#",
+          "text": "Related Location #2"
+        },
+        {
+          "href": "#",
+          "text": "Related Location #3"
+        }
+      ]
+    }
+  }
+}

patternlab/styleguide/source/_patterns/03-organisms/by-author/related-locations.md

@@ -0,0 +1,31 @@
+### Description
+This Pattern shows a collection of related locations.
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+* Illustrated link
+* Decorative Link
+* Image
+* Link
+
+## Usage Guidelines:
+* This Pattern shows only three locations with a link below
+
+### Variables
+~~~
+"relatedLocations": {
+  "title": 
+    type: string / required,
+  "titleContext": 
+    type: string / optional,
+  "pages": [{
+    "image": 
+      type: image / required,
+    "link": {
+      type: decorativeLink / required
+    }
+  }]
+}
+~~~

patternlab/styleguide/source/_patterns/03-organisms/by-author/related-locations.twig

@@ -0,0 +1,29 @@
+{% if not relatedLocations.pages %}
+  {% set headingLevel = '2 class="ma__comp-heading"' %}
+{% endif %}
+<section class="ma__related-locations">
+  <div class="ma__related-locations__container">
+  {% if relatedLocations.pages %}
+    <h2 id="{{relatedLocations.customTitle ? 'nearby-locations' : 'related-locations'}}" class="ma__related-locations__title">{{relatedLocations.customTitle ? 'Nearby Locations' : 'Related Locations'}}
+    {% if relatedLocations.titleContext %}<span class="visually-hidden"> {{relatedLocations.titleContext}}</span>{% endif %}</h2>
+  {% endif %}
+    <div class="ma__related-locations__items">
+      {% for page in relatedLocations.pages %}
+        <div class="ma__related-locations__item">
+          <a class="ma__related-location" href="{{ page.link.href }}" 
+          title="{{ page.link.text }}" 
+          aria-describedby="Link to {{ page.link.text }}">
+          {% set image = page.image.src ? page.image : { "alt": page.altTag, "src": page.image } %}
+          {% include "@atoms/09-media/image.twig" %}
+          <span class="ma__related-location__title">{{ page.link.text }}{{ icon('arrow') }}</span>
+          </a>
+        </div>
+      {% endfor %}
+    </div>
+    <div class="ma__more-locations__items">
+      <h{{ headingLevel ? headingLevel : 3 }}>More Locations</h{{ headingLevel ? headingLevel : 3 }}> 
+      {% set linkList = relatedLocations.linkList %}
+      {% include "@organisms/by-author/link-list.twig" %}
+    </div>
+  </div>
+</section>

patternlab/styleguide/source/_patterns/03-organisms/by-author/related-locations~no-related.json

@@ -0,0 +1,24 @@
+{
+  "relatedLocations": {
+    "customTitle": true,
+    "titleContext": "",
+    "pages": [],
+    "linkList": {
+      "stacked": true,
+      "links": [
+        {
+          "href": "#",
+          "text": "Related Location #1"
+        },
+        {
+          "href": "#",
+          "text": "Related Location #2"
+        },
+        {
+          "href": "#",
+          "text": "Related Location #3"
+        }
+      ]
+    }
+  }
+}

patternlab/styleguide/source/_patterns/03-organisms/by-author/related-locations~two-related.json

@@ -0,0 +1,51 @@
+{
+  "relatedLocations": {
+    "customTitle": true,
+    "titleContext": "",
+    "pages": [
+      {
+        "image": {
+          "alt": "Place Holder Image",
+          "src": "../../assets/images/placeholder/230x130.png",
+          "height": "130",
+          "width": "230"
+        },
+        "link": {
+          "href": "#",
+          "text": "Ashuwillticook Rail Trail ",
+          "info": ""
+        }
+      },
+      {
+        "image": {
+          "alt": "Place Holder Image",
+          "src": "../../assets/images/placeholder/230x130.png",
+          "height": "130",
+          "width": "230"
+        },
+        "link": {
+          "href": "#",
+          "text": "October Mountain State Forest ",
+          "info": ""
+        }
+      }
+    ],
+    "linkList": {
+      "stacked": true,
+      "links": [
+        {
+          "href": "#",
+          "text": "Related Location #1"
+        },
+        {
+          "href": "#",
+          "text": "Related Location #2"
+        },
+        {
+          "href": "#",
+          "text": "Related Location #3"
+        }
+      ]
+    }
+  }
+}