Use new typography classes

dnbexperience · Nov 18, 2024 · 54f663a · 54f663a
1 parent 97e2637
commit 54f663a
Show file tree

Hide file tree

Showing 26 changed files with 650 additions and 224 deletions.
diff --git a/...-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx b/...-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
@@ -1,14 +1,15 @@
 import { H3 } from '@dnb/eufemia/src'
 
+# Font Families
+
 <VisibilityByTheme hidden="sbanken">
-## Font Families
 
 The default font family for all web applications is the `DNB` font.
 
 ## DNB Regular
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-regular">
+  <p className="dnb-p dnb-t__weight--regular dnd-t__family-basis">
     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
@@ -20,7 +21,7 @@ The default font family for all web applications is the `DNB` font.
 ## DNB Medium
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-medium">
+  <p className="dnb-p dnb-t__weight--medium dnd-t__family-basis">
     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
@@ -32,7 +33,7 @@ The default font family for all web applications is the `DNB` font.
 ## DNB Bold
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-bold">
+  <p className="dnb-p dnb-t__weight--bold dnd-t__family-basis">
     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
@@ -44,7 +45,7 @@ The default font family for all web applications is the `DNB` font.
 ## DNBMono Regular
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-mono-regular">
+  <p className="dnb-p dnb-t__weight--regular dnb-t__family--monospace">
     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
@@ -54,7 +55,6 @@ The default font family for all web applications is the `DNB` font.
 </TypographyBox>
 </VisibilityByTheme>
 <VisibilityByTheme visible="sbanken">
-## Font Families
 
 The default font family for all web applications is `Roboto`, however for headlines and some other items we use `Maison Neue`.
 
@@ -67,7 +67,7 @@ The default font family for all web applications is `Roboto`, however for headli
 ### Roboto regular
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-regular">
+  <p className="dnb-p dnb-t__weight--regular dnd-t__family-basis">
     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
@@ -79,7 +79,7 @@ The default font family for all web applications is `Roboto`, however for headli
 ### Roboto bold
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-bold">
+  <p className="dnb-p dnb-typo-bold dnd-t__family-basis">
     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

diff --git a/...b-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx b/...b-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx
@@ -1,14 +1,16 @@
 ## Font Weights
 
-Achieved with HTML classes: `.dnb-typo-regular`, <VisibilityByTheme hidden="sbanken">`.dnb-typo-medium`, </VisibilityByTheme>`.dnb-typo-bold`
+Achieved with HTML classes: `.dnb-t__weight--regular`,`.dnb-t__weight--medium` or `.dnb-t__weight--bold`.
+
+The old classes, `.dnb-typo-regular`, `.dnb-typo-medium` and `.dnb-typo-bold`, still work, but will also set font-family and font-style.
 
 ### Body Regular
 
 **NB!** body text is automatically set to use **regular** weight so there is
 no need to use a class.
 
 <TypographyBox>
-  <p className="dnb-typo-regular">
+  <p className="dnb-t__weight-regular">
     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
@@ -21,7 +23,7 @@ no need to use a class.
 ### Body Medium
 
 <TypographyBox>
-  <p className="dnb-typo-medium">
+  <p className="dnb-t__weight-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
@@ -34,7 +36,7 @@ no need to use a class.
 ### Body Bold
 
 <TypographyBox>
-  <p className="dnb-typo-bold">
+  <p className="dnb-t__weight-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

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/Examples.tsx
@@ -14,6 +14,77 @@ const Case = styled.span`
   padding: 0.25rem 0;
 `
 
+export function ParagraphWeightModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers">
+      <P>Default paragraph</P>
+      <P weight="regular">Regular weight paragraph (same as default)</P>
+      <P weight="medium">Medium weight paragraph</P>
+    </ComponentBox>
+  )
+}
+export function ParagraphSizeModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers">
+      <P size="x-small">x-small paragraph</P>
+      <P size="small">small paragraph</P>
+      <P size="medium">medium paragraph</P>
+      <P size="basis">basis paragraph (same as default)</P>
+      <P size="large">large paragraph</P>
+      <P size="x-large">x-large paragraph</P>
+      <P size="xx-large">xx-large paragraph</P>
+    </ComponentBox>
+  )
+}
+export function ParagraphAlignmentModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers">
+      <P align="right">Right aligned paragraph</P>
+      <P align="center">Center aligned paragraph</P>
+      <P align="left">Left aligned paragraph</P>
+    </ComponentBox>
+  )
+}
+export function ParagraphFamilyModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers">
+      <P family="basis">Basis family paragraph (same as default)</P>
+      <P family="heading">
+        Heading family paragraph (only different on some themes)
+      </P>
+      <P family="monospace">Monospace family paragraph</P>
+    </ComponentBox>
+  )
+}
+
+export function ParagraphLineHeightModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers">
+      <P line="x-small">x-small line-height paragraph</P>
+      <P line="small">small line-height paragraph</P>
+      <P line="medium">medium line-height paragraph</P>
+      <P line="basis">basis line-height paragraph (same as default)</P>
+      <P line="large">large line-height paragraph</P>
+      <P line="x-large">x-large line-height paragraph</P>
+      <P line="xx-large">xx-large line-height paragraph</P>
+    </ComponentBox>
+  )
+}
+export function ParagraphAdditionalModifiers() {
+  return (
+    <ComponentBox
+      hideCode
+      data-visual-test="paragraph-additional-modifiers"
+    >
+      <div>
+        <P weight="bold">Bold weight paragraph</P>
+        <P decoration="underline">Underline paragraph</P>
+        <P decoration="italic">Italic paragraph</P>
+      </div>
+    </ComponentBox>
+  )
+}
+
 export function ParagraphDefault() {
   return (
     <ComponentBox
@@ -89,8 +160,6 @@ export function ParagraphSmall() {
           <Case>
             <strong>Strong paragraph (medium weight)</strong>
           </Case>
-          {/* <i>Italic paragraph</i> */}
-          {/* <u>Underline paragraph</u> */}
           <Case>Numbers 0123456789</Case>
           <Case>
             <code className="dnb-code">Code paragraph</code>
@@ -172,22 +241,6 @@ export function ParagraphAdditional() {
   )
 }
 
-export function ParagraphModifiers() {
-  return (
-    <ComponentBox data-visual-test="paragraph-modifiers">
-      <div>
-        <P>Default paragraph</P>
-        <P modifier="medium">Medium weight paragraph</P>
-        <P size="small">Small paragraph</P>
-        <P modifier="small medium">Small paragraph with medium weight</P>
-        {/* (Bold is currently not supported by DNB UX) */}
-        {/* <P modifier="bold">Bold weight paragraph</P> */}
-        {/* <P modifier="small bold">Small paragraph with bold weight</P> */}
-      </div>
-    </ComponentBox>
-  )
-}
-
 export function ParagraphRegressionTests() {
   const PWrap = ({ customSize = null, ...props }) => {
     const size = props.size || customSize

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/demos.mdx
@@ -3,28 +3,75 @@ showTabs: true
 ---
 
 import {
+  ParagraphWeightModifiers,
+  ParagraphSizeModifiers,
+  ParagraphAlignmentModifiers,
+  ParagraphFamilyModifiers,
+  ParagraphLineHeightModifiers,
+  ParagraphAdditionalModifiers,
   ParagraphDefault,
   ParagraphSmall,
   ParagraphAdditional,
   ParagraphRegressionTests,
-  ParagraphModifiers,
 } from 'Docs/uilib/elements/paragraph/Examples'
 
 ## Demos
 
 ### Paragraphs modifiers
 
-<ParagraphModifiers />
+These are the standard available modifiers for paragraph typography:
 
-### Paragraphs `basis` sized
+- [Weight](#weight)
+- [Size](#size)
+- [Alignment](#alignment)
+- [Font family](#font-family)
+- [Line height](#line-height)
+
+As well as some [other modifiers](#other-modifiers).
+
+#### Weight
+
+<ParagraphWeightModifiers />
+
+#### Size
+
+Also automatically sets the matching line-height (`line` prop).
+
+<ParagraphSizeModifiers />
+
+#### Alignment
+
+<ParagraphAlignmentModifiers />
+
+#### Font family
+
+<ParagraphFamilyModifiers />
+
+#### Line height
+
+Line-height will be set automatically based on the `size` props, but can also be set seperately if needed.
+
+<ParagraphLineHeightModifiers />
+
+#### Other modifiers
+
+Although bold, italic and underline are not a standard part of the Eufemia design system for typography (in particular, "medium" should be used instead of "bold"), we still include them as an option for convenience. And there are also cases where an accessibility case can be made for their use.
+
+<ParagraphAdditionalModifiers />
+
+### Children tag styling
+
+Paragraph also adds some default styling to child typography HTML elements. Like `<b>` or `<strong>`.
+
+#### Paragraphs `basis` sized
 
 <ParagraphDefault />
 
-#### Paragraph `small` sized
+##### Paragraph `small` sized
 
 <ParagraphSmall />
 
-#### Additional Paragraph formatting (not defined yet)
+##### Additional Paragraph formatting (not defined yet)
 
 <ParagraphAdditional />
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/info.mdx
@@ -12,22 +12,10 @@ import { P } from '@dnb/eufemia/elements'
 
 Paragraphs are block-level elements, used to structure and format text contents.
 
-## Paragraph class modifiers
+Paragraph has some default typography styling even without any props being set.
 
-Eufemia comes with several styles you can use on paragraphs and other HTML text elements:
-
-**Weights**
-
-- `.dnb-p` (Body text)
-- `.dnb-p--medium`
-
-**Sizes**
-
-- `.dnb-p--small`
-- `.dnb-p--x-small`
-
-**Variants**
+Read more [about Fonts in the Designer Guides](/quickguide-designer/fonts/).
 
-- `.dnb-p--lead`
+### Typography CSS classes
 
-Read more [about Fonts in the Designer Guides](/quickguide-designer/fonts/).
+Both Paragraph and the [Span](uilib/elements/span/) component have the same typography props that uses the [typography helper classes](uilib/typography/helper-classes/).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/span/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/Examples.tsx
@@ -13,14 +13,14 @@ export function SpanBasic() {
     <ComponentBox data-visual-test="span-basic">
       <P>
         Here is a paragraph with a <Span size="x-small">x-small</Span> word
-        and some <Span medium>medium weight text</Span> in it.
+        and some <Span weight="medium">medium weight text</Span> in it.
       </P>
       <H4>
         Heading 4 with <Span size="x-large">x-large</Span> word
       </H4>
 
       <Anchor href="/">
-        Anchor with <Span medium>medium weight</Span> words
+        Anchor with <Span weight="medium">medium weight</Span> words
       </Anchor>
     </ComponentBox>
   )
@@ -32,15 +32,13 @@ export function SpanModifiers() {
       <div>
         <Span>Default span</Span>
         <br />
-        <Span modifier="medium">Medium weight span</Span>
+        <Span weight="medium">Medium weight span</Span>
         <br />
-        <Span size="small">Small span</Span>
+        <Span size="basis">Basis size span</Span>
         <br />
-        <Span modifier="small medium">Small span with medium weight</Span>
-        <br />
-        {/* (Bold is currently not supported by DNB UX) */}
-        {/* <Span modifier="bold">Bold weight span</Span> */}
-        {/* <Span modifier="small bold">Small span with bold weight</Span> */}
+        <Span weight="medium" size="x-small">
+          X-small span with medium weight
+        </Span>
       </div>
     </ComponentBox>
   )

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/span/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/demos.mdx
@@ -10,6 +10,8 @@ import {
 
 ## Demos
 
+For more detailed examples of every prop, see the [Paragraph demos](uilib/elements/paragraph/#demos).
+
 ### Basics
 
 <SpanBasic />

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/span/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/info.mdx
@@ -10,7 +10,10 @@ import { Span } from '@dnb/eufemia/elements'
 
 ## Description
 
-`<Span>` are inline elements. They share typography props (for size and weight) with the [Paragraph component](/uilib/elements/paragraph).
-Unlike `<P>`, the `<Span>` component does not modify anything by default.
+Spans are inline-elements, used to define parts of text content.
 
-Since `<Span>` is an inline element, it's easier to modify parts of text than it is with `<P>`.
+Span does not define any default styling, if no props are set, it will just be a regular inline `<span>` element.
+
+### Typography CSS classes
+
+Both Span and the [Paragraph](uilib/elements/paragraph/) component have the same typography props that uses the [typography helper classes](uilib/typography/helper-classes/).