release of v10.15.1 (#3071)

packages/dnb-design-system-portal/gatsby-config.js

@@ -141,12 +141,20 @@ const plugins = [
       filesGlobs: shouldUsePrebuild()
         ? [
             '**/build/style/dnb-ui-core.min.css',
-            '**/build/style/themes/**/*-theme-*.min.css',
+            '**/build/style/themes/**/*-theme-{basis,components}.min.css',
+            '**/build/extensions/payment-card/**/dnb-*.min.css',
           ]
         : [
             '**/src/style/dnb-ui-core.scss',
-            '**/src/style/themes/**/*-theme-*.scss',
+            '**/src/style/themes/**/*-theme-{basis,components}.scss',
+            '**/src/extensions/payment-card/**/dnb-*.scss',
           ],
+      includeFiles: [
+        '**/dnb-ui-core.*',
+        '**/*-theme-components.*',
+        '**/*-theme-basis.*',
+        '**/payment-card/**/*',
+      ],
       // also load the extensions CSS package
       defaultTheme,
       wrapWithThemeProvider: false, // The portal uses its own wrapper: ThemeProvider

packages/dnb-design-system-portal/gatsby-node.js

@@ -258,6 +258,20 @@ exports.onCreateWebpackConfig = ({
     plugins: [
       // Webpack 4 to 5 migration
       plugins.provide({ process: 'process/browser' }),
+
+      // Algolia info
+      plugins.define({
+        'process.env.ALGOLIA_INDEX_NAME': JSON.stringify(
+          process.env.ALGOLIA_INDEX_NAME || 'dev_eufemia_docs',
+        ),
+        'process.env.ALGOLIA_APP_ID': JSON.stringify(
+          process.env.ALGOLIA_APP_ID || 'SLD6KEYMQ9',
+        ),
+        'process.env.ALGOLIA_SEARCH_KEY': JSON.stringify(
+          process.env.ALGOLIA_SEARCH_KEY ||
+            '6cf238b7456ffd9f7a400d8de37318a3',
+        ),
+      }),
     ],
   }
 

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

@@ -80,7 +80,7 @@
     "gatsby-plugin-babel-react-live": "1.4.2",
     "gatsby-plugin-catch-links": "5.12.0",
     "gatsby-plugin-emotion": "8.12.0",
-    "gatsby-plugin-eufemia-theme-handler": "1.6.4",
+    "gatsby-plugin-eufemia-theme-handler": "1.7.0",
     "gatsby-plugin-gatsby-cloud": "5.12.0",
     "gatsby-plugin-manifest": "5.12.0",
     "gatsby-plugin-mdx": "5.12.0",

packages/dnb-design-system-portal/src/docs/contribute/first-contribution/before-started.mdx

@@ -61,9 +61,9 @@ The only folders you should need to know about to add new features are:
 
 ### dnb-design-system-portal
 
-The documentation in markdown is located at `src/docs` and the portal will automatically create pages and menu items based on that current structure.
+The documentation in markdown (MDX) is located at `src/docs` and the portal will automatically create pages and menu items based on that current structure.
 
-All you need to do to add a new page is to create a new markdown (`.md`) file within one of the folders. All documentation for components and elements are located at `src/docs/uilib`, which corresponds to the URL [eufemia.dnb.no/uilib](eufemia.dnb.no/uilib).
+All you need to do to add a new page is to create a new markdown (`.mdx`) file within one of the folders. All documentation for components and elements are located at `src/docs/uilib`, which corresponds to the URL [eufemia.dnb.no/uilib](eufemia.dnb.no/uilib).
 
 ### Configuration files
 

packages/dnb-design-system-portal/src/docs/contribute/getting-started/commit-changes.mdx

@@ -18,9 +18,9 @@ From a clone:
 - Make a _Pull Request_ to `origin/main`.
 - Watch the result of the tests.
 
-## Run Algolia search queries locally
+## Submit Algolia search queries locally
 
-In order to commit Algolia search queries to the `dev_eufemia_docs` index, you have to:
+In order to submit Algolia search queries to the `dev_eufemia_docs` index, you have to:
 
 Create a `.env` file inside `dnb-design-system-portal` with valid:
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 // Checkbox
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/Examples.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
 import { Button } from '@dnb/eufemia/src'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 // Dropdown
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const ValueOn = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/schema-validation.mdx

@@ -8,8 +8,6 @@ tabs:
     key: '/info'
   - title: Demos
     key: '/demos'
-  - title: Properties
-    key: '/properties'
 breadcrumb:
   - text: Forms
     href: /uilib/extensions/forms/

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/BankAccountNumber/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 import { Provider } from '@dnb/eufemia/src/shared'
 
 export const Empty = () => {

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Email/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/Examples.tsx

@@ -1,6 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
-import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/fields/ListBaseInputComponents.tsx

@@ -43,7 +43,7 @@ export default function ListBaseInputComponents() {
   return (
     <ListSummaryFromEdges
       space={{ top: 'x-small' }}
-      level={4}
+      level={3}
       description=""
       edges={edges}
     />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/fields/ListBaseSelectionComponents.tsx

@@ -43,7 +43,7 @@ export default function ListBaseSelectionComponents() {
   return (
     <ListSummaryFromEdges
       space={{ top: 'x-small' }}
-      level={4}
+      level={3}
       description=""
       edges={edges}
     />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/fields/ListBaseToggleComponents.tsx

@@ -43,7 +43,7 @@ export default function ListBaseToggleComponents() {
   return (
     <ListSummaryFromEdges
       space={{ top: 'x-small' }}
-      level={4}
+      level={3}
       description=""
       edges={edges}
     />

packages/dnb-design-system-portal/src/shared/menu/SearchBar.tsx

@@ -15,13 +15,8 @@ import {
   drawerClassStyle,
 } from './SearchBar.module.scss'
 import { scrollToAnimation } from '../parts/Layout'
-import { getIndexName } from '../../uilib/search/searchHelpers'
 import { applyPageFocus } from '@dnb/eufemia/src/shared/helpers'
 
-const indexName = getIndexName()
-const algoliaApplicationID = 'SLD6KEYMQ9'
-const algoliaAPIKey = '6cf238b7456ffd9f7a400d8de37318a3'
-
 export const SearchBarInput = () => {
   const searchIndex = React.useRef(null)
   const [status, setStatus] = React.useState(null)
@@ -63,8 +58,13 @@ export const SearchBarInput = () => {
   }
 
   const onFocusHandler = () => {
-    const searchClient = algoliasearch(algoliaApplicationID, algoliaAPIKey)
-    searchIndex.current = searchClient.initIndex(indexName)
+    const searchClient = algoliasearch(
+      process.env.ALGOLIA_APP_ID,
+      process.env.ALGOLIA_SEARCH_KEY,
+    )
+    searchIndex.current = searchClient.initIndex(
+      process.env.ALGOLIA_INDEX_NAME,
+    )
   }
 
   return (

packages/dnb-eufemia/package.json

@@ -197,8 +197,8 @@
     "color": "4.0.1",
     "conventional-changelog-conventionalcommits": "5.0.0",
     "cross-env": "7.0.3",
-    "css-loader": "6.7.3",
-    "cssnano": "5.0.10",
+    "css-loader": "6.8.1",
+    "cssnano": "6.0.1",
     "current-git-branch": "1.1.0",
     "del": "6.0.0",
     "detect-port": "1.3.0",
@@ -241,9 +241,9 @@
     "opentype.js": "1.3.4",
     "ora": "5.4.1",
     "packpath": "0.1.0",
-    "postcss": "8.4.31",
-    "postcss-calc": "8.0.0",
-    "postcss-preset-env": "6.7.0",
+    "postcss": "8.4.32",
+    "postcss-calc": "9.0.1",
+    "postcss-preset-env": "9.3.0",
     "prettier": "3.0.3",
     "prettier-package-json": "2.8.0",
     "prettier-v2": "npm:prettier@^2",
@@ -257,8 +257,8 @@
     "rollup": "3.11.0",
     "rollup-plugin-node-globals": "1.4.0",
     "rollup-plugin-terser": "7.0.2",
-    "sass": "1.57.1",
-    "sass-loader": "13.2.0",
+    "sass": "1.62.0",
+    "sass-loader": "13.3.2",
     "semantic-release": "20.1.0",
     "simple-git": "3.16.0",
     "start-server-and-test": "2.0.1",

packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.ts

@@ -489,5 +489,16 @@ describe('style build', () => {
       )
       expect(content).toContain(`.dnb-button {`)
     }
+
+    {
+      const content = fs.readFileSync(
+        path.resolve(
+          packpath.self(),
+          `build${stage}/style/themes/theme-ui/ui-theme-components.css`
+        ),
+        'utf-8'
+      )
+      expect(content).not.toContain(`\\`)
+    }
   })
 })

packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -599,6 +599,7 @@ button.dnb-button::-moz-focus-inner {
   position: absolute;
   inset: 0;
   box-shadow: var(--drop-shadow, none);
+  border-radius: var(--rounded-corner, 0);
 }
 .dnb-section::after {
   content: "";

packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap

@@ -599,6 +599,7 @@ button.dnb-button::-moz-focus-inner {
   position: absolute;
   inset: 0;
   box-shadow: var(--drop-shadow, none);
+  border-radius: var(--rounded-corner, 0);
 }
 .dnb-section::after {
   content: "";

packages/dnb-eufemia/src/components/modal/__tests__/Modal.test.tsx

@@ -279,10 +279,13 @@ describe('Modal component', () => {
       </Modal>
     )
     fireEvent.click(document.querySelector('button'))
-    await wait(2)
 
     // and check the class of that element
-    expect(document.activeElement.classList).toContain('dnb-dialog__inner')
+    await waitFor(() => {
+      expect(document.activeElement.classList).toContain(
+        'dnb-dialog__inner'
+      )
+    })
 
     fireEvent.keyDown(document.querySelector('div.dnb-dialog'), {
       key: 'Esc',
@@ -363,9 +366,9 @@ describe('Modal component', () => {
       'dnb-modal__trigger'
     )
 
-    await wait(1)
-
-    expect(document.activeElement).not.toHaveAttribute('data-autofocus')
+    await waitFor(() => {
+      expect(document.activeElement).not.toHaveAttribute('data-autofocus')
+    })
   })
 
   it('will warn if first heading is not h1', async () => {
@@ -656,15 +659,15 @@ describe('Modal component', () => {
 
     fireEvent.click(document.querySelector('button#toggle'))
 
-    await wait(3)
-
-    expect(on_open).toBeCalledTimes(1)
+    await waitFor(() => {
+      expect(on_open).toBeCalledTimes(1)
+    })
 
     fireEvent.click(document.querySelector('button#toggle'))
 
-    await wait(10)
-
-    expect(on_close).toBeCalledTimes(1)
+    await waitFor(() => {
+      expect(on_close).toBeCalledTimes(1)
+    })
   })
 
   it('will prevent closing the modal on prevent_close', async () => {

packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap

@@ -38,6 +38,7 @@ exports[`Section scss has to match style dependencies css 1`] = `
   position: absolute;
   inset: 0;
   box-shadow: var(--drop-shadow, none);
+  border-radius: var(--rounded-corner, 0);
 }
 .dnb-section::after {
   content: "";

packages/dnb-eufemia/src/components/section/style/dnb-section.scss

@@ -34,6 +34,7 @@
     position: absolute;
     inset: 0;
     box-shadow: var(--drop-shadow, none);
+    border-radius: var(--rounded-corner, 0);
   }
 
   &::after {