Skip to content

Commit f3bcd28

Browse files
spaceninjaspaceninja
authored
Better Ground Nav Options (#2202)
This PR makes a couple changes to make it easier to use the Ground Nav template in WordPress: - Renames `features` to `feature_count` - Adds a `block` for both features so the content can be set
1 parent 1c2d229 commit f3bcd28

File tree

4 files changed

+76
-60
lines changed

4 files changed

+76
-60
lines changed

‎.changeset/gentle-cycles-call.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@cloudfour/patterns": patch
3+
---
4+
5+
Better Options for Ground Nav:
6+
- renamed `features` to `feature_count`
7+
- added blocks for each feature

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const menu = { items: [...skyNavMenu.items, ...groundNavMenu.items] };
1515
*/
1616
export const defaultArgs = {
1717
alternate: false,
18-
features: 2,
18+
feature_count: 2,
1919
organizationName: organization.name,
2020
organizationStreetAddress: organization.address.street_address,
2121
organizationAddressLocality: organization.address.address_locality,
@@ -33,7 +33,7 @@ export const defaultArgs = {
3333
*/
3434
export const defaultArgTypes = {
3535
alternate: { control: { type: 'boolean' } },
36-
features: { control: { type: 'number', min: 0, max: 2 } },
36+
feature_count: { control: { type: 'number', min: 0, max: 2 } },
3737
organizationName: { type: { name: 'string' } },
3838
organizationStreetAddress: { type: { name: 'string' } },
3939
organizationAddressLocality: { type: { name: 'string' } },
@@ -58,7 +58,7 @@ export const generateGroundNavProps = (args) => ({
5858
social,
5959
topics,
6060
alternate: args.alternate,
61-
features: args.features,
61+
feature_count: args.feature_count,
6262
organization: {
6363
name: args.organizationName,
6464
address: {

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ If you only define a single feature block, it will be centered.
4242
height="800px"
4343
args={{
4444
...defaultArgs,
45-
features: 1,
45+
feature_count: 1,
4646
}}
4747
argTypes={defaultArgTypes}
4848
parameters={{
@@ -61,7 +61,7 @@ If you don't define any feature blocks, the layout will collapse appropriately.
6161
height="475px"
6262
args={{
6363
...defaultArgs,
64-
features: 0,
64+
feature_count: 0,
6565
}}
6666
argTypes={defaultArgTypes}
6767
parameters={{
@@ -96,7 +96,7 @@ the background colors of the Ground Nav to match.
9696

9797
## Template Properties
9898

99-
- `features`: The number of feature blocks to display. Defaults to 2.
99+
- `feature_count`: The number of feature blocks to display. Defaults to 2.
100100
- `organization`: Object containing Cloud Four details for contact information and copyright. Structure and property names are based on the [the Organization schema](https://schema.org/Organization).
101101
- `name`
102102
- `address`
@@ -112,4 +112,9 @@ the background colors of the Ground Nav to match.
112112
- `menu`: An object containing navigation menu `items` to iterate over in the same structure as that expected by [Timber menus](https://timber.github.io/docs/guides/menus/).
113113
- `topics`: The same structure as `menu` but for content topics.
114114
- `social`: The same structure as `menu` but for social links. Each item must also contain an `icon` property corresponding to a key from [our icon library](/docs/design-icons--page).
115+
116+
## Template Blocks
117+
115118
- `legal`: Optional HTML content to display in the legal section. If not provided, a copyright statement will be displayed by default.
119+
- `feature_one`: Optional HTML content to display in the first feature slot.
120+
- `feature_two`: Optional HTML content to display in the second feature slot.

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

Lines changed: 58 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,69 @@
11
{% set feature_one %}
2-
<div class="c-ground-nav__feature-inner o-rhythm o-rhythm--condensed">
3-
<div class="o-rhythm o-rhythm--compact">
4-
{% embed '@cloudfour/components/heading/heading.twig' with {
5-
"tag_name": "h2",
6-
"level": 1,
7-
"weight": "light"
8-
} only %}
2+
{% 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 organizations solve complex responsive web
16+
design and development challenges every day.
17+
Let's connect so we can tailor a solution to fit your needs.
18+
</p>
19+
</div>
20+
{% embed '@cloudfour/objects/button-group/button-group.twig' only %}
921
{% block content %}
10-
Nice to meet you
22+
{% include '@cloudfour/components/button/button.twig' with {
23+
label: 'See our work',
24+
class: 'c-button--secondary'
25+
} only %}
26+
{% include '@cloudfour/components/button/button.twig' with {
27+
label: 'Get in touch',
28+
class: 'c-button--secondary'
29+
} only %}
1130
{% endblock %}
1231
{% endembed %}
13-
<p>
14-
Cloud Four helps organizations solve complex responsive web
15-
design and development challenges every day.
16-
Let's connect so we can tailor a solution to fit your needs.
17-
</p>
1832
</div>
19-
{% embed '@cloudfour/objects/button-group/button-group.twig' only %}
20-
{% block content %}
21-
{% include '@cloudfour/components/button/button.twig' with {
22-
label: 'See our work',
23-
class: 'c-button--secondary'
24-
} only %}
25-
{% include '@cloudfour/components/button/button.twig' with {
26-
label: 'Get in touch',
27-
class: 'c-button--secondary'
28-
} only %}
29-
{% endblock %}
30-
{% endembed %}
31-
</div>
33+
{% endblock %}
3234
{% endset %}
3335

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

6569
{% set legal %}
@@ -72,15 +76,15 @@
7276
{% endset %}
7377

7478
<footer class="c-ground-nav {% if alternate %}c-ground-nav--alternate{% endif %}">
75-
{% if features > 0 %}
79+
{% if feature_count > 0 %}
7680
<div class="c-ground-nav__features o-container o-container--pad-inline">
7781
<div class="c-ground-nav__features-layout o-container__content">
7882
<div class="c-ground-nav__features-inner t-dark o-container__fill">
7983
<div class="c-ground-nav__feature o-container__pad
80-
{% if features > 1 %}t-alternate{% endif %}">
84+
{% if feature_count > 1 %}t-alternate{% endif %}">
8185
{{ feature_one }}
8286
</div>
83-
{% if features > 1 %}
87+
{% if feature_count > 1 %}
8488
<div class="c-ground-nav__feature o-container__pad">
8589
{{ feature_two }}
8690
</div>

0 commit comments

Comments
 (0)