feat(Typography): support styles for superscript and subscript elements

dnbexperience · Nov 14, 2022 · 87dcaf9 · 87dcaf9
1 parent e289ba1
commit 87dcaf9
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 12 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx
@@ -99,6 +99,30 @@ export function ParagraphDefault() {
         <Case>
           <cite>Cite paragraph</cite>
         </Case>
+        <Case>
+          Text <sup>1</sup>{' '}
+          <b>
+            Text <sup>1</sup>
+          </b>{' '}
+        </Case>
+        <Case>
+          Text{' '}
+          <sup>
+            <Anchor href="/">1</Anchor>
+          </sup>{' '}
+          <b>
+            Text{' '}
+            <sup>
+              <Anchor href="/">1</Anchor>
+            </sup>
+          </b>{' '}
+        </Case>
+        <Case>
+          Text <sub>1</sub>{' '}
+          <b>
+            Text <sub>1</sub>
+          </b>{' '}
+        </Case>
       </P>
     </ComponentBox>
   )
@@ -132,6 +156,30 @@ export function ParagraphSmall() {
           <Case>
             <cite>Cite paragraph</cite>
           </Case>
+          <Case>
+            Text <sup>1</sup>{' '}
+            <b>
+              Text <sup>1</sup>
+            </b>{' '}
+          </Case>
+          <Case>
+            Text{' '}
+            <sup>
+              <Anchor href="/">1</Anchor>
+            </sup>{' '}
+            <b>
+              Text{' '}
+              <sup>
+                <Anchor href="/">1</Anchor>
+              </sup>
+            </b>{' '}
+          </Case>
+          <Case>
+            Text <sub>1</sub>{' '}
+            <b>
+              Text <sub>1</sub>
+            </b>{' '}
+          </Case>
         </P>
         <P size="x-small">
           <Case>
@@ -171,12 +219,6 @@ export function ParagraphAdditional() {
         <Case>
           <ins>Inserted paragraph</ins>
         </Case>
-        <Case>
-          Text <sup>Superscript</sup>
-        </Case>
-        <Case>
-          Text <sub>Subscript</sub>
-        </Case>
       </P>
     </ComponentBox>
   )

diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap
@@ -34,12 +34,15 @@ button.dnb-anchor {
 .dnb-anchor {
   display: inline;
   padding: 0.05575em 0.125em 0.05575em;
-  color: var(--color-sea-green);
   font-size: var(--font-size-basis);
   text-decoration: none;
-  box-shadow: 0 0.09375rem 0 0 currentColor;
   border-radius: 0;
+  box-shadow: 0 0.09375rem 0 0 currentColor;
+  color: var(--color-sea-green);
   transition: background-color 200ms ease-in-out, box-shadow 180ms ease-in-out, border-radius 200ms ease-in-out; }
+  sup .dnb-anchor,
+  sub .dnb-anchor {
+    padding: 0 0.025em 0; }
   .dnb-p .dnb-anchor,
   .dnb-lead .dnb-anchor,
   .dnb-h--xx-large .dnb-anchor,
@@ -262,6 +265,10 @@ a.dnb-button {
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-basis);
     font-style: italic; }
+  .dnb-p sup,
+  .dnb-p sub {
+    font-size: 0.777777em;
+    line-height: 0.5em; }
 
 .dnb-h--xx-large {
   font-size: var(--font-size-xx-large);

diff --git a/...st-js-paragraph-screenshot-have-to-match-the-paragraph-example-1-859a9.snap.png b/...st-js-paragraph-screenshot-have-to-match-the-paragraph-example-1-859a9.snap.png
diff --git a/...creenshot-have-to-match-the-paragraph-with-additional-elements-1-849f3.snap.png b/...creenshot-have-to-match-the-paragraph-with-additional-elements-1-849f3.snap.png
diff --git a/...ragraph-screenshot-have-to-match-the-paragraph-with-small-text-1-eaab6.snap.png b/...ragraph-screenshot-have-to-match-the-paragraph-with-small-text-1-eaab6.snap.png
diff --git a/packages/dnb-eufemia/src/style/elements/_anchor-mixins.scss b/packages/dnb-eufemia/src/style/elements/_anchor-mixins.scss
@@ -14,16 +14,20 @@ $anchorBorderRadius: 0.25em;
 
   padding: 0.05575em 0.125em 0.05575em; // the total body height will then be 24px if font-size is 18px
 
-  color: var(--color-sea-green);
   font-size: var(--font-size-basis);
-
   text-decoration: none;
-  box-shadow: 0 $anchorBorderBottomWidth 0 0 currentColor;
   border-radius: 0;
+  box-shadow: 0 $anchorBorderBottomWidth 0 0 currentColor;
+
+  color: var(--color-sea-green);
 
   @if $theme == 'highlighted' {
     color: var(--color-emerald-green);
-    box-shadow: 0 $anchorBorderBottomWidth 0 0 currentColor;
+  }
+
+  sup &,
+  sub & {
+    padding: 0 0.025em 0;
   }
 
   .dnb-p &,

diff --git a/packages/dnb-eufemia/src/style/elements/typography.scss b/packages/dnb-eufemia/src/style/elements/typography.scss
@@ -182,6 +182,12 @@
     line-height: var(--line-height-basis);
     font-style: italic;
   }
+
+  sup,
+  sub {
+    font-size: 0.777777em; // ensure we get 14px (x-small) when parent font-size is 18px (default size)
+    line-height: 0.5em; // ensure the parent line-height is still the same
+  }
 }
 @mixin headingSpacing_xx-large() {
   &:not([class*='space__top']) {