Skip to content

Commit f4569dd

Browse files
spaceninjaspaceninja
authored
Bugfix: Ground Nav Feature Widths (#2208)
This PR fixes a bug where the width of the features for the Ground Nav wasn't quite right. Now, when there are two features, they'll match the width of the Ground Nav content, and when there's one feature, it'll match the width of a `fill-pad` container in the prose-width content above the Ground Nav.
1 parent 88df223 commit f4569dd

File tree

6 files changed

+150
-85
lines changed

6 files changed

+150
-85
lines changed

‎.changeset/thirty-beers-rush.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cloudfour/patterns": patch
3+
---
4+
5+
Bugfix: Ground Nav Feature Widths: Better alignment for Ground Nav features with other page content.

‎src/components/ground-nav/demo/ground-nav-demo.twig‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<div class="o-container o-container--pad o-container--prose">
2+
<div class="o-container__content o-rhythm o-rhythm--default o-rhythm--generous-headings">
3+
4+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ultrices sagittis orci a scelerisque purus semper.</p>
5+
6+
<article class="c-card c-card--contained o-container__fill-pad">
7+
<div class="c-card__content">
8+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam sem et. Proin gravida hendrerit lectus a.</p>
9+
</div>
10+
</article>
11+
12+
</div>
13+
</div>
14+
15+
{% embed '@cloudfour/components/ground-nav/ground-nav.twig' %}
16+
{% block feature_one %}
17+
<div class="c-ground-nav__feature-inner o-rhythm o-rhythm--condensed">
18+
<div class="o-rhythm o-rhythm--compact">
19+
{% embed '@cloudfour/components/heading/heading.twig' with {
20+
"tag_name": "h2",
21+
"level": 1,
22+
"weight": "light",
23+
"feature_one_title": feature_one_title,
24+
} only %}
25+
{% block content %}
26+
{{ feature_one_title }}
27+
{% endblock %}
28+
{% endembed %}
29+
<p>
30+
{{ feature_one_content }}
31+
</p>
32+
</div>
33+
{% embed '@cloudfour/objects/button-group/button-group.twig' with { "feature_count": feature_count } only %}
34+
{% block content %}
35+
{% set button_class = feature_count > 1 ? 'c-button--secondary' : null %}
36+
{% include '@cloudfour/components/button/button.twig' with {
37+
label: 'See our work',
38+
class: button_class,
39+
} only %}
40+
{% include '@cloudfour/components/button/button.twig' with {
41+
label: 'Get in touch',
42+
class: button_class,
43+
} only %}
44+
{% endblock %}
45+
{% endembed %}
46+
</div>
47+
{% endblock %}
48+
{% block feature_two %}
49+
<form class="c-ground-nav__feature-inner o-rhythm o-rhythm--condensed" action="#">
50+
<div class="o-rhythm o-rhythm--compact">
51+
{% embed '@cloudfour/components/heading/heading.twig' with {
52+
"tag_name": "h2",
53+
"level": 1,
54+
"weight": "light",
55+
"feature_two_title": feature_two_title,
56+
} only %}
57+
{% block content %}
58+
{{ feature_two_title }}
59+
{% endblock %}
60+
{% endembed %}
61+
<p>
62+
{{ feature_two_content }}
63+
</p>
64+
</div>
65+
{% embed '@cloudfour/objects/input-group/input-group.twig' only %}
66+
{% block content %}
67+
{% include '@cloudfour/components/input/input.twig' with {
68+
placeholder: 'Your Email',
69+
type: 'email',
70+
} only %}
71+
{% include '@cloudfour/components/button/button.twig' with {
72+
label: 'Sign up'
73+
} only %}
74+
{% endblock %}
75+
{% endembed %}
76+
</form>
77+
{% endblock %}
78+
{% endembed %}

‎src/components/ground-nav/ground-nav-args.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ const menu = { items: [...skyNavMenu.items, ...groundNavMenu.items] };
1616
export const defaultArgs = {
1717
alternate: false,
1818
feature_count: 2,
19+
feature_one_title: 'Nice to meet you',
20+
feature_one_content:
21+
'Cloud Four helps organizations solve complex responsive web design and development challenges every day. Let’s connect so we can tailor a solution to fit your needs.',
22+
feature_two_title: 'Cloud Four, in your inbox',
23+
feature_two_content:
24+
'Our latest articles, updates, quick tips and insights in one convenient, occassional newsletter.',
1925
organizationName: organization.name,
2026
organizationStreetAddress: organization.address.street_address,
2127
organizationAddressLocality: organization.address.address_locality,
@@ -34,6 +40,10 @@ export const defaultArgs = {
3440
export const defaultArgTypes = {
3541
alternate: { control: { type: 'boolean' } },
3642
feature_count: { control: { type: 'number', min: 0, max: 2 } },
43+
feature_one_title: { type: { name: 'string' } },
44+
feature_one_content: { type: { name: 'string' } },
45+
feature_two_title: { type: { name: 'string' } },
46+
feature_two_content: { type: { name: 'string' } },
3747
organizationName: { type: { name: 'string' } },
3848
organizationStreetAddress: { type: { name: 'string' } },
3949
organizationAddressLocality: { type: { name: 'string' } },
@@ -59,6 +69,10 @@ export const generateGroundNavProps = (args) => ({
5969
topics,
6070
alternate: args.alternate,
6171
feature_count: args.feature_count,
72+
feature_one_title: args.feature_one_title,
73+
feature_one_content: args.feature_one_content,
74+
feature_two_title: args.feature_two_title,
75+
feature_two_content: args.feature_two_content,
6276
organization: {
6377
name: args.organizationName,
6478
address: {

‎src/components/ground-nav/ground-nav.scss‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -61,43 +61,50 @@
6161
grid-row: 1 / span 2;
6262
}
6363

64-
/**
65-
* 1. Used to center `features-inner` when there's only one feature.
66-
* We can't put `margin:auto` on `features-inner` because it has negative
67-
* margins from `o-container__fill`.
68-
*/
69-
.c-ground-nav__features-layout {
70-
display: flex; // 1
71-
justify-content: center; // 1
72-
}
73-
7464
/**
7565
* 1. Keep contents from overflowing border-radius
76-
* 2. Min width to keep promos with short content from shrinking
77-
* 3. Used to position the features side-by-side on large screens
66+
* 2. Constrain the width when there's only one feature
67+
* 3. Positions multiple features side-by-side. `auto-fit` means this
68+
* works even when there's only one feature.
7869
*/
7970
.c-ground-nav__features-inner {
8071
@include border-radius.conditional;
8172
contain: paint; // 1
82-
min-inline-size: 100%; // 2
73+
display: grid;
74+
grid-template-columns: minmax(0, 1fr);
75+
inline-size: 100%;
76+
margin-inline: auto;
77+
78+
.c-ground-nav--single-feature & {
79+
max-inline-size: calc(
80+
#{size.$max-width-prose} + #{spacing.$fluid-spacing-inline} * 2
81+
); // 2
82+
}
8383

8484
@media (width >= breakpoint.$l) {
85-
display: flex; // 3
86-
min-inline-size: size.$max-width-prose; // 2
85+
grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); // 3
8786
}
8887
}
8988

9089
/**
91-
* 1. If there's only one feature, center it and use prose width
90+
* 1. If there's only one feature, center it and match the width of
91+
* `fill-pad` containers in the prose width content above.
9292
* 2. Flex layout to keep both features' form elements vertically aligned
9393
* 3. Features should take up an equal amount of the layout
9494
*/
9595
.c-ground-nav__feature {
9696
@include spacing.fluid-padding-block;
97+
@include spacing.fluid-padding-inline;
98+
inline-size: 100%;
9799

98100
&:only-child {
99101
margin-inline: auto; // 1
100-
max-inline-size: size.$max-width-prose; // 1
102+
103+
@media (width >= breakpoint.$l) {
104+
min-inline-size: calc(
105+
#{size.$max-width-prose} + #{spacing.$fluid-spacing-inline} * 2
106+
); // 1
107+
}
101108
}
102109

103110
@media (width >= breakpoint.$l) {
@@ -112,6 +119,7 @@
112119
.c-ground-nav__feature-inner {
113120
display: grid; // 1
114121
grid-template-rows: minmax(0, 1fr) minmax(0, auto); // 1
122+
inline-size: 100%;
115123
}
116124

117125
/**

‎src/components/ground-nav/ground-nav.stories.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
defaultArgs,
55
generateGroundNavProps,
66
} from './ground-nav-args.js';
7-
import template from './ground-nav.twig';
7+
import template from './demo/ground-nav-demo.twig';
88

99
<!--
1010
Inline stories disabled so media queries will behave as expected within

‎src/components/ground-nav/ground-nav.twig‎

Lines changed: 27 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,10 @@
11
{% set feature_one %}
22
{% block feature_one %}
3-
<div class="c-ground-nav__feature-inner o-rhythm o-rhythm--condensed">
4-
<div class="o-rhythm o-rhythm--compact">
5-
{% embed '@cloudfour/components/heading/heading.twig' with {
6-
"tag_name": "h2",
7-
"level": 1,
8-
"weight": "light"
9-
} only %}
10-
{% block content %}
11-
Nice to meet you
12-
{% endblock %}
13-
{% endembed %}
14-
<p>
15-
Cloud Four helps every day.
16-
</p>
17-
</div>
18-
{% embed '@cloudfour/objects/button-group/button-group.twig' only %}
19-
{% block content %}
20-
{% include '@cloudfour/components/button/button.twig' with {
21-
label: 'See our work',
22-
class: 'c-button--secondary'
23-
} only %}
24-
{% include '@cloudfour/components/button/button.twig' with {
25-
label: 'Get in touch',
26-
class: 'c-button--secondary'
27-
} only %}
28-
{% endblock %}
29-
{% endembed %}
30-
</div>
313
{% endblock %}
324
{% endset %}
335

346
{% set feature_two %}
357
{% block feature_two %}
36-
<form class="c-ground-nav__feature-inner o-rhythm o-rhythm--condensed" action="#">
37-
<div class="o-rhythm o-rhythm--compact">
38-
{% embed '@cloudfour/components/heading/heading.twig' with {
39-
"tag_name": "h2",
40-
"level": 1,
41-
"weight": "light"
42-
} only %}
43-
{% block content %}
44-
Cloud Four, in your inbox
45-
{% endblock %}
46-
{% endembed %}
47-
<p>
48-
Our latest articles, updates, quick tips and insights in one
49-
convenient, occasional newsletter.
50-
</p>
51-
</div>
52-
{% embed '@cloudfour/objects/input-group/input-group.twig' only %}
53-
{% block content %}
54-
{% include '@cloudfour/components/input/input.twig' with {
55-
placeholder: 'Your Email',
56-
type: 'email',
57-
} only %}
58-
{% include '@cloudfour/components/button/button.twig' with {
59-
label: 'Sign up'
60-
} only %}
61-
{% endblock %}
62-
{% endembed %}
63-
</form>
648
{% endblock %}
659
{% endset %}
6610

@@ -73,20 +17,36 @@
7317
{% endblock %}
7418
{% endset %}
7519

76-
<footer class="c-ground-nav {% if alternate %}c-ground-nav--alternate{% endif %}">
20+
<footer
21+
class="c-ground-nav
22+
{% if alternate %}c-ground-nav--alternate{% endif %}
23+
{% if feature_count == 1 %}c-ground-nav--single-feature{% endif %}"
24+
>
25+
26+
{#
27+
A note to future devs:
28+
Looking at this code, you may be tempted to simplify. You may think,
29+
surely `c-ground-nav__features-inner` could move up a level to save a div,
30+
or similar changes. Trust me, I've tried. The three outer containers are
31+
needed to keep the layout in alignment with other containers on the page.
32+
The features and their wrapper need to be nested inside so they can be
33+
centered and behave appropriately when there's only one feature.
34+
Modify at your own risk, and test thoroughly.
35+
#}
7736
{% if feature_count > 0 %}
7837
<div class="c-ground-nav__features o-container o-container--pad-inline">
79-
<div class="c-ground-nav__features-layout o-container__content">
80-
<div class="c-ground-nav__features-inner t-dark o-container__fill">
81-
<div class="c-ground-nav__feature o-container__pad
82-
{% if feature_count > 1 %}t-alternate{% endif %}">
83-
{{ feature_one }}
84-
</div>
85-
{% if feature_count > 1 %}
86-
<div class="c-ground-nav__feature o-container__pad">
87-
{{ feature_two }}
38+
<div class="o-container__content">
39+
<div class="o-container__fill">
40+
<div class="c-ground-nav__features-inner t-dark">
41+
<div class="c-ground-nav__feature {% if feature_count > 1 %}t-alternate{% endif %}">
42+
{{ feature_one }}
8843
</div>
89-
{% endif %}
44+
{% if feature_count > 1 %}
45+
<div class="c-ground-nav__feature">
46+
{{ feature_two }}
47+
</div>
48+
{% endif %}
49+
</div>
9050
</div>
9151
</div>
9252
</div>

0 commit comments

Comments
 (0)