change size large to layout taper

massgov · Feb 17, 2022 · e503370 · e503370
1 parent 849ed46
commit e503370
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/.../patternlab/styleguide/source/_patterns/03-organisms/page-banner/page-banner.md b/.../patternlab/styleguide/source/_patterns/03-organisms/page-banner/page-banner.md
@@ -6,7 +6,7 @@ Page Banner component that is composed of an H1 page title, with optional icon,
 
 ### Variant options
 * Layouts: 
-  - ['large'](./?p=organisms-page-banner-as-large) - Slanted solic background, side-by-side image
+  - ['taper'](./?p=organisms-page-banner-as-large) - Trepezoid solid color background, side-by-side image
   - ['overlay'](./?p=organisms-page-banner-as-overlay) - Transparent background color over an image
 * Color themes:
   - blue (./?p=organisms-page-banner)
@@ -20,8 +20,8 @@ pageBanner: {
     type: string (image path - wide screens) / required
   bgNarrow:
     type: string (image path - narrow screens) / required
-  size:
-    type: string ('', 'large', 'overlay') / optional
+  layout:
+    type: string ('', 'taper', 'overlay') / optional
   renderImageOnMobile:
     type: boolean / optional / 'false' as default.
   icon:

diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/page-banner/page-banner.twig b/packages/patternlab/styleguide/source/_patterns/03-organisms/page-banner/page-banner.twig
@@ -1,4 +1,4 @@
-{% set sizeClass = pageBanner.size ? "ma__page-banner--" ~ pageBanner.size : '' %}
+{% set layoutClass = pageBanner.layout ? "ma__page-banner--" ~ pageBanner.layout : '' %}
 {% set colorClass = pageBanner.color ? "ma__page-banner--" ~ pageBanner.color : '' %}
 {% set bgNarrowWrapperClass = pageBanner.bgNarrow ? "ma__page-banner__content-wrapper--bg-narrow" : "" %}
 {% set bgWideWrapperClass = pageBanner.bgWide ? "ma__page-banner__content-wrapper--bg-wide" : "" %}
@@ -9,12 +9,12 @@
 {% set iconClass = not pageBanner.icon ? "ma__page-banner--no-icon" : '' %}
 
 {% set wrapperClass = "ma__page-banner__content-wrapper #{bgNarrowWrapperClass} #{bgWideWrapperClass}" %}
-{% set sectionClass = "ma__page-banner #{sizeClass} #{colorClass} #{bgNarrowClass} #{bgWideClass} #{imageOnMobileClass} #{noImage} #{iconClass}" %}
+{% set sectionClass = "ma__page-banner #{layoutClass} #{colorClass} #{bgNarrowClass} #{bgWideClass} #{imageOnMobileClass} #{noImage} #{iconClass}" %}
 
 
 <section class="{{ sectionClass }}">
   {% set classBgImage =
-    (pageBanner.size == "large") ? '.ma__page-banner__image' : '.ma__page-banner'
+    (pageBanner.layout == "taper") ? '.ma__page-banner__image' : '.ma__page-banner'
   %}
 
   {# pageBanner.bgWide #}
@@ -36,7 +36,7 @@
   {% endif %}
 
   <div class="ma__page-banner__container">
-    {% if (pageBanner.size and pageBanner.size == "large") and bgWideWrapperClass %}
+    {% if (pageBanner.layout and pageBanner.layout == "taper") and bgWideWrapperClass %}
       <div class="ma__page-banner__image"></div>
     {% endif %}
     <div class="ma__page-banner__content" property="mainEntityOfPage">

diff --git a/...tternlab/styleguide/source/_patterns/03-organisms/page-banner/page-banner~as-overlay.json b/...tternlab/styleguide/source/_patterns/03-organisms/page-banner/page-banner~as-overlay.json
@@ -2,7 +2,7 @@
   "pageBanner": {
     "bgWide": "../../assets/images/placeholder/1600x400.png",
     "bgNarrow": "../../assets/images/placeholder/800x400.png",
-    "size": "overlay",
+    "layout": "overlay",
     "icon": "",
     "title": "Unemployment Benefits",
     "titleSubText": "",

diff --git a/...e-banner/page-banner~as-large-linked.json → ...e-banner/page-banner~as-taper-linked.json b/...e-banner/page-banner~as-large-linked.json → ...e-banner/page-banner~as-taper-linked.json
@@ -3,7 +3,7 @@
       "bgWide": "../../assets/images/placeholder/800x400.png",
       "bgNarrow": "../../assets/images/placeholder/400x200.png",
       "renderImageOnMobile": true,
-      "size": "large",
+      "layout": "taper",
       "icon": "",
       "title": "Office of the Treasurer & Receiver General",
       "titleSubText": " (TRE)",

diff --git a/...sms/page-banner/page-banner~as-large.json → ...sms/page-banner/page-banner~as-taper.json b/...sms/page-banner/page-banner~as-large.json → ...sms/page-banner/page-banner~as-taper.json
@@ -3,7 +3,7 @@
     "bgWide": "../../assets/images/placeholder/1600x400.png",
     "bgNarrow": "../../assets/images/placeholder/400x200.png",
     "renderImageOnMobile": false,
-    "size": "large",
+    "layout": "taper",
     "icon": "lg-picnic-table",
     "title": "State Parks & Recreation",
     "titleSubText": "",