Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DP-17404 relationship indicator change2 #938

Merged
Merged
Show file tree
Hide file tree
Changes from 76 commits
Commits
Show all changes
77 commits
Select commit Hold shift + click to select a range
85680e5
relationship indicator changes from DP-17138
ygannett Jan 27, 2020
d484ebe
change the label for the secondary set of the relationship indicator
ygannett Jan 27, 2020
6787923
adjust the width of each set and spacing
ygannett Jan 27, 2020
6c76331
add changelog for DP-17150
ygannett Jan 27, 2020
0c3a912
add pr# to the changelog
ygannett Jan 27, 2020
80b565b
Merge branch 'develop' into patternlab/DP-17150_relationship-indicator
ygannett Jan 28, 2020
09b2667
update the secondary label of the relationship indicator
ygannett Jan 28, 2020
f897099
update backstop reference screenshots
ygannett Jan 28, 2020
b02efe5
Merge branch 'patternlab/DP-17150_relationship-indicator' of github.c…
ygannett Jan 28, 2020
9cdb792
remove unrelated changes
ygannett Jan 28, 2020
d0b4d28
Merge branch 'develop' into patternlab/DP-17150_relationship-indicator
ygannett Jan 28, 2020
185ed8f
correcct markup of relationshipIndicators.secondary button wrappter
ygannett Feb 3, 2020
e36bb7a
fix keyboard trap with the expanded more button
ygannett Feb 3, 2020
f174d06
Merge branch 'patternlab/DP-17150_relationship-indicator' of github.c…
ygannett Feb 3, 2020
1de8877
Merge branch 'develop' into patternlab/DP-17150_relationship-indicator
ygannett Feb 6, 2020
12b3320
Merge branch 'develop' into patternlab/DP-17150_relationship-indicator
ygannett Feb 6, 2020
b6f7d0c
Merge branch 'develop' into patternlab/DP-17150_relationship-indicator
ygannett Feb 7, 2020
1b474fa
fix the relationship indicator content
ygannett Feb 7, 2020
8c02aca
Merge branch 'patternlab/DP-17150_relationship-indicator' of github.c…
ygannett Feb 7, 2020
9d36d71
Merge branch 'develop' into patternlab/DP-17150_relationship-indicator
ygannett Feb 7, 2020
dd8a474
updating reference screenshots
ygannett Feb 7, 2020
b8ae50e
Merge branch 'patternlab/DP-17150_relationship-indicator' of github.c…
ygannett Feb 7, 2020
44265e4
Merge branch 'develop' into patternlab/DP-17150_relationship-indicator
ygannett Feb 7, 2020
06c320f
Merge branch 'develop' into patternlab/DP-17150_relationship-indicator
ygannett Feb 7, 2020
4438101
Merge branch 'patternlab/DP-17150_relationship-indicator' of github.c…
ygannett Feb 7, 2020
bce6d6c
add 'go to next item' commands for screen readers
ygannett Feb 7, 2020
4425256
merge wrapped-link into relationship-indicators
ygannett Feb 10, 2020
599f24a
remove the focus order feature to replace it with CSS
ygannett Feb 10, 2020
d5e8aa6
merge wrapped-link into the template and adjust the loop to render th…
ygannett Feb 10, 2020
36bc572
set the flex box order to the button for logical focus order when the…
ygannett Feb 10, 2020
3f81fef
Merge branch 'develop' into patternlab/DP-17150_relationship-indicator
ygannett Feb 11, 2020
07eab9c
Merge branch 'develop' into patternlab/DP-17150_relationship-indicator
ygannett Feb 11, 2020
42a9a93
move the table of content overlay section to below the relationship i…
ygannett Feb 12, 2020
875df85
test edit
ygannett Feb 12, 2020
4e83363
match the markup with Drupal
ygannett Feb 12, 2020
d1fdcb7
test edit
ygannett Feb 12, 2020
03078b6
spacing test edit
ygannett Feb 13, 2020
f2d6832
remove test code
ygannett Feb 13, 2020
331969c
match spacing with prod version
ygannett Feb 13, 2020
5f12140
put back missing mobileNav.js
ygannett Feb 13, 2020
27a403c
Merge branch 'develop' into patternlab/DP-17150_relationship-indicator
ygannett Feb 13, 2020
d3121e4
add changelog for DP-17404
ygannett Feb 13, 2020
47c6a7a
Merge branch 'patternlab/DP-17150_relationship-indicator' into patter…
ygannett Feb 13, 2020
d0869eb
remove padding top from breadkpoint 911px min
ygannett Feb 13, 2020
8aa2423
add PR number to changelog
ygannett Feb 13, 2020
1bf176a
update backstop reference screenshots
ygannett Feb 19, 2020
2ad8485
update reference screenshots
ygannett Feb 19, 2020
acb1bdf
adjust spacing and clean up spacing styles
ygannett Feb 19, 2020
8b6be95
adjust specificity in css
ygannett Feb 19, 2020
ecd14ae
decrease bottom margin of terms and button
ygannett Feb 26, 2020
63dff82
test edit
ygannett Apr 8, 2020
2a36a79
adjustment for drupal
ygannett Apr 8, 2020
adfbba7
update json files
ygannett Apr 8, 2020
ace61c5
Updating reference screenshots
ygannett Apr 9, 2020
6ea0a70
adjust bottom margins
ygannett May 27, 2020
b0064e8
add condition to check if data exists.
ygannett May 29, 2020
f66536f
fix typo
ygannett May 29, 2020
ecdc0ea
correct tag for label
ygannett Jun 1, 2020
d57b7e3
replace taxonomy terms output format with relationship indicator
ygannett Jun 1, 2020
0f6c1ac
modified display conditions
ygannett Jun 1, 2020
146bba2
comment out existing taxonomyTerms output
ygannett Jun 1, 2020
2caa345
adjust a display condition of .ma__page-header__tags content
ygannett Jun 2, 2020
56b2840
Update backstop reference screenshots
ygannett Jun 2, 2020
429bdd9
adjust label bottom margin
ygannett Jun 2, 2020
350c0a2
Resolve merge conflicts.
ygannett Jun 4, 2020
fd88cd1
Updating reference screenshots
ygannett Jun 5, 2020
053fc18
content clean up with resolving merge conflicts
ygannett Jun 5, 2020
b5de775
fix lint errors
ygannett Jun 5, 2020
5962b55
lint fix 2
ygannett Jun 5, 2020
b2c0c86
expand focus indicator border line on .ma__relationship-indicators bu…
ygannett Jun 8, 2020
fb8a268
adjust the condition to add class for RI unit
ygannett Jun 12, 2020
3cfc168
remove bottom border from relationship indicator in topic page to mat…
ygannett Jun 12, 2020
6cfc900
Updating reference screenshots
ygannett Jun 12, 2020
24cc43a
adjust padding top in the screen width less than 480px to 20px
ygannett Jun 15, 2020
6ff28bb
adjust space between the relationship indicator and the banner in the…
ygannett Jun 16, 2020
6f821af
Update reference screenshots for mobile displays
ygannett Jun 16, 2020
f308f43
remove unnecessary file
ygannett Jun 18, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
401 changes: 224 additions & 177 deletions assets/scss/02-molecules/_relationship-indicators.scss

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions changelogs/DP-17150.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Changed:
- project: Patternlab
component: RelationsipIndicator
description: Change the label of the secondary set. Change the width of each set. Adjust spacing. #911
issue: DP-17150
21 changes: 21 additions & 0 deletions changelogs/DP-17404.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
Changed:
- project: Patternlab
component: RelationshipIndicator
description: Match spacing with the current prod(develop) version. (#938)
issue: DP-17404
impact: Patch
- project: Patternlab
component: RelationsipIndicator
description: Align relationship the first terms in primary and secondary sets. (#938)
issue: DP-17404
impact: Patch
- project: Patternlab
component: BinderInternalPage
description: Position the TOC below the relationship indicator. (#938)
issue: DP-17404
impact: Patch
- project: Patternlab
component: MobileNav
description: Put back missing mobileNav.js in index.js. (#938)
issue: DP-17404
impact: Patch
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions patternlab/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import "./helpers/jQueryExtend.js";
import "./helpers/jQueryExtend_ajaxPattern.js";
import ajaxPattern from "./modules/ajaxPattern.js";
import ajaxPatternOverride from "./modules/ajaxPatternOverride.js";
import accordions from "./modules/accordions.js";
import activateBodyTextTruncation from "./modules/activateBodyTextTruncation.js";
import googleMap from "./modules/googleMap.js";
import back2top from "./modules/back2top.js";
import clickable from "./modules/clickable.js";
import contactAccordion from "./modules/contactAccordion.js";
import dropdown from "./modules/dropdown.js";
import emergencyAlerts from "./modules/emergencyAlerts.js";
import eventFilters from "./modules/eventFilters";
import eventListingInteractive from "./modules/eventListingInteractive";
import feedbackForm from "./modules/feedbackForm.js";
import footnote from "./modules/footnote.js";
import formValidation from "./modules/formValidation.js";
import headerTags from "./modules/headerTags.js";
import hideAlert from "./modules/hideAlert.js";
import inlineOverlay from "./modules/inlineOverlay.js";
import imageFill from "./modules/imageFill.js";
import inpageAlert from "./modules/inpageAlert.js";
import keywordSearch from "./modules/keywordSearch.js";
import linkListToggle from "./modules/linkListToggle.js";
import locationListing from "./modules/locationListing.js";
import locationFilters from "./modules/locationFilters.js";
import mainNav from "./modules/mainNav.js";
import orgSelector from "./modules/orgSelector.js";
import organizationNavigation from "./modules/organizationNavigation.js";
import pagination from "./modules/pagination.js";
import pikaday from "./modules/pikaday.js";
import preventHorizontalListWidows from "./modules/preventHorizontalListWidows.js";
// `richText` and `stickTOC` are needed above offsets.
import stickyTOC from "./modules/stickyTOC.js";
import relatedOrgsAndTopics from "./modules/relatedOrgsAndTopics.js";
import responsiveTable from "./modules/responsiveTable.js";
import responsiveVideo from "./modules/responsiveVideo.js";
import resultsHeading from "./modules/resultsHeading.js";
import scrollAnchors from "./modules/scrollAnchors.js";
import teaserListingGroup from "./modules/teaserListingGroup";
import truncateTitle from "./modules/truncateTitle.js";
import formInputs from "./modules/formInputs.js";
import utilNav from "./modules/utilNav.js";

This file was deleted.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"itemLink": {
"class": "",
"title": "Wrapped Link Title",
"href": "#"
}
}
17 changes: 17 additions & 0 deletions patternlab/styleguide/source/_patterns/01-atoms/item-link.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
### Description
This is necessary for the relationship indicator to be processed in Drupal. This template is not used for any other components.

### Status
* Stable as of 5.0.0

### Variables
~~~
itemLink {
class:
type: string / optional
title:
type: string / required
href:
type: string / required
}
~~~
12 changes: 12 additions & 0 deletions patternlab/styleguide/source/_patterns/01-atoms/item-link.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<li class="ma__relationship-indicators--term js-term {{ itemLink.class }}">
<a href="{{ itemLink.href }}">{{ itemLink.title }}</a>
</li>

{# Add the button after the first item as the second item in the list for accessibility purpose. Managing focus order with JS doesn't work in VoiceOver. #}
{% if loop.first %}
<li class="ma__relationship-indicators__expand-indicators">
<button type="button" class="js-relationship-indicator-button" aria-label="show more" aria-pressed="false">
show <span class="tag-count"></span> <span class="tag-state">more</span>
</button>
</li>
{% endif %}
Original file line number Diff line number Diff line change
@@ -1,46 +1,47 @@
{
"relationshipIndicators": {
"pageTitle": "Unemployment Benefits",
"primary": {
"position": "primary",
"label": "offered by",
"tags": [{
"class": "ma__relationship-indicators--term",
"href": "#",
"title": "Department of Conservation and Recreation"
},{
"class": "ma__relationship-indicators--term",
"href": "#",
"title": "Other agency or organization"
}]
},
"secondary": {
"position": "",
"label": "related to",
"label": "part of",
"tags": [{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Snowmobile in the Parks"
},{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Cross-Country Skiing"
},{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Accessible Hiking"
},{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Scenic Viewing Areas"
},{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Hunting"
},{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Biking"
}]
},
"secondary": {
"position": "",
"label": "offered by",
"tags": [{
"class": "",
"href": "#",
"title": "Department of Conservation and Recreation"
},{
"class": "",
"href": "#",
"title": "Other agency or organization"
}]
}
}
}
}
Original file line number Diff line number Diff line change
@@ -1,42 +1,38 @@
<div class="ma__relationship-indicators">
<div class="ma__relationship-indicators--section primary{% if relationshipIndicators.secondary is empty %} single{% endif %}">
<span class="ma__relationship-indicators--label">
{{ relationshipIndicators.primary.label }}
</span>
<div class="ma__relationship-indicators--terms">
{% block primaryRelationship %}
{% for item in relationshipIndicators.primary.tags %}

{% set wrappedLink = item %}
{% include "@atoms/11-text/wrapped-link.twig" %}

{% endfor %}
{% endblock %}
<button type="button" class="js-relationship-indicator-button">
show <span class="tag-count"></span> <span class="tag-state">more</span
</button>
{% if relationshipIndicators.primary or relationshipIndicators.secondary %}
<div class="ma__relationship-indicators">
{% if relationshipIndicators.primary %}
<div class="ma__relationship-indicators--section primary{{ relationshipIndicators.secondary ? '' : ' single' }}">
<span class="ma__relationship-indicators--label" id="primary">
<span class="ma__visually-hidden">This page, {{ relationshipIndicators.pageTitle }}, is </span>
{{ relationshipIndicators.primary.label }}
</span>
<ul class="ma__relationship-indicators--terms" aria-labelledby="primary">
{% block primaryRelationship %}
{% for item in relationshipIndicators.primary.tags %}
{% set itemLink = item %}
{% include "@atoms/item-link.twig" %}
{% endfor %}
{% endblock %}
</ul>
</div>
</div>
{% endif %}

{% if relationshipIndicators.secondary is not empty %}
<div class="ma__relationship-indicators--section secondary">
<span class="ma__relationship-indicators--label">
<div class="ma__relationship-indicators--section {{ relationshipIndicators.primary ? 'secondary' : 'single' }}">
<span class="ma__relationship-indicators--label" id="secondary">
<span class="ma__visually-hidden">This page, {{ relationshipIndicators.pageTitle }}, is </span>
{{ relationshipIndicators.secondary.label }}
</span>
</span>
<div class="ma__relationship-indicators--terms">
<ul class="ma__relationship-indicators--terms" aria-labelledby="secondary">
{% block secondaryRelationship %}
{% for item in relationshipIndicators.secondary.tags %}

{% set wrappedLink = item %}
{% include "@atoms/11-text/wrapped-link.twig" %}

{% endfor %}
{% for item in relationshipIndicators.secondary.tags %}
{% set itemLink = item %}
{% include "@atoms/item-link.twig" %}
{% endfor %}
{% endblock %}
<button type="button" class="js-relationship-indicator-button">
show <span class="tag-count"></span> <span class="tag-state">more</span>
</button>
</div>
</ul>
</div>
{% endif %}
</div>
</div>
{% endif %}
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,40 @@

{% set prefix = pageHeader.category|default(pageHeader.prefix) %}

{# Replace page header tag presentation with relatinship indicator. #}
{% if pageHeader.headerTags.taxonomyTerms %}
{% embed "@molecules/relationship-indicators.twig" with {
"relationshipIndicators": {
"pageTitle": pageHeader.title,
"primary": {
"label": "part of"
},
"secondary": null
},
} %}
{% block primaryRelationship %}
{% for item in pageHeader.headerTags.taxonomyTerms %}
{% include "@atoms/item-link.twig" with {
"itemLink": {
"href": item.href,
"title": item.text
}
} %}
{% endfor %}
{% endblock %}
{% endembed %}
{% endif %}

<section class="ma__page-header{{ widgetsClass }}">
{% if pageHeader.headerTags.taxonomyTerms or pageHeader.socialLinks.items %}
{% if pageHeader.socialLinks.items %}
{# {% if pageHeader.headerTags.taxonomyTerms or pageHeader.socialLinks.items %} #}
<div class="ma__page-header__tags">
{% if pageHeader.headerTags.taxonomyTerms %}
{# REMOVE: replaced with relationship indicator. #}
{# {% if pageHeader.headerTags.taxonomyTerms %}
{% set headerTags = pageHeader.headerTags %}
{% include "@molecules/header-tags.twig" %}
{% endif %}
{% endif %} #}
{# END: REMOVE #}
{% if pageHeader.socialLinks.items %}
{% set socialLinks = pageHeader.socialLinks %}
{% include "@molecules/social-links.twig" %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,16 @@
}
},
"relationshipIndicators": {
"pageTitle": "Rules of Criminal Procedure",
"primary": {
"position": "primary",
"label": "offered by",
"tags": [{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Department of Conservation and Recreation"
},{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Other agency or organization"
}]
Expand All @@ -41,27 +42,27 @@
"position": "",
"label": "related to",
"tags": [{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Snowmobile in the Parks"
},{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Cross-Country Skiing"
},{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Accessible Hiking"
},{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Scenic Viewing Areas"
},{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Hunting"
},{
"class": "ma__relationship-indicators--term",
"class": "",
"href": "#",
"title": "Biking"
}]
Expand Down
Loading