feat: small typography enhancements + storybook examples

dnbexperience · Jan 30, 2019 · 53d7a4e · 53d7a4e
1 parent 119a7b8
commit 53d7a4e
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 14 deletions.
diff --git a/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss b/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss
@@ -12,7 +12,14 @@ $fonts-path: '../../../assets/fonts/' !default;
 
 small {
   font-size: var(--font-size-small); // 14px
-  line-height: 1.5rem;
+}
+p > small {
+  line-height: 1.375rem; // 22px
+}
+h4 > small,
+h5 > small,
+h6 > small {
+  line-height: 1.25rem; // 20px
 }
 
 h1,
@@ -26,7 +33,6 @@ h6 {
 
   font-family: var(--font-family-demi);
   font-weight: var(--font-weight-demi);
-  line-height: 1rem; // 16px
 
   color: var(--color-emerald-green);
 }
@@ -36,46 +42,50 @@ h1 {
   line-height: 3.5rem; // 56px
   font-weight: var(--font-weight-demi);
 }
-
-h1.small,
-h1 small {
+h1.dnb-small,
+h1 > small {
   display: block;
   font-size: var(--font-size-large); // 32px
   line-height: 3rem; // 48px
 }
 
 h2 {
   font-size: var(--font-size-medium); // 24px
+  font-size: 2rem; // 24px
   line-height: 2rem; // 32px
 }
+h2 > small {
+  line-height: 1.625rem; // 26px (24px - 20px = 4px / 32px - 6px? = 26px)
+}
+h2.dnb-small,
+h2 > small {
+  font-size: var(--font-size-x-default); // 20px
+}
 
-/*
-  * H3 looks the same as .dnb-lead
-  *
-  */
+/* H3 looks the same as .dnb-lead */
 h3,
 .dnb-lead {
   font-family: var(--font-family-demi);
   font-weight: var(--font-weight-demi);
   font-size: var(--font-size-x-default); // 20px
   line-height: 2rem; // 32px
 }
+h3 > small {
+  line-height: 1.75rem; // 28px (20px - 16px = 4px / 32px - 4px = 28px)
+}
 h3 > small,
-h3.small,
+h3.dnb-small,
 .dnb-lead > small,
-.dnb-lead > .small {
+.dnb-lead > .dnb-small {
   font-size: var(--font-size-default); // 16px
-  line-height: 1.5rem; // 24px
 }
 
 // The rest of the Headings are nod defned by the Eufemia Typography
 h4 {
   font-size: var(--font-size-x-default); // 20px
-  line-height: 1.5rem; // 24px
 }
 h5 {
   font-size: var(--font-size-default); // 16px
-  line-height: 1.5rem; // 24px
 }
 h6 {
   font-size: var(--font-size-small);

diff --git a/packages/dnb-ui-lib/stories/typographyStories.js b/packages/dnb-ui-lib/stories/typographyStories.js
@@ -5,6 +5,7 @@
 
 import React from 'react'
 import { Wrapper, Box } from './helpers'
+import styled from '@emotion/styled'
 
 const stories = []
 export default stories
@@ -30,6 +31,96 @@ stories.push([
   )
 ])
 
+const Small = styled.div`
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    background-color: rgba(0, 200, 200, 0.25);
+    * {
+      background-color: rgba(255, 255, 122, 0.35);
+    }
+  }
+  h1 ~ h1,
+  h2 ~ h2,
+  h3 ~ h3,
+  h4 ~ h4,
+  h5 ~ h5,
+  h6 ~ h6 {
+    background-color: rgba(213, 30, 149, 0.25);
+    * {
+      background-color: rgba(0, 200, 200, 1);
+    }
+  }
+`
+stories.push([
+  'Small',
+  () => (
+    <Wrapper className="dnb-style">
+      <Box>
+        <Small>
+          {/* p */}
+          <p>
+            Posuere eget vestibulum <small>Small Text</small> integer{' '}
+            <a href="https://dnb.no">Normal Anchor</a>{' '}
+            <a href="https://dnb.no">
+              <small>Small Anchor</small>
+            </a>{' '}
+            curabitur mi
+          </p>
+
+          {/* h1 */}
+          <hr />
+          <h1>
+            <small>Small H1</small> Normal H1
+          </h1>
+          <h1>
+            <small>Small only H1</small>
+          </h1>
+          <h1 className="dnb-small">Small class H1</h1>
+
+          {/* h2 */}
+          <hr />
+          <h2>
+            Normal H2 <small>Small H2</small>
+          </h2>
+          <h2 className="dnb-small">Small class H2</h2>
+
+          {/* h3 */}
+          <hr />
+          <h3>
+            Normal H3 <small>Small H3</small>
+          </h3>
+          <h3 className="dnb-small">Small class H3</h3>
+
+          {/* h4 */}
+          <hr />
+          <h4>
+            Normal H4 <small>H4 Small</small>
+          </h4>
+          <h4>Normal H4</h4>
+
+          {/* h5 */}
+          <hr />
+          <h5>
+            Normal H5 <small>H5 Small</small>
+          </h5>
+          <h5>Normal H5</h5>
+
+          {/* h6 */}
+          <hr />
+          <h6>
+            Normal H6 <small>H6 Small</small>
+          </h6>
+          <h6>Normal H6</h6>
+        </Small>
+      </Box>
+    </Wrapper>
+  )
+])
+
 stories.push([
   'Headings outside of `dnb-style`',
   () => (