Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 73a396d

Browse files
author
Kerry Archibald
committed
add settings subsection heading component
1 parent 87d3fbd commit 73a396d

File tree

10 files changed

+212
-51
lines changed

10 files changed

+212
-51
lines changed

‎res/css/_components.pcss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
@import "./components/views/settings/devices/_SecurityRecommendations.pcss";
4141
@import "./components/views/settings/devices/_SelectableDeviceTile.pcss";
4242
@import "./components/views/settings/shared/_SettingsSubsection.pcss";
43+
@import "./components/views/settings/shared/_SettingsSubsectionHeading.pcss";
4344
@import "./components/views/spaces/_QuickThemeSwitcher.pcss";
4445
@import "./components/views/typography/_Caption.pcss";
4546
@import "./structures/_AutoHideScrollbar.pcss";

‎res/css/components/views/settings/shared/_SettingsSubsection.pcss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@ limitations under the License.
1919
box-sizing: border-box;
2020
}
2121

22-
.mx_SettingsSubsection_heading {
23-
padding-bottom: $spacing-8;
24-
}
25-
2622
.mx_SettingsSubsection_description {
2723
width: 100%;
2824
box-sizing: inherit;

‎res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_SettingsSubsectionHeading {
18+
display: flex;
19+
flex-direction: row;
20+
padding-bottom: $spacing-8;
21+
22+
gap: $spacing-8;
23+
}
24+
25+
.mx_SettingsSubsectionHeading_heading {
26+
flex: 1 1 100%;
27+
}

‎src/components/views/settings/shared/SettingsSubsection.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,22 @@ limitations under the License.
1616

1717
import React, { HTMLAttributes } from "react";
1818

19-
import Heading from "../../typography/Heading";
19+
import SettingsSubsectionHeading from "./SettingsSubsectionHeading";
2020

2121
export interface SettingsSubsectionProps extends HTMLAttributes<HTMLDivElement> {
22-
heading: string;
22+
heading: string | React.ReactNode;
2323
description?: string | React.ReactNode;
2424
children?: React.ReactNode;
2525
}
2626

2727
const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children, ...rest }) => (
2828
<div {...rest} className="mx_SettingsSubsection">
29-
<Heading className="mx_SettingsSubsection_heading" size='h3'>{ heading }</Heading>
29+
{ typeof heading === 'string'
30+
? <SettingsSubsectionHeading heading={heading} />
31+
: <>
32+
{ heading }
33+
</>
34+
}
3035
{ !!description && <div className="mx_SettingsSubsection_description">{ description }</div> }
3136
<div className="mx_SettingsSubsection_content">
3237
{ children }

‎src/components/views/settings/shared/SettingsSubsectionHeading.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import React, { HTMLAttributes } from "react";
18+
19+
import Heading from "../../typography/Heading";
20+
21+
export interface SettingsSubsectionHeadingProps extends HTMLAttributes<HTMLDivElement> {
22+
heading: string;
23+
children?: React.ReactNode;
24+
}
25+
26+
export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({ heading, children, ...rest }) => (
27+
<div {...rest} className="mx_SettingsSubsectionHeading">
28+
<Heading className="mx_SettingsSubsectionHeading_heading" size='h3'>{ heading }</Heading>
29+
{ children }
30+
</div>
31+
);
32+
33+
export default SettingsSubsectionHeading;

‎test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -120,11 +120,15 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
120120
class="mx_SettingsSubsection"
121121
data-testid="current-session-section"
122122
>
123-
<h3
124-
class="mx_Heading_h3 mx_SettingsSubsection_heading"
123+
<div
124+
class="mx_SettingsSubsectionHeading"
125125
>
126-
Current session
127-
</h3>
126+
<h3
127+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
128+
>
129+
Current session
130+
</h3>
131+
</div>
128132
<div
129133
class="mx_SettingsSubsection_content"
130134
/>
@@ -138,11 +142,15 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
138142
class="mx_SettingsSubsection"
139143
data-testid="current-session-section"
140144
>
141-
<h3
142-
class="mx_Heading_h3 mx_SettingsSubsection_heading"
145+
<div
146+
class="mx_SettingsSubsectionHeading"
143147
>
144-
Current session
145-
</h3>
148+
<h3
149+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
150+
>
151+
Current session
152+
</h3>
153+
</div>
146154
<div
147155
class="mx_SettingsSubsection_content"
148156
>
@@ -258,11 +266,15 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
258266
class="mx_SettingsSubsection"
259267
data-testid="current-session-section"
260268
>
261-
<h3
262-
class="mx_Heading_h3 mx_SettingsSubsection_heading"
269+
<div
270+
class="mx_SettingsSubsectionHeading"
263271
>
264-
Current session
265-
</h3>
272+
<h3
273+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
274+
>
275+
Current session
276+
</h3>
277+
</div>
266278
<div
267279
class="mx_SettingsSubsection_content"
268280
>

‎test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,15 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
66
class="mx_SettingsSubsection"
77
data-testid="security-recommendations-section"
88
>
9-
<h3
10-
class="mx_Heading_h3 mx_SettingsSubsection_heading"
9+
<div
10+
class="mx_SettingsSubsectionHeading"
1111
>
12-
Security recommendations
13-
</h3>
12+
<h3
13+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
14+
>
15+
Security recommendations
16+
</h3>
17+
</div>
1418
<div
1519
class="mx_SettingsSubsection_description"
1620
>
@@ -109,11 +113,15 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
109113
class="mx_SettingsSubsection"
110114
data-testid="security-recommendations-section"
111115
>
112-
<h3
113-
class="mx_Heading_h3 mx_SettingsSubsection_heading"
116+
<div
117+
class="mx_SettingsSubsectionHeading"
114118
>
115-
Security recommendations
116-
</h3>
119+
<h3
120+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
121+
>
122+
Security recommendations
123+
</h3>
124+
</div>
117125
<div
118126
class="mx_SettingsSubsection_description"
119127
>
@@ -212,11 +220,15 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
212220
class="mx_SettingsSubsection"
213221
data-testid="security-recommendations-section"
214222
>
215-
<h3
216-
class="mx_Heading_h3 mx_SettingsSubsection_heading"
223+
<div
224+
class="mx_SettingsSubsectionHeading"
217225
>
218-
Security recommendations
219-
</h3>
226+
<h3
227+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
228+
>
229+
Security recommendations
230+
</h3>
231+
</div>
220232
<div
221233
class="mx_SettingsSubsection_description"
222234
>

‎test/components/views/settings/shared/SettingsSubsection-test.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,17 @@ describe('<SettingsSubsection />', () => {
2727
const getComponent = (props = {}): React.ReactElement =>
2828
(<SettingsSubsection {...defaultProps} {...props} />);
2929

30+
it('renders with plain text heading', () => {
31+
const { container } = render(getComponent());
32+
expect(container).toMatchSnapshot();
33+
});
34+
35+
it('renders with react element heading', () => {
36+
const heading = <h3>This is the heading</h3>;
37+
const { container } = render(getComponent({ heading }));
38+
expect(container).toMatchSnapshot();
39+
});
40+
3041
it('renders without description', () => {
3142
const { container } = render(getComponent());
3243
expect(container).toMatchSnapshot();

‎test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap‎

Lines changed: 68 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,15 @@ exports[`<SettingsSubsection /> renders with plain text description 1`] = `
55
<div
66
class="mx_SettingsSubsection"
77
>
8-
<h3
9-
class="mx_Heading_h3 mx_SettingsSubsection_heading"
8+
<div
9+
class="mx_SettingsSubsectionHeading"
1010
>
11-
Test
12-
</h3>
11+
<h3
12+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
13+
>
14+
Test
15+
</h3>
16+
</div>
1317
<div
1418
class="mx_SettingsSubsection_description"
1519
>
@@ -26,16 +30,45 @@ exports[`<SettingsSubsection /> renders with plain text description 1`] = `
2630
</div>
2731
`;
2832

33+
exports[`<SettingsSubsection /> renders with plain text heading 1`] = `
34+
<div>
35+
<div
36+
class="mx_SettingsSubsection"
37+
>
38+
<div
39+
class="mx_SettingsSubsectionHeading"
40+
>
41+
<h3
42+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
43+
>
44+
Test
45+
</h3>
46+
</div>
47+
<div
48+
class="mx_SettingsSubsection_content"
49+
>
50+
<div>
51+
test settings content
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
`;
57+
2958
exports[`<SettingsSubsection /> renders with react element description 1`] = `
3059
<div>
3160
<div
3261
class="mx_SettingsSubsection"
3362
>
34-
<h3
35-
class="mx_Heading_h3 mx_SettingsSubsection_heading"
63+
<div
64+
class="mx_SettingsSubsectionHeading"
3665
>
37-
Test
38-
</h3>
66+
<h3
67+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
68+
>
69+
Test
70+
</h3>
71+
</div>
3972
<div
4073
class="mx_SettingsSubsection_description"
4174
>
@@ -59,16 +92,39 @@ exports[`<SettingsSubsection /> renders with react element description 1`] = `
5992
</div>
6093
`;
6194

95+
exports[`<SettingsSubsection /> renders with react element heading 1`] = `
96+
<div>
97+
<div
98+
class="mx_SettingsSubsection"
99+
>
100+
<h3>
101+
This is the heading
102+
</h3>
103+
<div
104+
class="mx_SettingsSubsection_content"
105+
>
106+
<div>
107+
test settings content
108+
</div>
109+
</div>
110+
</div>
111+
</div>
112+
`;
113+
62114
exports[`<SettingsSubsection /> renders without description 1`] = `
63115
<div>
64116
<div
65117
class="mx_SettingsSubsection"
66118
>
67-
<h3
68-
class="mx_Heading_h3 mx_SettingsSubsection_heading"
119+
<div
120+
class="mx_SettingsSubsectionHeading"
69121
>
70-
Test
71-
</h3>
122+
<h3
123+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
124+
>
125+
Test
126+
</h3>
127+
</div>
72128
<div
73129
class="mx_SettingsSubsection_content"
74130
>

‎test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,15 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
8181
class="mx_SettingsSubsection"
8282
data-testid="current-session-section"
8383
>
84-
<h3
85-
class="mx_Heading_h3 mx_SettingsSubsection_heading"
84+
<div
85+
class="mx_SettingsSubsectionHeading"
8686
>
87-
Current session
88-
</h3>
87+
<h3
88+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
89+
>
90+
Current session
91+
</h3>
92+
</div>
8993
<div
9094
class="mx_SettingsSubsection_content"
9195
>
@@ -187,11 +191,15 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
187191
class="mx_SettingsSubsection"
188192
data-testid="current-session-section"
189193
>
190-
<h3
191-
class="mx_Heading_h3 mx_SettingsSubsection_heading"
194+
<div
195+
class="mx_SettingsSubsectionHeading"
192196
>
193-
Current session
194-
</h3>
197+
<h3
198+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
199+
>
200+
Current session
201+
</h3>
202+
</div>
195203
<div
196204
class="mx_SettingsSubsection_content"
197205
>

0 commit comments

Comments
 (0)