release of v10.47 (#3887)

dnbexperience · Sep 10, 2024 · d264050 · d264050
2 parents b8a9c48 + b3c44ba
commit d264050
Show file tree

Hide file tree

Showing 142 changed files with 3,455 additions and 514 deletions.
diff --git a/.github/workflows/icons-lib.yml b/.github/workflows/icons-lib.yml
@@ -103,7 +103,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Re-store portal artifacts
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4.1.7
         with:
           name: portal-build-artifact
           path: ./packages/dnb-design-system-portal/public

diff --git a/...ges/dnb-design-system-portal/src/docs/contribute/style-guides/documentation.mdx b/...ges/dnb-design-system-portal/src/docs/contribute/style-guides/documentation.mdx
@@ -1,7 +1,6 @@
 ---
 title: 'Documentation'
 order: 3
-status: 'new'
 ---
 
 # Documentation

diff --git a/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v12-info.mdx b/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v12-info.mdx
@@ -0,0 +1,31 @@
+---
+draft: true
+---
+
+# v12
+
+- [v12](#v12)
+  - [Migration](#migration)
+  - [Install](#install)
+  - [Component changes](#component-changes)
+    - [Accordion](#accordion)
+
+## Migration
+
+v12 of @dnb/eufemia contains _breaking changes_. As a migration process, you can simply search and replace:
+
+## Install
+
+To upgrade to @dnb/eufemia v12 with NPM, use:
+
+```bash
+$ npm i @dnb/eufemia@12
+# or
+$ yarn add @dnb/eufemia@12
+```
+
+## Component changes
+
+### [Accordion](/uilib/components/accordion)
+
+1. Find the `expandBehaviour` property and replace it with `expandBehavior`.
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,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 { AnchorProperties } from '@dnb/eufemia/src/components/anchor/AnchorDocs'
 
@@ -22,3 +23,7 @@ render(
   </Anchor>,
 )
 ```
+
+## Translations
+
+<TranslationsTable localeKey="Anchor" />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/Examples.tsx
@@ -89,7 +89,7 @@ export const AriaLivePlayground = () => (
 )
 
 export const AriaLiveAdditions = () => (
-  <ComponentBox hideCode scope={{ FieldBlock }}>
+  <ComponentBox hideCode>
     {() => {
       const defaultData = {
         enabled: false,

diff --git a/.../dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx b/.../dnb-design-system-portal/src/docs/uilib/components/autocomplete/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 { autocompleteProperties } from '@dnb/eufemia/src/components/autocomplete/AutocompleteDocs'
 import { DrawerListProperties } from '@dnb/eufemia/src/fragments/drawer-list/DrawerListDocs'
@@ -69,3 +70,7 @@ const data = {
   b: 'B',
 }
 ```
+
+## Translations
+
+<TranslationsTable localeKey="Autocomplete" />
diff --git a/...es/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.mdx b/...es/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 ### `Breadcrumb` properties
@@ -36,3 +38,7 @@ showTabs: true
 | `skeleton`          | _(optional)_ Applies loading skeleton.                                                             |
 
 **NB:** When interactive, the item is an inherited [Button](/uilib/components/button/). You can therefore swap out the underlying HTML element, by providing a new `element` or use other Button properties, such as `to` instead of `href`.
+
+## Translations
+
+<TranslationsTable localeKey="Breadcrumb" />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx
@@ -78,6 +78,10 @@ Large Signal button with medium sized icon. To import custom icons, use: `import
 
 ### Icon button
 
+When the button has no text an `aria-label` attribute is required for accessibility. And a `title` attribute is recommended for mouse hover.
+
+We automatically add an `aria-label` with the same value as `title` if `text` and `children` props are undefined. So in most cases you only have to set the `title` prop.
+
 <ButtonIcon />
 
 ### Custom button content

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.mdx
@@ -8,7 +8,7 @@ showTabs: true
 | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `type`                                  | _(optional)_ `button`, `reset` or `submit` for the `type` HTML attribute. Defaults to `button` for legacy reasons.                                                                                                                                                     |
 | `text` or `children`                    | _(optional)_ the content of the button can be a string or a React Element.                                                                                                                                                                                             |
-| `title`                                 | _(optional)_ title of the button. Optional, but should always be included because of accessibility.                                                                                                                                                                    |
+| `aria-label` or `title`                 | _(optional)_ required if there is no text in the button. If `text` and `children` are undefined, setting the `title` prop will automatically set `aria-label` with the same value.                                                                                     |
 | `variant`                               | _(optional)_ defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only).                                                                                                     |
 | `size`                                  | _(optional)_ the size of the button. For now there is `small`, `medium`, `default` and `large`.                                                                                                                                                                        |
 | `icon`                                  | _(optional)_ to be included in the button. [Primary Icons](/icons/primary) can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements.                                                                                          |

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/Examples.tsx
@@ -36,3 +36,15 @@ export const CopyCursorHidden = () => {
     </ComponentBox>
   )
 }
+
+export const CopyContent = () => {
+  return (
+    <ComponentBox>
+      <P>
+        <CopyOnClick copyContent="content to copy">
+          content to display
+        </CopyOnClick>
+      </P>
+    </ComponentBox>
+  )
+}
diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/demos.mdx b/...ages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/demos.mdx
@@ -10,6 +10,12 @@ import * as Examples from './Examples'
 
 <Examples.Default />
 
-### CopyOnClick cursor hidden
+### Cursor hidden
 
 <Examples.CopyCursorHidden />
+
+### Copy content
+
+Used when the copied value should differ from the visually shown value(`children`).
+
+<Examples.CopyContent />
diff --git a/...dnb-design-system-portal/src/docs/uilib/components/copy-on-click/properties.mdx b/...dnb-design-system-portal/src/docs/uilib/components/copy-on-click/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 { CopyOnClickProperties } from '@dnb/eufemia/src/components/copy-on-click/CopyOnClickDocs'
 
 ## Properties
 
 <PropertiesTable props={CopyOnClickProperties} />
+
+## Translations
+
+<TranslationsTable localeKey="CopyOnClick" />
diff --git a/...s/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx b/...s/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import {
   DatePickerDateFns,
   DatePickerDateFnsRange,
@@ -57,6 +58,10 @@ import {
 | `size`                                  | _(optional)_ the sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`.                                                                                                                                                                                                     |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                                                                                                                                |
 
+## Translations
+
+<TranslationsTable localeKey="DatePicker" />
+
 ## Shortcuts
 
 You may use [date-fns](https://date-fns.org) to make date calculations.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import DialogPropTable from 'Docs/uilib/components/dialog/prop-table'
 import ModalPropTable from 'Docs/uilib/components/modal/prop-table-camel-case'
 
@@ -15,3 +16,7 @@ The properties of [Modal](/uilib/components/modal) formatted as camel case are a
 See the table below:
 
 <ModalPropTable />
+
+## Translations
+
+<TranslationsTable localeKey="Dialog" />
diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.mdx b/...ages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import DrawerListProperties from 'Docs/uilib/components/fragments/drawer-list/properties'
 
 ## Properties
@@ -93,3 +94,7 @@ const data = {
   b: 'B',
 }
 ```
+
+## Translations
+
+<TranslationsTable localeKey="Dropdown" />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/fragments.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/fragments.mdx
@@ -18,7 +18,11 @@ You may use them only to build new components from.
 You import them like so:
 
 ```jsx
-import { DrawerList, ScrollView } from '@dnb/eufemia/fragments'
+import {
+  DrawerList,
+  ScrollView,
+  TextCounter,
+} from '@dnb/eufemia/fragments'
 ```
 
 ## Available Fragments

diff --git a/...n-system-portal/src/docs/uilib/components/fragments/text-counter/properties.mdx b/...n-system-portal/src/docs/uilib/components/fragments/text-counter/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 | Properties                              | Description                                                                                                                      |
@@ -10,3 +12,7 @@ showTabs: true
 | `max`                                   | _(required)_ The maximum number of characters allowed.                                                                           |
 | `variant`                               | _(optional)_ The counting variant. Can be either `up` (counts up from zero) or `down` (counts down from max). Default is `down`. |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                            |
+
+## Translations
+
+<TranslationsTable localeKey="TextCounter" />
diff --git a/.../dnb-design-system-portal/src/docs/uilib/components/global-error/properties.mdx b/.../dnb-design-system-portal/src/docs/uilib/components/global-error/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 | Properties | Description                                                                                                                      |
@@ -16,3 +18,7 @@ showTabs: true
 | `skeleton` | _(optional)_ applies a loading skeleton to all included elements.                                                                |
 | `locale`   | _(optional)_ set a [supported locale](/uilib/usage/customisation/localization/) if needed.                                       |
 | `children` | _(optional)_ to display additional related content, like useful links etc.                                                       |
+
+## Translations
+
+<TranslationsTable localeKey="GlobalError" />
diff --git a/...dnb-design-system-portal/src/docs/uilib/components/global-status/properties.mdx b/...dnb-design-system-portal/src/docs/uilib/components/global-status/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import { GlobalStatusExampleControllers } from 'Docs/uilib/components/global-status/Examples'
 
 ## Properties
@@ -26,6 +27,10 @@ import { GlobalStatusExampleControllers } from 'Docs/uilib/components/global-sta
 | `omit_set_focus`                        | _(optional)_ set to `true` to omit setting the focus during visibility. Defaults to `false`. Additionally, there is `omit_set_focus_on_update` which is set to `true` by default.                        |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                    |
 
+## Translations
+
+<TranslationsTable localeKey="GlobalStatus" />
+
 ## Item Object
 
 ```js

diff --git a/...s/dnb-design-system-portal/src/docs/uilib/components/help-button/properties.mdx b/...s/dnb-design-system-portal/src/docs/uilib/components/help-button/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import { HelpButtonRenderExample } from 'Docs/uilib/components/help-button/Examples'
 
 ## Properties
@@ -14,6 +15,10 @@ import { HelpButtonRenderExample } from 'Docs/uilib/components/help-button/Examp
 | `render`                                      | _(optional)_ accepts a function that returns a valid React Element. See example below. |
 | [Button](/uilib/components/button/properties) | _(optional)_ accepts all Button properties, if `children` is not given.                |
 
+## Translations
+
+<TranslationsTable localeKey="HelpButton" />
+
 ## How to use `render`
 
 <HelpButtonRenderExample />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.mdx
@@ -3,8 +3,13 @@ showTabs: true
 ---
 
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import { inputProperties } from '@dnb/eufemia/src/components/input/InputDocs'
 
 ## Properties
 
 <PropertiesTable props={inputProperties} />
+
+## Translations
+
+<TranslationsTable localeKey="Input" />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import ModalPropTable from 'Docs/uilib/components/modal/prop-table'
 import { ModalExampleTriggerProps } from 'Docs/uilib/components/modal/Examples'
 
@@ -14,3 +15,7 @@ import { ModalExampleTriggerProps } from 'Docs/uilib/components/modal/Examples'
 Properties targeting the trigger component (Button), but they will be set the same way as all the other properties:
 
 <ModalExampleTriggerProps />
+
+## Modal Translations
+
+<TranslationsTable localeKey="Modal" />
diff --git a/...dnb-design-system-portal/src/docs/uilib/components/number-format/properties.mdx b/...dnb-design-system-portal/src/docs/uilib/components/number-format/properties.mdx
@@ -4,6 +4,8 @@ redirect_from:
   - /uilib/components/number/properties
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 | Properties                              | Description                                                                                                                                                                                                                                                                                                                                                                                           |
@@ -36,3 +38,7 @@ redirect_from:
 | `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                                                                                                                                                                                                                                                                   |
 | `tooltip`                               | _(optional)_ Provide a string or a React Element to be shown as the tooltip content.                                                                                                                                                                                                                                                                                                                  |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                                                                                                                                                 |
+
+## Translations
+
+<TranslationsTable localeKey="NumberFormat" />
diff --git a/...es/dnb-design-system-portal/src/docs/uilib/components/pagination/properties.mdx b/...es/dnb-design-system-portal/src/docs/uilib/components/pagination/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 | Properties                              | Description                                                                                                                                                                                                                                                                                        |
@@ -37,6 +39,10 @@ showTabs: true
 | `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.                                                                                                                                                                                                                              |
 
+## Translations
+
+<TranslationsTable localeKey="Pagination" />
+
 ### Content as a render prop
 
 The content can be either a function or a React Node. A function may be more useful if `infinity` mode is used.

diff --git a/...esign-system-portal/src/docs/uilib/components/progress-indicator/properties.mdx b/...esign-system-portal/src/docs/uilib/components/progress-indicator/properties.mdx
@@ -4,6 +4,7 @@ redirect_from:
   - /uilib/components/progress/properties
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import {
   ProgressIndicatorProperties,
@@ -15,6 +16,10 @@ import {
 
 <PropertiesTable props={ProgressIndicatorProperties} showDefaultValue />
 
+## Translations
+
+<TranslationsTable localeKey="ProgressIndicator" />
+
 ### Data object `customColors`
 
 <PropertiesTable props={CustomColorsData} showDefaultValue />