Add Heading components (#7362)

* add Heading components

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove margins

Signed-off-by: Kerry Archibald <kerrya@element.io>

* snapshots

Signed-off-by: Kerry Archibald <kerrya@element.io>

* unset block and inline margins

Signed-off-by: Kerry Archibald <kerrya@element.io>

* copyright

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix werid quoting on heading test

Signed-off-by: Kerry Archibald <kerrya@element.io>

res/css/_components.scss

@@ -298,6 +298,7 @@
 @import "./views/toasts/_AnalyticsToast.scss";
 @import "./views/toasts/_IncomingCallToast.scss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.scss";
+@import "./views/typography/_Heading.scss";
 @import "./views/verification/_VerificationShowSas.scss";
 @import "./views/voip/CallView/_CallViewButtons.scss";
 @import "./views/voip/_CallContainer.scss";

res/css/views/typography/_Heading.scss

@@ -0,0 +1,39 @@
+/*
+Copyright 2021 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_Heading_h1 {
+    font-size: $font-32px;
+    font-weight: $font-semi-bold;
+    line-height: $font-39px;
+    margin-inline: unset;
+    margin-block: unset;
+}
+
+.mx_Heading_h2 {
+    font-size: $font-24px;
+    font-weight: $font-semi-bold;
+    line-height: $font-29px;
+    margin-inline: unset;
+    margin-block: unset;
+}
+
+.mx_Heading_h3 {
+    font-size: $font-18px;
+    font-weight: $font-semi-bold;
+    line-height: $font-22px;
+    margin-inline: unset;
+    margin-block: unset;
+}

src/components/views/typography/Heading.tsx

@@ -0,0 +1,31 @@
+/*
+Copyright 2021 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 classNames from 'classnames';
+
+type Size = 'h1' | 'h2' | 'h3';
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    size: Size;
+}
+
+const Heading: React.FC<HeadingProps> = ({ size, className, children, ...rest }) => React.createElement(size || 'h1', {
+    ...rest,
+    className: classNames(`mx_Heading_${size}`, className),
+    children,
+});
+
+export default Heading;

test/components/views/typography/Heading-test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { renderIntoDocument } from 'react-dom/test-utils';
+
+import Heading from "../../../../src/components/views/typography/Heading";
+describe('<Heading />', () => {
+    const defaultProps = {
+        size: 'h1',
+        children: <div>test</div>,
+        ['data-test-id']: 'test',
+        className: 'test',
+    } as any;
+    const getComponent = (props = {}) => {
+        const wrapper = renderIntoDocument<HTMLDivElement>(
+            <div><Heading {...defaultProps} {...props} /></div>,
+        ) as HTMLDivElement;
+        return wrapper.children[0];
+    };
+
+    it('renders h1 with correct attributes', () => {
+        expect(getComponent({ size: 'h1' })).toMatchSnapshot();
+    });
+    it('renders h2 with correct attributes', () => {
+        expect(getComponent({ size: 'h2' })).toMatchSnapshot();
+    });
+    it('renders h3 with correct attributes', () => {
+        expect(getComponent({ size: 'h3' })).toMatchSnapshot();
+    });
+});

test/components/views/typography/__snapshots__/Heading-test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Heading /> renders h1 with correct attributes 1`] = `
+<h1
+  class="mx_Heading_h1 test"
+  data-test-id="test"
+>
+  <div>
+    test
+  </div>
+</h1>
+`;
+
+exports[`<Heading /> renders h2 with correct attributes 1`] = `
+<h2
+  class="mx_Heading_h2 test"
+  data-test-id="test"
+>
+  <div>
+    test
+  </div>
+</h2>
+`;
+
+exports[`<Heading /> renders h3 with correct attributes 1`] = `
+<h3
+  class="mx_Heading_h3 test"
+  data-test-id="test"
+>
+  <div>
+    test
+  </div>
+</h3>
+`;