From 6811475213f7c5d5eae6177158893b2e0c8eab15 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Mon, 19 Jul 2021 12:33:20 -0700 Subject: [PATCH 01/11] Add logo group object --- src/objects/logo-group/demo/logos.json | 30 +++++++++++++++++++ src/objects/logo-group/logo-group.scss | 16 ++++++++++ src/objects/logo-group/logo-group.stories.mdx | 13 ++++++++ src/objects/logo-group/logo-group.twig | 7 +++++ src/tokens/size/sizing.js | 6 ++++ 5 files changed, 72 insertions(+) create mode 100644 src/objects/logo-group/demo/logos.json create mode 100644 src/objects/logo-group/logo-group.scss create mode 100644 src/objects/logo-group/logo-group.stories.mdx create mode 100644 src/objects/logo-group/logo-group.twig diff --git a/src/objects/logo-group/demo/logos.json b/src/objects/logo-group/demo/logos.json new file mode 100644 index 000000000..8de20197b --- /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", + "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..ee9eb8611 --- /dev/null +++ b/src/objects/logo-group/logo-group.scss @@ -0,0 +1,16 @@ +@use "../../compiled/tokens/scss/size"; +@use '../../mixins/ms'; + +.o-logo-group { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 0 auto; + max-width: size.$l; +} + +.o-logo-group > * { + margin: ms.step(3); + width: size.$width-logo-group-item; +} 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..e65fb5a91 --- /dev/null +++ b/src/objects/logo-group/logo-group.stories.mdx @@ -0,0 +1,13 @@ +import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; +import defaultDemo from './logo-group.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..d9113d67d --- /dev/null +++ b/src/objects/logo-group/logo-group.twig @@ -0,0 +1,7 @@ +
+ {% block content %} + {% for item in items %} + {{ item.alt|default('') }} + {% endfor %} + {% endblock %} +
diff --git a/src/tokens/size/sizing.js b/src/tokens/size/sizing.js index 8571ecf8d..f4ab4c4d3 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: { + value: '9em', + comment: 'The width of individual logos in the logo group.', + }, + }, }, square: { avatar: { From 6b607e1c992588a04febb29a101aca16a0f1e16f Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Mon, 19 Jul 2021 12:47:16 -0700 Subject: [PATCH 02/11] Update changelog --- .changeset/spotty-olives-watch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/spotty-olives-watch.md 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. From 497550aea7aaea5139f0d870eca5aed52a66de58 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Mon, 19 Jul 2021 14:09:55 -0700 Subject: [PATCH 03/11] Update margin to remove extra white space around logos --- src/objects/logo-group/logo-group.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/objects/logo-group/logo-group.scss b/src/objects/logo-group/logo-group.scss index ee9eb8611..c30c058e3 100644 --- a/src/objects/logo-group/logo-group.scss +++ b/src/objects/logo-group/logo-group.scss @@ -6,8 +6,7 @@ display: flex; flex-wrap: wrap; justify-content: center; - margin: 0 auto; - max-width: size.$l; + margin: (-1 * ms.step(3)); } .o-logo-group > * { From 9f3a444e9565fa25be621a804d2611552429e0f1 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Mon, 19 Jul 2021 14:37:35 -0700 Subject: [PATCH 04/11] Update pattern structure --- src/objects/logo-group/demo/demo.twig | 7 +++++++ src/objects/logo-group/logo-group.stories.mdx | 2 +- src/objects/logo-group/logo-group.twig | 6 +----- 3 files changed, 9 insertions(+), 6 deletions(-) create mode 100644 src/objects/logo-group/demo/demo.twig diff --git a/src/objects/logo-group/demo/demo.twig b/src/objects/logo-group/demo/demo.twig new file mode 100644 index 000000000..c9ef33e33 --- /dev/null +++ b/src/objects/logo-group/demo/demo.twig @@ -0,0 +1,7 @@ +{% embed '@cloudfour/objects/logo-group/logo-group.twig' %} + {% block content %} + {% for item in items %} + {{ item.alt }} + {% endfor %} + {% endblock %} +{% endembed %} diff --git a/src/objects/logo-group/logo-group.stories.mdx b/src/objects/logo-group/logo-group.stories.mdx index e65fb5a91..3bab69aa3 100644 --- a/src/objects/logo-group/logo-group.stories.mdx +++ b/src/objects/logo-group/logo-group.stories.mdx @@ -1,5 +1,5 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; -import defaultDemo from './logo-group.twig'; +import defaultDemo from './demo/demo.twig'; import logos from './demo/logos.json'; diff --git a/src/objects/logo-group/logo-group.twig b/src/objects/logo-group/logo-group.twig index d9113d67d..cf444b253 100644 --- a/src/objects/logo-group/logo-group.twig +++ b/src/objects/logo-group/logo-group.twig @@ -1,7 +1,3 @@
- {% block content %} - {% for item in items %} - {{ item.alt|default('') }} - {% endfor %} - {% endblock %} + {% block content %}{% endblock %}
From b146cfc63d25dd86a1acb2f718cfdceb0d1e2368 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Mon, 19 Jul 2021 14:38:27 -0700 Subject: [PATCH 05/11] Update logo alt text --- src/objects/logo-group/demo/logos.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/objects/logo-group/demo/logos.json b/src/objects/logo-group/demo/logos.json index 8de20197b..f28cd8eb6 100644 --- a/src/objects/logo-group/demo/logos.json +++ b/src/objects/logo-group/demo/logos.json @@ -8,7 +8,7 @@ "src": "media/client-logos/logo-deschutes.svg" }, { - "alt": "Obama", + "alt": "Obama '08", "src": "media/client-logos/logo-obama.svg" }, { From b18ca95fe09b1f29d6eed7d43bc3b9cef7758fbe Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Mon, 19 Jul 2021 15:45:09 -0700 Subject: [PATCH 06/11] Update prototype with logo-group --- src/objects/logo-group/demo/demo.twig | 12 ++++++++---- .../case-study-listings/example/example.twig | 17 ++++++++--------- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/objects/logo-group/demo/demo.twig b/src/objects/logo-group/demo/demo.twig index c9ef33e33..27b646ac2 100644 --- a/src/objects/logo-group/demo/demo.twig +++ b/src/objects/logo-group/demo/demo.twig @@ -1,7 +1,11 @@ -{% embed '@cloudfour/objects/logo-group/logo-group.twig' %} +{% embed '@cloudfour/objects/container/container.twig' %} {% block content %} - {% for item in items %} - {{ item.alt }} - {% endfor %} + {% 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/prototypes/case-study-listings/example/example.twig b/src/prototypes/case-study-listings/example/example.twig index 2109284c6..8866c31d9 100644 --- a/src/prototypes/case-study-listings/example/example.twig +++ b/src/prototypes/case-study-listings/example/example.twig @@ -100,15 +100,14 @@

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 %}
From 2df071a344923a1af4cd00c4014b49992373c73a Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Tue, 20 Jul 2021 09:40:43 -0700 Subject: [PATCH 07/11] Update size token --- src/objects/logo-group/logo-group.scss | 2 +- src/tokens/size/sizing.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/objects/logo-group/logo-group.scss b/src/objects/logo-group/logo-group.scss index c30c058e3..25890de44 100644 --- a/src/objects/logo-group/logo-group.scss +++ b/src/objects/logo-group/logo-group.scss @@ -11,5 +11,5 @@ .o-logo-group > * { margin: ms.step(3); - width: size.$width-logo-group-item; + width: size.$width-logo-group-item-width; } diff --git a/src/tokens/size/sizing.js b/src/tokens/size/sizing.js index f4ab4c4d3..32a54e0a6 100644 --- a/src/tokens/size/sizing.js +++ b/src/tokens/size/sizing.js @@ -30,7 +30,7 @@ module.exports = { }, }, logo_group: { - item: { + item_width: { value: '9em', comment: 'The width of individual logos in the logo group.', }, From 2b279987b9e1246bf220de7c404fd3e8efa31d6d Mon Sep 17 00:00:00 2001 From: Danielle Romo <42841342+dromo77@users.noreply.github.com> Date: Wed, 21 Jul 2021 08:54:43 -0700 Subject: [PATCH 08/11] Update comments in stories Co-authored-by: Gerardo Rodriguez --- src/objects/logo-group/logo-group.stories.mdx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/objects/logo-group/logo-group.stories.mdx b/src/objects/logo-group/logo-group.stories.mdx index 3bab69aa3..bc817e689 100644 --- a/src/objects/logo-group/logo-group.stories.mdx +++ b/src/objects/logo-group/logo-group.stories.mdx @@ -1,4 +1,13 @@ 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'; From fd427f8bcd1451274a74651ba39c06adb127067a Mon Sep 17 00:00:00 2001 From: Danielle Romo <42841342+dromo77@users.noreply.github.com> Date: Wed, 21 Jul 2021 08:55:10 -0700 Subject: [PATCH 09/11] Update story code Co-authored-by: Gerardo Rodriguez --- src/objects/logo-group/logo-group.stories.mdx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/objects/logo-group/logo-group.stories.mdx b/src/objects/logo-group/logo-group.stories.mdx index bc817e689..685e3ebfa 100644 --- a/src/objects/logo-group/logo-group.stories.mdx +++ b/src/objects/logo-group/logo-group.stories.mdx @@ -18,5 +18,10 @@ import logos from './demo/logos.json'; 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 })} + + {defaultDemo({ items: logos })} + From cf7b143c5af2441fe3804eaf91a5b85d9923000c Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Wed, 21 Jul 2021 09:59:06 -0700 Subject: [PATCH 10/11] Remove negative margins --- src/objects/logo-group/logo-group.scss | 7 ++++++- .../case-study-listings/example/example.twig | 16 +++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/objects/logo-group/logo-group.scss b/src/objects/logo-group/logo-group.scss index 25890de44..51af53427 100644 --- a/src/objects/logo-group/logo-group.scss +++ b/src/objects/logo-group/logo-group.scss @@ -1,12 +1,17 @@ @use "../../compiled/tokens/scss/size"; @use '../../mixins/ms'; +/** + * 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 { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; - margin: (-1 * ms.step(3)); } .o-logo-group > * { diff --git a/src/prototypes/case-study-listings/example/example.twig b/src/prototypes/case-study-listings/example/example.twig index 8866c31d9..8620003fe 100644 --- a/src/prototypes/case-study-listings/example/example.twig +++ b/src/prototypes/case-study-listings/example/example.twig @@ -100,15 +100,13 @@

More clients we’ve worked with

-
- {% embed '@cloudfour/objects/logo-group/logo-group.twig' %} - {% block content %} - {% for logo in logos %} - {{ logo.title }} - {% endfor %} - {% endblock %} - {% endembed %} -
+ {% embed '@cloudfour/objects/logo-group/logo-group.twig' %} + {% block content %} + {% for logo in logos %} + {{ logo.title }} + {% endfor %} + {% endblock %} + {% endembed %} From 71b03a66830b269bf3d85cd9134f473243a5c169 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Wed, 21 Jul 2021 10:27:34 -0700 Subject: [PATCH 11/11] Update margin and comment --- src/objects/logo-group/logo-group.scss | 15 ++++++++------- src/tokens/size/spacing.js | 3 +++ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/objects/logo-group/logo-group.scss b/src/objects/logo-group/logo-group.scss index 51af53427..e40da58e0 100644 --- a/src/objects/logo-group/logo-group.scss +++ b/src/objects/logo-group/logo-group.scss @@ -1,12 +1,6 @@ @use "../../compiled/tokens/scss/size"; @use '../../mixins/ms'; -/** - * 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 { align-items: center; display: flex; @@ -14,7 +8,14 @@ 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: ms.step(3); + margin: size.$spacing-gap-logo-group; /* 1 */ width: size.$width-logo-group-item-width; } 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) },