Device manager - add settings subsection heading component (#9387)

* add settings subsection heading component

* use named export

* newline

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"
     >

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"
     >

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();

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>
+`;

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"
   >