release of v10.22 (#3342)

packages/dnb-design-system-portal/package.json

@@ -119,7 +119,7 @@
     "stylelint-config-recommended": "12.0.0",
     "stylelint-config-standard-scss": "9.0.0",
     "svg-react-loader": "0.4.6",
-    "typescript": "5.0.4",
+    "typescript": "5.2.2",
     "unist-util-visit": "^2"
   },
   "buildVersion": "[LOCAL BUILD]",

packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/Examples.tsx

@@ -16,8 +16,8 @@ export const BreadcrumbSingle = () => (
   </ComponentBox>
 )
 
-export const BreadcrumbMultipleData = () => (
-  <ComponentBox data-visual-test="breadcrumb-multiple">
+export const BreadcrumbDefault = () => (
+  <ComponentBox data-visual-test="breadcrumb-default">
     {() => {
       // You can also import pages from a store and only do a remapping
       const pages = [
@@ -44,8 +44,8 @@ export const BreadcrumbMultipleData = () => (
   </ComponentBox>
 )
 
-export const BreadcrumbMultiple = () => (
-  <ComponentBox data-visual-test="breadcrumb-multiple-children">
+export const BreadcrumbChildren = () => (
+  <ComponentBox data-visual-test="breadcrumb-children">
     <Breadcrumb spacing>
       <Breadcrumb.Item
         onClick={() => {
@@ -70,7 +70,7 @@ export const BreadcrumbMultiple = () => (
   </ComponentBox>
 )
 
-export const BreadcrumbVariants = () => (
+export const BreadcrumbCollapse = () => (
   <ComponentBox data-visual-test="breadcrumb-collapse">
     {() => {
       const pages = [
@@ -88,16 +88,13 @@ export const BreadcrumbVariants = () => (
         },
       ]
 
-      return (
-        // Try changing variant here
-        <Breadcrumb variant="collapse" data={pages} spacing />
-      )
+      return <Breadcrumb variant="collapse" data={pages} spacing />
     }}
   </ComponentBox>
 )
 
-export const BreadcrumbCollapseOpen = () => (
-  <ComponentBox data-visual-test="breadcrumb-collapse-open">
+export const BreadcrumbMultiple = () => (
+  <ComponentBox data-visual-test="breadcrumb-multiple">
     {() => {
       const pages = [
         {
@@ -112,16 +109,13 @@ export const BreadcrumbCollapseOpen = () => (
           text: 'Components',
           href: '/uilib/components',
         },
+        {
+          text: 'Breadcrumbs',
+          href: '/uilib/components/breadcrumbs',
+        },
       ]
 
-      return (
-        <Breadcrumb
-          variant="collapse"
-          data={pages}
-          isCollapsed={false}
-          spacing
-        />
-      )
+      return <Breadcrumb variant="multiple" data={pages} spacing />
     }}
   </ComponentBox>
 )

packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/demos.mdx

@@ -3,46 +3,45 @@ showTabs: true
 ---
 
 import {
+  BreadcrumbDefault,
+  BreadcrumbChildren,
   BreadcrumbSingle,
+  BreadcrumbCollapse,
   BreadcrumbMultiple,
-  BreadcrumbMultipleData,
-  BreadcrumbVariants,
-  BreadcrumbCollapseOpen,
 } from 'Docs/uilib/components/breadcrumb/Examples'
 
 ## Demos
 
-### Multiple Breadcrumb (recommended)
+### Breadcrumb
 
-To ensure the correct use of the Breadcrumb, we recommend passing down pages as a variable to `data`. If you have other specific cases, check out how to customize with [children in Multiple Breadcrumb](/uilib/components/breadcrumb/#multiple-breadcrumb-with-children).
+To ensure the correct use of the Breadcrumb, we recommend passing down pages as a variable to `data`. If you have other specific cases, check out how to customize with [children in Breadcrumb](/uilib/components/breadcrumb/#pages-as-child-components).
 
-<BreadcrumbMultipleData />
-
-Some extra functionality is provided to this variant:
+<BreadcrumbDefault />
 
 - The first item, `Home`, gets assigned a home icon and an appropriate text label based on the current locale.
 - The last item in pages will be static text, corresponding to the current page.
-- Another variant, `collapse`, appears for small screens.
+- Breadcumb will collapse on small screens
 
-### Single Breadcrumb
+### Pages as child components
 
-When you only want a single button for `back`, this variant is recommended and default when neither `data` nor `children` is present.
+For customizing the Breadcrumb to fit your needs, you can add each page as a child component.
 
-<BreadcrumbSingle />
+<BreadcrumbChildren />
+
+### Single Breadcrumb
 
-### Multiple Breadcrumb with children
+When you only want a single button for `back`.
 
-For customizing the Breadcrumb to fit your needs, this variant can be utilized.
+<BreadcrumbSingle />
 
-<BreadcrumbMultiple />
+This can also be forced using the `variant="single"` prop.
 
-### Setting property 'variant'
+### Always be collapsed (`variant="collapse"`)
 
-Property variant is by default set based on the combination of children and data properties, and also screen size.
-If you want to override this property, pass in the prop `variant` to be either `single`, `multiple`, or `collapse`.
+Expands when user clicks
 
-<BreadcrumbVariants />
+<BreadcrumbCollapse />
 
-### Setting property 'variant' and overriding 'isCollapsed'
+### Never collapse (`variant="multiple"`)
 
-<BreadcrumbCollapseOpen />
+<BreadcrumbMultiple />

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

@@ -11,7 +11,7 @@ showTabs: true
 | `data`                                  | _(optional)_ List of pages to render as breadcrumbitems. Each object in data can include all properties from [BreadcrumbItem props](/uilib/components/breadcrumb/properties#breadcrumbitem-properties). |
 | `children`                              | _(optional)_ Content of the component. Can be used instead of property `data`, by adding Breadcrumbitem children `<Breadcrumb.Item {...props} />`.                                                      |
 | `skeleton`                              | _(optional)_ Applies loading skeleton.                                                                                                                                                                  |
-| `variant`                               | _(optional)_ Override the variant of the component. Options: `single` \| `multiple` \| `collapse`.                                                                                                      |
+| `variant`                               | _(optional)_ Defaults to 'responsive' or 'single' depending on content. Options: `responsive` \| `single` \| `multiple` \| `collapse` .                                                                 |
 | `onClick`                               | _(optional)_ Handle click event on "Back" for variant `single` and "Back to..." for variant `collapse`.                                                                                                 |
 | `href`                                  | _(optional)_ For variant `single`, set `href` for button click. Can be used instead of property `onClick`.                                                                                              |
 | `navText`                               | _(optional)_ Every `<nav>` on a page needs an unique aria-label text.                                                                                                                                   |

packages/dnb-design-system-portal/src/docs/uilib/components/button/Examples.tsx

@@ -6,8 +6,8 @@
 import React from 'react'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import { bell_medium as Bell, question } from '@dnb/eufemia/src/icons'
-import { Button, IconPrimary } from '@dnb/eufemia/src'
-import { VisibilityByTheme } from '@dnb/eufemia/src/shared'
+import { Button, IconPrimary, Section } from '@dnb/eufemia/src'
+import { VisibilityByTheme, Theme } from '@dnb/eufemia/src/shared'
 
 export const ButtonPrimary = () => (
   <ComponentBox>
@@ -524,3 +524,30 @@ export const TertiaryButtonAlignment = () => {
     </ComponentBox>
   )
 }
+
+export const ButtonHasDarkBackground = () => (
+  <ComponentBox hideCode scope={{ Theme }}>
+    <Section innerSpace="1rem" backgroundColor="var(--sb-color-purple)">
+      <Theme.Provider darkBackground>
+        <Button data-visual-test="button-primary-on-dark" right>
+          Primary button
+        </Button>
+        <Button
+          data-visual-test="button-secondary-on-dark"
+          right
+          variant="secondary"
+        >
+          Secondary button
+        </Button>
+        <Button
+          data-visual-test="button-tertiary-on-dark"
+          variant="tertiary"
+          icon_position="left"
+          icon="chevron_left"
+        >
+          Tertiary button
+        </Button>
+      </Theme.Provider>
+    </Section>
+  </ComponentBox>
+)

packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx

@@ -17,6 +17,7 @@ import {
   ButtonSignal,
   ButtonSignalLarge,
   ButtonIcon,
+  ButtonHasDarkBackground,
 } from 'Docs/uilib/components/button/Examples'
 
 ## Demos
@@ -90,3 +91,14 @@ This is, as all of the demos, only an example of how to achieve various needs, a
 <ButtonErrorState />
 
 </VisibleWhenVisualTest>
+
+<VisibilityByTheme visible="sbanken">
+
+### Button on dark background
+
+When placing the button on a dark background wrap the content of the dark section with `<Theme.Provider darkBackground>`
+to get the correct styles.
+
+<ButtonHasDarkBackground />
+
+</VisibilityByTheme>

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

@@ -13,7 +13,7 @@ import { GlobalStatusExampleControllers } from 'Docs/uilib/components/global-sta
 | `text` or `children`                    | _(optional)_ the text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.                                                                  |
 | `items`                                 | _(optional)_ the items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. See **Item Object** example below.    |
 | `icon`                                  | _(optional)_ the icon shown before the status title. Defaults to `exclamation`.                                                                                                                          |
-| `state`                                 | _(optional)_ defines the visual appearance of the status. There are two main statuses `error`, `warning`, `info` and `success`. The default status is `error`.                                           |
+| `state`                                 | _(optional)_ defines the visual appearance of the status. There are four main statuses `error`, `warning`, `info` and `success`. The default status is `error`.                                          |
 | `icon_size`                             | _(optional)_ the icon size of the title icon shows. Defaults to `medium`.                                                                                                                                |
 | `show`                                  | _(optional)_ set to `true` or `false` to manually make the global status visible. Defaults to `true`.                                                                                                    |
 | `autoclose`                             | _(optional)_ set to `true` to automatically close the global status if there are no more left items in the provider stack. Defaults to `true`.                                                           |

packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx

@@ -795,6 +795,74 @@ export const TableAccordion = () => (
   </ComponentBox>
 )
 
+export const TableAccordionRow = () => (
+  <ComponentBox hideCode data-visual-test="table-accordion-rows">
+    <Table.ScrollView>
+      <Table accordion accordionChevronPlacement="end">
+        <thead>
+          <Tr>
+            <Th>Column A</Th>
+            <Th>Column B</Th>
+            <Th>Column C</Th>
+            <Th>Column D</Th>
+          </Tr>
+        </thead>
+
+        <tbody>
+          <Tr>
+            <Td>Row 1</Td>
+            <Td>Row 1</Td>
+            <Td>Row 1</Td>
+            <Td>Row 1</Td>
+
+            <Tr.AccordionContent>
+              <Td>Expanded 1.1</Td>
+              <Td>Expanded 1.1</Td>
+              <Td>Expanded 1.1</Td>
+              <Td>Expanded 1.1</Td>
+            </Tr.AccordionContent>
+
+            <Tr.AccordionContent>
+              <Td>Expanded 1.2</Td>
+              <Td>Expanded 1.2</Td>
+              <Td>Expanded 1.2</Td>
+              <Td>Expanded 1.2</Td>
+            </Tr.AccordionContent>
+          </Tr>
+
+          <Tr>
+            <Td>Row 2</Td>
+            <Td>Row 2</Td>
+            <Td>Row 2</Td>
+            <Td>Row 2</Td>
+
+            <Tr.AccordionContent>
+              <Td>Expanded 2.1</Td>
+              <Td>Expanded 2.1</Td>
+              <Td>Expanded 2.1</Td>
+              <Td>Expanded 2.1</Td>
+            </Tr.AccordionContent>
+
+            <Tr.AccordionContent>
+              <Td>Expanded 2.2</Td>
+              <Td>Expanded 2.2</Td>
+              <Td>Expanded 2.2</Td>
+              <Td>Expanded 2.2</Td>
+            </Tr.AccordionContent>
+
+            <Tr.AccordionContent>
+              <Td>Expanded 2.3</Td>
+              <Td>Expanded 2.3</Td>
+              <Td>Expanded 2.3</Td>
+              <Td>Expanded 2.3</Td>
+            </Tr.AccordionContent>
+          </Tr>
+        </tbody>
+      </Table>
+    </Table.ScrollView>
+  </ComponentBox>
+)
+
 export const TableSticky = () => {
   const isFullscreen = /data-visual-test|fullscreen/.test(
     globalThis?.location?.href,

packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.mdx

@@ -18,6 +18,7 @@ import {
   TableSizeSmall,
   PaginationTable,
   TableAccordion,
+  TableAccordionRow,
   TablesInOneContainer,
   VariantCombinations,
 } from 'Docs/uilib/components/table/Examples'
@@ -56,16 +57,20 @@ A `small` sized table is only for special circumstances, where a lot of data nee
 
 <TableSizeSmall />
 
-### Table with accordion rows
+### Table with accordion
 
-<VisibilityByTheme visible="sbanken">
-  This example is not yet fully supported using the Sbanken theme.
-</VisibilityByTheme>
+##### Expand a single container
 
-The second example uses both a `border` and an `outline`.
+The second table uses both a `border` and an `outline`.
 
 <TableAccordion />
 
+##### Expand additional rows
+
+It's also possible to use accordion to expand the table with more rows.
+
+<TableAccordionRow />
+
 ### Table with sticky header
 
 <TableSticky />

packages/dnb-design-system-portal/src/docs/uilib/helpers/functions.mdx

@@ -246,7 +246,6 @@ const debounced = debounce(
   wait = 250, // milliseconds
   {
     immediate = false, // execute the debounceFunc on the leading end
-    instance = null // function or class instance for "this"
   } = {},
 )
 
@@ -255,6 +254,35 @@ debounced({ foo: 'bar'}) // delay the execution – again
 debounced.cancel() // optional, cancel the execution
 ```
 
+Async example:
+
+```js
+import { debounceAsync } from '@dnb/eufemia/shared/helpers'
+
+async function debounceFunc({ foo }) {
+  // optionally, add a cancel event (wasCanceled is a "function" to check later if it was canceled)
+  const wasCanceled = this.addCancelEvent(myCancelMethod)
+
+  await wait(1000) // do something async
+}
+
+const myCancelMethod = () => {
+  console.log('canceled')
+}
+
+const debounced = debounceAsync(
+  debounceFunc,
+  (wait = 250), // milliseconds
+)
+
+debounceAsync({ foo: 'bar' }) // delay the execution – again
+
+debounced.cancel() // optional, cancel the execution
+debounced.addCancelEvent(myCancelMethod) // alternatively, you can add the cancel event like so
+```
+
+In order to use `this.addCancelEvent` you need to use a `function()`, and not an arrow function.
+
 ### copyToClipboard
 
 Copies the given string to the device's clipboard.

packages/dnb-eufemia/package.json

@@ -273,7 +273,7 @@
     "svgo": "3.0.0",
     "tar": "6.1.11",
     "traverse": "0.6.6",
-    "typescript": "5.0.4",
+    "typescript": "5.2.2",
     "vd-tool": "4.0.2",
     "wait-on": "6.0.0"
   },