From 03182d03be43af5a19c62f73de9ff038e7006984 Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Tue, 11 Oct 2022 20:12:02 +0200
Subject: [PATCH] Device manager - add settings subsection heading component
 (#9387)

* add settings subsection heading component

* use named export

* newline
---
 res/css/_components.pcss                      |  1 +
 .../settings/shared/_SettingsSubsection.pcss  |  4 -
 .../shared/_SettingsSubsectionHeading.pcss    | 27 ++++++
 .../settings/shared/SettingsSubsection.tsx    | 11 ++-
 .../shared/SettingsSubsectionHeading.tsx      | 31 +++++++
 .../CurrentDeviceSection-test.tsx.snap        | 36 +++++---
 .../SecurityRecommendations-test.tsx.snap     | 36 +++++---
 .../shared/SettingsSubsection-test.tsx        | 11 +++
 .../SettingsSubsection-test.tsx.snap          | 82 ++++++++++++++++---
 .../SessionManagerTab-test.tsx.snap           | 24 ++++--
 10 files changed, 211 insertions(+), 52 deletions(-)
 create mode 100644 res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss
 create mode 100644 src/components/views/settings/shared/SettingsSubsectionHeading.tsx

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index b2a3752628..efb3e9e594 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -40,6 +40,7 @@
 @import "./components/views/settings/devices/_SecurityRecommendations.pcss";
 @import "./components/views/settings/devices/_SelectableDeviceTile.pcss";
 @import "./components/views/settings/shared/_SettingsSubsection.pcss";
+@import "./components/views/settings/shared/_SettingsSubsectionHeading.pcss";
 @import "./components/views/spaces/_QuickThemeSwitcher.pcss";
 @import "./components/views/typography/_Caption.pcss";
 @import "./structures/_AutoHideScrollbar.pcss";
diff --git a/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/res/css/components/views/settings/shared/_SettingsSubsection.pcss
index 9eb51696ba..2ba909aac1 100644
--- a/res/css/components/views/settings/shared/_SettingsSubsection.pcss
+++ b/res/css/components/views/settings/shared/_SettingsSubsection.pcss
@@ -19,10 +19,6 @@ limitations under the License.
     box-sizing: border-box;
 }
 
-.mx_SettingsSubsection_heading {
-    padding-bottom: $spacing-8;
-}
-
 .mx_SettingsSubsection_description {
     width: 100%;
     box-sizing: inherit;
diff --git a/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss b/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss
new file mode 100644
index 0000000000..e6d4bf4be7
--- /dev/null
+++ b/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss
@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SettingsSubsectionHeading {
+    display: flex;
+    flex-direction: row;
+    padding-bottom: $spacing-8;
+
+    gap: $spacing-8;
+}
+
+.mx_SettingsSubsectionHeading_heading {
+    flex: 1 1 100%;
+}
diff --git a/src/components/views/settings/shared/SettingsSubsection.tsx b/src/components/views/settings/shared/SettingsSubsection.tsx
index 6d23a080ca..9ceff732cb 100644
--- a/src/components/views/settings/shared/SettingsSubsection.tsx
+++ b/src/components/views/settings/shared/SettingsSubsection.tsx
@@ -16,17 +16,22 @@ limitations under the License.
 
 import React, { HTMLAttributes } from "react";
 
-import Heading from "../../typography/Heading";
+import { SettingsSubsectionHeading } from "./SettingsSubsectionHeading";
 
 export interface SettingsSubsectionProps extends HTMLAttributes<HTMLDivElement> {
-    heading: string;
+    heading: string | React.ReactNode;
     description?: string | React.ReactNode;
     children?: React.ReactNode;
 }
 
 const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children, ...rest }) => (
     <div {...rest} className="mx_SettingsSubsection">
-        <Heading className="mx_SettingsSubsection_heading" size='h3'>{ heading }</Heading>
+        { typeof heading === 'string'
+            ? <SettingsSubsectionHeading heading={heading} />
+            : <>
+                { heading }
+            </>
+        }
         { !!description && <div className="mx_SettingsSubsection_description">{ description }</div> }
         <div className="mx_SettingsSubsection_content">
             { children }
diff --git a/src/components/views/settings/shared/SettingsSubsectionHeading.tsx b/src/components/views/settings/shared/SettingsSubsectionHeading.tsx
new file mode 100644
index 0000000000..4a39ff7278
--- /dev/null
+++ b/src/components/views/settings/shared/SettingsSubsectionHeading.tsx
@@ -0,0 +1,31 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { HTMLAttributes } from "react";
+
+import Heading from "../../typography/Heading";
+
+export interface SettingsSubsectionHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    heading: string;
+    children?: React.ReactNode;
+}
+
+export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({ heading, children, ...rest }) => (
+    <div {...rest} className="mx_SettingsSubsectionHeading">
+        <Heading className="mx_SettingsSubsectionHeading_heading" size='h3'>{ heading }</Heading>
+        { children }
+    </div>
+);
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index 73d7a10130..58356001f5 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -120,11 +120,15 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
     class="mx_SettingsSubsection"
     data-testid="current-session-section"
   >
-    <h3
-      class="mx_Heading_h3 mx_SettingsSubsection_heading"
+    <div
+      class="mx_SettingsSubsectionHeading"
     >
-      Current session
-    </h3>
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Current session
+      </h3>
+    </div>
     <div
       class="mx_SettingsSubsection_content"
     />
@@ -138,11 +142,15 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
     class="mx_SettingsSubsection"
     data-testid="current-session-section"
   >
-    <h3
-      class="mx_Heading_h3 mx_SettingsSubsection_heading"
+    <div
+      class="mx_SettingsSubsectionHeading"
     >
-      Current session
-    </h3>
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Current session
+      </h3>
+    </div>
     <div
       class="mx_SettingsSubsection_content"
     >
@@ -258,11 +266,15 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
     class="mx_SettingsSubsection"
     data-testid="current-session-section"
   >
-    <h3
-      class="mx_Heading_h3 mx_SettingsSubsection_heading"
+    <div
+      class="mx_SettingsSubsectionHeading"
     >
-      Current session
-    </h3>
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Current session
+      </h3>
+    </div>
     <div
       class="mx_SettingsSubsection_content"
     >
diff --git a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
index b122d91826..a854601344 100644
--- a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
@@ -6,11 +6,15 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
     class="mx_SettingsSubsection"
     data-testid="security-recommendations-section"
   >
-    <h3
-      class="mx_Heading_h3 mx_SettingsSubsection_heading"
+    <div
+      class="mx_SettingsSubsectionHeading"
     >
-      Security recommendations
-    </h3>
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Security recommendations
+      </h3>
+    </div>
     <div
       class="mx_SettingsSubsection_description"
     >
@@ -109,11 +113,15 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
     class="mx_SettingsSubsection"
     data-testid="security-recommendations-section"
   >
-    <h3
-      class="mx_Heading_h3 mx_SettingsSubsection_heading"
+    <div
+      class="mx_SettingsSubsectionHeading"
     >
-      Security recommendations
-    </h3>
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Security recommendations
+      </h3>
+    </div>
     <div
       class="mx_SettingsSubsection_description"
     >
@@ -212,11 +220,15 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
     class="mx_SettingsSubsection"
     data-testid="security-recommendations-section"
   >
-    <h3
-      class="mx_Heading_h3 mx_SettingsSubsection_heading"
+    <div
+      class="mx_SettingsSubsectionHeading"
     >
-      Security recommendations
-    </h3>
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Security recommendations
+      </h3>
+    </div>
     <div
       class="mx_SettingsSubsection_description"
     >
diff --git a/test/components/views/settings/shared/SettingsSubsection-test.tsx b/test/components/views/settings/shared/SettingsSubsection-test.tsx
index acc2e6db95..cd833f90af 100644
--- a/test/components/views/settings/shared/SettingsSubsection-test.tsx
+++ b/test/components/views/settings/shared/SettingsSubsection-test.tsx
@@ -27,6 +27,17 @@ describe('<SettingsSubsection />', () => {
     const getComponent = (props = {}): React.ReactElement =>
         (<SettingsSubsection {...defaultProps} {...props} />);
 
+    it('renders with plain text heading', () => {
+        const { container } = render(getComponent());
+        expect(container).toMatchSnapshot();
+    });
+
+    it('renders with react element heading', () => {
+        const heading = <h3>This is the heading</h3>;
+        const { container } = render(getComponent({ heading }));
+        expect(container).toMatchSnapshot();
+    });
+
     it('renders without description', () => {
         const { container } = render(getComponent());
         expect(container).toMatchSnapshot();
diff --git a/test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap b/test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap
index 10309d2f67..130b825d65 100644
--- a/test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap
+++ b/test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap
@@ -5,11 +5,15 @@ exports[`<SettingsSubsection /> renders with plain text description 1`] = `
   <div
     class="mx_SettingsSubsection"
   >
-    <h3
-      class="mx_Heading_h3 mx_SettingsSubsection_heading"
+    <div
+      class="mx_SettingsSubsectionHeading"
     >
-      Test
-    </h3>
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Test
+      </h3>
+    </div>
     <div
       class="mx_SettingsSubsection_description"
     >
@@ -26,16 +30,45 @@ exports[`<SettingsSubsection /> renders with plain text description 1`] = `
 </div>
 `;
 
+exports[`<SettingsSubsection /> renders with plain text heading 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Test
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content"
+    >
+      <div>
+        test settings content
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<SettingsSubsection /> renders with react element description 1`] = `
 <div>
   <div
     class="mx_SettingsSubsection"
   >
-    <h3
-      class="mx_Heading_h3 mx_SettingsSubsection_heading"
+    <div
+      class="mx_SettingsSubsectionHeading"
     >
-      Test
-    </h3>
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Test
+      </h3>
+    </div>
     <div
       class="mx_SettingsSubsection_description"
     >
@@ -59,15 +92,13 @@ exports[`<SettingsSubsection /> renders with react element description 1`] = `
 </div>
 `;
 
-exports[`<SettingsSubsection /> renders without description 1`] = `
+exports[`<SettingsSubsection /> renders with react element heading 1`] = `
 <div>
   <div
     class="mx_SettingsSubsection"
   >
-    <h3
-      class="mx_Heading_h3 mx_SettingsSubsection_heading"
-    >
-      Test
+    <h3>
+      This is the heading
     </h3>
     <div
       class="mx_SettingsSubsection_content"
@@ -79,3 +110,28 @@ exports[`<SettingsSubsection /> renders without description 1`] = `
   </div>
 </div>
 `;
+
+exports[`<SettingsSubsection /> renders without description 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Test
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content"
+    >
+      <div>
+        test settings content
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 3cee723f28..723c9f18b5 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -81,11 +81,15 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
   class="mx_SettingsSubsection"
   data-testid="current-session-section"
 >
-  <h3
-    class="mx_Heading_h3 mx_SettingsSubsection_heading"
+  <div
+    class="mx_SettingsSubsectionHeading"
   >
-    Current session
-  </h3>
+    <h3
+      class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+    >
+      Current session
+    </h3>
+  </div>
   <div
     class="mx_SettingsSubsection_content"
   >
@@ -187,11 +191,15 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
   class="mx_SettingsSubsection"
   data-testid="current-session-section"
 >
-  <h3
-    class="mx_Heading_h3 mx_SettingsSubsection_heading"
+  <div
+    class="mx_SettingsSubsectionHeading"
   >
-    Current session
-  </h3>
+    <h3
+      class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+    >
+      Current session
+    </h3>
+  </div>
   <div
     class="mx_SettingsSubsection_content"
   >