Skip to content

Commit 5924120

Browse files
tylerstickatylersticka
authored
Logo Group padding and justification options (#2168)
1 parent ba0d9d7 commit 5924120

File tree

5 files changed

+89
-35
lines changed

5 files changed

+89
-35
lines changed

‎.changeset/blue-balloons-vanish.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@cloudfour/patterns': major
3+
---
4+
5+
The Logo Group previously included padding and center-aligned its contents horizontally. Now, the padding and horizontal justification may be set via a template property or modifier class, which makes the pattern more flexible. To retain the previous appearance, opt into padding and use center justification.

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

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
1-
{% embed '@cloudfour/objects/container/container.twig' %}
1+
{% embed '@cloudfour/objects/logo-group/logo-group.twig' %}
22
{% block content %}
3-
{% embed '@cloudfour/objects/logo-group/logo-group.twig' %}
4-
{% block content %}
5-
{% for item in items %}
6-
{% include '@cloudfour/components/logo/logo.twig' with {
7-
src: item.src,
8-
alt: item.alt
9-
} only %}
10-
{% endfor %}
11-
{% endblock %}
12-
{% endembed %}
3+
{% for logo in logos %}
4+
{% include '@cloudfour/components/logo/logo.twig' with logo only %}
5+
{% endfor %}
136
{% endblock %}
147
{% endembed %}

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

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,41 @@
11
@use '../../compiled/tokens/scss/size';
22
@use '../../mixins/ms';
33

4+
/// The Logo Group container is where most of the magic happens. We use flex
5+
/// instead of grid because we want to support centered justification later (if
6+
/// we used grid, the bottom row would always be left/start justified).
47
.o-logo-group {
58
align-items: center;
69
display: flex;
710
flex-wrap: wrap;
11+
gap: size.$spacing-gap-logo-group;
12+
}
13+
14+
/// The initial use case for this pattern called for white space to surround the
15+
/// logos, but this makes the pattern more difficult to work with when left-
16+
/// justified or used in a more condensed layout, so we've moved this to a
17+
/// modifier class instead.
18+
.o-logo-group--pad {
19+
padding: size.$spacing-gap-logo-group;
20+
}
21+
22+
/// These modifiers set the horizontal alignment of the logos. Historically we
23+
/// would have used the term "align" for this, but because Flex and Grid both
24+
/// use "align" to refer to vertical alignment (at least in Western languages
25+
/// and writing modes), we're continuing the "justify" usage set in the Logo
26+
/// component.
27+
28+
.o-logo-group--justify-center {
829
justify-content: center;
930
}
1031

11-
/**
12-
* 1. Because there is generous spacing between the logos, we added a lot of
13-
* white space around Logo Group to help balance the pattern visually.
14-
* Including the spacing as part of the pattern means we don't need to rely
15-
* on utilities.
16-
*/
32+
.o-logo-group--justify-end {
33+
justify-content: end;
34+
}
1735

36+
/// Because Flex doesn't let you set column sizes, we have to apply a width to
37+
/// child elements intead. Without this, the logos will appear misaligned row-
38+
/// to-row as they differ in size.
1839
.o-logo-group > * {
1940
inline-size: size.$width-logo-group-item-width;
20-
margin: size.$spacing-gap-logo-group; /* 1 */
2141
}

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

Lines changed: 50 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,63 @@
11
import { Canvas, Meta, Story } from '@storybook/addon-docs';
2-
// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax.
3-
// See: https://github.com/webpack-contrib/raw-loader#examples
4-
// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are
5-
// okay with the following Webpack-specific raw loader syntax. It's better to leave
6-
// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g.
7-
// within a Storybook docs page and not within an actual component).
8-
// This can be revisited in the future if Storybook no longer relies on Webpack.
9-
// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
10-
import defaultDemoSource from '!!raw-loader!./demo/demo.twig';
11-
import defaultDemo from './demo/demo.twig';
2+
import demo from './demo/demo.twig';
123
import logos from './demo/logos.json';
4+
const justifyOptions = ['start', 'center', 'end'];
5+
const demoTemplateSource = (_src, storyContext) => {
6+
const args = storyContext.args || storyContext.initialArgs;
7+
const twigArgs =
8+
Object.keys(args).length > 0
9+
? ` with ${JSON.stringify(args, null, 2)}`
10+
: '';
11+
return `{% embed '@cloudfour/objects/logo-group/logo-group.twig'${twigArgs} %}
12+
{% block content %}
13+
{# logos #}
14+
{% endblock %}
15+
{% endembed %}`;
16+
};
17+
const demoStory = (args) => demo({ ...args, logos });
1318

14-
<Meta title="Objects/Logo Group" />
19+
<Meta
20+
title="Objects/Logo Group"
21+
parameters={{
22+
docs: {
23+
transformSource: demoTemplateSource,
24+
},
25+
}}
26+
argTypes={{
27+
justify: {
28+
options: justifyOptions,
29+
control: { type: 'inline-radio' },
30+
},
31+
pad: {
32+
type: { name: 'boolean' },
33+
},
34+
}}
35+
/>
1536

1637
# Logo Group
1738

18-
Logo Group can be used to display a group of logos, such as a summary of past clients. Logos break onto multiple lines depending on the available space and are vertically centered.
39+
The Logo Group presents multiple logos together with consistent spacing and alignment. It is useful for summarizing a list of projects or clients.
1940

20-
To enforce consistent sizing or fine-tune alignment, consider using [Logo components](/docs/components-logo--basic-options) within the Logo Group.
41+
To fine-tune the relative scale or layout of individual logos within, consider using [the Logo component](/docs/components-logo--basic-options).
42+
43+
<Canvas>
44+
<Story name="Default">{(args) => demoStory(args)}</Story>
45+
</Canvas>
46+
47+
## Options
48+
49+
The `justify` template property or `o-logo-group--justify-{alignment}` class sets the horizontal alignment of the logos within the group. The default is `start`, but `center` and `end` are also supported.
50+
51+
To repeat the gap between logos around the whole container, set the `pad` template property to `true` or apply the `o-logo-group--pad` modifier class.
2152

2253
<Canvas>
2354
<Story
24-
name="Default"
25-
parameters={{ docs: { source: { code: defaultDemoSource } } }}
55+
name="Centered with padding"
56+
args={{
57+
justify: 'center',
58+
pad: true,
59+
}}
2660
>
27-
{defaultDemo({ items: logos })}
61+
{(args) => demoStory(args)}
2862
</Story>
2963
</Canvas>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
<div class="o-logo-group">
1+
<div class="o-logo-group
2+
{% if justify %}o-logo-group--justify-{{justify}}{% endif %}
3+
{% if pad %}o-logo-group--pad{% endif %}">
24
{% block content %}{% endblock %}
35
</div>

0 commit comments

Comments
 (0)