Patternlab/dp 14006 update manage your account (#561)

* DP-14006: update h3 # * DP-14006: add changelog * DP-14006: re-running circleCI test * DP-14006: switch link templates * DP-14006: switch wrapper templates * DP-14006: update readme * DP-14006: add .md file for links * DP-14006: Update descriptive-link-wrapper Updated new descriptive-links-wrapper to ensure link data is passed on to new descriptive-link molecule. * DP-14006: Update changelog to reflect newly generated patterns * DP-14006: update css for descriptive links * DP-14006: update howto page template * DP14006: backstop file udpates
massgov · May 24, 2019 · 7e9051c · 7e9051c
1 parent 86459db
commit 7e9051c
Show file tree

Hide file tree

Showing 16 changed files with 203 additions and 145 deletions.
diff --git a/...s/scss/03-organisms/_account-manager.scss → ...scss/03-organisms/_descriptive-links.scss b/...s/scss/03-organisms/_account-manager.scss → ...scss/03-organisms/_descriptive-links.scss
@@ -1,10 +1,10 @@
-.ma__account-manager {
+.ma__descriptive-links {
 
-  &--section {
+  .ma__descriptive-link {
     padding-bottom: 2rem;
 
     .ma__decorative-link {
       padding-top: 1rem;
     }
   }
-}
+}
diff --git a/changelogs/DP-14006.md b/changelogs/DP-14006.md
@@ -0,0 +1,4 @@
+___DESCRIPTION___
+minor
+changed
+- patternlab [Descriptive link wrapper] DP-14006: Add new "Descriptive links wrapper" organism and associated "Descriptive link" molecule to handle when a brief description and an associated link are needed.
diff --git a/patternlab/backstopjs/reference/regression_page_howto_0_document_0_phone.png b/patternlab/backstopjs/reference/regression_page_howto_0_document_0_phone.png
diff --git a/patternlab/backstopjs/reference/regression_page_howto_0_document_1_tablet.png b/patternlab/backstopjs/reference/regression_page_howto_0_document_1_tablet.png
diff --git a/patternlab/styleguide/source/_patterns/02-molecules/account-manager-section.twig b/patternlab/styleguide/source/_patterns/02-molecules/account-manager-section.twig
diff --git a/...02-molecules/account-manager-section.json → ...tterns/02-molecules/descriptive-link.json b/...02-molecules/account-manager-section.json → ...tterns/02-molecules/descriptive-link.json
diff --git a/patternlab/styleguide/source/_patterns/02-molecules/descriptive-link.md b/patternlab/styleguide/source/_patterns/02-molecules/descriptive-link.md
@@ -0,0 +1,20 @@
+### Description
+A block of text and decorative link
+
+### Status
+* Stable as of 5.0.0
+
+### Pattern Contains
+wysiwyg block
+decorative link
+
+### Variables
+~~~
+links: {
+  content:
+    type: richtext /required
+
+  link:
+    type: link / required
+}
+~~~
diff --git a/patternlab/styleguide/source/_patterns/02-molecules/descriptive-link.twig b/patternlab/styleguide/source/_patterns/02-molecules/descriptive-link.twig
@@ -0,0 +1,7 @@
+<div class="ma__descriptive-link">
+  {% set richText = richText %}
+  {% include "@organisms/by-author/rich-text.twig" %}
+
+  {% set decorativeLink = link %}
+  {% include "@atoms/decorative-link.twig" %}
+</div>
diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/account-manager.json b/patternlab/styleguide/source/_patterns/03-organisms/by-author/account-manager.json
diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/account-manager.md b/patternlab/styleguide/source/_patterns/03-organisms/by-author/account-manager.md
@@ -1,15 +1,20 @@
 ### Description
-An account manager section wrapper for How To Pages
+A wrapper for sets of descriptive Links
 
 ### Status
 * Stable as of 5.0.0
 
 ### Pattern Contains
-account-manager-section
+descriptive-link
+comp heading
 
 ### Variables
 ~~~
-accountManagementSections: {
+heading: {
+  content:
+  type: string /required
+}
+links: {
   content:
     type: richtext /required
 

diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/account-manager.twig b/patternlab/styleguide/source/_patterns/03-organisms/by-author/account-manager.twig
diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/descriptive-links-wrapper.json b/patternlab/styleguide/source/_patterns/03-organisms/by-author/descriptive-links-wrapper.json
@@ -0,0 +1,76 @@
+{
+  "descriptiveLinks": {
+    "compHeading": {
+      "title": "Manage Your Account",
+      "sub": "true",
+      "color": "",
+      "id": "manage-your-account",
+      "centered": ""
+    },
+    "links": [
+      {
+        "richText": {
+          "rteElements": [
+            {
+              "path": "@atoms/11-text/paragraph.twig",
+              "data": {
+                "paragraph": {
+                  "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente."
+                }
+              }
+            }
+          ]
+        },
+        "link": {
+          "href": "#",
+          "text": "Check your status",
+          "context": "",
+          "button": false,
+          "info": ""
+        }
+      },
+      {
+        "richText": {
+          "rteElements": [
+            {
+              "path": "@atoms/11-text/paragraph.twig",
+              "data": {
+                "paragraph": {
+                  "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente."
+                }
+              }
+            }
+          ]
+        },
+        "link": {
+          "href": "#",
+          "text": "Log in to your account",
+          "context": "",
+          "button": false,
+          "info": ""
+        }
+      },
+      {
+        "richText": {
+          "rteElements": [
+            {
+              "path": "@atoms/11-text/paragraph.twig",
+              "data": {
+                "paragraph": {
+                  "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente."
+                }
+              }
+            }
+          ]
+        },
+        "link": {
+          "href": "#",
+          "text": "Lorem ipsum dolor sit amet.",
+          "context": "",
+          "button": false,
+          "info": ""
+        }
+      }
+    ]
+  }
+}
diff --git a/patternlab/styleguide/source/_patterns/03-organisms/by-author/descriptive-links-wrapper.twig b/patternlab/styleguide/source/_patterns/03-organisms/by-author/descriptive-links-wrapper.twig
@@ -0,0 +1,13 @@
+<section class="ma__descriptive-links">
+    {% set compHeading = descriptiveLinks.compHeading %}
+    {% include "@atoms/04-headings/comp-heading.twig" %}
+
+    {% block descriptiveLinks %}
+      {% for link in descriptiveLinks.links %}
+        {% include "@molecules/descriptive-link.twig" with {
+          richText: link.richText,
+          link: link.link
+        } %}
+      {% endfor %}
+    {% endblock %}
+</section>
diff --git a/patternlab/styleguide/source/_patterns/05-pages/howto.json b/patternlab/styleguide/source/_patterns/05-pages/howto.json
@@ -122,7 +122,7 @@
         "info": ""
       },
       {
-        "href": "manage-account",
+        "href": "manage-your-account",
         "text": "Manage your account",
         "info": ""
       },
@@ -503,50 +503,80 @@
         }
       ]
     },
-    "accountManagementSections": [
-      {
-        "richText": {
-          "rteElements": [
-            {
-              "path": "@atoms/11-text/paragraph.twig",
-              "data": {
-                "paragraph": {
-                  "text": "This is a link for users who have already created an account and would like to check status, download paperwork, etc"
+    "descriptiveLinks": {
+      "compHeading": {
+        "title": "Manage Your Account",
+        "sub": "true",
+        "color": "",
+        "id": "manage-your-account",
+        "centered": ""
+      },
+      "links": [
+        {
+          "richText": {
+            "rteElements": [
+              {
+                "path": "@atoms/11-text/paragraph.twig",
+                "data": {
+                  "paragraph": {
+                    "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente."
+                  }
                 }
               }
-            }
-          ]
+            ]
+          },
+          "link": {
+            "href": "#",
+            "text": "Check your status",
+            "context": "",
+            "button": false,
+            "info": ""
+          }
         },
-        "link": {
-          "href": "#",
-          "text": "Log in to your UI Online account",
-          "context": "",
-          "button": false,
-          "info": ""
-        }
-      },
-      {
-        "richText": {
-          "rteElements": [
-            {
-              "path": "@atoms/11-text/paragraph.twig",
-              "data": {
-                "paragraph": {
-                  "text": "Optional second section for account management. Limit to 3 sections."
+        {
+          "richText": {
+            "rteElements": [
+              {
+                "path": "@atoms/11-text/paragraph.twig",
+                "data": {
+                  "paragraph": {
+                    "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente."
+                  }
                 }
               }
-            }
-          ]
+            ]
+          },
+          "link": {
+            "href": "#",
+            "text": "Log in to your account",
+            "context": "",
+            "button": false,
+            "info": ""
+          }
         },
-        "link": {
-          "href": "#",
-          "text": "Log in to another kind of account",
-          "context": "",
-          "button": false,
-          "info": ""
+        {
+          "richText": {
+            "rteElements": [
+              {
+                "path": "@atoms/11-text/paragraph.twig",
+                "data": {
+                  "paragraph": {
+                    "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente."
+                  }
+                }
+              }
+            ]
+          },
+          "link": {
+            "href": "#",
+            "text": "Lorem ipsum dolor sit amet.",
+            "context": "",
+            "button": false,
+            "info": ""
+          }
         }
-      }
-    ],
+      ]
+    },
     "formDownloads": {
       "compHeading": {
         "title": "Downloads",

diff --git a/patternlab/styleguide/source/_patterns/05-pages/howto.twig b/patternlab/styleguide/source/_patterns/05-pages/howto.twig
@@ -21,8 +21,8 @@
   {% include "@organisms/by-author/steps-ordered.twig" %}
   {% set richText = pageContent.moreInfo %}
   {% include "@organisms/by-author/rich-text.twig" %}
-  {% set accountManagementSections = pageContent.accountManagementSections %}
-  {% include "@organisms/by-author/account-manager.twig" %}
+  {% set descriptiveLinks = pageContent.descriptiveLinks %}
+  {% include "@organisms/by-author/descriptive-links-wrapper.twig" %}
   {% set formDownloads = pageContent.formDownloads %}
   {% include "@organisms/by-author/form-downloads.twig" %}
   {% set contactList = pageContent.contactList %}