release of v10.46 (#3879)

.github/workflows/e2e.yml

@@ -86,19 +86,7 @@ jobs:
         if: env.RUN_POST_BUILD == 'true'
         run: yarn workspace @dnb/eufemia postbuild:ci
 
-      - name: Get current date
-        id: date
-        run: echo "::set-output name=timestamp::$(date +'%Y-%W')"
-
-      - name: Use Gatsby cache
-        uses: actions/cache@v3
-        id: gatsby-cache
-        with:
-          path: |
-            ./packages/dnb-design-system-portal/.cache
-            ./packages/dnb-design-system-portal/public
-          key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-gatsby-${{ steps.date.outputs.timestamp }}
-          restore-keys: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-gatsby-
+      #     restore-keys: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-gatsby-
 
       - name: Build portal
         run: yarn workspace dnb-design-system-portal build:visual-test
@@ -177,20 +165,6 @@ jobs:
       - name: Postbuild Library
         run: yarn workspace @dnb/eufemia postbuild:ci
 
-      - name: Get current date
-        id: date
-        run: echo "::set-output name=timestamp::$(date +'%Y-%W')"
-
-      - name: Use Gatsby cache
-        uses: actions/cache@v3
-        id: gatsby-cache
-        with:
-          path: |
-            ./packages/dnb-design-system-portal/.cache
-            ./packages/dnb-design-system-portal/public
-          key: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-gatsby-${{ steps.date.outputs.timestamp }}
-          restore-keys: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-gatsby-
-
       - name: Build portal
         run: yarn workspace dnb-design-system-portal build
 

packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click.mdx

@@ -0,0 +1,15 @@
+---
+title: 'CopyOnClick'
+description: 'The CopyOnClick component allows users to copy text to their clipboard simply by clicking on it.'
+showTabs: true
+hideTabs:
+  - title: Events
+theme: 'sbanken'
+status: 'new'
+---
+
+import CopyOnClickInfo from 'Docs/uilib/components/copy-on-click/info'
+import CopyOnClickDemos from 'Docs/uilib/components/copy-on-click/demos'
+
+<CopyOnClickInfo />
+<CopyOnClickDemos />

packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/Examples.tsx

@@ -0,0 +1,38 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+import { CopyOnClick, P } from '@dnb/eufemia/src'
+
+export const Default = () => {
+  return (
+    <ComponentBox>
+      <P>
+        <CopyOnClick data-visual-test="copy-on-click-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+          cursus pharetra elit in bibendum. Praesent nunc ipsum, convallis
+          eget convallis gravida, vehicula vitae metus.
+        </CopyOnClick>
+      </P>
+    </ComponentBox>
+  )
+}
+
+export const CopyCursorHidden = () => {
+  return (
+    <ComponentBox>
+      <P>
+        <CopyOnClick
+          data-visual-test="copy-on-click-cursor-disabled"
+          showCursor={false}
+        >
+          Praesent nunc ipsum, convallis eget convallis gravida, vehicula
+          vitae metus.
+        </CopyOnClick>
+      </P>
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/demos.mdx

@@ -0,0 +1,15 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demo
+
+### Default
+
+<Examples.Default />
+
+### CopyOnClick cursor hidden
+
+<Examples.CopyCursorHidden />

packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/info.mdx

@@ -0,0 +1,22 @@
+---
+showTabs: true
+---
+
+## Description
+
+The `CopyOnClick` component provides a convenient way to copy text to the clipboard with a single click. This component is particularly useful in scenarios where users need to quickly copy text, such as when copying codes, IDs, URLs, or any other text content that needs to be easily shared or reused.
+Upon hovering, the component can optionally provide visual feedback to the user, displaying a copy cursor or other visual cues that indicate the component's functionality.
+Upon clicking, the component provides a visual feedback to the user, displaying a tooltip with a confirmation message, indicating that the text has been successfully copied.
+
+### Example
+
+Here’s a simple usage example of the `CopyOnClick` component:
+
+```jsx
+import { CopyOnClick, P } from '@dnb/eufemia'
+render(
+  <P>
+    <CopyOnClick>This is the text to copy!</CopyOnClick>
+  </P>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/properties.mdx

@@ -0,0 +1,10 @@
+---
+showTabs: true
+---
+
+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} />

packages/dnb-design-system-portal/src/docs/uilib/components/pagination/properties.mdx

@@ -32,6 +32,7 @@ showTabs: true
 | `more_pages`                            | _(optional)_ The title used in the dots. Relevant for screen-readers. Defaults to `%s flere sider`.                                                                                                                                                                                                |
 | `is_loading_text`                       | _(optional)_ Shown until new content is inserted in to the page. Defaults to `Laster nytt innhold`.                                                                                                                                                                                                |
 | `load_button_text`                      | _(optional)_ Used during infinity mode. If `use_load_button` is set to `true`, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.                                                                                                         |
+| `loadButton`                            | _(optional)_ Used to set load button text and icon aligment. Accepts a function returning a ReactNode too, so you can replace the button with your own component.                                                                                                                                  |
 | `disabled`                              | _(optional)_ if set to `true`, all pagination bar buttons are disabled.                                                                                                                                                                                                                            |
 | `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.                                                                                                                                                                                                                              |

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Provider/events.mdx

@@ -8,24 +8,3 @@ import { ProviderEvents } from '@dnb/eufemia/src/extensions/forms/DataContext/Pr
 ## Events
 
 <PropertiesTable props={ProviderEvents} />
-
-### onSubmit parameters
-
-The `onSubmit` event returns additional methods to can call:
-
-- `resetForm` Deletes `sessionStorage` and browser stored autocomplete data.
-- `clearData` Empties the given/internal data set.
-
-```jsx
-render(
-  <Form.Handler
-    onSubmit={(data, { resetForm, clearData }) => {
-      resetForm()
-      clearData()
-    }}
-    sessionStorageId="session-key"
-  >
-    <Form.SubmitButton />
-  </Form.Handler>,
-)
-```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/Examples.tsx

@@ -293,8 +293,9 @@ export const FilterData = () => {
           return (
             <Form.Handler
               id={id}
-              onSubmit={(data) => console.log('onSubmit', data)}
-              filterSubmitData={filterDataHandler}
+              onSubmit={(data, { filterData }) => {
+                console.log('onSubmit', filterData(filterDataHandler))
+              }}
             >
               <Flex.Stack>
                 <Field.Boolean label="Disabled" path="/disabled" />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/demos.mdx

@@ -38,14 +38,12 @@ This example is only for demo purpose and will NOT redirect to a new location. I
 
 ### Filter your data
 
-By using the `filterSubmitData` prop you can filter out data that you don't want to send to your server.
+By using the `filterData` method from the `onSubmit` event callback you can filter out data that you don't want to send to your server.
 
-It will filter out data from the `onSubmit` event property.
+More info about `filterData` can be found in the [Getting Started](/uilib/extensions/forms/getting-started/#filter-data) section.
 
 In this example we filter out all fields that are disabled.
 
-More info about `filterData` can be found in the [Getting Started](/uilib/extensions/forms/getting-started/#filter-data) section.
-
 <Examples.FilterData />
 
 ### With session storage

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx

@@ -129,7 +129,7 @@ It will flush the storage once the form gets submitted.
 
 ## Filter data
 
-You can use the `filterSubmitData` method to filter your `onSubmit` data. It might be useful, for example, to **exclude disabled fields** or filter out empty fields. The callback function receives the following arguments:
+You can use the `filterData` method to filter your `onSubmit` data. It might be useful, for example, to **exclude disabled fields** or filter out empty fields. The callback function receives the following arguments:
 
 1. `path` as the first argument.
 2. `value` as the second argument.
@@ -142,8 +142,42 @@ It returns the filtered form data.
 
 The [useData](/uilib/extensions/forms/Form/useData/#filter-data) hook and the [getData](/uilib/extensions/forms/Form/getData/#filter-data) method also returns a `filterData` function you can use to filter data the same way.
 
-In the demo section is an example of how to use the `filterSubmitData` method.
+In the demo section is an example of how to use the `filterData` method.
 
 ### Filter arrays
 
-You can filter arrays by using the `filterSubmitData` method. You can find more information about this in the [Iterate.Array](/uilib/extensions/forms/Iterate/Array/#filter-data) docs.
+You can filter arrays by using the `filterData` method. You can find more information about this in the [Iterate.Array](/uilib/extensions/forms/Iterate/Array/#filter-data) docs.
+
+### onSubmit parameters
+
+The `onSubmit` event returns additional methods you can call:
+
+- `filterData` Filters the given/internal data set.
+- `resetForm` Deletes `sessionStorage` and browser stored autocomplete data.
+- `clearData` Empties the given/internal data set.
+
+```jsx
+import { Form } from '@dnb/eufemia/extensions/forms'
+
+const myFilter = {
+  '/myPath': (value) => {
+    return value.length > 0
+  },
+}
+
+const MyForm = () => {
+  return (
+    <Form.Handler
+      onSubmit={(data, { filterData, resetForm, clearData }) => {
+        resetForm()
+        clearData()
+
+        const myData = filterData(myFilter)
+      }}
+      sessionStorageId="session-key"
+    >
+      <Form.SubmitButton />
+    </Form.Handler>
+  )
+}
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/properties.mdx

@@ -13,4 +13,6 @@ import { SectionProperties } from '@dnb/eufemia/src/extensions/forms/Form/Sectio
 
 ## Translations
 
-<TranslationsTable localeKey="Section" />
+<TranslationsTable
+  localeKey={['SectionEditContainer', 'SectionViewContainer']}
+/>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/getData/Examples.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Section } from '@dnb/eufemia/src'
-import { Form, Field, Value } from '@dnb/eufemia/src/extensions/forms'
+import { Flex, Section } from '@dnb/eufemia/src'
+import { Form, Field } from '@dnb/eufemia/src/extensions/forms'
 
 export function Default() {
   return (
@@ -31,7 +31,11 @@ export function FilterData() {
       {() => {
         // Method A (if you know the paths)
         const filterDataPaths = {
-          '/foo': ({ value }) => value !== 'bar',
+          '/foo': ({ value }) => {
+            if (value === 'foo') {
+              return false
+            }
+          },
         }
 
         // Method B (will iterate over all fields regardless of the path)
@@ -44,24 +48,24 @@ export function FilterData() {
         const Component = () => {
           return (
             <Form.Handler id="filter-data">
-              <Value.String path="/foo" value="foo" />{' '}
-              <Value.String path="/bar" value="baz" />
+              <Flex.Stack>
+                <Field.String path="/foo" value="foo" />
+                <Field.String path="/bar" value="bar" />
+              </Flex.Stack>
             </Form.Handler>
           )
         }
 
-        const { data, filterData } = Form.getData('filter-data')
+        const { filterData } = Form.getData('filter-data')
 
         return (
-          <>
+          <Flex.Stack>
             <Component />
-
             <Section backgroundColor="sand-yellow" innerSpace>
-              <pre>{JSON.stringify(data)}</pre>
               <pre>{JSON.stringify(filterData(filterDataPaths))}</pre>
               <pre>{JSON.stringify(filterData(filterDataHandler))}</pre>
             </Section>
-          </>
+          </Flex.Stack>
         )
       }}
     </ComponentBox>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/getData/demos.mdx

@@ -10,6 +10,6 @@ import * as Examples from './Examples'
 
 <Examples.Default />
 
-### Filter data
+### Filter your data
 
 <Examples.FilterData />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/getData/info.mdx

@@ -39,7 +39,7 @@ Related helpers:
 
 You can use the `filterData` method to filter your data.
 
-You simply give it the same kind of callback function as you would with the `Form.Handler` [filterSubmitData](/uilib/extensions/forms/Form/Handler/demos/#filter-your-data) property method.
+You simply give it the [same kind of filter](/uilib/extensions/forms/Form/Handler/demos/#filter-your-data) as you would within the `onSubmit` event callback.
 
 The callback function receives the following arguments:
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useData/Examples.tsx

@@ -151,9 +151,9 @@ export function FilterData() {
                     />
                   </Form.Visibility>
                 </Form.Visibility>
-              </Flex.Stack>
 
-              <Output />
+                <Output />
+              </Flex.Stack>
             </Form.Handler>
           )
         }
@@ -170,9 +170,13 @@ export function FilterData() {
             >
               <ScrollView>
                 <pre>
-                  Filtered: {JSON.stringify(filterData(filterDataPaths))}
+                  Filtered: <br />
+                  {JSON.stringify(filterData(filterDataPaths), null, 2)}
+                </pre>
+                <pre>
+                  All data: <br />
+                  {JSON.stringify(data, null, 2)}
                 </pre>
-                <pre>All data: {JSON.stringify(data)}</pre>
               </ScrollView>
             </Section>
           )

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useData/info.mdx

@@ -135,7 +135,7 @@ function MyForm() {
 
 You can use the `filterData` method to filter your data. Check out [the example below](#filter-your-data).
 
-You simply give it the same kind of callback function as you would with the `Form.Handler` [filterSubmitData](/uilib/extensions/forms/Form/Handler/demos/#filter-your-data) property method.
+You simply give it the [same kind of filter](/uilib/extensions/forms/Form/Handler/demos/#filter-your-data) as you would within the `onSubmit` event callback.
 
 The callback function receives the following arguments: