Merge pull request #149 from ChtiJS/styles-h1-h6

Refactor heading components with styles

src/components/h1.module.scss

@@ -0,0 +1,9 @@
+.root {
+    color: var(--primary);
+    font-family: var(--headingFont);
+    font-size: var(--giantFontSize);
+    line-height: var(--giantLineHeight);
+    font-weight: bold;
+    margin: 0 0 calc(var(--vRythm) * 2) 0;
+    text-align: center;
+}

src/components/h1.tsx

@@ -1,21 +1,13 @@
+import styles from './h1.module.scss';
+
 const Heading1 = ({
   children,
   className,
   ...props
 }: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
-  <h1 className={`root${className ? ' ' + className : ''}`} {...props}>
+  <h1 className={`${styles.root}${className ? ' ' + className : ''}`} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        color: var(--primary);
-        font-family: var(--headingFont);
-        font-size: var(--giantFontSize);
-        line-height: var(--giantLineHeight);
-        font-weigth: bold;
-        margin: 0 0 calc(var(--vRythm) * 2) 0;
-        text-align: center;
-      }
-    `}</style>
+
   </h1>
 );
 

src/components/h2.module.scss

@@ -0,0 +1,8 @@
+.root {
+    color: var(--quinary);
+    font-family: var(--headingFont);
+    font-size: var(--greatFontSize);
+    line-height: var(--greatLineHeight);
+    font-weigth: normal;
+    margin: var(--vRythm) 0 0 0;
+  }

src/components/h2.tsx

@@ -1,20 +1,12 @@
+import styles from './h2.module.scss';
 const Heading2 = ({
   children,
   className,
   ...props
 }: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
-  <h2 className={`root${className ? ' ' + className : ''}`} {...props}>
+  <h2 className={`${styles.root}${className ? ' ' + className : ''}`} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        color: var(--quinary);
-        font-family: var(--headingFont);
-        font-size: var(--greatFontSize);
-        line-height: var(--greatLineHeight);
-        font-weigth: normal;
-        margin: var(--vRythm) 0 0 0;
-      }
-    `}</style>
+
   </h2>
 );
 

src/components/h3.module.scss

@@ -0,0 +1,8 @@
+.root {
+    font-family: var(--headingFont);
+    font-size: var(--bigFontSize);
+    line-height: var(--bigLineHeight);
+    text-decoration: underline;
+    font-weigth: normal;
+    margin: var(--vRythm) 0 0 0;
+  }

src/components/h3.tsx

@@ -1,20 +1,11 @@
+import styles from './h3.module.scss';
 const Heading3 = ({
   children,
   ...props
 }: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
-  <h3 className="root" {...props}>
+  <h3 className={`${styles.root}$`} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        font-family: var(--headingFont);
-        font-size: var(--bigFontSize);
-        line-height: var(--bigLineHeight);
-        text-decoration: underline;
-        font-weigth: normal;
-        margin: var(--vRythm) 0 0 0;
-      }
-    `}</style>
-  </h3>
+      </h3>
 );
 
 export default Heading3;

src/components/h4.module.scss

@@ -0,0 +1,6 @@
+.root {
+    font-family: var(--headingFont);
+    font-size: var(--bigFontSize);
+    line-height: var(--bigLineHeight);
+    margin: 0 0 var(--vRythm) 0;
+  }

src/components/h4.tsx

@@ -1,17 +1,11 @@
+import styles from './h4.module.scss';
 const Heading4 = ({
   children,
   ...props
 }: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
-  <h4 className="root" {...props}>
+  <h4 className={`${styles.root}$`} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        font-family: var(--headingFont);
-        font-size: var(--bigFontSize);
-        line-height: var(--bigLineHeight);
-        margin: 0 0 var(--vRythm) 0;
-      }
-    `}</style>
+
   </h4>
 );
 

src/components/h5.module.scss

@@ -0,0 +1,6 @@
+.root {
+    font-family: var(--headingFont);
+    font-size: var(--mediumFontSize);
+    line-height: var(--mediumLineHeight);
+    margin: 0 0 var(--vRythm) 0;
+  }

src/components/h5.tsx

@@ -1,17 +1,11 @@
+import styles from './h5.module.scss';
 const Heading5 = ({
   children,
   ...props
 }: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
-  <h5 className="root" {...props}>
+  <h5 className={`${styles.root}$`} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        font-family: var(--headingFont);
-        font-size: var(--mediumFontSize);
-        line-height: var(--mediumLineHeight);
-        margin: 0 0 var(--vRythm) 0;
-      }
-    `}</style>
+
   </h5>
 );
 

src/components/h6.module.scss

@@ -0,0 +1,6 @@
+.root {
+    font-family: var(--headingFont);
+    font-size: var(--mediumFontSize);
+    line-height: var(--mediumLineHeight);
+    margin: 0 0 var(--vRythm) 0;
+  }

src/components/h6.tsx

@@ -1,17 +1,10 @@
+import styles from './h5.module.scss';
 const Heading6 = ({
   children,
   ...props
 }: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
-  <h6 className="root" {...props}>
+  <h6 className={`${styles.root}$`} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        font-family: var(--headingFont);
-        font-size: var(--mediumFontSize);
-        line-height: var(--mediumLineHeight);
-        margin: 0 0 var(--vRythm) 0;
-      }
-    `}</style>
   </h6>
 );