release of v10.36 (#3707)

Get inn these PRs: - [x] #3706 - [x] #3581 - [x] #3683 - [x] #3709 - [x] #3708
dnbexperience · Jun 14, 2024 · b999dd1 · b999dd1
2 parents f9a2f53 + f4363c2
commit b999dd1
Show file tree

Hide file tree

Showing 114 changed files with 2,921 additions and 1,380 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx
@@ -43,12 +43,12 @@ To force a specific state of style, use the following classes to do so:
 
 <AnchorExampleHelperClasses />
 
-### Anchor modifiers
+### Anchor modifier props
 
-- `.dnb-anchor--no-animation` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-animation">No Animation</a>
-- `.dnb-anchor--no-style` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-style">No Style</a>
-- `.dnb-anchor--no-hover` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-hover">No Hover</a>
-- `.dnb-anchor--no-underline` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-underline">No Underline</a>
+- `noAnimation` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-animation">No Animation</a>
+- `noStyle` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-style">No Style</a>
+- `noHover` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-hover">No Hover</a>
+- `noUnderline` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-underline">No Underline</a>
 
 ### Anchor with `target="_blank"`
 

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,20 +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.                                                       |
-| `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-design-system-portal/src/docs/uilib/components/table/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/table/events.mdx
@@ -2,12 +2,18 @@
 showTabs: true
 ---
 
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import {
+  TableEventProperties,
+  TrEventProperties,
+} from '@dnb/eufemia/src/components/table/TableDocs'
+
+## Table events
+
+<PropertiesTable props={TableEventProperties} showDefaultValue />
+
 ## Table Row `<Tr>` events
 
 Table Row `<Tr>` events are a part of the accordion feature and needs to be enabled with the `accordion` property on the main Table.
 
-| Events     | Description                                                                                                                            |
-| ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| `onClick`  | _(optional)_ will emit when user clicks/expands the table row. Returns a native click.                                                 |
-| `onOpened` | _(optional)_ Will emit when table row is expanded. Returns an object with the table row as the target: `{ target }`.                   |
-| `onClosed` | _(optional)_ Will emit when table row is closed (after it was open). Returns an object with the table row as the target: `{ target }`. |
+<PropertiesTable props={TrEventProperties} showDefaultValue />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.mdx
@@ -2,46 +2,28 @@
 showTabs: true
 ---
 
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import {
+  TableProperties,
+  TrProperties,
+  ThProperties,
+  TdProperties,
+} from '@dnb/eufemia/src/components/table/TableDocs'
+
 ## Properties
 
 ### `<Table>`
 
-| Properties                              | Description                                                                                                                                                                                          |
-| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `accordion`                             | _(optional)_ set to `true` if you have one or more rows that contains an accordion content. Defaults to `false`.                                                                                     |
-| `collapseAllHandleRef`                  | _(optional)_ ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows. Defaults to `undefined`.                                                   |
-| `border`                                | _(optional)_ use `true` to show borders between table data cells. Defaults to `false`.                                                                                                               |
-| `outline`                               | _(optional)_ use `true` to show a outline border around the table. Defaults to `false`.                                                                                                              |
-| `sticky`                                | _(optional)_ use `true` to enable a sticky Table header. Or use `css-position` to enable the CSS based scroll behavior. Defaults to `false`.                                                         |
-| `stickyOffset`                          | _(optional)_ defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page. Defaults to `0`.   |
-| `size`                                  | _(optional)_ spacing size inside the table header and data. Options: `small` \| `medium` \| `large` \. Defaults to `large`.                                                                          |
-| `fixed`                                 | _(optional)_ if set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Use e.g. CSS `width: 40%` on a table column to define the width. Defaults to `false`. |
-| `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                                                                  |
-| ~~`variant`~~ (not implemented yet)     | _(coming)_ defines the style variant of the table. Options: `basis` . Defaults to `generic`.                                                                                                         |
-| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                |
+<PropertiesTable props={TableProperties} showDefaultValue />
 
 ### Table Row `<Tr>`
 
-| Properties    | Description                                                                                                                                                     |
-| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `variant`     | _(optional)_ defines the variant of the current row. If set to either `odd` or `even`, the next row one will continue with the opposite. Defaults to automatic. |
-| `noWrap`      | _(optional)_ if set to `true`, the inherited header text will not wrap to new lines. Defaults to `false`.                                                       |
-| `expanded`    | _(optional)_ use `true` to render the `<Tr>` initially as expanded. Defaults to `false`.                                                                        |
-| `disabled`    | _(optional)_ use `true` to disable the `<Tr>` to be accessible as an interactive element. Defaults to `false`.                                                  |
-| `noAnimation` | _(optional)_ use `true` to disable the expand/collapse animation. Defaults to `false`.                                                                          |
+<PropertiesTable props={TrProperties} showDefaultValue />
 
 ### Table Header `<Th>`
 
-| Properties | Description                                                                                          |
-| ---------- | ---------------------------------------------------------------------------------------------------- |
-| `sortable` | _(optional)_ defines the table header as sortable if set to `true` (ascending). Defaults to `false`. |
-| `active`   | _(optional)_ defines the sortable column as the current active (ascending). Defaults to `false`.     |
-| `reversed` | _(optional)_ defines the sortable column as in reversed order (descending). Defaults to `false`.     |
-| `noWrap`   | _(optional)_ if set to `true`, the header text will not wrap to new lines. Defaults to `false`.      |
+<PropertiesTable props={ThProperties} showDefaultValue />
 
 ### Table Data `<Td>`
 
-| Properties  | Description                                                                               |
-| ----------- | ----------------------------------------------------------------------------------------- |
-| `noSpacing` | _(optional)_ if set to `true`, no padding will be added. Defaults to `false`.             |
-| `spacing`   | _(optional)_ set to `horizontal` for padding on left and right side. Defaults to `false`. |
+<PropertiesTable props={TdProperties} showDefaultValue />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.mdx
@@ -48,7 +48,7 @@ Also, this is an example of how to define a different content background color,
 
 <TabsNoBorder />
 
-### Tabs without breakout bottom border
+### Tabs without breakout
 
 <TabsNoBreakout />
 

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/...esign-system-portal/src/docs/uilib/extensions/forms/Form/Section/properties.mdx b/...esign-system-portal/src/docs/uilib/extensions/forms/Form/Section/properties.mdx
@@ -3,9 +3,14 @@ showTabs: true
 hideInMenu: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { SectionProperties } from '@dnb/eufemia/src/extensions/forms/Form/Section/SectionDocs'
 
 ## Properties
 
 <PropertiesTable props={SectionProperties} />
+
+## Translations
+
+<TranslationsTable localeKey="Section" />
diff --git a/...-system-portal/src/docs/uilib/extensions/forms/Form/SubmitButton/properties.mdx b/...-system-portal/src/docs/uilib/extensions/forms/Form/SubmitButton/properties.mdx
@@ -2,9 +2,14 @@
 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 { SubmitButtonProperties } from '@dnb/eufemia/src/extensions/forms/Form/SubmitButton/SubmitButtonDocs'
 
 ## Properties
 
 <PropertiesTable props={SubmitButtonProperties} />
+
+## Translations
+
+<TranslationsTable localeKey="SubmitButton" />
diff --git a/...m-portal/src/docs/uilib/extensions/forms/Value/BankAccountNumber/properties.mdx b/...m-portal/src/docs/uilib/extensions/forms/Value/BankAccountNumber/properties.mdx
@@ -2,9 +2,14 @@
 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 { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
 
 ## Properties
 
 <PropertiesTable props={ValueProperties} />
+
+## Translations
+
+<TranslationsTable localeKey={['BankAccountNumber.label']} />
diff --git a/...-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/properties.mdx b/...-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/properties.mdx
@@ -2,9 +2,14 @@
 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 { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
 
 ## Properties
 
 <PropertiesTable props={ValueProperties} />
+
+## Translations
+
+<TranslationsTable localeKey={['Date.label']} />
diff --git a/...design-system-portal/src/docs/uilib/extensions/forms/Value/Email/properties.mdx b/...design-system-portal/src/docs/uilib/extensions/forms/Value/Email/properties.mdx
@@ -2,9 +2,14 @@
 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 { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
 
 ## Properties
 
 <PropertiesTable props={ValueProperties} />
+
+## Translations
+
+<TranslationsTable localeKey={['Email.label']} />
diff --git a/...-design-system-portal/src/docs/uilib/extensions/forms/Value/Name/properties.mdx b/...-design-system-portal/src/docs/uilib/extensions/forms/Value/Name/properties.mdx
@@ -2,9 +2,16 @@
 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 { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
 
 ## Properties
 
 <PropertiesTable props={ValueProperties} />
+
+## Translations
+
+<TranslationsTable
+  localeKey={['FirstName.label', 'LastName.label', 'CompanyName.label']}
+/>
diff --git a/...tal/src/docs/uilib/extensions/forms/Value/NationalIdentityNumber/properties.mdx b/...tal/src/docs/uilib/extensions/forms/Value/NationalIdentityNumber/properties.mdx
@@ -2,9 +2,14 @@
 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 { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
 
 ## Properties
 
 <PropertiesTable props={ValueProperties} />
+
+## Translations
+
+<TranslationsTable localeKey={['NationalIdentityNumber.label']} />
diff --git a/...-portal/src/docs/uilib/extensions/forms/Value/OrganizationNumber/properties.mdx b/...-portal/src/docs/uilib/extensions/forms/Value/OrganizationNumber/properties.mdx
@@ -2,9 +2,14 @@
 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 { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
 
 ## Properties
 
 <PropertiesTable props={ValueProperties} />
+
+## Translations
+
+<TranslationsTable localeKey={['OrganizationNumber.label']} />
diff --git a/...-system-portal/src/docs/uilib/extensions/forms/Value/PhoneNumber/properties.mdx b/...-system-portal/src/docs/uilib/extensions/forms/Value/PhoneNumber/properties.mdx
@@ -2,9 +2,14 @@
 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 { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
 
 ## Properties
 
 <PropertiesTable props={ValueProperties} />
+
+## Translations
+
+<TranslationsTable localeKey={['PhoneNumber.label']} />
diff --git a/...m-portal/src/docs/uilib/extensions/forms/Value/PostalCodeAndCity/properties.mdx b/...m-portal/src/docs/uilib/extensions/forms/Value/PostalCodeAndCity/properties.mdx
@@ -2,6 +2,7 @@
 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 { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
 import { PostalCodeAndCityProperties } from '@dnb/eufemia/src/extensions/forms/Value/PostalCodeAndCity/PostalCodeAndCityDocs'
@@ -13,3 +14,7 @@ import { PostalCodeAndCityProperties } from '@dnb/eufemia/src/extensions/forms/V
 ## Properties
 
 <PropertiesTable props={ValueProperties} />
+
+## Translations
+
+<TranslationsTable localeKey={['PostalCodeAndCity']} />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Step/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Step/Examples.tsx
@@ -1,6 +1,67 @@
 import { Card, P } from '@dnb/eufemia/src'
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Form, Value, Wizard } from '@dnb/eufemia/src/extensions/forms'
+import {
+  Field,
+  Form,
+  Value,
+  Wizard,
+} from '@dnb/eufemia/src/extensions/forms'
+
+export const DynamicSteps = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler defaultData={{ activeSteps: 'group-1' }}>
+        <Wizard.Container id="my-wizard">
+          <Wizard.Step
+            title="Step 1"
+            activeWhen={{ path: '/activeSteps', hasValue: 'group-1' }}
+          >
+            <Form.MainHeading>Step 1</Form.MainHeading>
+            <Wizard.Buttons />
+          </Wizard.Step>
+
+          <Wizard.Step
+            title="Step 2"
+            activeWhen={{ path: '/activeSteps', hasValue: 'group-1' }}
+          >
+            <Form.MainHeading>Step 2</Form.MainHeading>
+            <Wizard.Buttons />
+          </Wizard.Step>
+
+          <Wizard.Step
+            title="Step 3"
+            activeWhen={{
+              path: '/activeSteps',
+              withValue: (value: string) =>
+                ['group-1', 'group-2'].includes(value),
+            }}
+          >
+            <Form.MainHeading>Step 3</Form.MainHeading>
+            <Wizard.Buttons />
+          </Wizard.Step>
+
+          <Wizard.Step
+            title="Step 4"
+            activeWhen={{ path: '/activeSteps', hasValue: 'group-2' }}
+          >
+            <Form.MainHeading>Step 4</Form.MainHeading>
+            <Wizard.Buttons />
+          </Wizard.Step>
+        </Wizard.Container>
+
+        <Field.Selection
+          path="/activeSteps"
+          variant="button"
+          optionsLayout="horizontal"
+          top
+        >
+          <Field.Option value="group-1" title="Group 1" />
+          <Field.Option value="group-2" title="Group 2" />
+        </Field.Selection>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
 
 export const EditButton = () => {
   return (

diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Step/demos.mdx b/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Step/demos.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+import * as Examples from './Examples'
+
 ## Demos
 
-See [WizardContainer demo section](/uilib/extensions/forms/Wizard/Container/demos) for examples.
+See [WizardContainer demo section](/uilib/extensions/forms/Wizard/Container/demos) for more examples.
+
+### Dynamic steps
+
+<Examples.DynamicSteps />