From e81a3f5363b0bc34751bbf15e50c05b53d74cdf1 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 09:33:17 -0700
Subject: [PATCH 01/19] Start overview component

---
 src/components/button/button.scss         |  1 +
 src/objects/overview/demo/advanced.twig   | 28 +++++++++++++++++++
 src/objects/overview/demo/basic.twig      | 11 ++++++++
 src/objects/overview/overview.scss        | 22 +++++++++++++++
 src/objects/overview/overview.stories.mdx | 33 +++++++++++++++++++++++
 src/objects/overview/overview.twig        | 14 ++++++++++
 6 files changed, 109 insertions(+)
 create mode 100644 src/objects/overview/demo/advanced.twig
 create mode 100644 src/objects/overview/demo/basic.twig
 create mode 100644 src/objects/overview/overview.scss
 create mode 100644 src/objects/overview/overview.stories.mdx
 create mode 100644 src/objects/overview/overview.twig

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index eee0cc24c..e9047fe1b 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -2,6 +2,7 @@
 
 .c-button {
   @include button.default;
+  flex-grow: none;
 }
 
 /**
diff --git a/src/objects/overview/demo/advanced.twig b/src/objects/overview/demo/advanced.twig
new file mode 100644
index 000000000..1ecb76fdf
--- /dev/null
+++ b/src/objects/overview/demo/advanced.twig
@@ -0,0 +1,28 @@
+{% embed '@cloudfour/objects/overview/overview.twig' %}
+  {% block header %}
+    {% include '@cloudfour/components/heading/heading.twig' with {
+      level: -1,
+      weight: "light",
+      content: 'More Topics',
+    } only %}
+  {% endblock %}
+  {% block actions %}
+    {#
+      In the future we could swap this out for the Input Group component
+      that's currently in the works.
+    #}
+    <label>
+      <span class="u-hidden-visually">Search</span>
+      {% include '@cloudfour/components/input/input.twig' %}
+    </label>
+  {% endblock %}
+  {% block content %}
+    <p>
+      Etiam et egestas lorem. Vivamus sagittis sit amet dolor quis lobortis.
+      Integer sed fermentum arcu, id vulputate lacus. Etiam fermentum sem eu
+      quam hendrerit.
+      Nam risus massa, ullamcorper consectetur eros fermentum, porta aliquet
+      ligula. Sed vel mauris nec enim.
+    </p>
+  {% endblock %}
+{% endembed %}
diff --git a/src/objects/overview/demo/basic.twig b/src/objects/overview/demo/basic.twig
new file mode 100644
index 000000000..76ab9864a
--- /dev/null
+++ b/src/objects/overview/demo/basic.twig
@@ -0,0 +1,11 @@
+{% embed '@cloudfour/objects/overview/overview.twig' %}
+  {% block header %}
+    Header
+  {% endblock %}
+  {% block actions %}
+    Actions
+  {% endblock %}
+  {% block content %}
+    Content
+  {% endblock %}
+{% endembed %}
diff --git a/src/objects/overview/overview.scss b/src/objects/overview/overview.scss
new file mode 100644
index 000000000..29ee645e2
--- /dev/null
+++ b/src/objects/overview/overview.scss
@@ -0,0 +1,22 @@
+@use "../../compiled/tokens/scss/breakpoint";
+@use '../../mixins/ms';
+
+// TODO: Design tokens?
+
+.o-overview__header {
+  padding-bottom: ms.step(1);
+}
+
+.o-overview__actions {
+  padding-bottom: ms.step(3);
+}
+
+@media (min-width: breakpoint.$l) {
+  .o-overview {
+    display: grid;
+    grid-template-areas: "
+      header header actions
+      content content content
+    ";
+  }
+}
diff --git a/src/objects/overview/overview.stories.mdx b/src/objects/overview/overview.stories.mdx
new file mode 100644
index 000000000..83547bd4e
--- /dev/null
+++ b/src/objects/overview/overview.stories.mdx
@@ -0,0 +1,33 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+import basicDemo from './demo/basic.twig';
+import advancedDemo from './demo/advanced.twig';
+
+<!--
+Inline stories disabled so media queries will behave as expected within
+embedded examples.
+-->
+
+<Meta
+  title="Objects/Overview"
+  parameters={{ docs: { inlineStories: false } }}
+/>
+
+# Overview
+
+TODO
+
+<Canvas>
+  <Story name="Basic" height="300px">
+    {basicDemo.bind({})}
+  </Story>
+</Canvas>
+
+# Advanced Usags
+
+TODO
+
+<Canvas>
+  <Story name="Advanced Usage" height="300px">
+    {advancedDemo.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/objects/overview/overview.twig b/src/objects/overview/overview.twig
new file mode 100644
index 000000000..f24d4cada
--- /dev/null
+++ b/src/objects/overview/overview.twig
@@ -0,0 +1,14 @@
+{# TODO: More semantic elements #}
+{# TODO: aria-labelledby? #}
+
+<section class="o-overview">
+  <div class="o-overview__header">
+    {% block header %}{% endblock %}
+  </div>
+  <div class="o-overview__actions">
+    {% block actions %}{% endblock %}
+  </div>
+  <div class="o-overview__content">
+    {% block content %}{% endblock %}
+  </div>
+</section>

From 7eabae6ecef909a61bce2b3c55771c539e82f16b Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 11:07:15 -0700
Subject: [PATCH 02/19] Wrap up overview CSS

---
 src/objects/overview/overview.scss | 40 +++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/objects/overview/overview.scss b/src/objects/overview/overview.scss
index 29ee645e2..65d62e5a7 100644
--- a/src/objects/overview/overview.scss
+++ b/src/objects/overview/overview.scss
@@ -1,22 +1,50 @@
 @use "../../compiled/tokens/scss/breakpoint";
 @use '../../mixins/ms';
+@use "../../compiled/tokens/scss/size";
+@use '../../mixins/fluid';
 
 // TODO: Design tokens?
 
 .o-overview__header {
-  padding-bottom: ms.step(1);
+  margin-bottom: ms.step(1);
 }
 
 .o-overview__actions {
-  padding-bottom: ms.step(3);
+  margin-bottom: ms.step(3);
 }
 
 @media (min-width: breakpoint.$l) {
   .o-overview {
+    @include fluid.column-gap(
+      breakpoint.$s,
+      breakpoint.$xl,
+      size.$spacing-gap-fluid-min,
+      size.$spacing-gap-fluid-max
+    );
+
+    align-items: center;
     display: grid;
-    grid-template-areas: "
-      header header actions
-      content content content
-    ";
+    grid-template-areas:
+      'header header actions'
+      'content content content';
+    grid-template-columns: repeat(3, minmax(max-content, 1fr));
+    row-gap: ms.step(3);
+  }
+
+  .o-overview__header,
+  .o-overview__actions {
+    margin: 0;
+  }
+
+  .o-overview__header {
+    grid-area: header;
+  }
+
+  .o-overview__actions {
+    grid-area: actions;
+  }
+
+  .o-overview__content {
+    grid-area: content;
   }
 }

From 4a09415ea48bfe4253c68b115f641c9f927bc80c Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 11:07:34 -0700
Subject: [PATCH 03/19] Add advanced example

---
 src/objects/overview/demo/advanced.twig   | 23 ++++++++++++++++-------
 src/objects/overview/overview.stories.mdx |  3 ++-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/objects/overview/demo/advanced.twig b/src/objects/overview/demo/advanced.twig
index 1ecb76fdf..6154e8d77 100644
--- a/src/objects/overview/demo/advanced.twig
+++ b/src/objects/overview/demo/advanced.twig
@@ -17,12 +17,21 @@
     </label>
   {% endblock %}
   {% block content %}
-    <p>
-      Etiam et egestas lorem. Vivamus sagittis sit amet dolor quis lobortis.
-      Integer sed fermentum arcu, id vulputate lacus. Etiam fermentum sem eu
-      quam hendrerit.
-      Nam risus massa, ullamcorper consectetur eros fermentum, porta aliquet
-      ligula. Sed vel mauris nec enim.
-    </p>
+    {% embed '@cloudfour/objects/list/list.twig' with {
+      "tag_name": "ul",
+      "class": "o-list--2-column@m o-list--3-column@l"
+    } %}
+      {% block content %}
+        {% for topic in topics %}
+          <li class="u-space-block-end-0">
+            {% include '@cloudfour/components/dot-leader/dot-leader.twig' with {
+              label: topic.title,
+              count: topic.count,
+              href: 'https://cloudfour.com/thinks/'
+            } only %}
+          </li>
+        {% endfor %}
+      {% endblock %}
+    {% endembed %}
   {% endblock %}
 {% endembed %}
diff --git a/src/objects/overview/overview.stories.mdx b/src/objects/overview/overview.stories.mdx
index 83547bd4e..bd6dafd36 100644
--- a/src/objects/overview/overview.stories.mdx
+++ b/src/objects/overview/overview.stories.mdx
@@ -1,6 +1,7 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import basicDemo from './demo/basic.twig';
 import advancedDemo from './demo/advanced.twig';
+import topics from '../../components/dot-leader/demo/topics.json';
 
 <!--
 Inline stories disabled so media queries will behave as expected within
@@ -28,6 +29,6 @@ TODO
 
 <Canvas>
   <Story name="Advanced Usage" height="300px">
-    {advancedDemo.bind({})}
+    {advancedDemo({topics})}
   </Story>
 </Canvas>

From ac2b12965897491e2bd94587e5b1947465f4a682 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 11:08:15 -0700
Subject: [PATCH 04/19] Update prototype to use overview

---
 .../article-listing/example/example.scss      |  5 --
 .../article-listing/example/example.twig      | 70 ++++++++++---------
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/prototypes/article-listing/example/example.scss b/src/prototypes/article-listing/example/example.scss
index f1a300284..4f3e3fccd 100644
--- a/src/prototypes/article-listing/example/example.scss
+++ b/src/prototypes/article-listing/example/example.scss
@@ -94,11 +94,6 @@
     align-items: center;
     display: flex;
     grid-column: 3 / -1;
-    padding-top: ms.step(1);
-
-    @media (min-width: breakpoint.$l) {
-      padding-top: 0;
-    }
   }
 
   .search-input {
diff --git a/src/prototypes/article-listing/example/example.twig b/src/prototypes/article-listing/example/example.twig
index ef0e29308..48bda2280 100644
--- a/src/prototypes/article-listing/example/example.twig
+++ b/src/prototypes/article-listing/example/example.twig
@@ -168,41 +168,47 @@
   {% endfor %}
   <div class="o-container o-container--pad">
     <div class="o-container__content">
-      <div class="topics-header">
-        {% include '@cloudfour/components/heading/heading.twig' with {
-          level: -1,
-          tag_name: 'h2',
-          weight: 'light',
-          content: 'More Topics',
-        } only %}
-        <div class="search-content">
-          {% include '@cloudfour/components/input/input.twig' with {
-            class: 'search-input'
-          }  %}
-          {% embed '@cloudfour/components/button/button.twig' with {
-            class: 'search-btn'
-          }  %}
+      {% embed '@cloudfour/objects/overview/overview.twig' %}
+        {% block header %}
+          {% include '@cloudfour/components/heading/heading.twig' with {
+            level: -1,
+            weight: "light",
+            content: 'More Topics',
+          } only %}
+        {% endblock %}
+        {% block actions %}
+          <div class="search-content">
+            {% include '@cloudfour/components/input/input.twig' with {
+              class: 'search-input'
+            }  %}
+            {% embed '@cloudfour/components/button/button.twig' with {
+              class: 'search-btn'
+            }  %}
+              {% block content %}
+                {% include '@cloudfour/components/icon/icon.twig' with {
+                  name: 'magnifying-glass'
+                } %}
+              {% endblock %}
+            {% endembed %}
+          </div>
+        {% endblock %}
+        {% block content %}
+          {% embed '@cloudfour/objects/list/list.twig' with {
+            "tag_name": "ul",
+            "class": "o-list--2-column@m o-list--3-column@l"
+          } %}
             {% block content %}
-              {% include '@cloudfour/components/icon/icon.twig' with {
-                name: 'magnifying-glass'
-              } %}
+              {% for topic in topics %}
+                <li class="u-space-block-end-0">
+                  {% include '@cloudfour/components/dot-leader/dot-leader.twig' with {
+                    label: topic.title,
+                    count: topic.count,
+                    href: 'https://cloudfour.com/thinks/'
+                  } only %}
+                </li>
+              {% endfor %}
             {% endblock %}
           {% endembed %}
-        </div>
-      </div>
-      {% embed '@cloudfour/objects/list/list.twig' with {
-        class: 'topics-content'
-      } %}
-        {% block content %}
-          {% for topic in topics %}
-            <li>
-              {% include '@cloudfour/components/dot-leader/dot-leader.twig' with {
-                label: topic.title,
-                count: topic.count,
-                href: 'https://cloudfour.com/thinks/'
-              } only %}
-            </li>
-          {% endfor %}
         {% endblock %}
       {% endembed %}
     </div>

From 18fe99edd59aed3917a9e9b20231753dac7094f7 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 11:24:56 -0700
Subject: [PATCH 05/19] Make wrapper tag configurable

---
 src/objects/overview/overview.twig | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/objects/overview/overview.twig b/src/objects/overview/overview.twig
index f24d4cada..79ec3409f 100644
--- a/src/objects/overview/overview.twig
+++ b/src/objects/overview/overview.twig
@@ -1,14 +1,13 @@
-{# TODO: More semantic elements #}
 {# TODO: aria-labelledby? #}
 
-<section class="o-overview">
-  <div class="o-overview__header">
+<{{overview_tag|default('section')}} class="o-overview">
+  <header class="o-overview__header">
     {% block header %}{% endblock %}
-  </div>
+  </header>
   <div class="o-overview__actions">
     {% block actions %}{% endblock %}
   </div>
   <div class="o-overview__content">
     {% block content %}{% endblock %}
   </div>
-</section>
+</{{overview_tag|default('section')}}>

From 3766284e58f87782dfbd4fd60a9bb4947bf0f876 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 11:54:22 -0700
Subject: [PATCH 06/19] Make heading IDs more flexible

---
 src/components/heading/heading.stories.mdx |  2 ++
 src/components/heading/heading.twig        | 16 ++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/heading/heading.stories.mdx b/src/components/heading/heading.stories.mdx
index 05de59fe4..98569489a 100644
--- a/src/components/heading/heading.stories.mdx
+++ b/src/components/heading/heading.stories.mdx
@@ -76,6 +76,8 @@ The `c-heading` class may include a permalink using [a technique from Marcy Sutt
 - `c-heading__content`: The actual semantic heading element (usually `<h1>` – `<h6>`), including the `id` referenced by `c-heading__permalink`.
 - `c-heading__permalink`: The `<a>` element that exposes the permalink to the user. This element is kept separate from the actual heading so it won't disrupt a user's ability to navigate via headings.
 
+You can specify an ID that will be used for the heading (and therefore the permalink hash) using the `id` property. (The `id` property can also be used without permalinking.)
+
 Note that the layout of this pattern is optimized for [our prose containers](/docs/objects-container--prose#prose) with generous horizontal whitespace.
 
 <!--
diff --git a/src/components/heading/heading.twig b/src/components/heading/heading.twig
index f7af6865d..ef8cd23c1 100644
--- a/src/components/heading/heading.twig
+++ b/src/components/heading/heading.twig
@@ -47,15 +47,15 @@
 {% endset %}
 
 {#
-  If a `permalink` is desired but no `permalink_id` is specified, we try
-  creating a `permalink_id` from the value of `content`.
+  If a `permalink` is desired but no `id` is specified, we try
+  creating a `id` from the value of `content`.
 
   Since Twig lacks a built-in slugify function, this is pretty fragile and
   should be considered a fallback.
 #}
 
-{% if permalink and not permalink_id and content is not empty %}
-  {% set permalink_id = content|lower|escape('url')|replace({'%20': '-'}) %}
+{% if permalink and not id and content is not empty %}
+  {% set id = content|lower|escape('url')|replace({'%20': '-'}) %}
 {% endif %}
 
 {#
@@ -63,21 +63,21 @@
   Marcy Sutton: http://codepen.io/marcysutton/pen/rLKvgZ
 #}
 
-{% if permalink and permalink_id %}
+{% if permalink and id %}
   <div class="{{ _heading_class }}">
-    <a class="c-heading__permalink" href="#{{ permalink_id }}">
+    <a class="c-heading__permalink" href="#{{ id }}">
       {% include '@cloudfour/components/icon/icon.twig' with {
         name: 'link',
         aria_hidden: 'true'
       } only %}
       <span class="u-hidden-visually">Permalink to {{ _content }}</span>
     </a>
-    <{{ tag_name }} class="c-heading__content" id="{{ permalink_id }}">
+    <{{ tag_name }} class="c-heading__content" id="{{ id }}">
       {{ _content }}
     </{{ tag_name }}>
   </div>
 {% else %}
-  <{{ tag_name }} class="{{ _heading_class }}">
+  <{{ tag_name }} class="{{ _heading_class }}" {% if id %}id="{{id}}"{% endif %}>
     {{ _content }}
   </{{ tag_name }}>
 {% endif %}

From 8c32edf885550b7a574317bd193c7d4ed8596c20 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 11:59:59 -0700
Subject: [PATCH 07/19] Handle aria labelledby

---
 src/objects/overview/demo/advanced.twig             | 5 ++++-
 src/objects/overview/overview.twig                  | 7 ++++---
 src/prototypes/article-listing/example/example.twig | 5 ++++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/objects/overview/demo/advanced.twig b/src/objects/overview/demo/advanced.twig
index 6154e8d77..220d04e75 100644
--- a/src/objects/overview/demo/advanced.twig
+++ b/src/objects/overview/demo/advanced.twig
@@ -1,9 +1,12 @@
-{% embed '@cloudfour/objects/overview/overview.twig' %}
+{% embed '@cloudfour/objects/overview/overview.twig' with {
+  labelledby_id: 'more-topics'
+} %}
   {% block header %}
     {% include '@cloudfour/components/heading/heading.twig' with {
       level: -1,
       weight: "light",
       content: 'More Topics',
+      id: 'more-topics'
     } only %}
   {% endblock %}
   {% block actions %}
diff --git a/src/objects/overview/overview.twig b/src/objects/overview/overview.twig
index 79ec3409f..17426ccdd 100644
--- a/src/objects/overview/overview.twig
+++ b/src/objects/overview/overview.twig
@@ -1,6 +1,7 @@
-{# TODO: aria-labelledby? #}
-
-<{{overview_tag|default('section')}} class="o-overview">
+<{{overview_tag|default('section')}}
+  class="o-overview"
+  {% if labelledby_id %}aria-labelledby="{{labelledby_id}}"{% endif %}
+>
   <header class="o-overview__header">
     {% block header %}{% endblock %}
   </header>
diff --git a/src/prototypes/article-listing/example/example.twig b/src/prototypes/article-listing/example/example.twig
index 48bda2280..b78de8bb9 100644
--- a/src/prototypes/article-listing/example/example.twig
+++ b/src/prototypes/article-listing/example/example.twig
@@ -168,12 +168,15 @@
   {% endfor %}
   <div class="o-container o-container--pad">
     <div class="o-container__content">
-      {% embed '@cloudfour/objects/overview/overview.twig' %}
+      {% embed '@cloudfour/objects/overview/overview.twig' with {
+        labelledby_id: 'more-topics'
+      }  %}
         {% block header %}
           {% include '@cloudfour/components/heading/heading.twig' with {
             level: -1,
             weight: "light",
             content: 'More Topics',
+            id: 'more-topics'
           } only %}
         {% endblock %}
         {% block actions %}

From 6965bc8e8787465f4c0af98a0186952c7e350f49 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 12:18:04 -0700
Subject: [PATCH 08/19] Add docs

---
 src/objects/overview/overview.stories.mdx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/objects/overview/overview.stories.mdx b/src/objects/overview/overview.stories.mdx
index bd6dafd36..e7771c271 100644
--- a/src/objects/overview/overview.stories.mdx
+++ b/src/objects/overview/overview.stories.mdx
@@ -15,7 +15,9 @@ embedded examples.
 
 # Overview
 
-TODO
+The Overview object can be used to provide an overview of a site section. For example, the overview is used to provide an index of article categories, as well as a form to search for articles. It handles the responsive layout of `header`, `actions`, and `content` blocks.
+
+The Overview object should usually be placed in a [Container](/docs/objects-container--basic).
 
 <Canvas>
   <Story name="Basic" height="300px">
@@ -23,12 +25,23 @@ TODO
   </Story>
 </Canvas>
 
-# Advanced Usags
+## Advanced Usage
 
-TODO
+Here's a more complex usage example, showing how the Overview object could be used on the article listing page.
 
 <Canvas>
   <Story name="Advanced Usage" height="300px">
     {advancedDemo({topics})}
   </Story>
 </Canvas>
+
+## Template Properties
+
+- `overview_tag` - defaults to `section` but can be switched out for any HTML tag.
+- `labelledby_id` - an optional ID to use with the `aria-labelledby` attribute.
+
+## Template blocks
+
+- `header` - should generally contain a [Heading](/docs/components-heading--levels)
+- `actions` - could contain a searchbar or other actions
+- `content` the primary overview content. For example, a list of categories.

From 97501b41c9c5561d1a1aeb83a3dcdfe8b0b0c589 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 12:25:14 -0700
Subject: [PATCH 09/19] Improve docs

---
 src/objects/overview/overview.stories.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/objects/overview/overview.stories.mdx b/src/objects/overview/overview.stories.mdx
index e7771c271..8f916a5b0 100644
--- a/src/objects/overview/overview.stories.mdx
+++ b/src/objects/overview/overview.stories.mdx
@@ -15,7 +15,9 @@ embedded examples.
 
 # Overview
 
-The Overview object can be used to provide an overview of a site section. For example, the overview is used to provide an index of article categories, as well as a form to search for articles. It handles the responsive layout of `header`, `actions`, and `content` blocks.
+The Overview object can be used to provide an overview of a site section. For example, the overview is used to provide an index of article categories, as well as a form to search for articles.
+
+It handles the responsive layout of `header`, `actions`, and `content` blocks. On small screens they are stacked vertically. On large screens the `header` and `actions` blocks stack horizontally above the `content` block.
 
 The Overview object should usually be placed in a [Container](/docs/objects-container--basic).
 

From f85d9f135ffdcb498810cc9ddc9b295fab78b05b Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 12:27:36 -0700
Subject: [PATCH 10/19] Add changesets

---
 .changeset/five-turkeys-double.md | 5 +++++
 .changeset/shaggy-pumpkins-hug.md | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/five-turkeys-double.md
 create mode 100644 .changeset/shaggy-pumpkins-hug.md

diff --git a/.changeset/five-turkeys-double.md b/.changeset/five-turkeys-double.md
new file mode 100644
index 000000000..10b8a6fcf
--- /dev/null
+++ b/.changeset/five-turkeys-double.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': major
+---
+
+Renamed the Heading property from `permalink_id` to `id` and allowed you to use `id` when `permalink` is false.
diff --git a/.changeset/shaggy-pumpkins-hug.md b/.changeset/shaggy-pumpkins-hug.md
new file mode 100644
index 000000000..ef97711e9
--- /dev/null
+++ b/.changeset/shaggy-pumpkins-hug.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Added Overview object for use in Article Listings

From 4263de752ea2c495c72fb81c1710c1a7f445c526 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 12:28:34 -0700
Subject: [PATCH 11/19] Lint

---
 src/objects/overview/overview.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/objects/overview/overview.stories.mdx b/src/objects/overview/overview.stories.mdx
index 8f916a5b0..ee424556b 100644
--- a/src/objects/overview/overview.stories.mdx
+++ b/src/objects/overview/overview.stories.mdx
@@ -33,7 +33,7 @@ Here's a more complex usage example, showing how the Overview object could be us
 
 <Canvas>
   <Story name="Advanced Usage" height="300px">
-    {advancedDemo({topics})}
+    {advancedDemo({ topics })}
   </Story>
 </Canvas>
 

From 1b7245c204997f6ad948594a3f6bac8364e1cc26 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 12:37:18 -0700
Subject: [PATCH 12/19] Remove accidental change

---
 src/components/button/button.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index e9047fe1b..eee0cc24c 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -2,7 +2,6 @@
 
 .c-button {
   @include button.default;
-  flex-grow: none;
 }
 
 /**

From 5d25302c95e12675f39105bd474ff43d2244a7ec Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 12:42:38 -0700
Subject: [PATCH 13/19] Add some basic CSS comments

---
 src/objects/overview/overview.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/objects/overview/overview.scss b/src/objects/overview/overview.scss
index 65d62e5a7..a770c4224 100644
--- a/src/objects/overview/overview.scss
+++ b/src/objects/overview/overview.scss
@@ -3,7 +3,11 @@
 @use "../../compiled/tokens/scss/size";
 @use '../../mixins/fluid';
 
-// TODO: Design tokens?
+/**
+ * The Overview stacks content vertically on small screens.
+ * On large screens the header and actions are stacked horizontally above the content.
+ * The specific spacing values were inferred from the Article Listing prototype.
+ */
 
 .o-overview__header {
   margin-bottom: ms.step(1);

From 63efb3d7eab61f5e63f3280e11565dd3e700e1fa Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 12:49:32 -0700
Subject: [PATCH 14/19] Add source code examples to docs

---
 src/objects/overview/overview.stories.mdx | 36 +++++++++++++++++++++--
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/objects/overview/overview.stories.mdx b/src/objects/overview/overview.stories.mdx
index ee424556b..da119afbc 100644
--- a/src/objects/overview/overview.stories.mdx
+++ b/src/objects/overview/overview.stories.mdx
@@ -1,6 +1,16 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import basicDemo from './demo/basic.twig';
-import advancedDemo from './demo/advanced.twig';
+import advancedDemo from './demo/advanced.twig'; // The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax.
+// See: https://github.com/webpack-contrib/raw-loader#examples
+// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are
+// okay with the following Webpack-specific raw loader syntax. It's better to leave
+// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g.
+// within a Storybook docs page and not within an actual component).
+// This can be revisited in the future if Storybook no longer relies on Webpack.
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import basicDemoSource from '!!raw-loader!./demo/basic.twig';
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import advancedDemoSource from '!!raw-loader!./demo/advanced.twig';
 import topics from '../../components/dot-leader/demo/topics.json';
 
 <!--
@@ -22,7 +32,17 @@ It handles the responsive layout of `header`, `actions`, and `content` blocks. O
 The Overview object should usually be placed in a [Container](/docs/objects-container--basic).
 
 <Canvas>
-  <Story name="Basic" height="300px">
+  <Story
+    name="Basic"
+    height="300px"
+    parameters={{
+      docs: {
+        source: {
+          code: basicDemoSource,
+        },
+      },
+    }}
+  >
     {basicDemo.bind({})}
   </Story>
 </Canvas>
@@ -32,7 +52,17 @@ The Overview object should usually be placed in a [Container](/docs/objects-cont
 Here's a more complex usage example, showing how the Overview object could be used on the article listing page.
 
 <Canvas>
-  <Story name="Advanced Usage" height="300px">
+  <Story
+    name="Advanced Usage"
+    height="300px"
+    parameters={{
+      docs: {
+        source: {
+          code: advancedDemoSource,
+        },
+      },
+    }}
+  >
     {advancedDemo({ topics })}
   </Story>
 </Canvas>

From 1e532a2367f3b7715b33fcf39e0352b8931d5e17 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 12:51:01 -0700
Subject: [PATCH 15/19] Doc tweaks

---
 src/objects/overview/overview.stories.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/objects/overview/overview.stories.mdx b/src/objects/overview/overview.stories.mdx
index da119afbc..dc30cb307 100644
--- a/src/objects/overview/overview.stories.mdx
+++ b/src/objects/overview/overview.stories.mdx
@@ -25,11 +25,11 @@ embedded examples.
 
 # Overview
 
-The Overview object can be used to provide an overview of a site section. For example, the overview is used to provide an index of article categories, as well as a form to search for articles.
+The Overview object can be used to provide an overview of a site section. For example, it is used to provide an index of article categories, as well as a form to search for articles.
 
 It handles the responsive layout of `header`, `actions`, and `content` blocks. On small screens they are stacked vertically. On large screens the `header` and `actions` blocks stack horizontally above the `content` block.
 
-The Overview object should usually be placed in a [Container](/docs/objects-container--basic).
+It should usually be placed in a [Container](/docs/objects-container--basic).
 
 <Canvas>
   <Story

From 463c9cd46dad96891b0ac07cc3f1ca3a3992dd59 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 12:52:21 -0700
Subject: [PATCH 16/19] Another doc tweak

---
 src/objects/overview/overview.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/objects/overview/overview.stories.mdx b/src/objects/overview/overview.stories.mdx
index dc30cb307..3821c3d32 100644
--- a/src/objects/overview/overview.stories.mdx
+++ b/src/objects/overview/overview.stories.mdx
@@ -43,7 +43,7 @@ It should usually be placed in a [Container](/docs/objects-container--basic).
       },
     }}
   >
-    {basicDemo.bind({})}
+    {basicDemo()}
   </Story>
 </Canvas>
 

From 45224f24a79231d81ba8ee589a5c8a07606009d1 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 12:54:25 -0700
Subject: [PATCH 17/19] Remove replaced prototype CSS

---
 .../article-listing/example/example.scss      | 38 -------------------
 1 file changed, 38 deletions(-)

diff --git a/src/prototypes/article-listing/example/example.scss b/src/prototypes/article-listing/example/example.scss
index 4f3e3fccd..e20702910 100644
--- a/src/prototypes/article-listing/example/example.scss
+++ b/src/prototypes/article-listing/example/example.scss
@@ -74,26 +74,8 @@
     }
   }
 
-  .topics-header {
-    padding-bottom: ms.step(3);
-
-    @media (min-width: breakpoint.$l) {
-      display: grid;
-      @include fluid.grid-gap(
-        breakpoint.$s,
-        breakpoint.$xl,
-        size.$spacing-gap-fluid-min,
-        size.$spacing-gap-fluid-max
-      );
-      grid-template-columns: repeat(3, minmax(max-content, 1fr));
-      padding-bottom: ms.step(3);
-    }
-  }
-
   .search-content {
-    align-items: center;
     display: flex;
-    grid-column: 3 / -1;
   }
 
   .search-input {
@@ -110,24 +92,4 @@
   .search-btn .c-icon {
     font-size: ms.step(1);
   }
-
-  .topics-content {
-    @media (min-width: breakpoint.$m) {
-      columns: 2;
-      @include fluid.grid-gap(
-        breakpoint.$s,
-        breakpoint.$xl,
-        size.$spacing-gap-fluid-min,
-        size.$spacing-gap-fluid-max
-      );
-    }
-
-    @media (min-width: breakpoint.$l) {
-      columns: 3;
-    }
-  }
-
-  .topics-content li {
-    margin-bottom: ms.step(0);
-  }
 }

From 4435c0bff1bc8e5b6d131ae5e93587da8874a8d7 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 12:56:23 -0700
Subject: [PATCH 18/19] Add CSS supports statement

---
 src/objects/overview/overview.scss | 68 +++++++++++++++---------------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/src/objects/overview/overview.scss b/src/objects/overview/overview.scss
index a770c4224..28809d563 100644
--- a/src/objects/overview/overview.scss
+++ b/src/objects/overview/overview.scss
@@ -17,38 +17,40 @@
   margin-bottom: ms.step(3);
 }
 
-@media (min-width: breakpoint.$l) {
-  .o-overview {
-    @include fluid.column-gap(
-      breakpoint.$s,
-      breakpoint.$xl,
-      size.$spacing-gap-fluid-min,
-      size.$spacing-gap-fluid-max
-    );
-
-    align-items: center;
-    display: grid;
-    grid-template-areas:
-      'header header actions'
-      'content content content';
-    grid-template-columns: repeat(3, minmax(max-content, 1fr));
-    row-gap: ms.step(3);
-  }
-
-  .o-overview__header,
-  .o-overview__actions {
-    margin: 0;
-  }
-
-  .o-overview__header {
-    grid-area: header;
-  }
-
-  .o-overview__actions {
-    grid-area: actions;
-  }
-
-  .o-overview__content {
-    grid-area: content;
+@supports (display: grid) {
+  @media (min-width: breakpoint.$l) {
+    .o-overview {
+      @include fluid.column-gap(
+        breakpoint.$s,
+        breakpoint.$xl,
+        size.$spacing-gap-fluid-min,
+        size.$spacing-gap-fluid-max
+      );
+
+      align-items: center;
+      display: grid;
+      grid-template-areas:
+        'header header actions'
+        'content content content';
+      grid-template-columns: repeat(3, minmax(max-content, 1fr));
+      row-gap: ms.step(3);
+    }
+
+    .o-overview__header,
+    .o-overview__actions {
+      margin: 0;
+    }
+
+    .o-overview__header {
+      grid-area: header;
+    }
+
+    .o-overview__actions {
+      grid-area: actions;
+    }
+
+    .o-overview__content {
+      grid-area: content;
+    }
   }
 }

From 074105da475af6394396481512441401432520e4 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Fri, 16 Jul 2021 13:28:02 -0700
Subject: [PATCH 19/19] Simplify grid CSS

---
 src/objects/overview/overview.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/objects/overview/overview.scss b/src/objects/overview/overview.scss
index 28809d563..98baf3db0 100644
--- a/src/objects/overview/overview.scss
+++ b/src/objects/overview/overview.scss
@@ -32,7 +32,7 @@
       grid-template-areas:
         'header header actions'
         'content content content';
-      grid-template-columns: repeat(3, minmax(max-content, 1fr));
+      grid-template-columns: repeat(3, 1fr);
       row-gap: ms.step(3);
     }