From 9893c60db9430bc29cff2909f1462ac27d437bcd Mon Sep 17 00:00:00 2001
From: Mike Mai <emceehao@gmail.com>
Date: Tue, 29 Jan 2019 18:39:11 -0500
Subject: [PATCH] fix: flag and figure bugs

---
 .../10-d8-product-pages/product-landing.twig  | 190 +++++++++---------
 .../10-d8-product-pages/product-t2.twig       | 173 ++++++++--------
 .../components/bolt-figure/src/figure.twig    |   8 +-
 .../objects-flag/_objects-flag.scss           |   5 +-
 .../05-objects/objects-flag/src/flag.twig     |  26 ++-
 5 files changed, 210 insertions(+), 192 deletions(-)

diff --git a/docs-site/src/pages/pattern-lab/_patterns/04-pages/10-d8-product-pages/product-landing.twig b/docs-site/src/pages/pattern-lab/_patterns/04-pages/10-d8-product-pages/product-landing.twig
index aad7ef7c24..9192a89b19 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/04-pages/10-d8-product-pages/product-landing.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/04-pages/10-d8-product-pages/product-landing.twig
@@ -85,107 +85,105 @@
 
 
       {% cell "u-bolt-width-1/1 u-bolt-width-1/2@small" %}
-        {% include "@bolt/ui-list.twig" with {
-          contentItems : [
-            {
-              contentItems: [
-                {
-                  pattern: "flag",
-                  valign: "middle",
-                  url: "#!",
-                  figure: {
-                    "icon": {
-                      name: "app-development",
-                      size: "xlarge",
-                      background: "circle",
-                      color: "teal"
-                    }
-                  },
-                  items: [
-                    {
-                      "pattern": "headline",
-                      "size": "large",
-                      "text": "Marketing",
-                      "url": "https://www.google.com",
-                      "icon": {
-                        name: "chevron-right"
-                      }
-                    },
-                    {
-                      "pattern": "text",
-                      "text": "Engage customers with real-time 1:1 marketing on any channel.",
-                      "size": "medium",
-                    }
-                  ]
+        {% set flag_item_1 %}
+          {% include "@bolt/flag.twig" with {
+            valign: "middle",
+            url: "#!",
+            figure: {
+              "icon": {
+                name: "app-development",
+                size: "xlarge",
+                background: "circle",
+                color: "teal"
+              }
+            },
+            items: [
+              {
+                "pattern": "headline",
+                "size": "large",
+                "text": "Marketing",
+                "url": "https://www.google.com",
+                "icon": {
+                  name: "chevron-right"
                 }
-              ]
+              },
+              {
+                "pattern": "text",
+                "text": "Engage customers with real-time 1:1 marketing on any channel.",
+                "size": "medium",
+              }
+            ]
+          } only %}
+        {% endset %}
+        {% set flag_item_2 %}
+          {% include "@bolt/flag.twig" with {
+            valign: "middle",
+            url: "#!",
+            figure: {
+              "icon": {
+                name: "sales-automation",
+                size: "xlarge",
+                background: "circle",
+                color: "teal"
+              }
             },
-            {
-              contentItems: [
-                {
-                  pattern: "flag",
-                  valign: "middle",
-                  url: "#!",
-                  figure: {
-                    "icon": {
-                      name: "sales-automation",
-                      size: "xlarge",
-                      background: "circle",
-                      color: "teal"
-                    }
-                  },
-                  items: [
-                    {
-                      "pattern": "headline",
-                      "size": "large",
-                      "text": "Sales Automation",
-                      "url": "https://www.google.com",
-                      "icon": {
-                        name: "chevron-right"
-                      }
-                    },
-                    {
-                      "pattern": "text",
-                      "text": "Intelligently guide sales professionals and automate the sales process.",
-                      "size": "medium",
-                    }
-                  ]
+            items: [
+              {
+                "pattern": "headline",
+                "size": "large",
+                "text": "Sales Automation",
+                "url": "https://www.google.com",
+                "icon": {
+                  name: "chevron-right"
                 }
-              ]
+              },
+              {
+                "pattern": "text",
+                "text": "Intelligently guide sales professionals and automate the sales process.",
+                "size": "medium",
+              }
+            ]
+          } only %}
+        {% endset %}
+        {% set flag_item_3 %}
+          {% include "@bolt/flag.twig" with {
+            valign: "middle",
+            url: "#!",
+            figure: {
+              "icon": {
+                name: "customer-service",
+                size: "xlarge",
+                background: "circle",
+                color: "teal"
+              }
             },
-            {
-              contentItems: [
-                {
-                  pattern: "flag",
-                  valign: "middle",
-                  url: "#!",
-                  figure: {
-                    "icon": {
-                      name: "customer-service",
-                      size: "xlarge",
-                      background: "circle",
-                      color: "teal"
-                    }
-                  },
-                  items: [
-                    {
-                      "pattern": "headline",
-                      "size": "large",
-                      "text": "Customer Service",
-                      "url": "https://www.google.com",
-                      "icon": {
-                        name: "chevron-right"
-                      }
-                    },
-                    {
-                      "pattern": "text",
-                      "text": "Serve, satisfy and engage every customer with digital customer service.",
-                      "size": "medium",
-                    }
-                  ]
+            items: [
+              {
+                "pattern": "headline",
+                "size": "large",
+                "text": "Customer Service",
+                "url": "https://www.google.com",
+                "icon": {
+                  name: "chevron-right"
                 }
-              ]
-            }
+              },
+              {
+                "pattern": "text",
+                "text": "Serve, satisfy and engage every customer with digital customer service.",
+                "size": "medium",
+              }
+            ]
+          } only %}
+        {% endset %}
+
+        {% include "@bolt-components-list/list.twig" with {
+          display: "block",
+          separator: "solid",
+          spacing: "small",
+          items: [
+            flag_item_1,
+            flag_item_2,
+            flag_item_3,
           ]
         } only %}
       {% endcell %}
diff --git a/docs-site/src/pages/pattern-lab/_patterns/04-pages/10-d8-product-pages/product-t2.twig b/docs-site/src/pages/pattern-lab/_patterns/04-pages/10-d8-product-pages/product-t2.twig
index 877cd74ceb..9aecd02c4e 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/04-pages/10-d8-product-pages/product-t2.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/04-pages/10-d8-product-pages/product-t2.twig
@@ -80,100 +80,97 @@
 
 
       {% cell "u-bolt-width-1/1 u-bolt-width-1/2@small" %}
+        {% set flag_item_1 %}
+          {% include "@bolt/flag.twig" with {
+            valign: "middle",
+            url: "#!",
+            figure: {
+              icon: {
+                name: "app-development",
+                size: "xlarge",
+                background: "circle",
+                color: "teal"
+              }
+            },
+            items: [
+              {
+                pattern: "headline",
+                size: "small",
+                text: "Download the data Sheet",
+                url: "https://www.google.com",
+                icon: {
+                  name: "chevron-right"
+                },
+                tag: "h3"
+              }
+            ]
+          } only %}
+        {% endset %}
+        {% set flag_item_2 %}
+          {% include "@bolt/flag.twig" with {
+            valign: "middle",
+            url: "#!",
+            figure: {
+              icon: {
+                name: "sales-automation",
+                size: "xlarge",
+                background: "circle",
+                color: "teal"
+              }
+            },
+            items: [
+              {
+                pattern: "headline",
+                size: "small",
+                text: "Download the Overview document",
+                url: "https://www.google.com",
+                icon: {
+                  name: "chevron-right"
+                }
+              }
+            ]
+          } only %}
+        {% endset %}
+        {% set flag_item_3 %}
+          {% include "@bolt/flag.twig" with {
+            valign: "middle",
+            url: "#!",
+            figure: {
+              icon: {
+                name: "customer-service",
+                size: "xlarge",
+                background: "circle",
+                color: "teal"
+              }
+            },
+            items: [
+              {
+                pattern: "headline",
+                size: "small",
+                text: "View Pricing for Pega Marketing",
+                url: "https://www.google.com",
+                icon: {
+                  name: "chevron-right"
+                }
+              }
+            ]
+          } only %}
+        {% endset %}
+
         {% include "@bolt/headline.twig" with {
           text: "Get to know Pega Marketing",
           size: "xlarge",
           tag: "h2"
         } only %}
 
-        {% include "@bolt/ui-list.twig" with {
-          size: "small",
-          contentItems : [
-            {
-              contentItems: [
-                {
-                  pattern: "flag",
-                  valign: "middle",
-                  url: "#!",
-                  figure: {
-                    "icon": {
-                      name: "app-development",
-                      size: "large",
-                      background: "circle",
-                      color: "teal"
-                    }
-                  },
-                  items: [
-                    {
-                      "pattern": "headline",
-                      "size": "small",
-                      "text": "Download the data Sheet",
-                      "url": "https://www.google.com",
-                      "icon": {
-                        name: "chevron-right"
-                      },
-                      tag: "h3"
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              contentItems: [
-                {
-                  pattern: "flag",
-                  valign: "middle",
-                  url: "#!",
-                  figure: {
-                    "icon": {
-                      name: "sales-automation",
-                      size: "large",
-                      background: "circle",
-                      color: "teal"
-                    }
-                  },
-                  items: [
-                    {
-                      "pattern": "headline",
-                      "size": "small",
-                      "text": "Download the Overview document",
-                      "url": "https://www.google.com",
-                      "icon": {
-                        name: "chevron-right"
-                      }
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              contentItems: [
-                {
-                  pattern: "flag",
-                  valign: "middle",
-                  url: "#!",
-                  figure: {
-                    "icon": {
-                      name: "customer-service",
-                      size: "large",
-                      background: "circle",
-                      color: "teal"
-                    }
-                  },
-                  items: [
-                    {
-                      "pattern": "headline",
-                      "size": "small",
-                      "text": "View Pricing for Pega Marketing",
-                      "url": "https://www.google.com",
-                      "icon": {
-                        name: "chevron-right"
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
+        {% include "@bolt-components-list/list.twig" with {
+          display: "block",
+          separator: "solid",
+          spacing: "small",
+          items: [
+            flag_item_1,
+            flag_item_2,
+            flag_item_3,
           ]
         } only %}
       {% endcell %}
diff --git a/packages/components/bolt-figure/src/figure.twig b/packages/components/bolt-figure/src/figure.twig
index c6fc1ea0a4..a55b4a4d76 100644
--- a/packages/components/bolt-figure/src/figure.twig
+++ b/packages/components/bolt-figure/src/figure.twig
@@ -55,8 +55,10 @@
         {% endif %}
       </div>
     {% endif %}
-    <figcaption class="{{ "#{base_class}__caption" }}">
-      {{ caption }}
-    </figcaption>
+    {% if caption %}
+      <figcaption class="{{ "#{base_class}__caption" }}">
+        {{ caption }}
+      </figcaption>
+    {% endif %}
   </figure>
 </bolt-figure>
diff --git a/packages/global/styles/05-objects/objects-flag/_objects-flag.scss b/packages/global/styles/05-objects/objects-flag/_objects-flag.scss
index f4f233a753..b85b5726bf 100755
--- a/packages/global/styles/05-objects/objects-flag/_objects-flag.scss
+++ b/packages/global/styles/05-objects/objects-flag/_objects-flag.scss
@@ -17,9 +17,12 @@ $bolt-flag-alignments: (
 .o-bolt-flag {
   // display: table;
   // width: 100%;
-  @include bolt-margin-bottom(medium);
   display: flex;
   align-items: flex-start;
+
+  &:not(:last-child) {
+    @include bolt-margin-bottom(medium);
+  }
 }
 
 .o-bolt-flag__body {
diff --git a/packages/global/styles/05-objects/objects-flag/src/flag.twig b/packages/global/styles/05-objects/objects-flag/src/flag.twig
index 2b50ab26b4..59d04a1124 100644
--- a/packages/global/styles/05-objects/objects-flag/src/flag.twig
+++ b/packages/global/styles/05-objects/objects-flag/src/flag.twig
@@ -29,14 +29,32 @@
 
 <div {{ attributes.addClass(classes | raw) }}>
   {% if figure %}
+    {% set old_figure_with_icon = figure.icon %}
+    {% set old_figure_with_image = figure.image %}
+
     <div class="o-bolt-flag__figure">
       {% block flag_figure %}
-        {% set figureContent %}  
-          {% include "@bolt/figure.twig" with figure only %}
+        {% set figureContent %}
+          {% if old_figure_with_icon %}
+            {% include "@bolt-components-figure/figure.twig" with {
+              media: {
+                icon: old_figure_with_icon
+              }
+            } only %}
+          {% elseif old_figure_with_image %}
+            {% include "@bolt-components-figure/figure.twig" with {
+              media: {
+                image: old_figure_with_image
+              }
+            } only %}
+          {% else %}
+            {% include "@bolt-components-figure/figure.twig" with figure only %}
+          {% endif %}
         {% endset %}
 
         {% if url %}
-          {% include "@bolt/link.twig" with {
+          {% include "@bolt-components-link/link.twig" with {
+            display: "flex",
             url: url,
             text: figureContent
           } only %}
@@ -56,7 +74,7 @@
           {{ item.text }}
         {% endif %}
       {% endfor %}
-      
+
       {{ content }}
 
     {% endblock %}