feat(ListFormat): adds spacing properties (#4255)

dnbexperience · Nov 11, 2024 · c72d999 · c72d999
1 parent ca27bec
commit c72d999
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/list-format/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/list-format/info.mdx
@@ -40,5 +40,4 @@ return listFormat(myList, {
 
 See the following [demo](/uilib/components/list-format/demos/#using-listformat-function) for a more detailed example.
 
-The `listFormat` function supports an object with `{ format, locale }` as the second parameter. `format` and `locale` will accept the same values as documented in [properties](/uilib/components/list-format/properties/) of the `ListFormat` component.
-The function does not support `variant` and `listType`, as it does not return a list, but rather return a string.
+The `listFormat` function supports an object with `{ format, locale }` as the second parameter. `format` and `locale` will accept the same values as documented in [format property](/uilib/components/list-format/properties/) of the `ListFormat` component.
diff --git a/packages/dnb-eufemia/src/components/list-format/ListFormat.tsx b/packages/dnb-eufemia/src/components/list-format/ListFormat.tsx
@@ -3,6 +3,9 @@ import { LOCALE } from '../../shared/defaults'
 import { extendPropsWithContext } from '../../shared/component-helper'
 import SharedContext, { InternalLocale } from '../../shared/Context'
 import { Li, Ol, Ul } from '../../elements'
+import { UlAllProps } from '../../elements/Ul'
+import { OlAllProps } from '../../elements/Ol'
+import classNames from 'classnames'
 
 export type ListFormatProps = {
   /**
@@ -46,12 +49,24 @@ export type ListFormatProps = {
   children?: React.ReactNode
 }
 
-function ListFormat(localProps: ListFormatProps) {
+function ListFormat(
+  localProps: Omit<UlAllProps, 'value'> &
+    Omit<OlAllProps, 'value'> &
+    ListFormatProps
+) {
   const { locale, ListFormat } = useContext(SharedContext)
 
   // Extract additional props from global context
   const allProps = extendPropsWithContext(localProps, {}, ListFormat)
-  const { value, format, variant = 'text', listType, children } = allProps
+  const {
+    value,
+    format,
+    variant = 'text',
+    listType,
+    children,
+    className,
+    ...props
+  } = allProps
 
   const list = useMemo(() => {
     const isListVariant = variant !== 'text'
@@ -79,7 +94,12 @@ function ListFormat(localProps: ListFormatProps) {
     return (
       <ListElement
         type={listType !== 'unstyled' ? listType : null}
-        className={listType === 'unstyled' && 'dnb-unstyled-list'}
+        className={classNames(
+          'dnb-list-format',
+          listType === 'unstyled' && 'dnb-unstyled-list',
+          className
+        )}
+        {...props}
       >
         {list}
       </ListElement>
@@ -99,7 +119,7 @@ export function listFormat(
     },
   }: {
     locale?: InternalLocale
-    format?: Intl.ListFormatOptions
+    format?: ListFormatProps['format']
   } = {}
 ) {
   if (!Array.isArray(list)) {

diff --git a/packages/dnb-eufemia/src/components/list-format/ListFormatDocs.ts b/packages/dnb-eufemia/src/components/list-format/ListFormatDocs.ts
@@ -1,4 +1,9 @@
 import { PropertiesTableProps } from '../../shared/types'
+import { UlProperties } from './../../elements/lists/UlDocs'
+import { OlProperties } from './../../elements/lists/OlDocs'
+
+const ListProperties = { ...UlProperties, ...OlProperties }
+const { children, ...ListPropertiesWithoutChildren } = ListProperties
 
 export const ListFormatProperties: PropertiesTableProps = {
   value: {
@@ -37,4 +42,5 @@ export const ListFormatProperties: PropertiesTableProps = {
     ],
     status: 'optional',
   },
+  ...ListPropertiesWithoutChildren,
 }
diff --git a/packages/dnb-eufemia/src/components/list-format/__tests__/ListFormat.test.tsx b/packages/dnb-eufemia/src/components/list-format/__tests__/ListFormat.test.tsx
@@ -515,6 +515,21 @@ describe('ListFormat', () => {
 
     expect(container).toHaveTextContent('Baz, Bar and Foo')
   })
+
+  it('should support spacing props', () => {
+    render(
+      <ListFormat
+        value={['Foo', 'Bar', 'Baz']}
+        variant="ol"
+        listType="a"
+        top="large"
+      />
+    )
+
+    const element = document.querySelector('.dnb-list-format')
+
+    expect(element.classList).toContain('dnb-space__top--large')
+  })
 })
 
 describe('ListFormat aria', () => {