Create reusable heading components

frontend/src/Components/H1/H1.module.scss

@@ -0,0 +1,16 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  letter-spacing: -0.05rem;
+  font-weight: 800;
+  padding-bottom: 0.5rem;
+
+  @include for-desktop-up {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+}

frontend/src/Components/H1/H1.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H1.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H1({ className, ...props }: Props) {
+  return <h1 className={classNames(styles.header, className)} {...props} />;
+}

frontend/src/Components/H1/index.ts

@@ -0,0 +1 @@
+export { H1 } from './H1';

frontend/src/Components/H2/H2.module.scss

@@ -0,0 +1,11 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  letter-spacing: -0.05rem;
+  font-weight: 600;
+  padding-bottom: 0.5rem;
+}

frontend/src/Components/H2/H2.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H2.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H2({ className, ...props }: Props) {
+  return <h2 className={classNames(styles.header, className)} {...props} />;
+}

frontend/src/Components/H2/index.ts

@@ -0,0 +1 @@
+export { H2 } from './H2';

frontend/src/Components/H3/H3.module.scss

@@ -0,0 +1,11 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  letter-spacing: -0.05rem;
+  font-weight: 600;
+  padding-bottom: 0.25rem;
+}

frontend/src/Components/H3/H3.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H3.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H3({ className, ...props }: Props) {
+  return <h3 className={classNames(styles.header, className)} {...props} />;
+}

frontend/src/Components/H3/index.ts

@@ -0,0 +1 @@
+export { H3 } from './H3';

frontend/src/Components/H4/H4.module.scss

@@ -0,0 +1,11 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.05rem;
+  font-weight: 600;
+  padding-bottom: 0.25rem;
+}

frontend/src/Components/H4/H4.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H4.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H4({ className, ...props }: Props) {
+  return <h4 className={classNames(styles.header, className)} {...props} />;
+}

frontend/src/Components/H4/index.ts

@@ -0,0 +1 @@
+export { H4 } from './H4';

frontend/src/Components/H5/H5.module.scss

@@ -0,0 +1,11 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.05rem;
+  font-weight: 600;
+  padding-bottom: 0.25rem;
+}

frontend/src/Components/H5/H5.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H5.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H5({ className, ...props }: Props) {
+  return <h5 className={classNames(styles.header, className)} {...props} />;
+}

frontend/src/Components/H5/index.ts

@@ -0,0 +1 @@
+export { H5 } from './H5';

frontend/src/Components/H6/H6.module.scss

@@ -0,0 +1,10 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.header {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  letter-spacing: -0.05rem;
+  font-weight: 600;
+}

frontend/src/Components/H6/H6.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './H6.module.scss';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H6({ className, ...props }: Props) {
+  return <h6 className={classNames(styles.header, className)} {...props} />;
+}

frontend/src/Components/H6/index.ts

@@ -0,0 +1 @@
+export { H6 } from './H6';

frontend/src/Components/index.ts

@@ -18,6 +18,12 @@ export { EventQuery } from './EventQuery';
 export { ExpandableHeader } from './ExpandableHeader';
 export { ExpandableList } from './ExpandableList';
 export { Footer } from './Footer';
+export { H1 } from './H1';
+export { H2 } from './H2';
+export { H3 } from './H3';
+export { H4 } from './H4';
+export { H5 } from './H5';
+export { H6 } from './H6';
 export { IconButton } from './IconButton';
 export { Image } from './Image';
 export { ImageCard } from './ImageCard';

frontend/src/Pages/ComponentPage/ComponentPage.tsx

@@ -1,4 +1,4 @@
-import { Button, Countdown, InputField, ProgressBar, RadioButton, ToolTip } from '~/Components';
+import { Button, Countdown, H1, H2, H3, H4, H5, H6, InputField, ProgressBar, RadioButton, ToolTip } from '~/Components';
 import { Checkbox } from '~/Components/Checkbox';
 import { Link } from '~/Components/Link';
 import { List } from '~/Components/List';
@@ -15,6 +15,15 @@ import styles from './ComponentPage.module.scss';
 export function ComponentPage() {
   return (
     <div className={styles.wrapper}>
+      <H1>Heading 1</H1>
+      <H2>Heading 2</H2>
+      <H3>Heading 3</H3>
+      <H4>Heading 4</H4>
+      <H5>Heading 5</H5>
+      <H6>Heading 6</H6>
+
+      <br />
+
       <MultiSelect
         options={[
           {