feat(Typography): add general .dnb-t helper classes and add typogra…

…phy props to Span (#4235)

* Added CSS classes for basic typography. Prefix `.dnb-t`
* Updated all component to use the new classes instead of `.dnb-p`
classes
* Added typography props to the `<Span>` component
* Updated typography documentation to show the current theme's values

packages/dnb-design-system-portal/src/core/ChangeStyleTheme.tsx

@@ -7,7 +7,7 @@ import {
   setTheme,
 } from 'gatsby-plugin-eufemia-theme-handler'
 
-export default function ChangeStyleTheme({ label = null } = {}) {
+export default function ChangeStyleTheme({ label = null, ...rest } = {}) {
   const themes = getThemes()
   const { name } = getTheme()
   const { update } = React.useContext(Context)
@@ -31,6 +31,7 @@ export default function ChangeStyleTheme({ label = null } = {}) {
           update({ skeleton: false })
         })
       }}
+      {...rest}
     />
   )
 }

packages/dnb-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 dnb-t__family--default">
     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 dnb-t__family--default">
     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
@@ -31,8 +32,10 @@ The default font family for all web applications is the `DNB` font.
 
 ## DNB Bold
 
+**NB!** bold is generally not used, use medium, unless there is a specific unique use case.
+
 <TypographyBox>
-  <p className="dnb-p dnb-typo-bold">
+  <p className="dnb-p dnb-t__weight--bold dnb-t__family--default">
     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 +47,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
@@ -53,21 +56,35 @@ The default font family for all web applications is the `DNB` font.
   </p>
 </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`.
 
 ### Maison Neue
 
 <TypographyBox>
-  <H3>This is a headline in Maison Neue</H3>
+  <p className="dnb-p dnb-t__size--large dnb-t__line-height--large dnb-t__family--heading">
+    This is a paragraph using the headline font Maison Neue
+  </p>
 </TypographyBox>
 
 ### Roboto regular
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-regular">
+  <p className="dnb-p dnb-t__weight--regular dnb-t__family--default">
+    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
+    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
+  </p>
+</TypographyBox>
+
+## Roboto Medium
+
+<TypographyBox>
+  <p className="dnb-p dnb-t__weight--medium dnb-t__family--default">
     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
@@ -78,8 +95,10 @@ The default font family for all web applications is `Roboto`, however for headli
 
 ### Roboto bold
 
+**NB!** bold is generally not used, use medium, unless there is a specific unique use case.
+
 <TypographyBox>
-  <p className="dnb-p dnb-typo-bold">
+  <p className="dnb-p dnb-t__weight--bold dnb-t__family--default">
     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

packages/dnb-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
@@ -17,24 +19,24 @@ no need to use a class.
   </p>
 </TypographyBox>
 
-<VisibilityByTheme hidden="sbanken">
 ### 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
     comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
 </TypographyBox>
-</VisibilityByTheme>
 
 ### Body Bold
 
+**NB!** bold is generally not used, use medium, unless there is a specific unique use case.
+
 <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

packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx

@@ -137,16 +137,16 @@ This is an overview of the default, basic typographic elements such as **heading
 
 ### Note:
 
-There are two methods to create small text. One, is to use the `.dnb-p--small` modifier class which can be used on paragraphs etc. and allows you to use a bottom margin. The other method is to just use a `<small>` tag which is inline and cannot have a margin.
+There are two methods to create small text. One, is to use the `.dnb-t__size--small` modifier class. The other method is to just use a `<small>` tag.
 
 ### Example
 
 <TypographyBox>
-  <p className="dnb-p dnb-p--small">
-    This is a paragraph with a <b>modifier class</b>. This is the small
-    content. Quem facilisi moderatius id eam, id tamquam albucius per. Vel
-    quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea,
-    ei exerci tacimates pro, aliquam pertinacia eu vim.
+  <p className="dnb-p dnb-t__size--small">
+    This is a paragraph with a <b>modifier class</b> `.dnb-t__size--small`.
+    This is the small content. Quem facilisi moderatius id eam, id tamquam
+    albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea
+    bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.
   </p>
   <p className="dnb-p">
     <small>

packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.tsx

@@ -250,11 +250,11 @@ export const DropdownDirections = () => {
           data={[
             ['Vertical', 'alignment'],
             <>
-              <P modifier="medium">Vertical</P>
+              <P weight="medium">Vertical</P>
               <P>alignment</P>
             </>,
             <Dropdown.HorizontalItem key="item-1">
-              <P modifier="medium" right="x-small">
+              <P weight="medium" right="x-small">
                 Horizontal
               </P>
               <P>alignment</P>

packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/Examples.tsx

@@ -66,7 +66,9 @@ export const ProgressIndicatorCircularLabelInsideExample = () => (
       labelDirection="inside"
       data-visual-test="progress-indicator-label-inside"
     >
-      <span className="dnb-p dnb-p--bold dnb-p__size--small">{72}%</span>
+      <span className="dnb-p dnb-t__weight--bold dnb-t__size--small">
+        {72}%
+      </span>
     </ProgressIndicator>
   </ComponentBox>
 )
@@ -360,7 +362,7 @@ const StyledLabel = styled.span`
 `
 const MyCustomLabel = ({ children, ...rest }) => (
   <StyledLabel
-    className="dnb-p dnb-p--medium dnb-p__size--small"
+    className="dnb-p dnb-t__weight--medium dnb-t__size--small"
     {...rest}
   >
     {children}

packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/Examples.tsx

@@ -14,6 +14,76 @@ const Case = styled.span`
   padding: 0.25rem 0;
 `
 
+export function ParagraphWeightModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers-weight">
+      <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-size">
+      <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-align">
+      <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-family">
+      <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-line">
+      <P lineHeight="x-small">x-small line-height paragraph</P>
+      <P lineHeight="small">small line-height paragraph</P>
+      <P lineHeight="medium">medium line-height paragraph</P>
+      <P lineHeight="basis">
+        basis line-height paragraph (same as default)
+      </P>
+      <P lineHeight="large">large line-height paragraph</P>
+      <P lineHeight="x-large">x-large line-height paragraph</P>
+      <P lineHeight="xx-large">xx-large line-height paragraph</P>
+    </ComponentBox>
+  )
+}
+export function ParagraphAdditionalModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers-other">
+      <div>
+        <P weight="bold">Bold weight paragraph</P>
+        <P decoration="underline">Underline paragraph</P>
+        <P slant="italic">Italic paragraph</P>
+      </div>
+    </ComponentBox>
+  )
+}
+
 export function ParagraphDefault() {
   return (
     <ComponentBox
@@ -89,8 +159,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 +240,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
@@ -196,10 +248,10 @@ export function ParagraphRegressionTests() {
         <P {...props}>
           <Case>{size}</Case>
         </P>
-        <P medium {...props}>
+        <P weight="medium" {...props}>
           <Case>{size} - Weight medium</Case>
         </P>
-        <P bold {...props}>
+        <P weight="bold" {...props}>
           <Case>{size} - Weight bold</Case>
         </P>
       </>