Add Logo Group Object (#1415)

* Add logo group object

* Update changelog

* Update margin to remove extra white space around logos

* Update pattern structure

* Update logo alt text

* Update prototype with logo-group

* Update size token

* Update comments in stories

Co-authored-by: Gerardo Rodriguez <[email protected]>

* Update story code

Co-authored-by: Gerardo Rodriguez <[email protected]>

* Remove negative margins

* Update margin and comment

Co-authored-by: Gerardo Rodriguez <[email protected]>

Author: dromo77

.changeset/spotty-olives-watch.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add Logo Group object.

src/objects/logo-group/demo/demo.twig

@@ -0,0 +1,11 @@
+{% embed '@cloudfour/objects/container/container.twig' %}
+  {% block content %}
+    {% embed '@cloudfour/objects/logo-group/logo-group.twig' %}
+      {% block content %}
+        {% for item in items %}
+          <img src="{{ item.src }}" alt="{{ item.alt }}">
+        {% endfor %}
+      {% endblock %}
+    {% endembed %}
+  {% endblock %}
+{% endembed %}

src/objects/logo-group/demo/logos.json

@@ -0,0 +1,30 @@
+[
+  {
+    "alt": "Walmart",
+    "src": "media/client-logos/logo-walmart.svg"
+  },
+  {
+    "alt": "Deschutes Brewery",
+    "src": "media/client-logos/logo-deschutes.svg"
+  },
+  {
+    "alt": "Obama '08",
+    "src": "media/client-logos/logo-obama.svg"
+  },
+  {
+    "alt": "Treasure Coast Hospice",
+    "src": "media/client-logos/logo-treasurecoast.svg"
+  },
+  {
+    "alt": "Entertainment",
+    "src": "media/client-logos/logo-entertainment.svg"
+  },
+  {
+    "alt": "Hautelook",
+    "src": "media/client-logos/logo-hautelook.svg"
+  },
+  {
+    "alt": "Ceasefire Oregon",
+    "src": "media/client-logos/logo-ceasefire.svg"
+  }
+]

src/objects/logo-group/logo-group.scss

@@ -0,0 +1,21 @@
+@use "../../compiled/tokens/scss/size";
+@use '../../mixins/ms';
+
+.o-logo-group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/**
+ * 1. Because there is generous spacing between the logos, we added a lot of
+ *    white space around Logo Group to help balance the pattern visually.
+ *    Including the spacing as part of the pattern means we don't need to rely
+ *    on utilities.
+ */
+
+.o-logo-group > * {
+  margin: size.$spacing-gap-logo-group; /* 1 */
+  width: size.$width-logo-group-item-width;
+}

src/objects/logo-group/logo-group.stories.mdx

@@ -0,0 +1,27 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+// 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 defaultDemoSource from '!!raw-loader!./demo/demo.twig';
+import defaultDemo from './demo/demo.twig';
+import logos from './demo/logos.json';
+
+<Meta title="Objects/Logo Group" />
+
+# Logo Group
+
+Logo Group can be used to display a group of client logos. Logos break onto multiple lines depending on the available space and are vertically centered.
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{ docs: { source: { code: defaultDemoSource } } }}
+  >
+    {defaultDemo({ items: logos })}
+  </Story>
+</Canvas>

src/objects/logo-group/logo-group.twig

@@ -0,0 +1,3 @@
+<div class="o-logo-group">
+  {% block content %}{% endblock %}
+</div>

src/prototypes/case-study-listings/example/example.twig

@@ -100,16 +100,13 @@
         <div class="intro">
           <p class="c-heading--level-3">More clients we’ve worked with</p>
         </div>
-        <div class="content">
-          {% for logos in logos %}
-          <article>
-            <header>
-              <img src="{{logos.image}}"
-              class="logos">
-            </header>
-          </article>
-        {% endfor %}
-        </div>
+        {% embed '@cloudfour/objects/logo-group/logo-group.twig' %}
+          {% block content %}
+            {% for logo in logos %}
+              <img src="{{ logo.image }}" alt="{{ logo.title }}">
+            {% endfor %}
+          {% endblock %}
+        {% endembed %}
       </div>
 
     </div>

src/tokens/size/sizing.js

@@ -29,6 +29,12 @@ module.exports = {
           comment: 'The minimum space to display a default card in a grid.',
         },
       },
+      logo_group: {
+        item_width: {
+          value: '9em',
+          comment: 'The width of individual logos in the logo group.',
+        },
+      },
     },
     square: {
       avatar: {

src/tokens/size/spacing.js

@@ -46,6 +46,9 @@ module.exports = {
             comment: 'The Form Group default gap spacing.',
           },
         },
+        logo_group: {
+          value: modularEm(3),
+        },
       },
       control: {
         text_inset: { value: modularEm(-1) },