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>

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