Add new table for the data object

dnbexperience · Jun 12, 2024 · 5e6e344 · 5e6e344
1 parent d8d740c
commit 5e6e344
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/properties.mdx
@@ -3,12 +3,19 @@ showTabs: true
 ---
 
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
-import { TabsProperties } from '@dnb/eufemia/src/components/tabs/TabsDocs'
+import {
+  TabsProperties,
+  TabsDataObject,
+} from '@dnb/eufemia/src/components/tabs/TabsDocs'
 
 ## Properties
 
 <PropertiesTable props={TabsProperties} />
 
+## Data object
+
+<PropertiesTable props={TabsDataObject} />
+
 ## Key
 
 The key can be a string or a number.

diff --git a/packages/dnb-eufemia/src/components/tabs/TabsDocs.ts b/packages/dnb-eufemia/src/components/tabs/TabsDocs.ts
@@ -44,12 +44,9 @@ export const TabsProperties: PropertiesTableProps = {
     type: 'React.ReactNode',
     status: 'optional',
   },
-  data: {
-    doc: "defines the data structure to load as a JSON. e.g. `[{title: '...', content: 'Current tab', key: '...', hash: '...'}]`",
-    type: [
-      'string',
-      '{title: string | React.ReactNode, key: string | number, selected?: boolean, disabled?: boolean}',
-    ],
+  '[data](/uilib/components/tabs/properties/#data-object)': {
+    doc: 'defines the data structure to load as an object.',
+    type: 'object',
     status: 'required',
   },
   children: {
@@ -104,6 +101,34 @@ export const TabsProperties: PropertiesTableProps = {
   },
 }
 
+export const TabsDataObject: PropertiesTableProps = {
+  title: {
+    doc: 'The title of the tab.',
+    type: ['string', 'React.ReactNode'],
+    status: 'required',
+  },
+  key: {
+    doc: 'The unique key of the tab.',
+    type: ['string', 'number'],
+    status: 'required',
+  },
+  content: {
+    doc: 'The content of the tab.',
+    type: 'React.ReactNode',
+    status: 'optional',
+  },
+  selected: {
+    doc: 'If set to `true`, the tab will be selected.',
+    type: 'boolean',
+    status: 'optional',
+  },
+  disabled: {
+    doc: 'If set to `true`, the tab will be disabled.',
+    type: 'boolean',
+    status: 'optional',
+  },
+}
+
 export const TabsEvents: PropertiesTableProps = {
   on_change: {
     doc: '(preferred) this event gets triggered once the tab changes its selected key. Returns `{ key, selected_key, focus_key, event }`.',