From b4db3e0dc47c4a44a6ed6d873ddb4819310a2195 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Mon, 27 May 2019 20:20:41 +0200
Subject: [PATCH] docs: update docs about #anchor / link

---
 .../src/pages/uilib/elements/anchor.md        | 25 +++++++++++-
 .../src/pages/uilib/typography.md             | 11 ++++-
 .../src/pages/uilib/typography/anchor.md      | 40 -------------------
 3 files changed, 34 insertions(+), 42 deletions(-)
 delete mode 100644 packages/dnb-design-system-portal/src/pages/uilib/typography/anchor.md

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/anchor.md b/packages/dnb-design-system-portal/src/pages/uilib/elements/anchor.md
index f6965f21cd8..77edbccbbdd 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/elements/anchor.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/elements/anchor.md
@@ -4,9 +4,14 @@ draft: false
 ---
 
 import CodeBlock from 'Tags/CodeBlock'
+import { IconPrimary } from 'dnb-ui-lib/src'
 
 ## Anchor
 
+The Anchor, also knows as `Link` is used to navigate from one linked content to the next.
+
+You would normally just decorate your anchor class withe this CSS class: `.dnb-anchor`.
+
 <CodeBlock reactLive hideCode>
 {`
 <ul className="dnb-ul dnb-unstyled-list">
@@ -36,6 +41,8 @@ import CodeBlock from 'Tags/CodeBlock'
 
 ### Additional Anchor helper classes
 
+To force a specific state of style, use the following classes to do so:
+
 <CodeBlock reactLive hideCode>
 {`
 <ul className="dnb-ul dnb-unstyled-list">
@@ -73,4 +80,20 @@ import CodeBlock from 'Tags/CodeBlock'
 `}
 </CodeBlock>
 
-Read more about the Anchor [Default Styles](/uilib/typography/anchor#default-styles)
+### With icon
+
+- <a href="/" className="dnb-anchor">Anchor with Icon <IconPrimary icon="chevron_right" /></a>
+- <p>
+    Eros semper blandit tellus mollis primis quisque platea sollicitudin
+    ipsum <a href="/" className="dnb-anchor">Inside a Paragraph <IconPrimary icon="bell" /></a> auctor cursus mauris porta consectetur natoque vehicula vestibulum feugiat ultrices vitae fermentum eros euismod imperdiet eleifend justo vivamus posuere
+  </p>
+- <h2>
+    <a href="/" className="dnb-anchor">Inside Headings <IconPrimary icon="bell" /></a> H2
+  </h2>
+
+### Manipulation
+
+- `.dnb-anchor--no-animation` <a href="/" class="dnb-anchor dnb-anchor--no-animation">No Animation</a>
+- `.dnb-anchor--no-style` <a href="/" class="dnb-anchor dnb-anchor--no-style">No Style</a>
+- `.dnb-anchor--no-hover` <a href="/" class="dnb-anchor dnb-anchor--no-hover">No Hover</a>
+- `.dnb-anchor--no-underline` <a href="/" class="dnb-anchor dnb-anchor--no-underline">No Underline</a>
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/typography.md b/packages/dnb-design-system-portal/src/pages/uilib/typography.md
index 14428067e46..a5cc8213856 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/typography.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/typography.md
@@ -106,4 +106,13 @@ Read more about [best practices for typography](/uilib/usage/best-practices/for-
 `}
 </CodeBlock>
 
-Read more [about Fonts in the Designer Guides](/quickguide-designer/fonts/).
+Read more [about Fonts in the Designer Guides](/quickguide-designer/fonts/)
+
+### Anchor
+
+- `.dnb-anchor` <a href="/" class="dnb-anchor">Anchor with default style</a>
+- `.dnb-anchor--hover` <a href="/" class="dnb-anchor dnb-anchor--hover">Hover Style</a>
+- `.dnb-anchor--active` <a href="/" class="dnb-anchor dnb-anchor--active">Active Style</a>
+- `.dnb-anchor--focus` <a href="/" class="dnb-anchor dnb-anchor--focus">Focus Style</a>
+
+Read more about the [Anchor / Link](/uilib/elements/anchor)
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/typography/anchor.md b/packages/dnb-design-system-portal/src/pages/uilib/typography/anchor.md
deleted file mode 100644
index ec8f6984166..00000000000
--- a/packages/dnb-design-system-portal/src/pages/uilib/typography/anchor.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: 'Anchor'
-draft: false
-order: 2
----
-
-import { IconPrimary } from 'dnb-ui-lib/src'
-
-# Anchor
-
-<!--
-Beside that the Anchor Tag gets assigned by default - or let's say, by only importing the core styles, there are also some classes to handle the visual states manually.
--->
-
-Anchor tags get assigned by default? However, the following classes are used to style states:
-
-## Default Styles
-
-- `.dnb-anchor` <a href="/" class="dnb-anchor">Anchor with default style</a>
-- `.dnb-anchor--hover` <a href="/" class="dnb-anchor dnb-anchor--hover">Hover Style</a>
-- `.dnb-anchor--active` <a href="/" class="dnb-anchor dnb-anchor--active">Active Style</a>
-- `.dnb-anchor--focus` <a href="/" class="dnb-anchor dnb-anchor--focus">Focus Style</a>
-
-## With icon
-
-- <a href="/" className="dnb-anchor">Anchor with Icon <IconPrimary icon="chevron_right" /></a>
-- <p>
-    Eros semper blandit tellus mollis primis quisque platea sollicitudin
-    ipsum <a href="/" className="dnb-anchor">Inside a Paragraph <IconPrimary icon="bell" /></a> auctor cursus mauris porta consectetur natoque vehicula vestibulum feugiat ultrices vitae fermentum eros euismod imperdiet eleifend justo vivamus posuere
-  </p>
-- <h2>
-    <a href="/" className="dnb-anchor">Inside Headings <IconPrimary icon="bell" /></a> H2
-  </h2>
-
-## Manipulation
-
-- `.dnb-anchor--no-animation` <a href="/" class="dnb-anchor dnb-anchor--no-animation">No Animation</a>
-- `.dnb-anchor--no-style` <a href="/" class="dnb-anchor dnb-anchor--no-style">No Style</a>
-- `.dnb-anchor--no-hover` <a href="/" class="dnb-anchor dnb-anchor--no-hover">No Hover</a>
-- `.dnb-anchor--no-underline` <a href="/" class="dnb-anchor dnb-anchor--no-underline">No Underline</a>