release of v10.52 (#4080)

.github/workflows/e2e.yml

@@ -38,7 +38,7 @@ jobs:
   visual-test:
     name: Run visual e2e-tests
 
-    runs-on: macos-latest
+    runs-on: macos-15
 
     timeout-minutes: 40
 
@@ -49,12 +49,12 @@ jobs:
           persist-credentials: false
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: 'package.json'
 
       - name: Use yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ./.yarn/cache
@@ -65,7 +65,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Use Playwright cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: playwright-cache
         with:
           path: |
@@ -86,15 +86,13 @@ jobs:
         if: env.RUN_POST_BUILD == 'true'
         run: yarn workspace @dnb/eufemia postbuild:ci
 
-      #     restore-keys: ${{ secrets.CACHE_VERSION }}-${{ runner.os }}-gatsby-
-
       - name: Build portal
         run: yarn workspace dnb-design-system-portal build:visual-test
 
       - name: Run visual tests
         run: yarn workspace dnb-design-system-portal test:screenshots:ci
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: visual-test-artifact
@@ -130,12 +128,12 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: 'package.json'
 
       - name: Use node_modules cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: modules-cache
         with:
           path: '**/node_modules'
@@ -146,7 +144,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Use Playwright cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: playwright-cache
         with:
           path: |
@@ -175,7 +173,7 @@ jobs:
         run: yarn workspace @dnb/eufemia test:e2e:ci
 
       - name: Store Playwright artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: playwright-develop-artifact

.github/workflows/icons-lib.yml

@@ -35,12 +35,12 @@ jobs:
           persist-credentials: false
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: 'package.json'
 
       - name: Use node_modules cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: modules-cache
         with:
           path: '**/node_modules'
@@ -64,7 +64,7 @@ jobs:
         run: yarn workspace dnb-design-system-portal build:visual-test
 
       - name: Store portal artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: portal-build-artifact
           path: ./packages/dnb-design-system-portal/public
@@ -87,12 +87,12 @@ jobs:
           persist-credentials: false
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: 'package.json'
 
       - name: Use yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ./.yarn/cache

.github/workflows/release.yml

@@ -40,12 +40,12 @@ jobs:
           fetch-depth: 2
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: 'package.json'
 
       - name: Use node_modules cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: modules-cache
         with:
           path: '**/node_modules'
@@ -70,7 +70,7 @@ jobs:
       - name: Deploy portal
         if: (github.ref == 'refs/heads/release' ||
           github.ref == 'refs/heads/portal')
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           personal_token: ${{ secrets.GH_TOKEN }}
           publish_dir: ./packages/dnb-design-system-portal/public

.github/workflows/verify.yml

@@ -38,12 +38,12 @@ jobs:
           persist-credentials: false
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: 'package.json'
 
       - name: Use node_modules cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: modules-cache
         with:
           path: '**/node_modules'
@@ -92,12 +92,12 @@ jobs:
           fetch-depth: 20 # The "postbuild:ci" method "getCommittedFiles" needs all history
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: 'package.json'
 
       - name: Use node_modules cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: modules-cache
         with:
           path: '**/node_modules'

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

@@ -26,11 +26,13 @@
     "prettier:write": "prettier --log-level warn --write '**/*.{md,mdx,js,ts,tsx}'",
     "reset": "yarn clean && rm -rf ./node_modules",
     "serve": "gatsby serve -p 8000",
+    "serve:8001": "gatsby serve -p 8001",
+    "serve:8002": "gatsby serve -p 8002",
     "start": "cross-env NODE_OPTIONS=--max-old-space-size=8192 gatsby develop",
     "test": "jest",
     "test:ci": "jest --ci --passWithNoTests",
     "test:e2e:portal": "yarn playwright test",
-    "test:e2e:portal:ci": "start-server-and-test serve http://localhost:8000 test:e2e:portal",
+    "test:e2e:portal:ci": "start-server-and-test serve:8002 http://localhost:8002 test:e2e:portal",
     "test:e2e:portal:watch": "playwright test --ui",
     "test:screenshots": "yarn workspace @dnb/eufemia test:screenshots",
     "test:screenshots:ci": "start-server-and-test serve http://localhost:8000 'yarn workspace @dnb/eufemia test:screenshots:ci'",

packages/dnb-design-system-portal/playwright.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
 
   use: {
     // Base URL to use in actions like `await page.goto('/')`.
-    baseURL: 'http://localhost:8000',
+    baseURL: 'http://localhost:8002',
 
     // Name of the browser that runs tests. For example `chromium`, `firefox`, `webkit`.
     browserName: 'firefox',

packages/dnb-design-system-portal/src/docs/quickguide-designer/accessibility.mdx

@@ -12,7 +12,7 @@ Remember - test for accessibility early in the design process.
 ## Useful Resources
 
 - [What is Universal Design? (DNB Sharepoint)](https://dnbasa.sharepoint.com/sites/n1317)
-- [Gjeldende regelverk og krav (Uutilsynet)](https://www.uutilsynet.no/regelverk/gjeldende-regelverk-og-krav/746) (in norwegian)
+- [Gjeldende regelverk og krav (Uutilsynet)](https://www.uutilsynet.no/regelverk/gjeldende-regelverk-og-krav/746) (in Norwegian)
 
 ## WCAG (Web Content and Accessibility Guide)
 

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v4.10-info.mdx

@@ -16,7 +16,7 @@ redirect_from:
 ## Since last release info
 
 - [Dropdown](/uilib/components/dropdown) got several new properties like `prevent_selection` (Popup Menu), `size` (small), `align_options` (right) and `more_menu`. For the `more_menu`, have a look at the Demos and also take a look on **Popup Menu**.
-- [DatePicker](/uilib/components/date-picker) is now using v2 of `date-fns` and with this more east to translate to english (including new props `submit_button_text` and `cancel_button_text`), as Norwegian (`nb`) is the default `locale`. But also `align_picker` is a nice feature to have.
+- [DatePicker](/uilib/components/date-picker) is now using v2 of `date-fns` and with this more east to translate to English (including new props `submit_button_text` and `cancel_button_text`), as Norwegian (`nb`) is the default `locale`. But also `align_picker` is a nice feature to have.
 - Also mostly every "from" component now supports HTML `data-*` attributes in event returns.
 
 ## GlobalStatus

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

@@ -134,7 +134,7 @@ export const NumberPhone = () => (
       <P>
         <NumberFormat value="99999999" phone />
         <NumberFormat value="4799999999" phone />
-        <NumberFormat value="++4799999999" phone />
+        <NumberFormat value="004799999999" phone />
         <NumberFormat value="+4780022222" phone link="sms" />
         <NumberFormat value="+47116000" phone selectall={false} />
         <NumberFormat value="+4702000" phone />

packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/info.mdx

@@ -18,15 +18,17 @@ import { Skeleton } from '@dnb/eufemia'
 
 ## Description
 
-The Skeleton component is a visual building block helper. It will provide loading placeholders that display a non-interactive preview of the app’s actual UI to visually communicate that content is being processed.
+The Skeleton component is a visual building block that helps provide loading placeholders. It displays a non-interactive preview of the actual UI of the component, visually communicating that content is being processed.
 
-### Take in consideration
+After 5 seconds an animation is shown that times out after 30 seconds.
 
-It has to be used carefully and not as a quick loading indicator replacement. The reason lays in that, that the browser will use additional resources to render the additional state. And if it is misused, like showing not a nearly identical UI or it is shown for just a fraction of a second, then it will rather distract the user experience, than enhance it.
+## Take in consideration
 
-Also, the fact, that in some setups, the user is first downloading almost the whole web application before we actually are able to show some skeletons during the API calls.
+It should be used carefully and not as a quick loading indicator replacement. The browser will use additional resources to render the additional state. If it is misused, such as showing a significantly different UI or being shown for just a fraction of a second, it can distract from the user experience rather than enhancing it.
 
-#### Gatsby
+Also, in some setups, the user may need to download almost the entire web application before skeletons can be shown during API calls.
+
+### Gatsby
 
 Gatsby as a framework makes the perfect fit to utilize a good skeleton user experience from the very first-page visit. Every page is optimized to load as fast as possible (in addition to page preloading and PWA). We can take advantage of this and show our skeleton as our initial state.
 
@@ -35,33 +37,33 @@ Gatsby as a framework makes the perfect fit to utilize a good skeleton user expe
 1. Now our applications renders.
 1. And finally, we have the user data to display.
 
-### Accessibility
+## Accessibility
 
 - Elements and components should be still responsive to screen width and font-size.
 - Screen readers will get a mention that the loading state has finished as a aria-live update.
 - Components and interactive elements are not accessible for keyboard users.
 
-### When not to use
+## When not to use
 
 - For low-traffic pages, such as super-user-only admin pages, use a loading spinner instead.
 - For a tiny, inline action or feedback, e.g. clicked a button and the action will take time, use the [ProgressIndicator](/uilib/components/progress-indicator) instead (animation).
 - For fast processes that take less than `300ms`, consider the [ProgressIndicator](/uilib/components/progress-indicator) or no loading state at all.
 - For a background process or a long-running process, e.g. importing data or exporting reports, use the [ProgressIndicator](/uilib/components/progress-indicator) instead (percentage).
 
-### When to use
+## When to use
 
 - Use on high-traffic pages and landing pages, if they require a loading state.
 - Use when there’s more than one element loading at the same time that requires an indicator.
 - Use when the process would take more than `300ms` to load on an average internet connection.
 - Use the Skeleton component when the [ProgressIndicator](/uilib/components/progress-indicator) is not prominent enough.
 
-### How to use
+## How to use
 
 You can use the Skeleton component as a provider for all underlying components, like inputs and buttons. This way, you can simply toggle on and off the skeletons. And all the spacing and sizing will be given from the components themselves.
 
 But you can also use the Skeleton component to show a fake article or other figures.
 
-### How it works
+## How it works
 
 Every Eufemia component should support a skeleton natively. But for simplification, you can use the Skeleton component as a provider, so enable the skeletons for a group of components.
 
@@ -71,25 +73,25 @@ But the Skeleton component also supports a set of ready-to-use figures. Use it l
 
 <SkeletonInfoProvider />
 
-### Global Provider
+## Global Provider
 
 You can also use the global [Eufemia Provider](/uilib/usage/customisation/provider) to enable the underlying skeletons. You can even have multiple providers wrapped.
 
 <SkeletonInfoGlobalProvider />
 
-### Exclude a part
+## Exclude a part
 
 You can easily exclude a part from being transformed to a skeleton by using `Skeleton.Exclude`.
 
 <SkeletonInfoExclude />
 
-### Suspense
+## Suspense
 
 You can take advantage of an async component by using the React Suspense with a skeleton fallback.
 
 <SkeletonInfoSuspense />
 
-### Create a custom skeleton
+## Create a custom skeleton
 
 In order to create the same skeletons as the build-ins, you can make use of a couple of helper tools.
 

packages/dnb-design-system-portal/src/docs/uilib/elements/heading/Examples.tsx

@@ -51,16 +51,19 @@ export const HeadingModifiersExample = () => (
   <ComponentBox hideCode data-visual-test="heading-additional">
     <article>
       <h1 className="dnb-h--xx-large">
-        <small>dnb-h--x-large</small> Normal dnb-h--xx-large
+        .dnb-h--xx-large <small>small</small>
       </h1>
+      <h2 className="dnb-h--x-large">
+        .dnb-h--x-large <small>small</small>
+      </h2>
       <h2 className="dnb-h--large">
-        Normal dnb-h--large <small>dnb-h--medium</small>
+        .dnb-h--large <small>small</small>
       </h2>
       <h3 className="dnb-h--medium">
-        Normal dnb-h--medium <small>dnb-h--basis</small>
+        .dnb-h--medium <small>small</small>
       </h3>
       <h3 className="dnb-lead">
-        Normal dnb-lead <small>small</small>
+        .dnb-lead <small>small</small>
       </h3>
     </article>
   </ComponentBox>