diff --git a/.changeset/spotty-olives-watch.md b/.changeset/spotty-olives-watch.md new file mode 100644 index 000000000..abfd6e4f9 --- /dev/null +++ b/.changeset/spotty-olives-watch.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add Logo Group object. diff --git a/src/objects/logo-group/demo/demo.twig b/src/objects/logo-group/demo/demo.twig new file mode 100644 index 000000000..27b646ac2 --- /dev/null +++ b/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 %} + {{ item.alt }} + {% endfor %} + {% endblock %} + {% endembed %} + {% endblock %} +{% endembed %} diff --git a/src/objects/logo-group/demo/logos.json b/src/objects/logo-group/demo/logos.json new file mode 100644 index 000000000..f28cd8eb6 --- /dev/null +++ b/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" + } +] diff --git a/src/objects/logo-group/logo-group.scss b/src/objects/logo-group/logo-group.scss new file mode 100644 index 000000000..e40da58e0 --- /dev/null +++ b/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; +} diff --git a/src/objects/logo-group/logo-group.stories.mdx b/src/objects/logo-group/logo-group.stories.mdx new file mode 100644 index 000000000..685e3ebfa --- /dev/null +++ b/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'; + + + +# 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. + + + + {defaultDemo({ items: logos })} + + diff --git a/src/objects/logo-group/logo-group.twig b/src/objects/logo-group/logo-group.twig new file mode 100644 index 000000000..cf444b253 --- /dev/null +++ b/src/objects/logo-group/logo-group.twig @@ -0,0 +1,3 @@ +
+ {% block content %}{% endblock %} +
diff --git a/src/prototypes/case-study-listings/example/example.twig b/src/prototypes/case-study-listings/example/example.twig index 2109284c6..8620003fe 100644 --- a/src/prototypes/case-study-listings/example/example.twig +++ b/src/prototypes/case-study-listings/example/example.twig @@ -100,16 +100,13 @@

More clients we’ve worked with

-
- {% for logos in logos %} -
-
- -
-
- {% endfor %} -
+ {% embed '@cloudfour/objects/logo-group/logo-group.twig' %} + {% block content %} + {% for logo in logos %} + {{ logo.title }} + {% endfor %} + {% endblock %} + {% endembed %} diff --git a/src/tokens/size/sizing.js b/src/tokens/size/sizing.js index 8571ecf8d..32a54e0a6 100644 --- a/src/tokens/size/sizing.js +++ b/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: { diff --git a/src/tokens/size/spacing.js b/src/tokens/size/spacing.js index 578b303f2..08c8c6882 100644 --- a/src/tokens/size/spacing.js +++ b/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) },