feat(Value.Date): adds numeric variant (#3907)

dnbexperience · Sep 6, 2024 · b03e199 · b03e199
1 parent 76143b0
commit b03e199
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 8 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/Examples.tsx
@@ -34,6 +34,14 @@ export const VariantShort = () => {
   )
 }
 
+export const VariantNumeric = () => {
+  return (
+    <ComponentBox scope={{ Value }}>
+      <Value.Date value="2023-01-16" variant="numeric" />
+    </ComponentBox>
+  )
+}
+
 export const Label = () => {
   return (
     <ComponentBox scope={{ Value }}>

diff --git a/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/demos.mdx b/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/demos.mdx
@@ -18,10 +18,14 @@ import * as Examples from './Examples'
 
 <Examples.WithValue />
 
-### Variant
+### Variant short
 
 <Examples.VariantShort />
 
+### Variant numeric
+
+<Examples.VariantNumeric />
+
 ### Label
 
 <Examples.Label />

diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Date/Date.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Date/Date.tsx
@@ -4,7 +4,7 @@ import useTranslation from '../../hooks/useTranslation'
 import SharedContext, { AnyLocale } from '../../../../shared/Context'
 
 export type Props = StringValueProps & {
-  variant?: 'long' | 'short'
+  variant?: 'long' | 'short' | 'numeric'
   locale?: AnyLocale
 }
 
@@ -20,12 +20,23 @@ function DateComponent(props: Props) {
         return undefined
       }
 
+      const getOptions = (variant) => {
+        if (variant === 'numeric') {
+          return {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+          } as const
+        }
+        return {
+          day: 'numeric',
+          month: variant,
+          year: 'numeric',
+        } as const
+      }
+
       const date = new Date(value)
-      const options = {
-        day: 'numeric',
-        month: variant,
-        year: 'numeric',
-      } as const
+      const options = getOptions(variant)
 
       const formattedDate =
         typeof Intl !== 'undefined'

diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Date/DateDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Value/Date/DateDocs.ts
@@ -2,7 +2,7 @@ import { PropertiesTableProps } from '../../../../shared/types'
 
 export const DateProperties: PropertiesTableProps = {
   variant: {
-    doc: 'Defines the variant of the date. Can be `long` or `short`. Defaults to `long`.',
+    doc: 'Defines the variant of the date. Can be `long`, `short` or `numeric`. Defaults to `long`.',
     type: 'string',
     status: 'optional',
   },

diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Date/__tests__/Date.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Date/__tests__/Date.test.tsx
@@ -67,6 +67,14 @@ describe('Value.Date', () => {
       ).toHaveTextContent('16. jan. 2023')
     })
 
+    it('formats with variant="numeric"', () => {
+      render(<Value.Date value="2024-09-01" variant="numeric" />)
+
+      expect(
+        document.querySelector('.dnb-forms-value-block__content')
+      ).toHaveTextContent('01.09.2024')
+    })
+
     it('should fall back to "toLocaleString" if "Intl" is not available', () => {
       const intlBackup = globalThis.Intl
       delete globalThis.Intl