DP-36147: Login links integration branch

packages/assets/scss/02-molecules/_button-dropdown.scss

@@ -0,0 +1,70 @@
+@use "00-base/configure" as *;
+
+.ma__button-dropdown-wrapper {
+  position: relative;
+
+  &.is-open, &.is-open-react {
+
+    .ma__button-dropdown:after {
+      transform: translateY(-30%) rotate(-135deg);
+    }
+  }
+
+  .ma__button-dropdown {
+    @include ma-chevron;
+
+    &:after {
+      cursor: pointer;
+      transform: translateY(-30%) rotate(45deg);
+      transform-origin: 65% 65%;
+      transition: transform .5s;
+    }
+  }
+
+  .ma__button-dropdown__subitems {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    box-shadow: 0 0.25em 0.5rem $c-box-shadow-black;
+    transition: visibility .5s ease, right .5s ease;
+    z-index: $z-overlay;
+    min-width: 340px;
+    max-width: 340px;
+    width: 100%;
+
+    &.is-open {
+      display: inline-block;
+    }
+    &.is-closed {
+      display: none !important;
+    }
+
+    &-container {
+      @include ma-reset-list;
+
+      background-color: $c-bg;
+    }
+  }
+
+  .ma__button-dropdown__subitem {
+    border-bottom: 1px solid;
+    border-bottom-color: $c-bd-divider;
+
+    .ma__button-dropdown__link {
+      @include ma-button-reset;
+      width: 100%;
+      text-align: left;
+      display: inline-block;
+      font-size: $fonts-small;
+      line-height: 1.33;
+      padding: 10px 20px;
+      font-weight: $fonts-normal;
+      word-break: break-word;
+
+      &:hover,
+      &:focus {
+        background-color: $c-bg-subtle;
+      }
+    }
+  }
+}

packages/assets/scss/03-organisms/_page-banner.scss

@@ -38,7 +38,7 @@ $textcolors: (
     }
   }
 
-  
+
   .ma__page-header {
     margin-left: 0;
     margin-right: 0;
@@ -51,19 +51,18 @@ $textcolors: (
   &__container {
     margin-left: auto;
     margin-right: auto;
-    overflow: hidden;
     display: flex;
     flex-direction: column;
   }
-  
+
   /* Style for the text content on the left side */
 
   &__content {
     display: flex;
     align-items: center;
     flex: 1.5; // width ratio to image 3:2
   }
-  
+
   /* Style for the image on the right side */
 
   &__image {
@@ -73,15 +72,15 @@ $textcolors: (
     background-size: contain;
     background-repeat: no-repeat;
   }
-  
+
   @media ($bp-large-extended-min) {
 
     &__container {
       flex-direction: row;
       align-items: stretch;
       max-width: 1320px;
     }
-  
+
     &__image {
       flex: 1;
       display: block;
@@ -90,7 +89,7 @@ $textcolors: (
       min-height: 200px;
     }
   }
-  
+
   @media ($bp-x-large-min) {
 
     &__image {
@@ -101,8 +100,8 @@ $textcolors: (
       min-height: 200px;
     }
   }
-  
-  
+
+
   @media ($bp-x-small-max) {
 
     &__image {
@@ -111,4 +110,4 @@ $textcolors: (
       width: 100%;
     }
   }
-}
+}

packages/assets/scss/03-organisms/_page-header-addons.scss

@@ -8,6 +8,8 @@ $page-header-widget-width: 350px;
 
   @include clearfix;
 
+  margin-top: 20px;
+
 
   &__content {
     padding: 0 0 30px;

packages/assets/scss/03-organisms/_page-header.scss

@@ -196,7 +196,6 @@ $page-header-widget-width: 350px;
     &-wrapper {
       display: flex;
       width: 100%;
-      margin-top: 1.5rem;
 
       @media ($bp-medium-max) {
         flex-direction: column;

packages/patternlab/styleguide/source/_patterns/01-atoms/01-buttons/button.twig

@@ -4,12 +4,14 @@
 
 {% set buttonTheme = button.theme ? "ma__button--" ~ button.theme : "" %}
 
-{% set buttonUppercaseOverride = button.uppercaseOverride ? "" : "ma__button--uppercase" %}
+{% set buttonClass = button.class %}
+
+{% set buttonUppercaseOverride = button ? "" : "ma__button--uppercase" %}
 
 {% if button.href %}
   <a
     href="{{ button.href }}"
-    class="ma__button {{ buttonSize }} {{buttonTheme}} {{buttonUsage}} {{ buttonUppercaseOverride }}"
+    class="ma__button {{ buttonSize }} {{buttonTheme}} {{buttonUsage}} {{buttonClass}} {{ buttonUppercaseOverride }}"
     {% if button.info %} title="{{ button.info }}"{% endif %}>
       {{ button.text }}
     {% if button.icon %}
@@ -19,7 +21,7 @@
 {% else %}
   <button
     type="{{ button.type }}"
-    class="ma__button {{ buttonSize }} {{buttonTheme}} {{buttonUsage}} {{button.class}} {{ buttonUppercaseOverride }}"
+    class="ma__button {{ buttonSize }} {{buttonTheme}} {{buttonUsage}} {{buttonClass}} {{ buttonUppercaseOverride }}"
     aria-label="{{ button.info }}">
       {{ button.text }}
       {% if button.icon %}

packages/patternlab/styleguide/source/_patterns/02-molecules/button-dropdown.json

@@ -0,0 +1,22 @@
+{
+  "button": {
+    "id": "random-id",
+    "info": "",
+    "text": "Log in to...",
+    "size": "",
+    "theme": "c-primary",
+    "usage": "secondary",
+    "class": "ma__button-dropdown",
+    "menuId": "random-menu-id",
+    "items": [{
+      "href": "https://mass.gov",
+      "text": "Random text"
+    },{
+      "href": "https://mass.gov",
+      "text": "Random text 2"
+    },{
+      "href": "https://mass.gov",
+      "text": "Random text ver long super long text with second line"
+    }]
+  }
+}

packages/patternlab/styleguide/source/_patterns/02-molecules/button-dropdown.twig

@@ -0,0 +1,18 @@
+<div class="ma__button-dropdown-wrapper js-button-dropdown">
+  {% set buttonClass = 'ma__button-dropdown js-button-dropdown-toggle' %}
+  {% include "@atoms/01-buttons/button.twig" with {
+    button: button|merge({
+      'class': 'ma__button-dropdown js-button-dropdown-toggle'
+    })
+   } 
+  %}
+  <div class="ma__button-dropdown__subitems js-button-dropdown-content is-closed">
+    <ul id="{{ button.menuId }}" role="menu" aria-labelledby="{{ button.id }}" class="ma__button-dropdown__subitems-container">
+      {% for item in button.items %}
+        <li role="none" class="ma__button-dropdown__subitem">
+          <a role="menuitem" href="{{ item.href }}" class="ma__button-dropdown__link" tabindex="0">{{ item.text }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>

packages/patternlab/styleguide/source/_patterns/03-organisms/page-header/page-header.json

@@ -14,6 +14,22 @@
     "description": "This is an optional description. This is an optional description. This is an optional description. <a href=''>You can add a hyperlink in the description.</a>",
     "buttonsLabel": "Button:",
     "buttons": [{
+      "id": "random-id",
+      "info": "",
+      "text": "Button",
+      "size": "small",
+      "theme": "c-primary",
+      "usage": "secondary",
+      "class": "ma__button-dropdown",
+      "menuId": "random-menu-id",
+      "items": [{
+        "href": "https://mass.gov",
+        "text": "Random text"
+      },{
+        "href": "https://mass.gov",
+        "text": "Random text 2"
+      }]
+    }, {
       "href": "#",
       "text": "Button 1",
       "size": "small",
@@ -50,15 +66,15 @@
         "placeholder": {
           "text": "Optional Content"
         }
-      }      
+      }
     }],
     "widgets": [{
       "path": "@base/placeholder.twig",
       "data": {
         "placeholder": {
           "text": "Optional widgets"
         }
-      }      
+      }
     }]
   }
-}
+}

packages/patternlab/styleguide/source/_patterns/03-organisms/page-header/page-header.twig

@@ -93,7 +93,11 @@
             <ul class="ma__page-header__buttons">
                 {% for button in pageHeader.buttons %}
                 <li class="ma__page-header__button">
+                  {% if button.items %}
+                    {% include "@molecules/button-dropdown.twig" %}
+                  {% else %}
                     {% include "@atoms/01-buttons/button.twig" %}
+                  {% endif %}
                 </li>
                 {% endfor %}
             </ul>

packages/patternlab/styleguide/source/assets/js/index.js

@@ -28,6 +28,7 @@ import inlineLinksLanguageToggle from "./modules/inlineLinksLanguageToggle.js";
 import listAfterFloat from "./modules/listAfterFloat.js";
 import locationListingLeaflet from "./modules/locationListingLeaflet.js";
 import locationFiltersLeaflet from "./modules/locationFiltersLeaflet.js";
+import buttonDropdown from "./modules/buttonDropdown.js";
 import mainNav from "./modules/mainNav.js";
 import mainNavHamburger from "./modules/mainNavHamburger.js";
 import mainNavMIxed from "./modules/mainNavMixed.js";