added typography to Span. Added universal typography base class '.dnb-t'

packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/info.mdx

@@ -10,7 +10,7 @@ import { P } from '@dnb/eufemia/elements'
 
 ## Description
 
-Paragraphs are a block-level elements, used to structure and format text contents.
+Paragraphs are block-level elements, used to structure and format text contents.
 
 ## Paragraph class modifiers
 

packages/dnb-design-system-portal/src/docs/uilib/elements/span.mdx

@@ -0,0 +1,13 @@
+---
+title: 'Span'
+theme: 'sbanken'
+showTabs: true
+hideTabs:
+  - title: Events
+---
+
+import SpanInfo from 'Docs/uilib/elements/span/info'
+import SpanDemos from 'Docs/uilib/elements/span/demos'
+
+<SpanInfo />
+<SpanDemos />

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

@@ -0,0 +1,79 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+import Anchor from '@dnb/eufemia/src/components/Anchor'
+import { Span, P, H4 } from '@dnb/eufemia/src/elements'
+
+export function SpanBasic() {
+  return (
+    <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.
+      </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>
+    </ComponentBox>
+  )
+}
+
+export function SpanModifiers() {
+  return (
+    <ComponentBox data-visual-test="span-modifiers">
+      <div>
+        <Span>Default span</Span>
+        <br />
+        <Span modifier="medium">Medium weight span</Span>
+        <br />
+        <Span size="small">Small 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> */}
+      </div>
+    </ComponentBox>
+  )
+}
+
+export function SpanRegressionTests() {
+  const SpanWrap = (props) => {
+    const size = props.size || 'default'
+    return (
+      <div>
+        <Span {...props}>{size}</Span>
+        <br />
+        <Span medium {...props}>
+          {size} - Weight medium
+        </Span>
+        <br />
+        <Span bold {...props}>
+          {size} - Weight bold
+        </Span>
+      </div>
+    )
+  }
+
+  return (
+    <ComponentBox scope={{ SpanWrap }} data-visual-test="span-sizes">
+      <SpanWrap />
+      <SpanWrap size="xx-large" />
+      <SpanWrap size="x-large" />
+      <SpanWrap size="large" />
+      <SpanWrap size="medium" />
+      <SpanWrap size="basis" />
+      <SpanWrap size="small" />
+      <SpanWrap size="x-small" />
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/elements/span/demos.mdx

@@ -0,0 +1,23 @@
+---
+showTabs: true
+---
+
+import {
+  SpanBasic,
+  SpanRegressionTests,
+  SpanModifiers,
+} from 'Docs/uilib/elements/span/Examples'
+
+## Demos
+
+### Basics
+
+<SpanBasic />
+
+### Span modifiers
+
+<SpanModifiers />
+
+<VisibleWhenVisualTest>
+  <SpanRegressionTests />
+</VisibleWhenVisualTest>

packages/dnb-design-system-portal/src/docs/uilib/elements/span/info.mdx

@@ -0,0 +1,16 @@
+---
+showTabs: true
+---
+
+## Import
+
+```tsx
+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.
+
+Since `<Span>` is an inline element, it's easier to modify parts of text than it is with `<P>`.

packages/dnb-design-system-portal/src/docs/uilib/elements/span/properties.mdx

@@ -0,0 +1,10 @@
+---
+showTabs: true
+---
+
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { SpanProperties } from '@dnb/eufemia/src/elements/span/SpanDocs'
+
+## Properties
+
+<PropertiesTable props={SpanProperties} />

packages/dnb-design-system-portal/src/docs/uilib/typography.mdx

@@ -9,6 +9,15 @@ import { TypographyVariants } from 'Docs/uilib/typography/Examples'
 
 # Typography
 
+## Typography components
+
+The two main components used to set typography are:
+
+- [Span](uilib/elements/span)
+- [P](uilib/elements/paragraph)
+
+([Lead](uilib/elements/lead) and [Ingress](uilib/elements/ingress) also works in the same way)
+
 ## Typography in general
 
 Fonts are handled automatically once the CSS packages **dnb-ui-core** or **dnb-ui-basis** are loaded.

packages/dnb-eufemia/src/elements/span/Span.tsx

@@ -4,13 +4,12 @@
  */
 
 import React from 'react'
-import { SpacingProps } from '../../components/space/types'
-import E from '../Element'
+import Typography, { TypographyProps } from '../typography/Typography'
 
-type SpanProps = SpacingProps & React.HTMLAttributes<HTMLElement>
+type SpanProps = TypographyProps<HTMLSpanElement>
 
 const Span = React.forwardRef((props: SpanProps, ref) => (
-  <E as="span" innerRef={ref} {...props} />
+  <Typography element="span" innerRef={ref} {...props} />
 ))
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

packages/dnb-eufemia/src/elements/span/SpanDocs.ts

@@ -0,0 +1,6 @@
+import { PropertiesTableProps } from '../../shared/types'
+import { TypographyProperties } from '../typography/TypographyDocs'
+
+export const SpanProperties: PropertiesTableProps = {
+  ...TypographyProperties,
+}

packages/dnb-eufemia/src/elements/span/__tests__/Span.screenshot.test.ts

@@ -0,0 +1,37 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we don't require any related files
+ */
+
+import {
+  makeScreenshot,
+  setupPageScreenshot,
+} from '../../../core/jest/jestSetupScreenshots'
+
+describe.each(['ui', 'sbanken'])('Span for %s', (themeName) => {
+  setupPageScreenshot({
+    themeName,
+    url: '/uilib/elements/span',
+  })
+
+  it('basics', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="span-basic"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('with modifiers', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="span-modifiers"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('all sizes and weights', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="span-sizes"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})

packages/dnb-eufemia/src/elements/span/__tests__/Span.test.tsx

@@ -0,0 +1,62 @@
+/**
+ * Element Test
+ *
+ */
+
+import React from 'react'
+import { axeComponent } from '../../../core/jest/jestSetup'
+import Span from '../Span'
+import { render } from '@testing-library/react'
+
+describe('Span element', () => {
+  it('has correct size when size is defined', () => {
+    render(<Span size="large" />)
+    const element = document.querySelector('.dnb-t__size--large')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-t__size--large',
+      'dnb-span',
+    ])
+  })
+  it('has correct style when size and a modifier is defined', () => {
+    render(<Span size="medium" modifier="medium" />)
+    const element = document.querySelector('.dnb-t__size--medium')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-t--medium',
+      'dnb-t__size--medium',
+      'dnb-span',
+    ])
+  })
+  it('has correct style when several modifiers are defined', () => {
+    render(<Span modifier="medium small" />)
+    const element = document.querySelector('.dnb-t__size--small')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-t--medium',
+      'dnb-t__size--small',
+      'dnb-span',
+    ])
+  })
+  it('has correct style when medium is set to true', () => {
+    render(<Span medium />)
+    const element = document.querySelector('.dnb-t--medium')
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-t--medium',
+      'dnb-span',
+    ])
+  })
+  it('has correct style when bold is set to true', () => {
+    render(<Span bold />)
+    const element = document.querySelector('.dnb-t--bold')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-t--bold',
+      'dnb-span',
+    ])
+  })
+  it('should validate with ARIA rules as a span element', async () => {
+    const Comp = render(<Span size="x-small" element="span" />)
+    expect(await axeComponent(Comp)).toHaveNoViolations()
+  })
+})

packages/dnb-eufemia/src/elements/typography/IngressDocs.ts

@@ -1,6 +1,6 @@
 import { PropertiesTableProps } from '../../shared/types'
-import { ParagraphProperties } from './PDocs'
+import { TypographyProperties } from './TypographyDocs'
 
 export const IngressProperties: PropertiesTableProps = {
-  ...ParagraphProperties,
+  ...TypographyProperties,
 }

packages/dnb-eufemia/src/elements/typography/LeadDocs.ts

@@ -1,6 +1,6 @@
 import { PropertiesTableProps } from '../../shared/types'
-import { ParagraphProperties } from './PDocs'
+import { TypographyProperties } from './TypographyDocs'
 
 export const LeadProperties: PropertiesTableProps = {
-  ...ParagraphProperties,
+  ...TypographyProperties,
 }