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 %} + + {% 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. + + 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 @@ +
More clients we’ve worked with