Skip to content

Commit 04d1398

Browse files
author
Daniel Morse
committed
feat: add separate trigger/content spacing options to accordion
1 parent 935de95 commit 04d1398

File tree

7 files changed

+169
-15
lines changed

7 files changed

+169
-15
lines changed

‎docs-site/src/pages/pattern-lab/_patterns/02-components/accordion/45-accordion-trigger-and-content-spacing-variations.twig

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<p>
2+
By setting the <code>content_spacing</code> or <code>trigger_spacing</code> prop to an Accordion Item, the default spacing value inherited from the parent Accordion can be optionally overridden.
3+
</p>
4+
5+
{% set spacing_item %}
6+
<div class="t-bolt-xlight">
7+
This entire accordion has the <code>spacing</code> prop defined.
8+
</div>
9+
{% endset %}
10+
11+
{% set content_spacing_item %}
12+
<div class="t-bolt-xlight">
13+
This item has the <code>content_spacing</code> prop defined.
14+
</div>
15+
{% endset %}
16+
17+
{% set trigger_spacing_item %}
18+
This item has the <code>trigger_spacing</code> prop defined.
19+
{% endset %}
20+
21+
{% grid "o-bolt-grid--flex o-bolt-grid--matrix" %}
22+
{% cell "u-bolt-width-12/12 u-bolt-width-6/12@medium" %}
23+
<h3>Basic usage: spacing</h3>
24+
<p>
25+
Using <code>spacing</code> will uniformly set the same spacing on both the trigger and the content.
26+
</p>
27+
<div class="t-bolt-light u-bolt-padding-small">
28+
{% include "@bolt-components-accordion/accordion.twig" with {
29+
spacing: "none",
30+
items: [
31+
{
32+
trigger: "<div class='t-bolt-xlight'>Spacing: none</div>",
33+
content: spacing_item,
34+
open: true,
35+
},
36+
]
37+
} only %}
38+
{% include "@bolt-components-accordion/accordion.twig" with {
39+
spacing: "small",
40+
items: [
41+
{
42+
trigger: "<div class='t-bolt-xlight'>Spacing: small</div>",
43+
content: spacing_item,
44+
open: true,
45+
},
46+
]
47+
} only %}
48+
{% include "@bolt-components-accordion/accordion.twig" with {
49+
spacing: "medium",
50+
items: [
51+
{
52+
trigger: "<div class='t-bolt-xlight'>Spacing: medium</div>",
53+
content: spacing_item,
54+
open: true,
55+
},
56+
]
57+
} only %}
58+
</div>
59+
{% endcell %}
60+
{% cell "u-bolt-width-12/12 u-bolt-width-6/12@medium" %}
61+
{# Empty white space #}
62+
{% endcell %}
63+
{% cell "u-bolt-width-12/12 u-bolt-width-6/12@medium" %}
64+
<h3>Advanced usage: content spacing</h3>
65+
<p>
66+
Using <code>content_spacing</code> will only set the spacing on the content container. This should only be used if you don't want the same spacing on both the trigger and the content.
67+
</p>
68+
<div class="t-bolt-light u-bolt-padding-small">
69+
{% include "@bolt-components-accordion/accordion.twig" with {
70+
items: [
71+
{
72+
trigger: "Content spacing: none",
73+
content_spacing: "none",
74+
content: content_spacing_item,
75+
open: true,
76+
},
77+
{
78+
trigger: "Content spacing: small",
79+
content_spacing: "small",
80+
content: content_spacing_item,
81+
open: true,
82+
},
83+
{
84+
trigger: "Content spacing: medium",
85+
content_spacing: "medium",
86+
content: content_spacing_item,
87+
open: true,
88+
},
89+
]
90+
} only %}
91+
</div>
92+
{% endcell %}
93+
{% cell "u-bolt-width-12/12 u-bolt-width-6/12@medium" %}
94+
<h3>Advanced usage: trigger spacing</h3>
95+
<p>
96+
Using <code>trigger_spacing</code> will only set the spacing on the trigger container. This should only be used if you don't want the same spacing on both the trigger and the content.
97+
</p>
98+
<div class="t-bolt-light u-bolt-padding-small">
99+
{% include "@bolt-components-accordion/accordion.twig" with {
100+
items: [
101+
{
102+
trigger: "<div class='t-bolt-xlight'>Trigger spacing: none</div>",
103+
trigger_spacing: "none",
104+
content: trigger_spacing_item,
105+
open: true,
106+
},
107+
{
108+
trigger: "<div class='t-bolt-xlight'>Trigger spacing: small</div>",
109+
trigger_spacing: "small",
110+
content: trigger_spacing_item,
111+
open: true,
112+
},
113+
{
114+
trigger: "<div class='t-bolt-xlight'>Trigger spacing: medium</div>",
115+
trigger_spacing: "medium",
116+
content: trigger_spacing_item,
117+
open: true,
118+
},
119+
]
120+
} only %}
121+
</div>
122+
{% endcell %}
123+
{% endgrid %}

‎packages/components/bolt-accordion/accordion.schema.yml

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,16 @@ properties:
3636
type: string
3737
description: Accessible label for the close trigger to collapse an item.
3838
default: Close Accordion
39+
trigger_spacing:
40+
type: string
41+
hidden: true
42+
description: Overrides the default trigger spacing (by default, inherited from the parent bolt-accordion)
43+
$ref: "#/definitions/spacing"
44+
content_spacing:
45+
type: string
46+
hidden: true
47+
description: Overrides the default content spacing (by default, inherited from the parent bolt-accordion)
48+
$ref: "#/definitions/spacing"
3949
single:
4050
type: boolean
4151
description: Allow only one section to open at a time.
@@ -60,15 +70,10 @@ properties:
6070
- true
6171
- false
6272
spacing:
73+
$ref: "#/definitions/spacing"
6374
type: string
6475
description: Controls the inset spacing of each item.
6576
default: medium
66-
enum:
67-
- none
68-
- xsmall
69-
- small
70-
- medium
71-
- large
7277
icon_valign:
7378
type: string
7479
title: icon_valign (twig) / icon-valign (web component)
@@ -77,3 +82,11 @@ properties:
7782
enum:
7883
- top
7984
- center
85+
definitions:
86+
spacing:
87+
enum:
88+
- none
89+
- xsmall
90+
- small
91+
- medium
92+
- large

‎packages/components/bolt-accordion/src/AccordionItem/AccordionItemContent.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import { html } from '@bolt/core/renderers/renderer-lit-html';
44
export const AccordionItemContent = (children, props, context) => {
55
const contentInnerClasses = css(
66
'c-bolt-accordion-item__content-inner',
7-
context.spacing ? `c-bolt-accordion-spacing--${context.spacing}` : '',
7+
props.contentSpacing || context.spacing
8+
? `c-bolt-accordion-spacing--${props.contentSpacing || context.spacing}`
9+
: '',
10+
!props.contentSpacing ? 'c-bolt-accordion-item__content-inner--offset' : '',
811
);
912

1013
const contentTemplate = children => {

‎packages/components/bolt-accordion/src/AccordionItem/AccordionItemTrigger.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export const AccordionItemTrigger = (children, props, context) => {
77
const labelClasses = css(
88
'c-bolt-accordion-item__trigger-label',
99
props.inactive ? `c-bolt-accordion-item__trigger-label--inactive` : '',
10-
context.spacing ? `c-bolt-accordion-spacing--${context.spacing}` : '',
10+
props.triggerSpacing || context.spacing
11+
? `c-bolt-accordion-spacing--${props.triggerSpacing || context.spacing}`
12+
: '',
1113
);
1214

1315
const labelInner = children => {

‎packages/components/bolt-accordion/src/AccordionItem/accordion-item.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ bolt-accordion-item {
1010

1111
// Required for no-JS styles to display properly
1212
replace-with-children,
13-
replace-with-grandchildren {
13+
replace-with-grandchildren,
14+
ssr-keep {
1415
display: block;
1516
flex-grow: 1;
1617
}
@@ -395,7 +396,8 @@ bolt-accordion-item {
395396
.c-bolt-accordion-spacing--#{$spacing-value-name} {
396397
@include bolt-padding(#{$spacing-value-name}, squished);
397398

398-
&.c-bolt-accordion-item__content-inner,
399+
// Applies only to js content
400+
&.c-bolt-accordion-item__content-inner.c-bolt-accordion-item__content-inner--offset,
399401
// Applies only to no-js trigger
400402
&.c-bolt-accordion-item__trigger-label.c-bolt-accordion-item__trigger-label--offset {
401403
padding-right: calc(

‎packages/components/bolt-accordion/src/AccordionItem/accordion-item.twig

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,16 @@
99
{% set this = init(schema.properties.items.items) %}
1010
{% set inner_attributes = create_attribute({}) %}
1111
{% set label_attributes = create_attribute({}) %}
12+
{% set content_attributes = create_attribute({}) %}
1213

1314
{% set _uuid = this.data.uuid.value|default(bolt.data.config.env == "test" ? "12345" : random()) %}
1415
{% set primary_uuid = base_class ~ "-#{_uuid}" %}
1516
{% set secondary_uuid = base_class ~ "-inner-#{_uuid}" %}
1617

1718
{% set inactive = this.data.inactive.value %}
18-
{% set spacing_class = spacing ? "c-bolt-accordion-spacing--" ~ spacing : "" %}
19+
{% set trigger_spacing_class = "c-bolt-accordion-spacing--" ~ trigger_spacing|default(spacing) %}
20+
{% set content_spacing_class = "c-bolt-accordion-spacing--" ~ content_spacing|default(spacing) %}
21+
1922
{% set trigger_tag = inactive ? "div" : "label" %}
2023

2124
{# init() will not return "trigger" because "trigger" can be an object or array #}
@@ -35,7 +38,13 @@
3538
"c-bolt-accordion-item__trigger-label",
3639
"c-bolt-accordion-item__trigger-label--offset",
3740
inactive ? "c-bolt-accordion-item__trigger-label--inactive" : "",
38-
spacing_class
41+
trigger_spacing_class
42+
] %}
43+
44+
{% set content_classes = [
45+
"c-bolt-accordion-item__content-inner",
46+
trigger_spacing or content_spacing ? "" : "c-bolt-accordion-item__content-inner--offset",
47+
content_spacing_class
3948
] %}
4049

4150
{% if not inactive %}
@@ -79,17 +88,17 @@
7988
</div>
8089
</{{ trigger_tag }}>
8190

82-
<a href="#{{ primary_uuid }}" class="c-bolt-accordion-item__trigger-link c-bolt-accordion-item__trigger-link--open {{ spacing_class }}">
91+
<a href="#{{ primary_uuid }}" class="c-bolt-accordion-item__trigger-link c-bolt-accordion-item__trigger-link--open {{ trigger_spacing_class }}">
8392
<span class="c-bolt-accordion-item__toggle-text">{{ this.data.open_label.value }}</span>
8493
</a>
8594

86-
<a href="#{{ secondary_uuid }}" class="c-bolt-accordion-item__trigger-link c-bolt-accordion-item__trigger-link--close {{ spacing_class }}">
95+
<a href="#{{ secondary_uuid }}" class="c-bolt-accordion-item__trigger-link c-bolt-accordion-item__trigger-link--close {{ trigger_spacing_class }}">
8796
<span class="c-bolt-accordion-item__toggle-text">{{ this.data.close_label.value }}</span>
8897
</a>
8998
</div>
9099

91100
<div class="c-bolt-accordion-item__content">
92-
<div class="c-bolt-accordion-item__content-inner {{ spacing_class }}">
101+
<div {{ content_attributes.addClass(content_classes) }}>
93102
<ssr-keep for="bolt-accordion-item">
94103
{{ content }}
95104
</ssr-keep>

‎packages/components/bolt-accordion/src/AccordionItem/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ class AccordionItem extends withContext(withLitHtml()) {
1212

1313
static props = {
1414
open: props.boolean,
15+
contentSpacing: props.string,
16+
triggerSpacing: props.string,
1517
inactive: props.boolean,
1618
uuid: props.string,
1719
};

0 commit comments

Comments
 (0)