Add o-article-header (#2137)

Author: tylersticka

.changeset/shy-bees-doubt.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Adds Article Header layout object for composing an article's title with relevant meta information

src/objects/article-header/article-header.scss

@@ -0,0 +1,10 @@
+@use '../../compiled/tokens/scss/size';
+
+.o-article-header {
+  display: grid;
+  gap: size.$rhythm-condensed;
+}
+
+.o-article-header__eyebrow {
+  order: -1;
+}

src/objects/article-header/article-header.stories.mdx

@@ -0,0 +1,41 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+// 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 exampleDemoSource from '!!raw-loader!./demo/example.twig';
+import exampleDemo from './demo/example.twig';
+
+<Meta title="Objects/Article Header" />
+
+# Article Header
+
+The Article Header layout object composes an article's title and meta information. The "eyebrow" block is visually oriented above the title, providing additional context up-front (such as the article's taxonomy).
+
+<Canvas>
+  <Story
+    name="Example"
+    parameters={{
+      docs: {
+        source: {
+          code: exampleDemoSource,
+        },
+      },
+    }}
+  >
+    {exampleDemo()}
+  </Story>
+</Canvas>
+
+## Template Properties
+
+- `class` (string, optional): Additional CSS classes to append to `class` attribute of containing element.
+- `eyebrow` (block): Additional meta content, will display above `title` visually.
+- `meta` (block): Supporting content, such as the author and/or publication date.
+- `tag_name` (string, default: `header`): Tag to use for containing element.
+- `title` (block): The article heading.

src/objects/article-header/article-header.twig

@@ -0,0 +1,12 @@
+{% set _tag_name = tag_name|default('header') %}
+{% set _eyebrow_block %}{% block eyebrow %}{% endblock %}{% endset %}
+
+<{{_tag_name}} class="o-article-header{% if class %} {{class}}{% endif %}">
+  {% block title %}{% endblock %}
+  {% block meta %}{% endblock %}
+  {% if _eyebrow_block|trim is not empty %}
+    <div class="o-article-header__eyebrow">
+      {{_eyebrow_block}}
+    </div>
+  {% endif %}
+</{{_tag_name}}>

src/objects/article-header/demo/example.twig

@@ -0,0 +1,46 @@
+{% embed '@cloudfour/objects/article-header/article-header.twig' only %}
+  {% block title %}
+    {% include '@cloudfour/components/heading/heading.twig' with {
+      "level": -1,
+      "content": "A Rather Long Headline So We Don’t Forget About Line Breaks"
+    } only %}
+  {% endblock %}
+  {% block meta %}
+    {% include '@cloudfour/components/author/author.twig' with {
+      "authors": [
+        {
+          "name": "Buster Boo",
+          "avatar": "/media/avatar-buster-b.jpg",
+          "link": "#"
+        }
+      ],
+      "date": "2022-03-28T12:00:00.000Z"
+    } only %}
+  {% endblock %}
+  {% block eyebrow %}
+    <h2 class="u-hidden-visually">Categories</h2>
+    <ul class="o-list o-list--inline">
+      <li>
+        {% include '@cloudfour/components/badge/badge.twig' with {
+          "label": "CSS",
+          "href": "#",
+          "rel": "category"
+        } only %}
+      </li>
+      <li>
+        {% include '@cloudfour/components/badge/badge.twig' with {
+          "label": "HTML",
+          "href": "#",
+          "rel": "category"
+        } only %}
+      </li>
+      <li>
+        {% include '@cloudfour/components/badge/badge.twig' with {
+          "label": "Responsive Design",
+          "href": "#",
+          "rel": "category"
+        } only %}
+      </li>
+    </ul>
+  {% endblock %}
+{% endembed %}