Skip to content

Commit ef3ae15

Browse files
dvcoldvcol
committed
feat(accordion): adds accordion styling for collapse
1 parent b3a1b99 commit ef3ae15

17 files changed

+492
-51
lines changed

‎demo/components/DemoCollapse.svelte‎

Lines changed: 134 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,103 @@
11
<script lang="ts">
22
import NeoNumberStep from '../../src/lib/inputs/NeoNumberStep.svelte';
33
4-
import type { NeoCollapseGroupProps } from '~/collapse/neo-collapse-group.model';
4+
import SphereBackdrop from '../utils/SphereBackdrop.svelte';
5+
6+
import type { NeoAccordionProps } from '~/collapse/neo-accordion.model';
57
68
import NeoButton from '~/buttons/NeoButton.svelte';
9+
import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
10+
import NeoAccordion from '~/collapse/NeoAccordion.svelte';
711
import NeoCollapse from '~/collapse/NeoCollapse.svelte';
812
import NeoCollapseGroup from '~/collapse/NeoCollapseGroup.svelte';
913
import NeoSkeletonMedia from '~/skeletons/NeoSkeletonMedia.svelte';
10-
11-
const options = $state<NeoCollapseGroupProps>({
14+
import {
15+
DefaultShadowElevation,
16+
DefaultShadowHoverElevation,
17+
getDefaultElevation,
18+
getDefaultHoverElevation,
19+
MaxShadowElevation,
20+
MinShadowElevation,
21+
} from '~/utils/shadow.utils';
22+
23+
const options = $state<NeoAccordionProps>({
1224
disabled: false,
13-
min: 0,
14-
max: 3,
25+
readonly: false,
26+
segmented: true,
27+
28+
borderless: false,
29+
rounded: false,
30+
pressed: false,
31+
glass: false,
32+
tinted: false,
33+
34+
elevation: 0,
35+
hover: 0,
36+
37+
group: {
38+
min: 0,
39+
max: 3,
40+
},
1541
});
1642
43+
const onPressed = () => {
44+
options.elevation = getDefaultElevation(options.pressed);
45+
options.hover = getDefaultHoverElevation(options.pressed);
46+
};
47+
48+
const onElevation = () => {
49+
if (options.elevation + options.hover < MinShadowElevation) options.hover += 1;
50+
if (options.elevation + options.hover > MaxShadowElevation) options.hover -= 1;
51+
};
52+
1753
let controlled = $state(false);
1854
</script>
1955

2056
<div class="row">
21-
<NeoButton rounded toggle bind:checked={options.disabled}>Disabled</NeoButton>
57+
<NeoButtonGroup rounded={options.rounded}>
58+
<NeoButton toggle bind:checked={options.disabled}>Disabled</NeoButton>
59+
<NeoButton toggle bind:checked={options.readonly}>Readonly</NeoButton>
60+
<NeoButton toggle bind:checked={options.segmented}>Segmented</NeoButton>
61+
<NeoButton toggle bind:checked={options.borderless}>Borderless</NeoButton>
62+
<NeoButton toggle bind:checked={options.rounded}>Rounded</NeoButton>
63+
<NeoButton toggle bind:checked={options.pressed} onclick={onPressed}>Pressed</NeoButton>
64+
<NeoButton toggle bind:checked={options.glass}>Glass</NeoButton>
65+
<NeoButton toggle bind:checked={options.tinted}>Tinted</NeoButton>
66+
</NeoButtonGroup>
67+
68+
<NeoNumberStep
69+
label="Elevation"
70+
placement="left"
71+
center
72+
bind:value={options.elevation}
73+
min={MinShadowElevation}
74+
max={MaxShadowElevation}
75+
defaultValue={DefaultShadowElevation}
76+
rounded={options.rounded}
77+
oninput={onElevation}
78+
nullable={false}
79+
floating={false}
80+
groupProps={{ style: 'margin-left: 6rem' }}
81+
/>
82+
<NeoNumberStep
83+
label="Hover"
84+
placement="left"
85+
center
86+
bind:value={options.hover}
87+
min={MinShadowElevation - options.elevation}
88+
max={MaxShadowElevation - options.elevation}
89+
defaultValue={DefaultShadowHoverElevation}
90+
rounded={options.rounded}
91+
nullable={false}
92+
floating={false}
93+
groupProps={{ style: 'margin-left: 4rem' }}
94+
/>
2295

2396
<NeoNumberStep
2497
label="Minimum"
2598
placement="left"
2699
center
27-
bind:value={options.min}
100+
bind:value={options.group.min}
28101
min={0}
29102
max={3}
30103
defaultValue={0}
@@ -38,7 +111,7 @@
38111
label="Maximum"
39112
placement="left"
40113
center
41-
bind:value={options.max}
114+
bind:value={options.group.max}
42115
min={0}
43116
max={3}
44117
defaultValue={3}
@@ -59,32 +132,59 @@
59132
<div class="row">
60133
<div class="column content">
61134
<span class="label">Default</span>
62-
<NeoCollapseGroup {...options}>
63-
<NeoCollapse label="Section 1" children={content} />
64-
<NeoCollapse label="Section 2" children={content} />
65-
<NeoCollapse label="Section 3" children={content} />
66-
</NeoCollapseGroup>
135+
136+
<SphereBackdrop glass={options.glass} style="width: 100%">
137+
<NeoAccordion {...options}>
138+
<NeoCollapse label="Section 1" children={content} />
139+
<NeoCollapse label="Section 2" children={content} />
140+
<NeoCollapse label="Section 3" children={content} />
141+
</NeoAccordion>
142+
</SphereBackdrop>
67143
</div>
68144
</div>
69145

70146
<div class="row">
71147
<div class="column content">
72148
<span class="label">Description</span>
73-
<NeoCollapseGroup {...options}>
74-
<NeoCollapse id="section 1" label="Section 1" description="This is a description" children={content} />
75-
<NeoCollapse id="section 2" label="Section 2" description="This is a description" children={content} />
76-
<NeoCollapse id="section 3" label="Section 3" description="This is a description" children={content} />
77-
</NeoCollapseGroup>
149+
<SphereBackdrop glass={options.glass} style="width: 100%">
150+
<NeoAccordion {...options}>
151+
<NeoCollapse id="section 1" label="Section 1" description="This is a description" children={content} />
152+
<NeoCollapse id="section 2" label="Section 2" description="This is a description" children={content} />
153+
<NeoCollapse id="section 3" label="Section 3" description="This is a description" children={content} />
154+
</NeoAccordion>
155+
</SphereBackdrop>
156+
</div>
157+
</div>
158+
159+
<div class="row">
160+
<div class="column content">
161+
<span class="label">Separated</span>
162+
163+
<SphereBackdrop glass={options.glass} style="width: 100%">
164+
<NeoCollapseGroup {...options.group}>
165+
<NeoAccordion {...options} group={undefined}>
166+
<NeoCollapse label="Section 1" children={content} />
167+
</NeoAccordion>
168+
<NeoAccordion {...options} group={undefined}>
169+
<NeoCollapse label="Section 2" children={content} />
170+
</NeoAccordion>
171+
<NeoAccordion {...options} group={undefined}>
172+
<NeoCollapse label="Section 3" children={content} />
173+
</NeoAccordion>
174+
</NeoCollapseGroup>
175+
</SphereBackdrop>
78176
</div>
79177
</div>
80178

81179
<div class="row">
82-
<div class="column">
83-
<span class="label">Controlled</span>
180+
<div class="column content">
181+
<span class="label">External trigger</span>
84182
<NeoButton text toggle hover="-1" active="-2" bind:checked={controlled}>Toggle</NeoButton>
85-
<NeoCollapseGroup {...options}>
86-
<NeoCollapse children={content} open={controlled} />
87-
</NeoCollapseGroup>
183+
<SphereBackdrop glass={options.glass} style="width: 100%">
184+
<NeoAccordion {...options}>
185+
<NeoCollapse children={content} open={controlled} />
186+
</NeoAccordion>
187+
</SphereBackdrop>
88188
</div>
89189
</div>
90190

@@ -93,15 +193,15 @@
93193
{/snippet}
94194

95195
<div class="row">
96-
<div class="column content">
196+
<div class="column horizontal">
97197
<span class="label">Horizontal</span>
98-
<div class="row content">
99-
<NeoCollapseGroup {...options}>
198+
<SphereBackdrop glass={options.glass}>
199+
<NeoAccordion horizontal {...options}>
100200
<NeoCollapse horizontal label="Click Me" description="Section 1" children={horizontalContent} />
101201
<NeoCollapse horizontal label="Click Me" description="Section 2" children={horizontalContent} />
102202
<NeoCollapse horizontal label="Click Me" description="Section 3" children={horizontalContent} />
103-
</NeoCollapseGroup>
104-
</div>
203+
</NeoAccordion>
204+
</SphereBackdrop>
105205
</div>
106206
</div>
107207

@@ -119,16 +219,17 @@
119219
&.content {
120220
width: min(80vw, 80ch);
121221
}
222+
223+
&.horizontal {
224+
:global(.neo-accordion .neo-collapse-trigger) {
225+
min-height: 15rem;
226+
}
227+
}
122228
}
123229
124230
.row {
125231
@include flex.row($center: true, $gap: var(--neo-gap-xl), $flex: 0 1 auto);
126232
127233
margin: 2rem 0;
128-
129-
&.content {
130-
flex-wrap: nowrap;
131-
height: 20rem;
132-
}
133234
}
134235
</style>

‎demo/components/DemoTabs.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@
150150
@use 'src/lib/styles/common/flex' as flex;
151151
152152
.column {
153-
@include flex.column($center: true, $gap: var(--neo-gap-lg));
153+
@include flex.column($center: true, $gap: var(--neo-gap-xl));
154154
}
155155
156156
.values,

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@
4848
"types": "./dist/cards/index.d.ts",
4949
"svelte": "./dist/cards/index.js"
5050
},
51+
"./collapse": {
52+
"types": "./dist/collapse/index.d.ts",
53+
"svelte": "./dist/collapse/index.js"
54+
},
5155
"./containers": {
5256
"types": "./dist/containers/index.d.ts",
5357
"svelte": "./dist/containers/index.js"

‎src/lib/buttons/neo-button-group.model.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export type NeoButtonGroupContext = {
5151
*/
5252
active?: NeoButtonActiveElevation;
5353
/**
54-
* Weather the pressed state should be displayed as recessed or pressed.
54+
* Whether the pressed state should be displayed as recessed or pressed.
5555
*
5656
* @default true if `elevation` + `hover` > 0 && `active` < 0
5757
*/

‎src/lib/buttons/neo-button.model.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,13 +107,13 @@ export type NeoButtonProps<Tag extends keyof HTMLElementTagNameMap = 'button'> =
107107
*/
108108
elevation?: NeoButtonElevation;
109109
/**
110-
* Weather to increase/decrease the elevation when hovered/focused.
110+
* Whether to increase/decrease the elevation when hovered/focused.
111111
*
112112
* @default -1 (relative to base elevation)
113113
*/
114114
hover?: NeoButtonHoverElevation;
115115
/**
116-
* Weather to increase/decrease the elevation when active.
116+
* Whether to increase/decrease the elevation when active.
117117
*
118118
* @default -2 (absolute value)
119119
*/
@@ -126,13 +126,13 @@ export type NeoButtonProps<Tag extends keyof HTMLElementTagNameMap = 'button'> =
126126
*/
127127
blur?: NeoButtonBlur;
128128
/**
129-
* Weather the pressed state should be displayed as recessed or pressed.
129+
* Whether the pressed state should be displayed as recessed or pressed.
130130
*
131131
* @default true if `elevation` + `hover` > 0 && `active` < 0
132132
*/
133133
pressed?: boolean;
134134
/**
135-
* Weather to scale the button content on active state.
135+
* Whether to scale the button content on active state.
136136
*
137137
* @default true
138138
*/

‎src/lib/cards/neo-card.model.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export type NeoCardContext = {
3333
*/
3434
spacing?: CSSStyleDeclaration['padding'];
3535
/**
36-
* Weather to increase/decrease the elevation when hovered/focused.
36+
* Whether to increase/decrease the elevation when hovered/focused.
3737
* @default 0
3838
*/
3939
hover?: NeoCardHoverElevation;

0 commit comments

Comments
 (0)