feat: add radius to anchor in focus state

dnbexperience · Feb 5, 2019 · d70fba5 · d70fba5
1 parent 7598601
commit d70fba5
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 52 deletions.
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor-mixins.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor-mixins.scss
@@ -56,6 +56,7 @@
   } @else {
     @include fakeFocus();
   }
+  border-radius: 4px;
 }
 
 // resettings

diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js
@@ -14,7 +14,8 @@ import {
   Icon,
   IconPrimary,
   Modal,
-  Dropdown
+  Dropdown,
+  StepIndicator
 } from '../src/components'
 
 const stories = []
@@ -51,57 +52,6 @@ stories.push([
   )
 ])
 
-stories.push([
-  'Anchor',
-  () => (
-    <Wrapper>
-      <Box>
-        <a href="http://dnb.no">
-          <IconPrimary icon="chevron_left" /> Anchor
-        </a>
-      </Box>
-      <Box>
-        <a href="http://dnb.no">
-          Anchor <IconPrimary icon="chevron_right" />
-        </a>
-      </Box>
-      <Box>
-        <a href="http://dnb.no">
-          Default Anchor - Adipiscing per egestas duis feugiat dignissim
-          quam cras eget non est ante purus taciti volutpat mi phasellus
-          rhoncus ridiculus diam at proin fusce bibendum netus dapibus
-          natoque varius eros litora
-        </a>
-      </Box>
-      <Box>
-        <a href="http://dnb.no" className="dnb-with-animation">
-          Anchor with Animation <IconPrimary icon="chevron_right" />
-        </a>
-      </Box>
-      <Box>
-        <a href="http://dnb.no" className="dnb-with-animation">
-          Anchor with Animation - Adipiscing per egestas duis feugiat
-          dignissim quam cras eget non est ante purus taciti volutpat mi
-          phasellus rhoncus ridiculus diam at proin fusce bibendum netus
-          dapibus natoque varius eros litora
-        </a>
-      </Box>
-      <Box>
-        <a
-          href="http://dnb.no"
-          className="dnb-with-animation"
-          style={{ whiteSpace: 'normal' }}
-        >
-          Anchor with Animation and no `white-space: pre;` - Adipiscing per
-          egestas duis feugiat dignissim quam cras eget non est ante purus
-          taciti volutpat mi phasellus rhoncus ridiculus diam at proin
-          fusce bibendum netus dapibus natoque varius eros litora
-        </a>
-      </Box>
-    </Wrapper>
-  )
-])
-
 const tablistDataWithContent = [
   { title: 'First', key: 'first', content: <h2>First</h2> },
   { title: 'Second', key: 'second', content: () => <h2>Second</h2> }
@@ -254,6 +204,50 @@ stories.push([
   )
 ])
 
+stories.push([
+  'StepIndicator',
+  () => (
+    <Wrapper>
+      <Box>
+        <StepIndicator
+          active_url="?d"
+          data={[
+            {
+              title: 'Om din nye bolig',
+              url: '?a'
+            },
+            {
+              title: 'Ditt lån og egenkapital',
+              url: '?b'
+            },
+            {
+              title: 'Oppsummering',
+              url: '?c',
+              url_future: ''
+            }
+          ]}
+        />
+      </Box>
+      <Box>
+        <StepIndicator
+          active_item="3"
+          data={[
+            {
+              title: 'Om din nye bolig'
+            },
+            {
+              title: 'Ditt lån og egenkapital'
+            },
+            {
+              title: 'Oppsummering'
+            }
+          ]}
+        />
+      </Box>
+    </Wrapper>
+  )
+])
+
 stories.push([
   'Dropdown',
   () => (

diff --git a/packages/dnb-ui-lib/stories/elementsStories.js b/packages/dnb-ui-lib/stories/elementsStories.js
@@ -217,3 +217,74 @@ stories.push([
     </Wrapper>
   )
 ])
+
+stories.push([
+  'Anchor',
+  () => (
+    <Wrapper>
+      <Box>
+        <a href="http://dnb.no">
+          <IconPrimary icon="chevron_left" /> Anchor
+        </a>
+      </Box>
+      <Box>
+        <a href="http://dnb.no">
+          Anchor <IconPrimary icon="chevron_right" />
+        </a>
+      </Box>
+      <Box>
+        <a href="/" className="dnb-hover-style">
+          Hover Style
+        </a>
+      </Box>
+      <Box>
+        <a href="/" className="dnb-active-style">
+          Active Style
+        </a>
+      </Box>
+      <Box>
+        <a href="/" className="dnb-focus-style">
+          Focus Style
+        </a>
+      </Box>
+      <Box>
+        <a href="/" className="dnb-with-animation">
+          With a special
+        </a>
+      </Box>
+      <Box>
+        <a href="http://dnb.no">
+          Default Anchor - Adipiscing per egestas duis feugiat dignissim
+          quam cras eget non est ante purus taciti volutpat mi phasellus
+          rhoncus ridiculus diam at proin fusce bibendum netus dapibus
+          natoque varius eros litora
+        </a>
+      </Box>
+      <Box>
+        <a href="http://dnb.no" className="dnb-with-animation">
+          Anchor with Animation <IconPrimary icon="chevron_right" />
+        </a>
+      </Box>
+      <Box>
+        <a href="http://dnb.no" className="dnb-with-animation">
+          Anchor with Animation - Adipiscing per egestas duis feugiat
+          dignissim quam cras eget non est ante purus taciti volutpat mi
+          phasellus rhoncus ridiculus diam at proin fusce bibendum netus
+          dapibus natoque varius eros litora
+        </a>
+      </Box>
+      <Box>
+        <a
+          href="http://dnb.no"
+          className="dnb-with-animation"
+          style={{ whiteSpace: 'normal' }}
+        >
+          Anchor with Animation and no `white-space: pre;` - Adipiscing per
+          egestas duis feugiat dignissim quam cras eget non est ante purus
+          taciti volutpat mi phasellus rhoncus ridiculus diam at proin
+          fusce bibendum netus dapibus natoque varius eros litora
+        </a>
+      </Box>
+    </Wrapper>
+  )
+])