@aarhus-university/au-lib-react-components 10.20.7 → 10.21.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.storybook/preview.js
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"sideEffects": false,
|
|
3
3
|
"name": "@aarhus-university/au-lib-react-components",
|
|
4
|
-
"version": "10.
|
|
4
|
+
"version": "10.21.1",
|
|
5
5
|
"description": "Library for shared React components for various applications on au.dk",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"test": "jest",
|
|
@@ -72,8 +72,9 @@
|
|
|
72
72
|
"webpack-cli": "^4.9.2"
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
|
-
"@aarhus-university/au-designsystem-delphinus": "0.
|
|
76
|
-
"@aarhus-university/
|
|
75
|
+
"@aarhus-university/au-designsystem-delphinus": "0.33.2",
|
|
76
|
+
"@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
|
|
77
|
+
"@aarhus-university/types": "0.13.8",
|
|
77
78
|
"@reduxjs/toolkit": "^1.8.3",
|
|
78
79
|
"@types/google.analytics": "^0.0.42",
|
|
79
80
|
"@types/history": "^5.0.0",
|
|
@@ -9,14 +9,23 @@ const AUContentToggleComponent: FC<AUContentToggleComponentProps> = ({
|
|
|
9
9
|
toggled,
|
|
10
10
|
classNames,
|
|
11
11
|
children,
|
|
12
|
+
beforeCallback,
|
|
13
|
+
afterCallback,
|
|
12
14
|
}: AUContentToggleComponentProps) => {
|
|
13
15
|
const toggleContainer = useRef<HTMLDivElement>(null);
|
|
14
16
|
useEffect(() => {
|
|
15
17
|
const toggle = toggleContainer?.current?.querySelector('.content-toggle__content');
|
|
18
|
+
let cleanUp: CleanUpPair | null = null;
|
|
16
19
|
if (toggle) {
|
|
17
|
-
|
|
18
|
-
|
|
20
|
+
cleanUp = setContentToggle(toggle, beforeCallback, afterCallback);
|
|
21
|
+
cleanUp?.element.setAttribute('aria-expanded', toggled ? 'true' : 'false');
|
|
19
22
|
}
|
|
23
|
+
|
|
24
|
+
return () => {
|
|
25
|
+
if (cleanUp) {
|
|
26
|
+
cleanUp.element.removeEventListener('click', cleanUp.clickEvent);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
20
29
|
}, []);
|
|
21
30
|
return (
|
|
22
31
|
<div ref={toggleContainer} className={classNames}>
|
|
@@ -27,6 +36,8 @@ const AUContentToggleComponent: FC<AUContentToggleComponentProps> = ({
|
|
|
27
36
|
|
|
28
37
|
AUContentToggleComponent.defaultProps = {
|
|
29
38
|
classNames: undefined,
|
|
39
|
+
beforeCallback: undefined,
|
|
40
|
+
afterCallback: undefined,
|
|
30
41
|
};
|
|
31
42
|
|
|
32
43
|
AUContentToggleComponent.displayName = 'AUContentToggleComponent';
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
3
|
+
import AUContentToggleComponent from '../src/components/AUContentToggleComponent';
|
|
4
|
+
import { ThemeWrapper } from './lib/helpers';
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: 'Delphinus/Content Toggle',
|
|
8
|
+
component: AUContentToggleComponent,
|
|
9
|
+
argTypes: {
|
|
10
|
+
toggled: {
|
|
11
|
+
table: {
|
|
12
|
+
disable: true,
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
children: {
|
|
16
|
+
table: {
|
|
17
|
+
disable: true,
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
decorators: [
|
|
22
|
+
(Story, context) => (
|
|
23
|
+
<ThemeWrapper theme={context.globals.theme}>
|
|
24
|
+
{Story()}
|
|
25
|
+
</ThemeWrapper>
|
|
26
|
+
)
|
|
27
|
+
],
|
|
28
|
+
} as ComponentMeta<typeof AUContentToggleComponent>;
|
|
29
|
+
|
|
30
|
+
const Template: ComponentStory<typeof AUContentToggleComponent> = (args) => <AUContentToggleComponent {...args} />;
|
|
31
|
+
|
|
32
|
+
export const Hidden_when_loaded = Template.bind({});
|
|
33
|
+
Hidden_when_loaded.args = {
|
|
34
|
+
toggled: false,
|
|
35
|
+
children: (
|
|
36
|
+
<div className="box theme--background-secondary box--constrain-width">
|
|
37
|
+
<button className="content-toggle__toggle button button--small" aria-expanded="false">
|
|
38
|
+
Very interesting content is hidden
|
|
39
|
+
</button>
|
|
40
|
+
<div className="content-toggle__content vertical-spacing-top" hidden>
|
|
41
|
+
<h4 className="text--label-header text--pull">The content that is toggled</h4>
|
|
42
|
+
<p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
),
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export const Shown_when_loaded = Template.bind({});
|
|
49
|
+
Shown_when_loaded.args = {
|
|
50
|
+
toggled: true,
|
|
51
|
+
children: (
|
|
52
|
+
<div className="box theme--background-secondary box--constrain-width">
|
|
53
|
+
<button className="content-toggle__toggle button button--small" aria-expanded="true">
|
|
54
|
+
Very interesting content is hidden
|
|
55
|
+
</button>
|
|
56
|
+
<div className="content-toggle__content vertical-spacing-top">
|
|
57
|
+
<h4 className="text--label-header text--pull">The content that is toggled</h4>
|
|
58
|
+
<p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
),
|
|
62
|
+
};
|
|
63
|
+
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
3
|
+
import { closeAllContentTogglesInToolbar, findToolbar } from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
|
|
3
4
|
import AUToolbarComponent from '../src/components/AUToolbarComponent';
|
|
4
5
|
import AUButtonComponent from '../src/components/AUButtonComponent';
|
|
6
|
+
import AUContentToggleComponent from '../src/components/AUContentToggleComponent';
|
|
5
7
|
import { ThemeWrapper } from './lib/helpers';
|
|
6
8
|
|
|
7
9
|
export default {
|
|
@@ -93,3 +95,124 @@ Groupings.args = {
|
|
|
93
95
|
</div>,
|
|
94
96
|
],
|
|
95
97
|
};
|
|
98
|
+
|
|
99
|
+
export const Filter = Template.bind({});
|
|
100
|
+
Filter.args = {
|
|
101
|
+
lang: 'da',
|
|
102
|
+
elements: [
|
|
103
|
+
<AUContentToggleComponent
|
|
104
|
+
toggled={false}
|
|
105
|
+
beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
|
|
106
|
+
afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
|
|
107
|
+
const toolbar = findToolbar(content);
|
|
108
|
+
const ariaExpanded = button.getAttribute('aria-expanded');
|
|
109
|
+
if (ariaExpanded === 'true') {
|
|
110
|
+
toolbar?.classList.add('toolbar--has-popout');
|
|
111
|
+
} else {
|
|
112
|
+
toolbar?.classList.remove('toolbar--has-popout');
|
|
113
|
+
}
|
|
114
|
+
}}
|
|
115
|
+
>
|
|
116
|
+
<div className="toolbar__filter">
|
|
117
|
+
<button
|
|
118
|
+
type="button"
|
|
119
|
+
className="toolbar__filter__toggle content-toggle__toggle"
|
|
120
|
+
aria-expanded={false}
|
|
121
|
+
>
|
|
122
|
+
Sted
|
|
123
|
+
</button>
|
|
124
|
+
<div
|
|
125
|
+
className="toolbar__filter__content content-toggle__content"
|
|
126
|
+
hidden
|
|
127
|
+
>
|
|
128
|
+
<fieldset className="selection-list">
|
|
129
|
+
<legend>
|
|
130
|
+
Vælg sted
|
|
131
|
+
</legend>
|
|
132
|
+
<div className="form__field form__field--inline-label">
|
|
133
|
+
<label htmlFor="search-location">Søg</label>
|
|
134
|
+
<input type="search" id="search-location" />
|
|
135
|
+
</div>
|
|
136
|
+
<div className="toolbar__filter__content__options">
|
|
137
|
+
<div className="selection-list__option">
|
|
138
|
+
<input type="checkbox" id="option-1" />
|
|
139
|
+
<label htmlFor="option-1">Aarhus</label>
|
|
140
|
+
</div>
|
|
141
|
+
<div className="selection-list__option">
|
|
142
|
+
<input type="checkbox" id="option-2" />
|
|
143
|
+
<label htmlFor="option-2">København</label>
|
|
144
|
+
</div>
|
|
145
|
+
<div className="selection-list__option">
|
|
146
|
+
<input type="checkbox" id="option-3" />
|
|
147
|
+
<label htmlFor="option-3">Herning</label>
|
|
148
|
+
</div>
|
|
149
|
+
<div className="selection-list__option">
|
|
150
|
+
<input type="checkbox" id="option-4" />
|
|
151
|
+
<label htmlFor="option-4">Øvrige</label>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</fieldset>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
</AUContentToggleComponent>,
|
|
158
|
+
<AUContentToggleComponent
|
|
159
|
+
toggled={false}
|
|
160
|
+
beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
|
|
161
|
+
afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
|
|
162
|
+
const toolbar = findToolbar(content);
|
|
163
|
+
const ariaExpanded = button.getAttribute('aria-expanded');
|
|
164
|
+
if (ariaExpanded === 'true') {
|
|
165
|
+
toolbar?.classList.add('toolbar--has-popout');
|
|
166
|
+
} else {
|
|
167
|
+
toolbar?.classList.remove('toolbar--has-popout');
|
|
168
|
+
}
|
|
169
|
+
}}
|
|
170
|
+
>
|
|
171
|
+
<div className="toolbar__filter">
|
|
172
|
+
<button
|
|
173
|
+
type="button"
|
|
174
|
+
className="toolbar__filter__toggle content-toggle__toggle"
|
|
175
|
+
aria-expanded={false}
|
|
176
|
+
>
|
|
177
|
+
Fakultet
|
|
178
|
+
</button>
|
|
179
|
+
<div
|
|
180
|
+
className="toolbar__filter__content content-toggle__content"
|
|
181
|
+
hidden
|
|
182
|
+
>
|
|
183
|
+
<fieldset className="selection-list">
|
|
184
|
+
<legend>
|
|
185
|
+
Vælg fakultet
|
|
186
|
+
</legend>
|
|
187
|
+
<div className="form__field form__field--inline-label">
|
|
188
|
+
<label htmlFor="search-faculty">Søg</label>
|
|
189
|
+
<input type="search" id="search-faculty" />
|
|
190
|
+
</div>
|
|
191
|
+
<div className="toolbar__filter__content__options">
|
|
192
|
+
<div className="selection-list__option">
|
|
193
|
+
<input type="checkbox" id="option-5" />
|
|
194
|
+
<label htmlFor="option-5">Arts</label>
|
|
195
|
+
</div>
|
|
196
|
+
<div className="selection-list__option">
|
|
197
|
+
<input type="checkbox" id="option-6" />
|
|
198
|
+
<label htmlFor="option-6">Health</label>
|
|
199
|
+
</div>
|
|
200
|
+
<div className="selection-list__option">
|
|
201
|
+
<input type="checkbox" id="option-7" />
|
|
202
|
+
<label htmlFor="option-7">Natural Sciences</label>
|
|
203
|
+
</div>
|
|
204
|
+
<div className="selection-list__option">
|
|
205
|
+
<input type="checkbox" id="option-8" />
|
|
206
|
+
<label htmlFor="option-8">Technical Sciences</label>
|
|
207
|
+
</div>
|
|
208
|
+
<div className="selection-list__option">
|
|
209
|
+
<input type="checkbox" id="option-9" />
|
|
210
|
+
<label htmlFor="option-9">Aarhus BSS</label>
|
|
211
|
+
</div>
|
|
212
|
+
</div>
|
|
213
|
+
</fieldset>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</AUContentToggleComponent>
|
|
217
|
+
],
|
|
218
|
+
};
|