adds ListFormat component

packages/dnb-design-system-portal/src/docs/uilib/components/list-format.mdx

@@ -0,0 +1,20 @@
+---
+title: 'ListFormat'
+description: 'A ready to use DNB list formatter.'
+showTabs: true
+tabs:
+  - title: Info
+    key: /uilib/components/list-format/info
+  - title: Demos
+    key: /uilib/components/list-format/demos
+  - title: Properties
+    key: /uilib/components/list-format/properties
+theme: 'sbanken'
+status: 'new'
+---
+
+import ListFormatInfo from 'Docs/uilib/components/list-format/info'
+import ListFormatDemos from 'Docs/uilib/components/list-format/demos'
+
+<ListFormatInfo />
+<ListFormatDemos />

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

@@ -0,0 +1,96 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+import { Provider } from '@dnb/eufemia/src/shared'
+import { ListFormat, P } from '@dnb/eufemia/src'
+
+export const WithValue = () => {
+  return (
+    <ComponentBox data-visual-test="list-format-default">
+      <ListFormat value={['Foo', 'Bar', 'Baz']} />
+    </ComponentBox>
+  )
+}
+
+export const WithCustomFormat = () => {
+  return (
+    <ComponentBox data-visual-test="list-format-custom-format">
+      <Provider locale="en-GB" data={{ myPath: [123, 456, 789] }}>
+        <ListFormat
+          value={[123, 456, 789]}
+          format={{ type: 'disjunction' }}
+        />
+      </Provider>
+    </ComponentBox>
+  )
+}
+
+export const Inline = () => {
+  return (
+    <ComponentBox data-visual-test="list-format-inline">
+      <P>
+        This is before the component{' '}
+        <ListFormat value={['Foo', 'Bar', 'Baz']} /> This is after the
+        component
+      </P>
+    </ComponentBox>
+  )
+}
+
+export const ListVariants = () => {
+  return (
+    <ComponentBox data-visual-test="list-format-variants">
+      <P>Ordered List:</P>
+      <ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" />
+      <P>Unordered List:</P>
+      <ListFormat value={['Foo', 'Bar', 'Baz']} variant="ul" />
+    </ComponentBox>
+  )
+}
+
+export const ListTypes = () => {
+  return (
+    <ComponentBox data-visual-test="list-format-types">
+      <P>Ordered List a:</P>
+      <ListFormat
+        value={['Foo', 'Bar', 'Baz']}
+        variant="ol"
+        listType="a"
+      />
+      <P>Ordered List A:</P>
+      <ListFormat
+        value={['Foo', 'Bar', 'Baz']}
+        variant="ol"
+        listType="A"
+      />
+      <P>Ordered List i:</P>
+      <ListFormat
+        value={['Foo', 'Bar', 'Baz']}
+        variant="ol"
+        listType="i"
+      />
+      <P>Ordered List I:</P>
+      <ListFormat
+        value={['Foo', 'Bar', 'Baz']}
+        variant="ol"
+        listType="I"
+      />
+      <P>Unordered List square:</P>
+      <ListFormat
+        value={['Foo', 'Bar', 'Baz']}
+        variant="ul"
+        listType="square"
+      />
+      <P>Unordered List circle:</P>
+      <ListFormat
+        value={['Foo', 'Bar', 'Baz']}
+        variant="ul"
+        listType="circle"
+      />
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/components/list-format/demos.mdx

@@ -0,0 +1,27 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Value
+
+<Examples.WithValue />
+
+### Custom format
+
+<Examples.WithCustomFormat />
+
+### Inline
+
+<Examples.Inline />
+
+### List variants
+
+<Examples.ListVariants />
+
+### List types
+
+<Examples.ListTypes />

packages/dnb-design-system-portal/src/docs/uilib/components/list-format/info.mdx

@@ -0,0 +1,20 @@
+---
+showTabs: true
+---
+
+import { ListFormat } from '@dnb/eufemia/src'
+
+## Import
+
+```tsx
+import { ListFormat } from '@dnb/eufemia'
+```
+
+## Description
+
+A ready-to-use list formatter. Use it wherever you have to display a list of strings, numbers, or elements.
+
+Good reasons for why we have this is to:
+
+- uniform the creation and formatting of lists.
+- Any other good reasons?

packages/dnb-design-system-portal/src/docs/uilib/components/list-format/properties.mdx

@@ -0,0 +1,11 @@
+---
+showTabs: true
+---
+
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { ListFormatProperties } from '@dnb/eufemia/src/components/list-format/ListFormatDocs'
+
+## Properties
+
+<PropertiesTable props={ListFormatProperties} />

packages/dnb-eufemia/src/components/index.ts

@@ -42,6 +42,7 @@ import IconPrimary from './icon-primary/IconPrimary'
 import InfoCard from './info-card/InfoCard'
 import Input from './input/Input'
 import InputMasked from './input-masked/InputMasked'
+import ListFormat from './list-format/ListFormat'
 import Logo from './logo/Logo'
 import Modal from './modal/Modal'
 import NumberFormat from './number-format/NumberFormat'
@@ -99,6 +100,7 @@ export {
   InfoCard,
   Input,
   InputMasked,
+  ListFormat,
   Logo,
   Modal,
   NumberFormat,

packages/dnb-eufemia/src/components/lib.ts

@@ -42,6 +42,7 @@ import IconPrimary from './icon-primary/IconPrimary'
 import InfoCard from './info-card/InfoCard'
 import Input from './input/Input'
 import InputMasked from './input-masked/InputMasked'
+import ListFormat from './list-format/ListFormat'
 import Logo from './logo/Logo'
 import Modal from './modal/Modal'
 import NumberFormat from './number-format/NumberFormat'
@@ -157,6 +158,7 @@ export const getComponents = () => {
     InfoCard,
     Input,
     InputMasked,
+    ListFormat,
     Logo,
     Modal,
     NumberFormat,

packages/dnb-eufemia/src/components/list-format/ListFormat.tsx

@@ -0,0 +1,107 @@
+import React, { useContext, useMemo } from 'react'
+import Context, { ContextProps } from '../../shared/Context'
+import { LOCALE } from '../../shared/defaults'
+import { convertJsxToString } from '../../shared/component-helper'
+import SharedContext, { InternalLocale } from '../../shared/Context'
+import { Li, Ol, Ul } from '../../elements'
+import { extendPropsWithContext } from '../../shared/component-helper'
+
+export type ListFormatProps = {
+  /**
+   * Formatting options for the value.
+   * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat
+   */
+  format?: Intl.ListFormatOptions
+  /**
+   * Defines if the value should be displayed in list format or regular text format on one line.
+   * Default: `text`
+   */
+  variant?: 'ol' | 'ul' | 'text'
+  /**
+   * Defines the type of list styling used for list variants. Used on conjunction with variant `ol` and `ul`.
+   * Variant `ol`: `a`, `A`, `i`, `I` and `1`.
+   * Variant `ul`: `circle`, `disc` and `square`.
+   * Default: `undefined`
+   */
+  listType?:
+    | 'a'
+    | 'A'
+    | 'i'
+    | 'I'
+    | '1'
+    | 'circle'
+    | 'disc'
+    | 'square'
+    | undefined
+
+  value?: any
+}
+
+export const defaultProps = {}
+
+function ListFormat(localProps: ListFormatProps) {
+  // Every component should have a context
+  const context = React.useContext(Context)
+
+  // Extract additional props from global context
+  const allProps = extendPropsWithContext(
+    localProps,
+    defaultProps,
+    context?.ListFormat
+  )
+  const { value, format, variant = 'text', listType } = allProps
+
+  const { locale } = useContext(SharedContext)
+
+  const list = useMemo(() => {
+    const isListVariant = variant !== 'text'
+
+    return isListVariant
+      ? value.map((value, index) => (
+          <Li key={index}>{convertJsxToString(value)}</Li>
+        ))
+      : value
+  }, [value, variant])
+
+  const listValue = useMemo(() => {
+    if (variant === 'text') {
+      return listFormat(list, { locale, format })
+    }
+
+    const ListElement = variant.startsWith('ol') ? Ol : Ul
+
+    return <ListElement type={listType}>{list}</ListElement>
+  }, [format, list, locale, variant, listType])
+
+  return listValue
+}
+
+export function listFormat(
+  value: Array<number | string>,
+  {
+    locale = LOCALE,
+    format = {
+      style: 'long',
+      type: 'conjunction',
+    },
+    separator = ', ',
+  }: {
+    locale?: InternalLocale
+    format?: Intl.ListFormatOptions
+    separator?: string
+  }
+) {
+  if (!Array.isArray(value)) {
+    return value
+  }
+  try {
+    const formatter = new Intl.ListFormat(locale, format)
+    return formatter.format(value.map((v) => String(v)))
+  } catch (error) {
+    return value.join(separator)
+  }
+}
+
+ListFormat._supportsSpacingProps = true
+
+export default ListFormat

packages/dnb-eufemia/src/components/list-format/ListFormatDocs.ts

@@ -0,0 +1,34 @@
+import { PropertiesTableProps } from '../../shared/types'
+
+export const ListFormatProperties: PropertiesTableProps = {
+  value: {
+    doc: 'value to format',
+    type: 'any',
+    status: 'optional',
+  },
+  format: {
+    doc: 'Formatting options for the value. See the [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat) documentation.',
+    type: 'Intl.ListFormatOptions',
+    status: 'optional',
+  },
+  variant: {
+    doc: 'Defines if the value should be displayed in list format, or regular text format on one line. Defaults to `text`',
+    type: ['ol', 'ul', 'text'],
+    status: 'optional',
+  },
+  listType: {
+    doc: 'Defines the type of list styling used for list variants. Used on conjunction with variant `ol` and `ul`. Variant `ol`: `a`, `A`, `i`, `I` and `1`. Variant `ul`: `circle`, `disc` and `square`. Defaults to `undefined`',
+    type: [
+      'a',
+      'A',
+      'i',
+      'I',
+      '1',
+      'circle',
+      'disc',
+      'square',
+      'undefined',
+    ],
+    status: 'optional',
+  },
+}