Merge pull request #854 from massgov/release-5.26.0

Release 5.26.0

release-notes.md

@@ -13,14 +13,28 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 **For example**
 - DP-1234: The short description text on a [service detail](http://mayflower.digital.mass.gov/?p=pages-detail-for-service-howto-location) page banner ([@organisms/by-template/page-banner](http://mayflower.digital.mass.gov/?p=organisms-page-banner)) should now render ([PR #493](https://github.com/massgov/mayflower/pull/493))
 
+
+## 5.26.0 (5/30/2018)
+
+### Fixed
+- DP-8574: Update jQuery version for stickyTOC Firefox bug.
+
+### Added
+- DP-7363: Enable srcset on the image pattern and demonstrate usage on Press Release with Image Page.
+
+### Changed
+- DP-6907: Change default ordered list type styling in rich text fields.
+- DP-9010: MF Update row order for boards page.
+
+
 ## 5.25.0 (5/23/2018)
 
 ### Changed
 - DP-8631: Provides twig blocks to support overrides and template mapping of data.
 - DP-8854: Update the footer template to match the one in Drupal.
 - DP-8949: Mayflower Subpatterns for General Teaser.
 
-### Fixed 
+### Fixed
 - DP-9057 - Fix IE11 bug where featured image in mosaic was not appearing.
 
 ## 5.24.0 (5/16/2018)

styleguide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@massds/mayflower",
   "description": "Open source UI components and visual style guide for Massachusetts government websites",
-  "version": "5.25.0",
+  "version": "5.26.0",
   "author": "Massachusetts Digital Services (MDS)",
   "repository": {
     "type": "git",

styleguide/source/_patterns/01-atoms/08-lists/ordered-list.json

@@ -1,16 +1,40 @@
 {
-  "orderedList": [{ 
-    "text": "This is a list item in an ordered list" 
-  },{
-    "text": "An ordered list is a list in which the sequence of items is important." 
-  },{
-    "text": "Lists can be nested inside of each other",
-    "sublist" : [{
-      "text":"This is a nested list item"
-    },{
-      "text":"This is another nested list item in an ordered list"
-    }]
-  },{
-    "text":"This is the last list item"
-  }]
-}
+  "orderedList": [
+    {
+      "text": "This is a list item in an ordered list"
+    },
+    {
+      "text": "An ordered list is a list in which the sequence of items is important. Top level item counters are digits"
+    },
+    {
+      "text": "Lists can be nested inside of each other",
+      "sublist": [
+        {
+          "text": "This is a nested list item. After digits list items counters are lower-alpha."
+        },
+        {
+          "text": "This is another nested list item in an ordered list",
+           "sublist": [
+            {
+              "text": "This is a nested list item. After lower-alpha counters, lower-roman counters are used.",
+              "sublist": [
+                {
+                  "text": "This is a nested list item. After lower-roman counters, the counters loop back to digits."
+                },
+                {
+                  "text": "This is another nested list item in an ordered list"
+                }
+              ]
+            },
+            {
+              "text": "This is another nested list item in an ordered list"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "text": "This is the last list item"
+    }
+  ]
+}

styleguide/source/_patterns/01-atoms/08-lists/ordered-list.md

@@ -1,15 +1,22 @@
 ### Description
 An `<ol>`  element with its child `<li>` elements and optional nested child `<ol>` and `<li>` elements.
 
+### List Style Types
+The list style type loop through 3 different counters:
+
+* digits
+* lower-alpha
+* lower-roman
+
 ### Status
 * Stable as of 5.0.0
 
 ### Variables:
 ~~~
-orderedList [{ 
+orderedList [{
   text:
     type: string / required
-  sublist (optional) [{ 
+  sublist (optional) [{
     text:
       type: string / required
   }]

styleguide/source/_patterns/01-atoms/08-lists/ordered-list.twig

@@ -1,12 +1,31 @@
 <ol>
-	{% for list in orderedList %}
-		<li>{{ list.text|raw }}</li>
-		{% if list.sublist %}
-			<ol>
-				{% for sublist in list.sublist %}
-					<li>{{ sublist.text|raw }}</li>
-				{% endfor %}
-			</ol>
-		{% endif %}
-	{% endfor %}
+  {% for list in orderedList %}
+    <li>{{ list.text|raw }}
+    {% if list.sublist %}
+      <ol>
+        {% for sublist in list.sublist %}
+          <li>{{ sublist.text|raw }}
+          {% if sublist.sublist %}
+            <ol>
+              {% for sublist in sublist.sublist %}
+                <li>{{ sublist.text|raw }}
+                {% if sublist.sublist %}
+				            <ol>
+				              {% for sublist in sublist.sublist %}
+				                <li>{{ sublist.text|raw }}</li>
+				              {% endfor %}
+				            </ol>
+				          {% endif %}
+				        </li>
+              {% endfor %}
+            </ol>
+          {% endif %}
+          </li>
+        {% endfor %}
+      </ol>
+      </li>
+    {% endif %}
+  {% endfor %}
 </ol>
+
+

styleguide/source/_patterns/01-atoms/09-media/image.md

@@ -14,10 +14,14 @@ image {
     type: string / required
   src:
     type: string (url) / required
+  srcset:
+    type: string / optional
+  sizes:
+    type: string / optional
   height:
-    type: string / required
+    type: string / optional
   width:
-    type: string / required
+    type: string / optional
   shape:
     type: string / optional
 }

styleguide/source/_patterns/01-atoms/09-media/image.twig

@@ -1,6 +1,24 @@
-<img
-    class="ma__image{% if image.shape %} {{ image.shape }}{% endif %}"
-    alt="{{ image.alt }}"
-    src="{{ image.src }}"
-    height="{{ image.height }}"
-    width="{{ image.width }}" />
+<img
+  class="ma__image{% if image.shape %} {{ image.shape }}{% endif %}"
+  alt="{{ image.alt }}"
+  src="{{ image.src }}"
+  {% if image.versions %}
+    srcset="
+    {% for version in image.versions %}
+      {% if version.url and version.width %}
+        {{ version.url }} {{ version.width }}{% if not loop.last %},{% endif %}
+      {% endif %}
+    {% endfor %}
+    "
+    {% if image.sizes %}
+      {# Only use sizes if certain breakpoints limit the width of the image to less than approximately full width #}
+      sizes="{{ image.sizes }}"
+    {% endif %}
+  {% endif %}
+  {% if image.height %}
+    height="{{ image.height }}"
+  {% endif %}
+  {% if image.width %}
+    width="{{ image.width }}"
+  {% endif %}
+/>

styleguide/source/_patterns/01-atoms/09-media/image~responsive.json

@@ -0,0 +1,20 @@
+{
+  "image": {
+    "alt": "alt text",
+    "src": "../../assets/images/placeholder/800x400.png",
+    "versions": [
+      {
+        "url": "../../assets/images/placeholder/400x200.png",
+        "width": "620w"
+      },
+      {
+        "url": "../../assets/images/placeholder/700x350.png",
+        "width": "780w"
+      },
+      {
+        "url": "../../assets/images/placeholder/800x400.png",
+        "width": "910w"
+      }
+    ]
+  }
+}