From 7cd5c9394aa4c0e31a5d8fd9f912010884acec0d Mon Sep 17 00:00:00 2001 From: a-username Date: Thu, 16 May 2019 12:56:34 -0400 Subject: [PATCH 1/9] DP-13951 add more links to suggested pages template --- .../03-organisms/by-author/suggested-pages.twig | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig index 08c0ae6978..8747158104 100644 --- a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig +++ b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig @@ -5,10 +5,10 @@
{% if suggestedPages.view == "guide" %} {% for page in suggestedPages.pages %} - {% set illustratedLink = { - "href": page.link.href, - "text": page.link.text, - "info": page.link.info, + {% set illustratedLink = { + "href": page.link.href, + "text": page.link.text, + "info": page.link.info, "image": page.image.src ? : page.image } %}
{% include "@molecules/illustrated-link.twig" %} @@ -27,6 +27,10 @@ {% endfor %} {% endif %}
+ {% if suggestedPages.moreLinks %} + {% set linkList = suggestedPages.moreLinks %} + {% include "@organisms/by-author/link-list.twig" %} + {% endif %} {% if suggestedPages.more %}
{% set link = suggestedPages.more %} From b71d41bfbe199a252f898073b92291703d761f2c Mon Sep 17 00:00:00 2001 From: a-username Date: Tue, 21 May 2019 11:46:52 -0400 Subject: [PATCH 2/9] Add changelog link list to pattern json --- .../scss/03-organisms/_suggested-pages.scss | 4 ++++ changelogs/DP-13951.md | 3 +++ .../by-author/suggested-pages.json | 24 +++++++++++++++---- .../03-organisms/by-author/suggested-pages.md | 13 ++++++---- 4 files changed, 36 insertions(+), 8 deletions(-) create mode 100644 changelogs/DP-13951.md diff --git a/assets/scss/03-organisms/_suggested-pages.scss b/assets/scss/03-organisms/_suggested-pages.scss index a18a99d10c..78c44bdb35 100644 --- a/assets/scss/03-organisms/_suggested-pages.scss +++ b/assets/scss/03-organisms/_suggested-pages.scss @@ -46,6 +46,10 @@ } } + .ma__link-list { + text-align: left; + } + &__item--figure { display: block; margin: 0 0 35px 0; diff --git a/changelogs/DP-13951.md b/changelogs/DP-13951.md new file mode 100644 index 0000000000..d1bc5ada98 --- /dev/null +++ b/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. diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.json b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.json index 5489827486..a14f0b5425 100644 --- a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.json +++ b/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", diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.md b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.md index 50e4da5fa0..8c2d0180b8 100644 --- a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.md +++ b/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 } From 98edb1f3c0c28cceca8e2b2923640b031100085c Mon Sep 17 00:00:00 2001 From: a-username Date: Thu, 30 May 2019 09:30:12 -0400 Subject: [PATCH 3/9] Fix styling for suggested pages --- .../scss/03-organisms/_suggested-pages.scss | 26 ++++--- .../by-author/suggested-pages.twig | 70 ++++++++++--------- 2 files changed, 53 insertions(+), 43 deletions(-) diff --git a/assets/scss/03-organisms/_suggested-pages.scss b/assets/scss/03-organisms/_suggested-pages.scss index 78c44bdb35..82e1a64065 100644 --- a/assets/scss/03-organisms/_suggested-pages.scss +++ b/assets/scss/03-organisms/_suggested-pages.scss @@ -1,11 +1,12 @@ .ma__suggested-pages { - text-align: center; - &__container { @include ma-container; border-bottom: 2px solid; padding-bottom: 50px; + @media ($bp-x-large-min){ + width: calc(100% - 210px); + } } &__title { @@ -13,11 +14,16 @@ 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; } } @@ -25,7 +31,6 @@ @include clearfix; display: flex; flex-wrap: wrap; - justify-content: center; } &__item { @@ -73,10 +78,13 @@ } @media ($bp-large-min) { - padding: 0 45px; width: 25%; - & + & { - border-left: 1px solid; + padding: 0 70px 0 0; + margin-right: 70px; + border-right: 1px solid $c-bd-divider; + &:nth-last-child(1) { + margin-right: 0; + border-right: none; } } } diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig index 8747158104..9e51c0da60 100644 --- a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig +++ b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig @@ -1,41 +1,43 @@
-

{{ suggestedPages.title }}{% if suggestedPages.titleContext %}{% endif %}

-
- {% 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 } %} -
- {% include "@molecules/illustrated-link.twig" %} -
- {% endfor %} - {% else %} - {% for page in suggestedPages.pages %} -
- - {% set image = page.image.src ? page.image : { "alt": page.altTag, "src": page.image } %} - {% include "@atoms/09-media/image.twig" %} - - {% set decorativeLink = page.link %} - {% include "@atoms/decorative-link.twig" %} -
- {% endfor %} +
+

{{ suggestedPages.title }}{% if suggestedPages.titleContext %}{% endif %}

+
+ {% 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 } %} +
+ {% include "@molecules/illustrated-link.twig" %} +
+ {% endfor %} + {% else %} + {% for page in suggestedPages.pages|slice(0,3) %} +
+ + {% set image = page.image.src ? page.image : { "alt": page.altTag, "src": page.image } %} + {% include "@atoms/09-media/image.twig" %} + + {% set decorativeLink = page.link %} + {% include "@atoms/decorative-link.twig" %} +
+ {% endfor %} + {% endif %} +
+ {% if suggestedPages.moreLinks %} + {% set linkList = suggestedPages.moreLinks %} + {% include "@organisms/by-author/link-list.twig" %} + {% endif %} + {% if suggestedPages.more %} +
+ {% set link = suggestedPages.more %} + {% include "@atoms/11-text/link.twig" %} +
{% endif %}
- {% if suggestedPages.moreLinks %} - {% set linkList = suggestedPages.moreLinks %} - {% include "@organisms/by-author/link-list.twig" %} - {% endif %} - {% if suggestedPages.more %} -
- {% set link = suggestedPages.more %} - {% include "@atoms/11-text/link.twig" %} -
- {% endif %}
From 8a182db7313e19b2f3a1bc3db377ec1ab0f20ee3 Mon Sep 17 00:00:00 2001 From: a-username Date: Mon, 17 Jun 2019 10:25:20 -0400 Subject: [PATCH 4/9] Fix image resize issues and guide page regressions --- .../scss/03-organisms/_suggested-pages.scss | 43 +++++++++++-------- .../by-author/suggested-pages.twig | 6 ++- 2 files changed, 30 insertions(+), 19 deletions(-) diff --git a/assets/scss/03-organisms/_suggested-pages.scss b/assets/scss/03-organisms/_suggested-pages.scss index 82e1a64065..df7587aa47 100644 --- a/assets/scss/03-organisms/_suggested-pages.scss +++ b/assets/scss/03-organisms/_suggested-pages.scss @@ -1,12 +1,23 @@ .ma__suggested-pages { + &.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; border-bottom: 2px solid; padding-bottom: 50px; - @media ($bp-x-large-min){ - width: calc(100% - 210px); - } } &__title { @@ -39,7 +50,6 @@ } &__item--guide { - @media (min-width: 750px) and ($bp-x-large-max) { @include span-columns(4 of 8); @include omega(2n); @@ -58,7 +68,8 @@ &__item--figure { display: block; margin: 0 0 35px 0; - + float: left; + padding: 0 1.6% 0 0; a { height: 100%; width: 100%; @@ -71,24 +82,20 @@ margin-top: 10px; } - @media ($bp-x-small-min) { - float: left; - padding: 0 10px; - width: 50%; - } - - @media ($bp-large-min) { - width: 25%; - padding: 0 70px 0 0; - margin-right: 70px; + @media ($bp-x-large-min) { + @include span-columns(4); + @include omega(3n); border-right: 1px solid $c-bd-divider; &:nth-last-child(1) { - margin-right: 0; - border-right: none; + border-right: 0; } } - } + @media (min-width: 750px) and ($bp-x-large-max) { + @include span-columns(4 of 8); + @include omega(2n); + } + } } //theme diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig index 9e51c0da60..3bdfd69c5d 100644 --- a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig +++ b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig @@ -1,5 +1,9 @@ +{% set pageType = '' %} +{% if suggestedPages.view == 'guide' %} + {% set pageType = 'guide' %} +{% endif %} -
+

{{ suggestedPages.title }}{% if suggestedPages.titleContext %}{% endif %}

From 766fab03080f4145db2036426b8cdd0a15002274 Mon Sep 17 00:00:00 2001 From: a-username Date: Wed, 19 Jun 2019 15:38:10 -0400 Subject: [PATCH 5/9] fix spacing issues --- .../scss/03-organisms/_suggested-pages.scss | 30 ++++++++++++++----- .../by-author/suggested-pages.twig | 18 ++++++----- 2 files changed, 32 insertions(+), 16 deletions(-) diff --git a/assets/scss/03-organisms/_suggested-pages.scss b/assets/scss/03-organisms/_suggested-pages.scss index df7587aa47..3eae41f5ad 100644 --- a/assets/scss/03-organisms/_suggested-pages.scss +++ b/assets/scss/03-organisms/_suggested-pages.scss @@ -65,11 +65,7 @@ text-align: left; } - &__item--figure { - display: block; - margin: 0 0 35px 0; - float: left; - padding: 0 1.6% 0 0; + &__item { a { height: 100%; width: 100%; @@ -83,11 +79,29 @@ } @media ($bp-x-large-min) { - @include span-columns(4); - @include omega(3n); + @include span-columns(4 of 13); + @include omega(2n); + margin-right: 0; border-right: 1px solid $c-bd-divider; - &:nth-last-child(1) { + &--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--figure { + margin-left: 0; + } + } + &:nth-last-child(3n+1) { border-right: 0; + .ma__suggested-pages__item--figure { + margin-right: 0; + } } } diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig index 3bdfd69c5d..1717400a77 100644 --- a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig +++ b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig @@ -21,14 +21,16 @@ {% endfor %} {% else %} {% for page in suggestedPages.pages|slice(0,3) %} -
- - {% set image = page.image.src ? page.image : { "alt": page.altTag, "src": page.image } %} - {% include "@atoms/09-media/image.twig" %} - - {% set decorativeLink = page.link %} - {% include "@atoms/decorative-link.twig" %} -
+
+
+ + {% set image = page.image.src ? page.image : { "alt": page.altTag, "src": page.image } %} + {% include "@atoms/09-media/image.twig" %} + + {% set decorativeLink = page.link %} + {% include "@atoms/decorative-link.twig" %} +
+
{% endfor %} {% endif %}
From b3b5ca77c2bb3cb16199841194055585f421d5b3 Mon Sep 17 00:00:00 2001 From: a-username Date: Thu, 20 Jun 2019 09:41:45 -0400 Subject: [PATCH 6/9] Resolve backstop issue with lineheight on suggested guide pages --- .../scss/03-organisms/_suggested-pages.scss | 61 ++++++++++--------- .../by-author/suggested-pages.twig | 4 +- 2 files changed, 33 insertions(+), 32 deletions(-) diff --git a/assets/scss/03-organisms/_suggested-pages.scss b/assets/scss/03-organisms/_suggested-pages.scss index 3eae41f5ad..30357177ef 100644 --- a/assets/scss/03-organisms/_suggested-pages.scss +++ b/assets/scss/03-organisms/_suggested-pages.scss @@ -70,44 +70,45 @@ height: 100%; width: 100%; } - - .ma__decorative-link { - display: block; - font-size: 1.625rem; - line-height: 1.2; - margin-top: 10px; - } - - @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; + &--suggested { + .ma__decorative-link { + display: block; + font-size: 1.625rem; + line-height: 1.2; + margin-top: 10px; } - &:nth-child(2):not(:nth-last-child(3n+1)) { - @include span-columns(5 of 13); + + @media ($bp-x-large-min) { + @include span-columns(4 of 13); @include omega(2n); margin-right: 0; - } - &:nth-child(1) { - .ma__suggested-pages__item--figure { - margin-left: 0; + border-right: 1px solid $c-bd-divider; + &-figure { + max-width: 230px; + margin: auto; } - } - &:nth-last-child(3n+1) { - border-right: 0; - .ma__suggested-pages__item--figure { + &: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--figure { + margin-left: 0; + } + } + &:nth-last-child(3n+1) { + border-right: 0; + .ma__suggested-pages__item--figure { + margin-right: 0; + } + } } - } - @media (min-width: 750px) and ($bp-x-large-max) { - @include span-columns(4 of 8); - @include omega(2n); + @media (min-width: 750px) and ($bp-x-large-max) { + @include span-columns(4 of 8); + @include omega(2n); + } } } } diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig index 1717400a77..b10a272153 100644 --- a/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig +++ b/patternlab/styleguide/source/_patterns/03-organisms/by-author/suggested-pages.twig @@ -21,8 +21,8 @@ {% endfor %} {% else %} {% for page in suggestedPages.pages|slice(0,3) %} -
-
+
+
{% set image = page.image.src ? page.image : { "alt": page.altTag, "src": page.image } %} {% include "@atoms/09-media/image.twig" %} From 271379a0aca3d13da64c54f8d4ef69b968c48e07 Mon Sep 17 00:00:00 2001 From: a-username Date: Thu, 20 Jun 2019 10:10:29 -0400 Subject: [PATCH 7/9] fix margins on suggested page images --- assets/scss/03-organisms/_suggested-pages.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/scss/03-organisms/_suggested-pages.scss b/assets/scss/03-organisms/_suggested-pages.scss index 30357177ef..71fff1ce99 100644 --- a/assets/scss/03-organisms/_suggested-pages.scss +++ b/assets/scss/03-organisms/_suggested-pages.scss @@ -93,13 +93,13 @@ margin-right: 0; } &:nth-child(1) { - .ma__suggested-pages__item--figure { + .ma__suggested-pages__item--suggested-figure { margin-left: 0; } } &:nth-last-child(3n+1) { border-right: 0; - .ma__suggested-pages__item--figure { + .ma__suggested-pages__item--suggested-figure { margin-right: 0; } } From 96dffb865a5c13ef859f9a3212e552e079667af8 Mon Sep 17 00:00:00 2001 From: a-username Date: Fri, 21 Jun 2019 14:14:00 -0400 Subject: [PATCH 8/9] Add margin to svg on location template --- assets/scss/03-organisms/_related-locations.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/assets/scss/03-organisms/_related-locations.scss b/assets/scss/03-organisms/_related-locations.scss index c569821d07..e01bbb32f2 100644 --- a/assets/scss/03-organisms/_related-locations.scss +++ b/assets/scss/03-organisms/_related-locations.scss @@ -17,7 +17,7 @@ margin-left: 210px; } } - + } &__title { @@ -28,7 +28,7 @@ } &__items { - + @media ($bp-small-min) { display: flex; justify-content: space-between; @@ -53,13 +53,13 @@ @media ($bp-large-extended-min) { width: 39%; border-left: 1px solid $c-gray-light; - + a { margin: 0 auto; } } - + } &:nth-child(3) { @@ -89,14 +89,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; From 6d34c5fb5e784f0432b9a38fa5644e0430d6c9e0 Mon Sep 17 00:00:00 2001 From: Melissa Rossi Date: Mon, 24 Jun 2019 15:01:24 -0400 Subject: [PATCH 9/9] fix a spacing scss --- assets/scss/03-organisms/_related-locations.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/assets/scss/03-organisms/_related-locations.scss b/assets/scss/03-organisms/_related-locations.scss index e01bbb32f2..c049836db0 100644 --- a/assets/scss/03-organisms/_related-locations.scss +++ b/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) {