From 5caf4741c1df09f5bec643f27599501cd4227942 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Fri, 30 Jun 2023 14:17:55 -0400 Subject: [PATCH 01/33] restructure org nav data and template --- .../by-template/organization-navigation.json | 285 ++---------------- .../by-template/organization-navigation.twig | 64 +--- 2 files changed, 23 insertions(+), 326 deletions(-) diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.json b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.json index 2ce381495d..04d1aec88c 100644 --- a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.json +++ b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.json @@ -3,281 +3,32 @@ "orgNavTitle": "Executive Office of Energy and Environmental Affairs", "orgNavAbbrev": "EOEEA", "orgId": "6676", - "orgSearch": true, + "orgSearch": false, "orgNav": [ { - "section": "i-want-to", - "title": "I want to...", - "subNav": { - "findService": { - "linkList": { - "compHeading": { - "title": "Find a service or task", - "sub": "true" - }, - "description": null, - "stacked": false, - "hideBullets": true, - "links": [ - { - "href": "#", - "text": "Lorem ipsum dolor sit amet.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit amet, consectetur.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit.", - "info": "" - } - ], - "more": { - "href": "#", - "text": "See all services & tasks", - "info": "See all of services & tasks" - } - } - }, - "learnAbout": { - "linkList": { - "compHeading": { - "title": "Learn more about...", - "sub": "true" - }, - "description": null, - "stacked": false, - "hideBullets": true, - "links": [ - { - "href": "#", - "text": "Lorem ipsum dolor sit amet.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit amet, consectetur.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit.", - "info": "" - } - ] - } - }, - "login": { - "href": "#", - "text": "MassFishHunt", - "info": "" - } - } + "name": "What would you like to do", + "text": "I want to ...", + "id": "actions" }, { - "section": "about", - "title": "About", - "subNav": { - "linkList": { - "description": null, - "stacked": true, - "hideBullets": true, - "links": [ - { - "href": "#", - "text": "Lorem ipsum dolor sit amet.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit amet, consectetur.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor", - "info": "" - } - ] - } - } + "name": "About the organzation", + "text": "About", + "id": "about" }, { - "section": "contact-us", - "title": "Contact us", - "subNav": { - "orgMenuContactRow": { - "compHeading": { - "title": "Division of Fisheries and Wildlife", - "sub": "", - "color": "", - "id": "contact us", - "centered": "" - }, - "hasManyAdditional": true, - "additionalContacts": [ - { - "icon": "marker", - "name": "Address", - "items": [ - { - "type": "address", - "label": "", - "address": "1 Rabbit Hill Rd, Westborough, MA 01581", - "link": { - "href": "https://www.google.com/maps/place/555+Park+Dr,+Boston,+MA+02215", - "text": "directions", - "info": "" - }, - "details": "" - } - ] - }, - { - "items": [ - { - "type": "seeAllLink", - "link": { - "href": "#", - "text": "See All Locations", - "info": "" - }, - "details": "" - } - ] - }, - { - "icon": "phone", - "name": "Phone", - "items": [ - { - "type": "phone", - "property": "", - "label": "Main:", - "link": { - "href": "+14134994262", - "text": "(413) 499-4262", - "info": "", - "property": "" - }, - "details": "8 a.m. - 4:30 p.m., M - F" - } - ] - }, - { - "icon": "fax-icon", - "name": "Fax", - "items": [ - { - "type": "fax", - "property": "", - "label": "Main:", - "link": { - "href": "+14134994262", - "text": "(413) 499-4262", - "info": "", - "property": "" - }, - "details": "" - } - ] - }, - { - "icon": "laptop", - "name": "Online", - "hidden": "", - "items": [ - { - "type": "email", - "property": "", - "label": "", - "link": { - "href": "email@email.com", - "text": "Mass.Wildlife@state.ma.us", - "info": "", - "property": "" - }, - "details": "" - } - ] - }, - { - "icon": "login", - "name": "Login to...", - "level": "", - "contactName": "", - "items": [ - { - "type": "login", - "link": { - "href": "#", - "text": "MassFishHunt", - "info": "" - }, - "details": "" - } - ] - } - ] - }, - "customItems": { - "findContact": { - "title": "Find a contact", - "icon": "search", - "link": { - "href": "#", - "text": "Staff directory" - } - }, - "newsletter": { - "title": "Get Updates", - "icon": "alert", - "link": { - "href": "#", - "text": "Sign up to receive monthly e-newsletters" - } - }, - "publicRecords": { - "title": "Public records request", - "icon": "lg-scroll", - "link": { - "href": "#", - "text": "Learn more about submitting public records requests" - } - } - } - } + "name": "Events", + "text": "Events", + "id": "events" }, { - "section": "mobileLogin", - "title": "Log in to...", - "subNav": { - "mobileLogin": { - "icon": "icon-login-v2", - "name": "Login to...", - "level": "", - "contactName": "", - "items": [ - { - "type": "login", - "link": { - "href": "#", - "text": "MassFishHunt", - "info": "" - }, - "details": "" - } - ] - } - } + "name": "Recent news & announcements", + "text": "News", + "id": "news" + }, + { + "name": "Locations", + "text": "Locations", + "id": "locations" } ] } diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig index 52e01cc5e2..e9c946a0b6 100644 --- a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig +++ b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig @@ -6,65 +6,11 @@
From 7ed1162c336cacad6a78ffaafdafcb86eeba79e9 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Fri, 30 Jun 2023 15:49:12 -0400 Subject: [PATCH 02/33] cleanup unused js --- .../_patterns/05-pages/organization.json | 285 ++---------------- .../js/modules/organizationNavigation.js | 113 ------- 2 files changed, 18 insertions(+), 380 deletions(-) diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json b/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json index 2874105f7c..307f7ec7c3 100644 --- a/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json +++ b/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json @@ -50,280 +50,31 @@ "orgSearch": true, "orgNav": [ { - "section": "i-want-to", - "title": "I want to...", - "subNav": { - "findService": { - "linkList": { - "compHeading": { - "title": "Find a service or task", - "sub": "true" - }, - "description": null, - "stacked": false, - "hideBullets": true, - "links": [ - { - "href": "#", - "text": "Lorem ipsum dolor sit amet.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit amet, consectetur.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit.", - "info": "" - } - ], - "more": { - "href": "#", - "text": "See all of services & tasks", - "info": "See all of services & tasks" - } - } - }, - "learnAbout": { - "linkList": { - "compHeading": { - "title": "Learn more about...", - "sub": "true" - }, - "description": null, - "stacked": false, - "hideBullets": true, - "links": [ - { - "href": "#", - "text": "Lorem ipsum dolor sit amet.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit amet, consectetur.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit.", - "info": "" - } - ] - } - }, - "login": { - "href": "#", - "text": "MassFishHunt", - "info": "" - } - } + "name": "What would you like to do", + "text": "I want to ...", + "id": "actions" }, { - "section": "about", - "title": "About", - "subNav": { - "linkList": { - "description": null, - "stacked": true, - "hideBullets": true, - "links": [ - { - "href": "#", - "text": "Lorem ipsum dolor sit amet.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit amet, consectetur.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor sit.", - "info": "" - }, - { - "href": "#", - "text": "Lorem ipsum dolor", - "info": "" - } - ] - } - } + "name": "About the organzation", + "text": "About", + "id": "about" }, { - "section": "contact-us", - "title": "Contact us", - "subNav": { - "orgMenuContactRow": { - "compHeading": { - "title": "Division of Fisheries and Wildlife", - "sub": "", - "color": "", - "id": "contact us", - "centered": "" - }, - "hasManyAdditional": false, - "additionalContacts": [ - { - "icon": "marker", - "name": "Address", - "items": [ - { - "type": "address", - "label": "", - "address": "1 Rabbit Hill Rd, Westborough, MA 01581", - "link": { - "href": "https://www.google.com/maps/place/555+Park+Dr,+Boston,+MA+02215", - "text": "directions", - "info": "" - }, - "details": "" - } - ] - }, - { - "items": [ - { - "type": "seeAllLink", - "link": { - "href": "#", - "text": "See all locations", - "info": "" - }, - "details": "" - } - ] - }, - { - "icon": "phone", - "name": "Phone", - "items": [ - { - "type": "phone", - "property": "", - "label": "Main:", - "link": { - "href": "+14134994262", - "text": "(413) 499-4262", - "info": "", - "property": "" - }, - "details": "8 a.m. - 4:30 p.m., M - F" - } - ] - }, - { - "icon": "fax-icon", - "name": "Fax", - "items": [ - { - "type": "fax", - "property": "", - "label": "Main:", - "link": { - "href": "+14134994262", - "text": "(413) 499-4262", - "info": "", - "property": "" - }, - "details": "" - } - ] - }, - { - "icon": "laptop", - "name": "Online", - "hidden": "", - "items": [ - { - "type": "email", - "property": "", - "label": "", - "link": { - "href": "email@email.com", - "text": "Mass.Wildlife@state.ma.us", - "info": "", - "property": "" - }, - "details": "" - } - ] - }, - { - "icon": "icon-login-v2", - "name": "Log in to...", - "level": "", - "contactName": "", - "items": [ - { - "type": "login", - "link": { - "href": "#", - "text": "MassFishHunt", - "info": "" - }, - "details": "" - } - ] - } - ] - }, - "customItems": { - "findContact": { - "title": "Find a contact", - "icon": "search", - "link": { - "href": "#", - "text": "Staff directory" - } - }, - "newsletter": { - "title": "Get Updates", - "icon": "alert", - "link": { - "href": "#", - "text": "Sign up to receive monthly e-newsletters" - } - }, - "publicRecords": { - "title": "Public records request", - "icon": "icon-prr", - "link": { - "href": "#", - "text": "Learn more about submitting public records requests" - } - } - } - } + "name": "Events", + "text": "Events", + "id": "events" }, { - "section": "mobileLogin", - "title": "Log in to...", - "subNav": { - "mobileLogin": { - "icon": "icon-login-v2", - "name": "Log in to...", - "level": "", - "contactName": "", - "items": [ - { - "type": "login", - "link": { - "href": "#", - "text": "MassFishHunt", - "info": "" - }, - "details": "" - } - ] - } - } + "name": "Recent news & announcements", + "text": "News", + "id": "news" + }, + { + "name": "Locations", + "text": "Locations", + "id": "locations" } - ] + ] }, "short_description": { "richText": { diff --git a/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js b/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js index a5ceeafbc9..dbbb084362 100644 --- a/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js +++ b/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js @@ -3,16 +3,8 @@ export default (function (window, document, $, undefined) { $('.ma__organization-navigation').each(function () { // Org Nav Wrapper. const $orgNav = $(this); - const $orgNavItems = $orgNav.find('.ma__organization-navigation__items'); const $menuWrapper = $orgNav.find('.ma__organization-navigation--inner-wrapper'); - // Page wrapper and fillers. - const $pageWrapper = $orgNav.parent().next(); - let $newsLink = $pageWrapper.find('.ma__press-listing'); - let $eventsLink = $pageWrapper.find('.ma__event-listing'); - let $locationsLink = $pageWrapper.find('.ma__mapped-locations'); - let $relatedOrgs = $pageWrapper.find('.ma__our-organizations'); - const feedbackButton = $('body').find('.ma__fixed-feedback-button'); $orgNav.find('svg').each(function () { @@ -28,12 +20,6 @@ export default (function (window, document, $, undefined) { const $orgNavSearchInput = $orgNav.find('#organization-navigation-search'); const $searchToggle = $orgNav.find('.ma__organization-navigation__search .js-search-toggle'); - // Subnav buttons. - let $menuButton = $orgNav.find('.subnav-toggle'); - - // I want to section. - let $sectionButton = $orgNav.find('.ma__org-nav-i-want-to-section .ma__comp-heading'); - // Sticky on scroll. const bannerBottom = $('.ma__page-banner').offset().top + $('.ma__page-banner').height(); const menuHeight = $orgNav.height(); @@ -101,109 +87,10 @@ export default (function (window, document, $, undefined) { $(this).attr('action', searchAction + searchParams); }); - // Open the dropdowns. - $menuButton.each(function () { - let $button = $(this); - let $buttonParent = $button.parent('.has-subnav'); - let $thisMenu = $buttonParent.find('.ma__organization-navigation__subitems'); - let $otherMenus = $('.ma__organization-navigation__subitems').not($thisMenu); - let menuHeight = $menuWrapper.outerHeight(); - - $buttonParent.on('mouseenter mouseleave', function () { - let windowWidth = $(window).width(); - - if (windowWidth > mobileBreak) { - $('.section-toggle').remove(); - $buttonParent.toggleClass('item-open'); - $thisMenu.css('top', menuHeight); - } - else { - return false; - }; - }); - - $button.on('focus', function () { - $thisMenu.find("a[href]").attr("tabindex", -1); - $otherMenus.find("a[href]").attr("tabindex", -1); - - $button.keyup(function (e) { - - $('.item-open').removeClass('item-open'); - - if (e.keyCode == 13 || e.keyCode == 32) { - $('.section-toggle').remove(); - - $thisMenu.find("a[href]").attr("tabindex", 0); - $buttonParent.toggleClass('item-open'); - $thisMenu.css('top', menuHeight); - - $buttonParent.add($thisMenu).on('mouseenter mouseleave', function () { - return false; - }); - } - }); - }); - - $button.on('click', function () { - let windowWidth = $(window).width(); - - if (windowWidth < mobileBreak) { - $buttonParent.toggleClass('item-open'); - let $buttonClone = $button.clone(true); - - // Copy the link as a close button inside the menu section. - if (!$('.section-toggle').length) { - $buttonClone.addClass('section-toggle').prependTo($thisMenu); - } - } - else { - return false; - }; - }); - - }); - $('body').on('click', '.section-toggle', function () { $('.section-toggle').remove(); }); - // Mobile view open the "I want to sections". - $sectionButton.each(function () { - - let $button = $(this); - let $seeAll = $button.parent().find('.ma__link-list__see-all'); - $button.on('click', function () { - let windowWidth = $(window).width(); - if (windowWidth < mobileBreak) { - $button.toggleClass('item-open'); - $button.next('.ma__link-list__container').add($seeAll).toggleClass('item-open'); - } - }); - - }); - - if ($relatedOrgs.length) { - $relatedOrgs.attr('id', 'organizations'); - $orgNavItems.append('
  • Our organizations
    • '); - } - - if ($newsLink.length) { - $newsLink.attr('id', 'news'); - $orgNavItems.append('
  • News
    • '); - } - - if ($eventsLink.length) { - $eventsLink.attr('id', 'events'); - $orgNavItems.append('
  • Events
    • '); - } - - if ($locationsLink.length) { - $locationsLink.attr('id', 'locations'); - $orgNavItems.append('
  • Locations
    • '); - } - - $('.ma__organization-navigation__item.mobileLogin').appendTo($orgNavItems); - $(".internal-link").on('focus', function (e) { $('.item-open').removeClass('item-open'); }); From b599636606e230ac30fe87eb090652ba91b3ca3c Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Wed, 5 Jul 2023 12:42:42 -0400 Subject: [PATCH 03/33] match styles --- .../scss/03-organisms/_organization-navigation-item.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/assets/scss/03-organisms/_organization-navigation-item.scss b/packages/assets/scss/03-organisms/_organization-navigation-item.scss index e8974095fb..396fb9b1ba 100644 --- a/packages/assets/scss/03-organisms/_organization-navigation-item.scss +++ b/packages/assets/scss/03-organisms/_organization-navigation-item.scss @@ -72,8 +72,7 @@ } } - .subnav-toggle, - .internal-link { + a { width: 100%; display: block; text-align: left; From 59817afb1e488fed66b84fb3ee4e6e08ff82b780 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Wed, 5 Jul 2023 12:45:42 -0400 Subject: [PATCH 04/33] cleanup unused --- .../_organization-navigation-item.scss | 49 ------------------- .../js/modules/organizationNavigation.js | 30 ------------ 2 files changed, 79 deletions(-) diff --git a/packages/assets/scss/03-organisms/_organization-navigation-item.scss b/packages/assets/scss/03-organisms/_organization-navigation-item.scss index 396fb9b1ba..1d0e411327 100644 --- a/packages/assets/scss/03-organisms/_organization-navigation-item.scss +++ b/packages/assets/scss/03-organisms/_organization-navigation-item.scss @@ -49,29 +49,6 @@ } } - &.item-open { - - @media ($bp-large-max) { - - .subnav-toggle::before { - content: "back"; - float: right; - padding-left: 10px; - } - - .subnav-toggle::after { - transform: translateY(-30%) rotate(135deg); - transition: 0.5s ease-out; - } - } - - @media ($bp-large-min) { - background-color: $c-white; - transition: 0.5s ease-out; - box-shadow: 0 0.25rem 0.5rem rgba($c-black, 0.25); - } - } - a { width: 100%; display: block; @@ -151,12 +128,6 @@ background-color: $c-white; box-shadow: 0 0.25rem 0.5rem rgba($c-black, 0.25); z-index: 0; - - .item-open & { - max-height: 100vh; - transition: max-height 0.6s ease-in-out; - z-index: $z-dropdown; - } } } @@ -206,19 +177,10 @@ transform: translate(-50%, -50%) rotate(135deg); transition: 0.2s ease-out; } - - &.item-open::before { - transform: translate(-50%, -50%) rotate(90deg); - } } } &-section { - - &.item-open { - display: block; - } - @media ($bp-large-max) { padding-top: 20px; @@ -254,12 +216,6 @@ .ma__link-list__container { display: none; - &.item-open { - display: block; - padding-left: 1.35rem; - border-top: 1px solid $c-gray-light; - } - @media ($bp-large-min) { display: block; } @@ -278,11 +234,6 @@ padding-left: 1.35rem; display: none; - &.item-open { - display: inline-block; - padding-bottom: 0.5rem; - } - @media ($bp-large-min) { display: inline-block; font-weight: $fonts-bold; diff --git a/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js b/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js index dbbb084362..0f0485ba25 100644 --- a/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js +++ b/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js @@ -60,12 +60,6 @@ export default (function (window, document, $, undefined) { stickyOnScroll(); } - - // Close items when closing menu. - $('.item-open').removeClass('item-open'); - // Remove cloned button if present. - $('.section-toggle').remove(); - // Lock body scroll on mobile open/close. $('body').toggleClass('scroll-disabled'); @@ -87,30 +81,6 @@ export default (function (window, document, $, undefined) { $(this).attr('action', searchAction + searchParams); }); - $('body').on('click', '.section-toggle', function () { - $('.section-toggle').remove(); - }); - - $(".internal-link").on('focus', function (e) { - $('.item-open').removeClass('item-open'); - }); - - $(".internal-link").on('click', function (e) { - // Close open menus and reset markup. - $('.menu-open').removeClass('menu-open'); - $('.item-open').removeClass('item-open'); - $('.form-open').removeClass('form-open'); - $('.section-toggle').remove(); - - e.preventDefault(); - let location = $(this).attr('href'); - $('html, body').animate({ scrollTop: $(location).offset().top - 120 }, 1000); - - if (feedbackButton.is(":hidden")) { - feedbackButton.show(); - } - }); - $(window).on("resize", function () { let windowWidth = $(window).width(); let $contactGroups = $orgNav.find('.ma__org-nav-contact-us .ma__contact-group'); From 83af0083957704a51a1c8267327e9a8701cda0e0 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Wed, 5 Jul 2023 12:47:17 -0400 Subject: [PATCH 05/33] change I want to... to Actions & Services --- .../03-organisms/by-template/organization-navigation.json | 2 +- .../styleguide/source/_patterns/05-pages/organization.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.json b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.json index 04d1aec88c..f107ea952d 100644 --- a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.json +++ b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.json @@ -7,7 +7,7 @@ "orgNav": [ { "name": "What would you like to do", - "text": "I want to ...", + "text": "Actions & Services", "id": "actions" }, { diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json b/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json index 307f7ec7c3..7accb7e94c 100644 --- a/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json +++ b/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json @@ -51,7 +51,7 @@ "orgNav": [ { "name": "What would you like to do", - "text": "I want to ...", + "text": "Actions & Services", "id": "actions" }, { From fac57b4c73c6c34a0263f3cbb22db6018145f86f Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Wed, 5 Jul 2023 16:04:09 -0400 Subject: [PATCH 06/33] add id prop to heading --- .../source/_patterns/01-atoms/04-headings/heading-1.md | 4 +++- .../source/_patterns/01-atoms/04-headings/heading-1.twig | 2 +- .../source/_patterns/01-atoms/04-headings/heading-2.md | 4 +++- .../source/_patterns/01-atoms/04-headings/heading-2.twig | 2 +- .../source/_patterns/01-atoms/04-headings/heading-3.md | 4 +++- .../source/_patterns/01-atoms/04-headings/heading-3.twig | 2 +- .../source/_patterns/01-atoms/04-headings/heading-4.md | 4 +++- .../source/_patterns/01-atoms/04-headings/heading-4.twig | 2 +- .../source/_patterns/01-atoms/04-headings/heading-5.md | 4 +++- .../source/_patterns/01-atoms/04-headings/heading-5.twig | 2 +- .../source/_patterns/01-atoms/04-headings/heading-6.md | 4 +++- .../source/_patterns/01-atoms/04-headings/heading-6.twig | 2 +- 12 files changed, 24 insertions(+), 12 deletions(-) diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-1.md b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-1.md index ed6270a838..4508f014e1 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-1.md +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-1.md @@ -9,5 +9,7 @@ This is a H1 tag typically used as a Page Title. heading1: { text: type: string / required - } + id: + type: string / optional +} ~~~ diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-1.twig b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-1.twig index c4d33b9004..cc37e4a4bc 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-1.twig +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-1.twig @@ -1 +1 @@ -

    {{heading1.text}}

    +

    {{heading1.text}}

    diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-2.md b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-2.md index 624e9532d1..08a3c598e3 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-2.md +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-2.md @@ -9,5 +9,7 @@ This is a H2 tag used in a Rich Text with an underline. heading2: { text: type: string / required - } + id: + type: string / optional +} ~~~ diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-2.twig b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-2.twig index 09344c6332..6c9106ceee 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-2.twig +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-2.twig @@ -1 +1 @@ -

    {{heading2.text}}

    +

    {{heading2.text}}

    diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-3.md b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-3.md index 915da4d15a..e7ed42a2d3 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-3.md +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-3.md @@ -9,5 +9,7 @@ This is a H3 tag used in a Rich Text with an underline. heading3: { text: type: string / required - } + id: + type: string / optional +} ~~~ diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-3.twig b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-3.twig index c6f9b182f0..dff5dc8db4 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-3.twig +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-3.twig @@ -1 +1 @@ -

    {{heading3.text}}

    +

    {{heading3.text}}

    diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-4.md b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-4.md index df2c64dd07..c7ad2207fa 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-4.md +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-4.md @@ -9,5 +9,7 @@ This is a H4 tag used in a Rich Text. heading4: { text: type: string / required - } + id: + type: string / optional +} ~~~ diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-4.twig b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-4.twig index 31cea40a0f..c5acc97537 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-4.twig +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-4.twig @@ -1 +1 @@ -

    {{heading4.text}}

    +

    {{heading4.text}}

    diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-5.md b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-5.md index 4acc869063..a26f1038ab 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-5.md +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-5.md @@ -9,5 +9,7 @@ This is a H5 tag used in a Rich Text. heading5: { text: type: string / required - } + id: + type: string / optional +} ~~~ diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-5.twig b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-5.twig index 7393ff1422..066bb2c511 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-5.twig +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-5.twig @@ -1 +1 @@ -
    {{heading5.text}}
    \ No newline at end of file +
    {{heading5.text}}
    \ No newline at end of file diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-6.md b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-6.md index a47a633c13..468a478a9a 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-6.md +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-6.md @@ -9,5 +9,7 @@ This is a H6 tag used in a Rich Text. heading6: { text: type: string / required - } + id: + type: string / optional +} ~~~ diff --git a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-6.twig b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-6.twig index d770c588cf..3a553479cc 100644 --- a/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-6.twig +++ b/packages/patternlab/styleguide/source/_patterns/01-atoms/04-headings/heading-6.twig @@ -1 +1 @@ -
    {{heading6.text}}
    \ No newline at end of file +
    {{heading6.text}}
    \ No newline at end of file From 830eeb9b48ace6ca585f5634afbe74aec5201554 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Wed, 5 Jul 2023 16:10:05 -0400 Subject: [PATCH 07/33] add id and href data --- .../_patterns/05-pages/organization.json | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json b/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json index 7accb7e94c..65f1bc1f33 100644 --- a/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json +++ b/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json @@ -59,6 +59,16 @@ "text": "About", "id": "about" }, + { + "name": "Our organzations", + "text": "Ourt Organizations", + "id": "organizations" + }, + { + "name": "Contact Us", + "text": "Contact", + "id": "contact" + }, { "name": "Events", "text": "Events", @@ -231,7 +241,7 @@ "title": "Contact Us", "sub": "", "color": "", - "id": "contact us", + "id": "contact", "centered": "" }, "image": { @@ -375,7 +385,8 @@ "path": "@atoms/04-headings/heading-2.twig", "data": { "heading2": { - "text": "Who We Serve" + "text": "Who We Serve", + "id": "about" } } }, @@ -452,7 +463,7 @@ "path": "@organisms/by-author/action-finder.twig", "data": { "actionFinder": { - "id": "GUID831741781374893", + "id": "actions", "bgWide": null, "bgNarrow": null, "color": "green", @@ -633,7 +644,7 @@ "title": "Our Organizations", "sub": "", "color": "", - "id": "", + "id": "organizations", "centered": false }, "itemPluralName": "organizations", @@ -726,7 +737,7 @@ "title": "Recent news & announcements", "sub": "", "color": "", - "id": "", + "id": "news", "centered": "" }, "items": [ @@ -992,7 +1003,7 @@ "title": "Upcoming Events", "sub": "", "color": "", - "id": "", + "id": "events", "centered": "", "titleContext": "from Executive Office of Health and Human Services" }, @@ -1014,7 +1025,7 @@ "title": "Locations", "sub": "", "color": "", - "id": "", + "id": "locations", "centered": "", "titleContext": "of Executive Office of Health and Human Services" }, @@ -1080,7 +1091,7 @@ "title": "Related Organizations on pilot.mass.gov", "sub": "", "color": "", - "id": "", + "id": "related", "centered": "" }, "links": [ From 46dbc5e72f950d47411487b14b52fa5a7e630095 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Wed, 5 Jul 2023 16:10:20 -0400 Subject: [PATCH 08/33] add scrolling effect --- .../assets/js/modules/organizationNavigation.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js b/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js index 0f0485ba25..55aa3ccc2f 100644 --- a/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js +++ b/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js @@ -81,6 +81,19 @@ export default (function (window, document, $, undefined) { $(this).attr('action', searchAction + searchParams); }); + $(".ma__organization-navigation__item > a").on('click', function (e) { + // Close open menus and reset markup. + $('.menu-open').removeClass('menu-open'); + + e.preventDefault(); + let location = $(this).attr('href'); + $('html, body').animate({ scrollTop: $(location).offset().top - 120 }, 1000); + + if (feedbackButton.is(":hidden")) { + feedbackButton.show(); + } + }); + $(window).on("resize", function () { let windowWidth = $(window).width(); let $contactGroups = $orgNav.find('.ma__org-nav-contact-us .ma__contact-group'); From 64ee56bd31db86fd6f6682ee3eaa1bfa07199a42 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Wed, 5 Jul 2023 16:13:28 -0400 Subject: [PATCH 09/33] remove mobile toggle label pseudo classes --- .../03-organisms/_organization-navigation.scss | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/packages/assets/scss/03-organisms/_organization-navigation.scss b/packages/assets/scss/03-organisms/_organization-navigation.scss index b716b5fc01..d270761c0a 100644 --- a/packages/assets/scss/03-organisms/_organization-navigation.scss +++ b/packages/assets/scss/03-organisms/_organization-navigation.scss @@ -80,23 +80,6 @@ $menu-transition-time: 0.3s; max-width: 90%; margin-right: -1em; padding-right: 1em; - - &::before { - content: '...'; - position: absolute; - right: 0; - bottom: 0; - } - - &::after { - content: ''; - position: absolute; - right: 0; - width: 1em; - height: 1em; - margin-top: 0.2em; - background: $c-gray-lightest; - } } .mobile-toggle-icon { From 2c849cb87aa52caf58763b660205283a3658aa1a Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Wed, 5 Jul 2023 16:19:07 -0400 Subject: [PATCH 10/33] fix and cleanup css --- .../_organization-navigation-item.scss | 282 +----------------- .../_patterns/05-pages/organization.json | 13 + 2 files changed, 14 insertions(+), 281 deletions(-) diff --git a/packages/assets/scss/03-organisms/_organization-navigation-item.scss b/packages/assets/scss/03-organisms/_organization-navigation-item.scss index 1d0e411327..a2a849d094 100644 --- a/packages/assets/scss/03-organisms/_organization-navigation-item.scss +++ b/packages/assets/scss/03-organisms/_organization-navigation-item.scss @@ -11,6 +11,7 @@ @media ($bp-large-min) { order: 1; display: flex; + flex-wrap: wrap; padding: 0; border-bottom: 0; position: static; @@ -147,287 +148,6 @@ } } -.ma__org-nav-i-want-to { - - @media ($bp-large-min) { - display: flex; - } - - .ma__comp-heading { - - @media ($bp-large-max) { - font-size: $fonts-medium; - font-weight: $fonts-normal; - color: $c-primary; - margin-bottom: 0; - padding-bottom: 1rem; - - &::after { - display: none; - } - - &::before { - content: $close-icon; - font-size: $fonts-2xlarge; - font-weight: 200; - line-height: 0; - position: absolute; - top: 35%; - right: 0; - transform: translate(-50%, -50%) rotate(135deg); - transition: 0.2s ease-out; - } - } - } - - &-section { - @media ($bp-large-max) { - padding-top: 20px; - - &:not(:last-child) { - border-bottom: 1px solid $c-gray-light; - } - } - - @media ($bp-large-min) { - - @include ma-auto-size(1, 3); - - @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - flex: 1 1 auto; - } - - @supports not (-ms-high-contrast: none) { - flex-grow: 1; - flex-basis: 0; - } - - &:not(:first-child) { - border-left: 1px solid $c-gray-light; - border-top: 0; - padding-left: 2.125rem; - } - - &:not(:last-child) { - padding-right: 2.125rem; - } - } - - .ma__link-list__container { - display: none; - - @media ($bp-large-min) { - display: block; - } - } - - .ma__link-list__container a { - - @media ($bp-large-max) { - font-size: $fonts-medium; - font-weight: $fonts-normal; - } - } - - .ma__link-list__see-all { - margin-top: 0; - padding-left: 1.35rem; - display: none; - - @media ($bp-large-min) { - display: inline-block; - font-weight: $fonts-bold; - background-color: $c-white; - outline: 3px solid rgba($c-primary, 0.5); - padding: 0.2rem 0.5rem; - margin-top: 1rem; - transition: all 0.4s ease; - - &:hover { - cursor: pointer; - background-color: $c-primary; - outline: 3px solid $c-primary; - - a { - color: $c-white; - - svg { - fill: $c-white; - } - } - } - } - - .ma__decorative-link { - - @media ($bp-large-min) { - width: auto; - } - - a { - display: block; - white-space: nowrap; - - @media ($bp-large-max) { - font-size: $fonts-medium; - font-weight: $fonts-normal; - } - - @media ($bp-large-min) { - - &:hover { - border-bottom-color: transparent; - } - } - } - } - } - } -} - -.ma__org-nav-contact-us { - position: absolute; - height: 125%; - width: 100%; - - .ma__comp-heading { - - @media ($bp-large-min) { - white-space: nowrap; - } - } - - @media ($bp-large-min) { - position: static; - height: auto; - overflow: auto; - } -} - -.ma__org-nav-contact-us__contact-row { - padding-top: 20px; - width: 100%; - - @media ($bp-large-min) { - padding-top: 1px; - padding-bottom: 1rem; - margin-bottom: 1rem; - } - - .ma__contact-row__additional { - - @media ($bp-large-min) { - width: 100%; - display: flex; - } - } - - .ma__comp-heading { - display: none; - - @media ($bp-large-min) { - display: block; - } - } - - .wrappedGroup { - - @media ($bp-large-min) { - display: flex; - flex-direction: column; - - @include ma-auto-size(1, 3); - - &:not(:first-child) { - border-left: 1px solid $c-gray-light; - padding-left: 2.125rem; - } - - &:not(:last-child) { - padding-right: 2.125rem; - } - - @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - flex: 1 1 auto; - } - - @supports not (-ms-high-contrast: none) { - flex-grow: 1; - flex-basis: 0; - max-width: 50%; - min-width: 33%; - } - } - } - - .ma__contact-group:not(:first-child), - .ma__contact-group:first-child:not(:last-child) { - // these styles are defined multiple places for page level contact groups - - @media ($bp-medium-min) { - width: auto !important; - margin-left: 0 !important; - border-left: 0 !important; - padding-left: 0 !important; - float: none !important; - } - } -} - -.ma__org-nav-contact-us__custom-options { - border-top: 1px solid $c-gray-light; - display: flex; - flex-direction: column; - - @media ($bp-large-min) { - flex-direction: row; - } - - .custom-option-item { - margin-top: 1rem; - padding-top: 1rem; - - @media ($bp-large-min) { - flex-grow: 1; - flex-basis: 0; - max-width: 33%; - - @include ma-auto-size(1, 3); - - &:not(:first-child) { - border-left: 1px solid $c-gray-light; - padding-left: 2.125rem; - } - - &:not(:last-child) { - padding-right: 2.125rem; - } - } - - a { - font-size: $fonts-small; - } - } - - .ma__decorative-link { - line-height: 1.1; - padding-bottom: 0.7rem; - } - - .custom-option-item__label { - white-space: nowrap; - display: inline-block; - width: 100%; - font-weight: $fonts-bold; - } - - .custom-option-item__label svg { - width: 20px; - height: 20px; - fill: $c-primary-alt; - } -} - // IE hacks /* stylelint-disable selector-type-no-unknown */ diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json b/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json index 65f1bc1f33..04f4cb5070 100644 --- a/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json +++ b/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json @@ -69,6 +69,19 @@ "text": "Contact", "id": "contact" }, + { + "name": "Contact Us", + "text": "Contact", + "id": "contact" + }, { + "name": "Contact Us", + "text": "Contact", + "id": "contact" + }, { + "name": "Contact Us", + "text": "Contact", + "id": "contact" + }, { "name": "Events", "text": "Events", From 5f40c333859f72f730aa1189b9880eba65df3afe Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Wed, 5 Jul 2023 16:19:40 -0400 Subject: [PATCH 11/33] remove test data --- .../source/_patterns/05-pages/organization.json | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json b/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json index 04f4cb5070..65f1bc1f33 100644 --- a/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json +++ b/packages/patternlab/styleguide/source/_patterns/05-pages/organization.json @@ -69,19 +69,6 @@ "text": "Contact", "id": "contact" }, - { - "name": "Contact Us", - "text": "Contact", - "id": "contact" - }, { - "name": "Contact Us", - "text": "Contact", - "id": "contact" - }, { - "name": "Contact Us", - "text": "Contact", - "id": "contact" - }, { "name": "Events", "text": "Events", From 6f3f114d2861ac5a4e94d194a4c459e634644766 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Wed, 5 Jul 2023 16:36:02 -0400 Subject: [PATCH 12/33] fix classname typo and update orgnav screen reader labels --- packages/assets/scss/00-base/_elements.scss | 2 +- packages/assets/scss/03-organisms/_filter-box.scss | 2 +- .../by-template/organization-navigation.twig | 14 ++++++++------ .../src/components/organisms/FilterBox/index.js | 2 +- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/assets/scss/00-base/_elements.scss b/packages/assets/scss/00-base/_elements.scss index 924190328e..f3f8cf7de8 100644 --- a/packages/assets/scss/00-base/_elements.scss +++ b/packages/assets/scss/00-base/_elements.scss @@ -169,4 +169,4 @@ div { b, strong { font-weight: $fonts-bold; -} +} \ No newline at end of file diff --git a/packages/assets/scss/03-organisms/_filter-box.scss b/packages/assets/scss/03-organisms/_filter-box.scss index 49992b8b23..febdadef94 100644 --- a/packages/assets/scss/03-organisms/_filter-box.scss +++ b/packages/assets/scss/03-organisms/_filter-box.scss @@ -102,7 +102,7 @@ display: block; } - .ma-visually-hidden { + .ma__visually-hidden { @include ma-visually-hidden; } diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig index e9c946a0b6..668dee2905 100644 --- a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig +++ b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig @@ -1,10 +1,12 @@ -