fix(normalize): remove margins from paragraph and headings

fremtind · Jun 27, 2019 · 9e4544b · 9e4544b
1 parent edb236e
commit 9e4544b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 6 deletions.
diff --git a/packages/core/src/normalize.scss b/packages/core/src/normalize.scss
@@ -42,6 +42,24 @@ h1 {
     margin: 0.67em 0;
 }
 
+/* Text blocks
+   ========================================================================== */
+
+/**
+ * Remove default margins from all block-level text elements
+ * such as `p` and headings
+ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin: 0;
+}
+
 /* Grouping content
    ========================================================================== */
 

diff --git a/packages/typography-react/example/index.html b/packages/typography-react/example/index.html
@@ -1,5 +1,12 @@
+<!DOCTYPE html>
 <html>
-    <body>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <title>Typography</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+    <body style="padding: 10px;">
         <div id="app"></div>
         <script src="index.tsx"></script>
     </body>

diff --git a/packages/typography-react/example/index.tsx b/packages/typography-react/example/index.tsx
@@ -1,23 +1,28 @@
 import "@fremtind/jkl-core/src/typography/typography.scss";
+import "@fremtind/jkl-core/src/normalize.scss";
 import React from "react";
 import ReactDOM from "react-dom";
 import { H1, H2, H3, H4, LeadParagraph, P, SmallText } from "../src";
 
 const Typography = () => (
     <>
-        <H1>H1: Hello World</H1>
+        <H1>H1: Hello World, look at this!</H1>
         <H2>H2: This is typography</H2>
         <H3>H3: components for</H3>
         <H4>H4: jøkul design system</H4>
         <LeadParagraph>
-            LeadParagraph: With these components you can say what you need in your application
+            LeadParagraph: For half-an-hour we were muffled in a cold, damp mist, and total darkness, and had begun to
+            think of going indoors when, all at once, the car burst into the pure and starlit region of the upper air.
         </LeadParagraph>
         <P>
-            P: There is literally no limit for what you can express with these components. Long text, short text, what
-            ever you need, we got you covered.
+            A paragraph (P): The sky of a deep dark blue was hung with innumerable stars, which seemed to float in the
+            limpid ether, and the rolling vapours through which we had passed were drawn like a sable curtain between us
+            and the lower world. The stillness was so profound that we could hear the beating of our own hearts.
         </P>
         <SmallText>
-            SmallText: Even really small text, even if we probably should not have small text everywhere.
+            SmallText: The unwonted sadness of her tone reminded me of her devoted life, and I turned towards her with
+            new interest and sympathy. She was looking at the Evening Star, whose bright beam softened the
+            irregularities of her profile, and made her almost beautiful.
         </SmallText>
 
         <H2 styledAs={"h1"}>Semantic h2, looks like h1</H2>