From 7e04b3737e616e2f807c2c4882d91d2a1fb4742f Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Tue, 6 Aug 2019 14:24:33 +0200
Subject: [PATCH] portal: refactor usage of font pages

---
 .../docs/quickguide-designer/font-families.js | 196 ------------------
 .../docs/quickguide-designer/font-families.md | 188 ++++++++++++++++-
 .../docs/quickguide-designer/font-weights.js  |  55 -----
 .../docs/quickguide-designer/font-weights.md  |  46 +++-
 4 files changed, 230 insertions(+), 255 deletions(-)
 delete mode 100644 packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.js
 delete mode 100644 packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.js

diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.js b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.js
deleted file mode 100644
index 5381c4053fe..00000000000
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.js
+++ /dev/null
@@ -1,196 +0,0 @@
-/**
- * Font Family Syntax
- */
-
-import React from 'react'
-import { H5 } from 'dnb-ui-lib/src/elements'
-
-const Syntax = () => (
-  <>
-    <H5>Fedra Sans Book</H5>
-    <div className="typography-box">
-      <div className="dnb-typo-book">
-        <p>
-          Here is a paragraph with some nonsense lipsum text. Contrary to
-          popular belief, Lorem Ipsum passage, and going through the cites
-          of the word in classical literature, discovered the undoubtable
-          source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
-          &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
-          and Evil) by Cicero, written in 45 BC.
-        </p>
-        <H5>Here are some numbers:</H5>
-        <div className="dnb-font-family-demo__numbers">
-          <p className="dnb-typo-number--lining">
-            <b>Lining:</b> 123456789
-          </p>
-          <p className="dnb-typo-number--oldstyle">
-            <b>Old style:</b> 123456789
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <H5>Fedra Sans Book Italic</H5>
-    <div className="typography-box">
-      <div className="dnb-typo-book-italic">
-        <p>
-          Here is a paragraph with some nonsense lipsum text. Contrary to
-          popular belief, Lorem Ipsum passage, and going through the cites
-          of the word in classical literature, discovered the undoubtable
-          source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
-          &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
-          and Evil) by Cicero, written in 45 BC.
-        </p>
-        <H5>Here are some numbers:</H5>
-        <div className="dnb-font-family-demo__numbers">
-          <p className="dnb-typo-number--lining">
-            <b>Lining:</b> 123456789
-          </p>
-          <p className="dnb-typo-number--oldstyle">
-            <b>Old style:</b> 123456789
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <H5 className="dnb-typo-medium">Fedra Sans Medium</H5>
-    <div className="typography-box">
-      <div className="dnb-typo-medium">
-        <p className="dnb-typo-medium">
-          Here is a paragraph with some nonsense lipsum text. Contrary to
-          popular belief, Lorem Ipsum passage, and going through the cites
-          of the word in classical literature, discovered the undoubtable
-          source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
-          &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
-          and Evil) by Cicero, written in 45 BC.
-        </p>
-        <H5>Here are some numbers:</H5>
-        <div className="dnb-font-family-demo__numbers">
-          <p className="dnb-typo-number--lining">
-            <b>Lining:</b> 123456789
-          </p>
-          <p className="dnb-typo-number--oldstyle">
-            <b>Old style:</b> 123456789
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <H5>Fedra Sans Medium Italic</H5>
-    <div className="typography-box">
-      <div className="dnb-typo-medium">
-        <p>
-          <i>
-            Here is a paragraph with some nonsense lipsum text. Contrary to
-            popular belief, Lorem Ipsum passage, and going through the
-            cites of the word in classical literature, discovered the
-            undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
-            1.10.33 of &quot;de Finibus Bonorum et Malorum&quot; (The
-            Extremes of Good and Evil) by Cicero, written in 45 BC.
-          </i>
-        </p>
-        <H5>Here are some numbers:</H5>
-        <div className="dnb-font-family-demo__numbers">
-          <p className="dnb-typo-number--lining">
-            <b>Lining:</b> 123456789
-          </p>
-          <p className="dnb-typo-number--oldstyle">
-            <b>Old style:</b> 123456789
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <H5>Fedra Sans Light</H5>
-    <div className="typography-box">
-      <div className="typo-light">
-        <p>
-          Here is a paragraph with some nonsense lipsum text. Contrary to
-          popular belief, Lorem Ipsum passage, and going through the cites
-          of the word in classical literature, discovered the undoubtable
-          source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
-          &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
-          and Evil) by Cicero, written in 45 BC.
-        </p>
-        <H5>Here are some numbers:</H5>
-        <div className="dnb-font-family-demo__numbers">
-          <p className="dnb-typo-number--lining">
-            <b>Lining:</b> 123456789
-          </p>
-          <p className="dnb-typo-number--oldstyle">
-            <b>Old style:</b> 123456789
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <H5>Fedra Sans Light Italic</H5>
-    <div className="typography-box">
-      <div className="typo-light-italic">
-        <p>
-          Here is a paragraph with some nonsense lipsum text. Contrary to
-          popular belief, Lorem Ipsum passage, and going through the cites
-          of the word in classical literature, discovered the undoubtable
-          source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
-          &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
-          and Evil) by Cicero, written in 45 BC.
-        </p>
-        <H5>Here are some numbers:</H5>
-        <div className="dnb-font-family-demo__numbers">
-          <p className="dnb-typo-number--lining">
-            <b>Lining:</b> 123456789
-          </p>
-          <p className="dnb-typo-number--oldstyle">
-            <b>Old style:</b> 123456789
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <H5>This is the Fedra Sans Bold</H5>
-    <div className="typography-box">
-      <div className="typo-bold">
-        <p className="typo-bold">
-          Here is a paragraph with some nonsense lipsum text. Contrary to
-          popular belief, Lorem Ipsum passage, and going through the cites
-          of the word in classical literature, discovered the undoubtable
-          source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
-          &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
-          and Evil) by Cicero, written in 45 BC.
-        </p>
-        <H5>Here are some numbers:</H5>
-        <div className="dnb-font-family-demo__numbers">
-          <p className="dnb-typo-number--lining">
-            <b>Lining:</b> 123456789
-          </p>
-          <p className="dnb-typo-number--oldstyle">
-            <b>Old style:</b> 123456789
-          </p>
-        </div>
-      </div>
-    </div>
-    <H5>Fedra Sans Bold Italic</H5>
-    <div className="typography-box">
-      <div className="typo-bold-italic">
-        <p className="typo-bold-italic">
-          Here is a paragraph with some nonsense lipsum text. Contrary to
-          popular belief, Lorem Ipsum passage, and going through the cites
-          of the word in classical literature, discovered the undoubtable
-          source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
-          &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
-          and Evil) by Cicero, written in 45 BC.
-        </p>
-        <H5>Here are some numbers:</H5>
-        <div className="dnb-font-family-demo__numbers">
-          <p className="dnb-typo-number--lining">
-            <b>Lining:</b> 123456789
-          </p>
-          <p className="dnb-typo-number--oldstyle">
-            <b>Old style:</b> 123456789
-          </p>
-        </div>
-      </div>
-    </div>
-  </>
-)
-export default Syntax
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.md b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.md
index 49fdc6faca6..57bca4a5828 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.md
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-families.md
@@ -2,8 +2,192 @@
 draft: true
 ---
 
-import FontFamilies from 'Pages/quickguide-designer/font-families.js'
+import { H2 } from 'dnb-ui-lib/src/elements'
 
 ## Font Families
 
-<FontFamilies />
+<H2>Fedra Sans Book</H2>
+<div className="typography-box">
+  <div className="dnb-typo-book">
+    <p>
+      Here is a paragraph with some nonsense lipsum text. Contrary to
+      popular belief, Lorem Ipsum passage, and going through the cites
+      of the word in classical literature, discovered the undoubtable
+      source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
+      "de Finibus Bonorum et Malorum" (The Extremes of Good
+      and Evil) by Cicero, written in 45 BC.
+    </p>
+    <H2>Here are some numbers:</H2>
+    <div className="dnb-font-family-demo__numbers">
+      <p className="dnb-typo-number--lining">
+        <b>Lining:</b> 123456789
+      </p>
+      <p className="dnb-typo-number--oldstyle">
+        <b>Old style:</b> 123456789
+      </p>
+    </div>
+  </div>
+</div>
+
+<H2>Fedra Sans Book Italic</H2>
+<div className="typography-box">
+  <div className="dnb-typo-book-italic">
+    <p>
+      Here is a paragraph with some nonsense lipsum text. Contrary to
+      popular belief, Lorem Ipsum passage, and going through the cites
+      of the word in classical literature, discovered the undoubtable
+      source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
+      "de Finibus Bonorum et Malorum" (The Extremes of Good
+      and Evil) by Cicero, written in 45 BC.
+    </p>
+    <H2>Here are some numbers:</H2>
+    <div className="dnb-font-family-demo__numbers">
+      <p className="dnb-typo-number--lining">
+        <b>Lining:</b> 123456789
+      </p>
+      <p className="dnb-typo-number--oldstyle">
+        <b>Old style:</b> 123456789
+      </p>
+    </div>
+  </div>
+</div>
+
+<H2 className="dnb-typo-medium">Fedra Sans Medium</H2>
+<div className="typography-box">
+  <div className="dnb-typo-medium">
+    <p className="dnb-typo-medium">
+      Here is a paragraph with some nonsense lipsum text. Contrary to
+      popular belief, Lorem Ipsum passage, and going through the cites
+      of the word in classical literature, discovered the undoubtable
+      source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
+      "de Finibus Bonorum et Malorum" (The Extremes of Good
+      and Evil) by Cicero, written in 45 BC.
+    </p>
+    <H2>Here are some numbers:</H2>
+    <div className="dnb-font-family-demo__numbers">
+      <p className="dnb-typo-number--lining">
+        <b>Lining:</b> 123456789
+      </p>
+      <p className="dnb-typo-number--oldstyle">
+        <b>Old style:</b> 123456789
+      </p>
+    </div>
+  </div>
+</div>
+
+<H2>Fedra Sans Medium Italic</H2>
+<div className="typography-box">
+  <div className="dnb-typo-medium">
+    <p>
+      <i>
+        Here is a paragraph with some nonsense lipsum text. Contrary to
+        popular belief, Lorem Ipsum passage, and going through the
+        cites of the word in classical literature, discovered the
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
+        1.10.33 of "de Finibus Bonorum et Malorum" (The
+        Extremes of Good and Evil) by Cicero, written in 45 BC.
+      </i>
+    </p>
+    <H2>Here are some numbers:</H2>
+    <div className="dnb-font-family-demo__numbers">
+      <p className="dnb-typo-number--lining">
+        <b>Lining:</b> 123456789
+      </p>
+      <p className="dnb-typo-number--oldstyle">
+        <b>Old style:</b> 123456789
+      </p>
+    </div>
+  </div>
+</div>
+
+<H2>Fedra Sans Light</H2>
+<div className="typography-box">
+  <div className="typo-light">
+    <p>
+      Here is a paragraph with some nonsense lipsum text. Contrary to
+      popular belief, Lorem Ipsum passage, and going through the cites
+      of the word in classical literature, discovered the undoubtable
+      source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
+      "de Finibus Bonorum et Malorum" (The Extremes of Good
+      and Evil) by Cicero, written in 45 BC.
+    </p>
+    <H2>Here are some numbers:</H2>
+    <div className="dnb-font-family-demo__numbers">
+      <p className="dnb-typo-number--lining">
+        <b>Lining:</b> 123456789
+      </p>
+      <p className="dnb-typo-number--oldstyle">
+        <b>Old style:</b> 123456789
+      </p>
+    </div>
+  </div>
+</div>
+
+<H2>Fedra Sans Light Italic</H2>
+<div className="typography-box">
+  <div className="typo-light-italic">
+    <p>
+      Here is a paragraph with some nonsense lipsum text. Contrary to
+      popular belief, Lorem Ipsum passage, and going through the cites
+      of the word in classical literature, discovered the undoubtable
+      source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
+      "de Finibus Bonorum et Malorum" (The Extremes of Good
+      and Evil) by Cicero, written in 45 BC.
+    </p>
+    <H2>Here are some numbers:</H2>
+    <div className="dnb-font-family-demo__numbers">
+      <p className="dnb-typo-number--lining">
+        <b>Lining:</b> 123456789
+      </p>
+      <p className="dnb-typo-number--oldstyle">
+        <b>Old style:</b> 123456789
+      </p>
+    </div>
+  </div>
+</div>
+
+<H2>This is the Fedra Sans Bold</H2>
+<div className="typography-box">
+  <div className="typo-bold">
+    <p className="typo-bold">
+      Here is a paragraph with some nonsense lipsum text. Contrary to
+      popular belief, Lorem Ipsum passage, and going through the cites
+      of the word in classical literature, discovered the undoubtable
+      source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
+      "de Finibus Bonorum et Malorum" (The Extremes of Good
+      and Evil) by Cicero, written in 45 BC.
+    </p>
+    <H2>Here are some numbers:</H2>
+    <div className="dnb-font-family-demo__numbers">
+      <p className="dnb-typo-number--lining">
+        <b>Lining:</b> 123456789
+      </p>
+      <p className="dnb-typo-number--oldstyle">
+        <b>Old style:</b> 123456789
+      </p>
+    </div>
+  </div>
+</div>
+
+<H2>Fedra Sans Bold Italic</H2>
+<div className="typography-box">
+  <div className="typo-bold-italic">
+    <p className="typo-bold-italic">
+      Here is a paragraph with some nonsense lipsum text. Contrary to
+      popular belief, Lorem Ipsum passage, and going through the cites
+      of the word in classical literature, discovered the undoubtable
+      source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
+      "de Finibus Bonorum et Malorum" (The Extremes of Good
+      and Evil) by Cicero, written in 45 BC.
+    </p>
+    <H2>Here are some numbers:</H2>
+    <div className="dnb-font-family-demo__numbers">
+      <p className="dnb-typo-number--lining">
+        <b>Lining:</b> 123456789
+      </p>
+      <p className="dnb-typo-number--oldstyle">
+        <b>Old style:</b> 123456789
+      </p>
+    </div>
+  </div>
+</div>
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.js b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.js
deleted file mode 100644
index 1a4d266baa9..00000000000
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Font Family Syntax
- */
-
-import React from 'react'
-import { H5 } from 'dnb-ui-lib/src/elements'
-
-const Syntax = () => (
-  <>
-    <H5>Body Book</H5>
-    <p>
-      Achieved with classes:{' '}
-      <i>.dnb-typo-book, .dnb-typo-demi, .dnb-typo-medium</i>
-    </p>
-    <p className="dnb-typo-medium">
-      NB! body text is automatically set to use 'book' weight so there is
-      no need to usw a class.
-    </p>
-    <div className="typography-box">
-      <p className="dnb-typo-book">
-        Here is a paragraph with some nonsense lipsum text. Contrary to
-        popular belief, Lorem Ipsum passage, and going through the cites of
-        the word in classical literature, discovered the undoubtable
-        source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
-        &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
-        Evil) by Cicero, written in 45 BC.
-      </p>
-    </div>
-
-    <H5>Body Demi</H5>
-    <div className="typography-box">
-      <p className="dnb-typo-demi">
-        Here is a paragraph with some nonsense lipsum text. Contrary to
-        popular belief, Lorem Ipsum passage, and going through the cites of
-        the word in classical literature, discovered the undoubtable
-        source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
-        &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
-        Evil) by Cicero, written in 45 BC.
-      </p>
-    </div>
-
-    <H5>Body Medium</H5>
-    <div className="typography-box">
-      <p className="dnb-typo-medium">
-        Here is a paragraph with some nonsense lipsum text. Contrary to
-        popular belief, Lorem Ipsum passage, and going through the cites of
-        the word in classical literature, discovered the undoubtable
-        source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
-        &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
-        Evil) by Cicero, written in 45 BC.
-      </p>
-    </div>
-  </>
-)
-export default Syntax
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.md b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.md
index 4bccfde9df8..3996cc53c6c 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.md
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/font-weights.md
@@ -2,8 +2,50 @@
 draft: true
 ---
 
-import FontWeights from 'Pages/quickguide-designer/font-weights.js'
+import { H2 } from 'dnb-ui-lib/src/elements'
 
 ## Font Weights
 
-<FontWeights />
+<H2>Body Book</H2>
+<p>
+  Achieved with classes:{' '}
+  <i>.dnb-typo-book, .dnb-typo-demi, .dnb-typo-medium</i>
+</p>
+<p className="dnb-typo-medium">
+  NB! body text is automatically set to use 'book' weight so there is
+  no need to usw a class.
+</p>
+<div className="typography-box">
+  <p className="dnb-typo-book">
+    Here is a paragraph with some nonsense lipsum text. Contrary to
+    popular belief, Lorem Ipsum passage, and going through the cites of
+    the word in classical literature, discovered the undoubtable
+    source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
+    "de Finibus Bonorum et Malorum" (The Extremes of Good and
+    Evil) by Cicero, written in 45 BC.
+  </p>
+</div>
+
+<H2>Body Demi</H2>
+<div className="typography-box">
+  <p className="dnb-typo-demi">
+    Here is a paragraph with some nonsense lipsum text. Contrary to
+    popular belief, Lorem Ipsum passage, and going through the cites of
+    the word in classical literature, discovered the undoubtable
+    source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
+    "de Finibus Bonorum et Malorum" (The Extremes of Good and
+    Evil) by Cicero, written in 45 BC.
+  </p>
+</div>
+
+<H2>Body Medium</H2>
+<div className="typography-box">
+  <p className="dnb-typo-medium">
+    Here is a paragraph with some nonsense lipsum text. Contrary to
+    popular belief, Lorem Ipsum passage, and going through the cites of
+    the word in classical literature, discovered the undoubtable
+    source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
+    "de Finibus Bonorum et Malorum" (The Extremes of Good and
+    Evil) by Cicero, written in 45 BC.
+  </p>
+</div>