Add AnchorDocs file

dnbexperience · Jun 12, 2024 · a74a642 · a74a642
1 parent eccec11
commit a74a642
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 16 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx
@@ -2,24 +2,12 @@
 showTabs: true
 ---
 
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { AnchorProperties } from '@dnb/eufemia/src/components/anchor/AnchorDocs'
+
 ## Properties
 
-| Properties                              | Description                                                                                                                                          |
-| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `element`                               | _(optional)_ define what HTML or React element should be used (e.g. `element={Link}`). Defaults to semantic `a` element.                             |
-| `href`                                  | _(optional)_ relative or absolute url.                                                                                                               |
-| `to`                                    | _(optional)_ use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url. |
-| `target`                                | _(optional)_ defines the opening method. Use `_blank` to open a new browser window/tab.                                                              |
-| `targetBlankTitle`                      | _(optional)_ the title shown as a tooltip when target is set to `_blank`.                                                                            |
-| `tooltip`                               | _(optional)_ Provide a string or a React Element to be shown as the tooltip content.                                                                 |
-| `icon`                                  | _(optional)_ [Primary Icons](/icons/primary) can be set as a string (e.g. icon="chevron_right"), other icons should be set as React elements.        |
-| `iconPosition`                          | _(optional)_ `left` (default) or `right`. Places icon to the left or to the right of the text.                                                       |
-| `noAnimation`                           | _(optional)_ removes animations if set to `true`. Defaults to `false`.                                                                               |
-| `noHover`                               | _(optional)_ removes hover effects if set to `true`. Defaults to `false`.                                                                            |
-| `noStyle`                               | _(optional)_ removes styling if set to `true`. Defaults to `false`.                                                                                  |
-| `noUnderline`                           | _(optional)_ removes underline if set to `true`. Defaults to `false`.                                                                                |
-| `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                  |
-| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                |
+<PropertiesTable props={AnchorProperties} />
 
 ### Router Link
 

diff --git a/packages/dnb-eufemia/src/components/anchor/AnchorDocs.ts b/packages/dnb-eufemia/src/components/anchor/AnchorDocs.ts
@@ -0,0 +1,76 @@
+import { PropertiesTableProps } from '../../shared/types'
+
+export const AnchorProperties: PropertiesTableProps = {
+  element: {
+    doc: 'Define what HTML or React element should be used (e.g. `element={Link}`). Defaults to semantic `a` element.',
+    type: 'React.Element',
+    status: 'optional',
+  },
+  href: {
+    doc: 'Relative or absolute url.',
+    type: 'string',
+    status: 'optional',
+  },
+  to: {
+    doc: 'Use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.',
+    type: 'string',
+    status: 'optional',
+  },
+  target: {
+    doc: 'Defines the opening method. Use `_blank` to open a new browser window/tab.',
+    type: 'string',
+    status: 'optional',
+  },
+  targetBlankTitle: {
+    doc: 'The title shown as a tooltip when target is set to `_blank`.',
+    type: 'string',
+    status: 'optional',
+  },
+  tooltip: {
+    doc: 'Provide a string or a React Element to be shown as the tooltip content.',
+    type: 'string',
+    status: 'optional',
+  },
+  icon: {
+    doc: '[Primary Icons](/icons/primary) can be set as a string (e.g. icon="chevron_right"), other icons should be set as React elements.',
+    type: 'React.Node',
+    status: 'optional',
+  },
+  iconPosition: {
+    doc: '`left` (default) or `right`. Places icon to the left or to the right of the text.',
+    type: 'string',
+    status: 'optional',
+  },
+  noAnimation: {
+    doc: 'Removes animations if set to `true`. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional',
+  },
+  noHover: {
+    doc: 'Removes hover effects if set to `true`. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional',
+  },
+  noStyle: {
+    doc: 'Removes styling if set to `true`. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional',
+  },
+  noUnderline: {
+    doc: 'Removes underline if set to `true`. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional',
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional',
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional',
+  },
+}
+
+export const AnchorEvents: PropertiesTableProps = {}