release of v10.55

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

@@ -2,7 +2,7 @@
 title: 'Card'
 description: '`Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.'
 showTabs: true
-status: 'beta'
+status: 'new'
 tabs:
   - title: Info
     key: '/info'

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

@@ -32,6 +32,22 @@ export const Default = () => {
   )
 }
 
+export const NestedCards = () => {
+  return (
+    <ComponentBox data-visual-test="layout-card-nested">
+      <Card>
+        <P>First Card</P>
+        <Card top>
+          <P>Second Card</P>
+          <Card top>
+            <P>Third Card (for edge cases only)</P>
+          </Card>
+        </Card>
+      </Card>
+    </ComponentBox>
+  )
+}
+
 export const WithTable = () => {
   return (
     <ComponentBox data-visual-test="layout-card-table">
@@ -208,6 +224,16 @@ export const WithHeadingsAndAriaLabel = () => {
   )
 }
 
+export const WithoutPadding = () => {
+  return (
+    <ComponentBox>
+      <Card innerSpace={false} align="stretch">
+        <P>no inner space</P>
+      </Card>
+    </ComponentBox>
+  )
+}
+
 export const WithNestedSection = () => {
   return (
     <ComponentBox data-visual-test="card-nested-section">

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

@@ -20,8 +20,22 @@ import * as Examples from './Examples'
 
 ### Stack
 
+The Card components needs to have `stack={true}` or `align="stretch"` in order to stretch its children components.
+
+For [form components](uilib/extensions/forms/), you should use `stack={true}` to get the correct spacing.
+
 <Examples.Stack />
 
+### Nested Cards
+
+Nested cards have `responsive={false}` by default and will not behave responsive.
+
+<Examples.NestedCards />
+
+### Without padding
+
+<Examples.WithoutPadding />
+
 ### With nested Section
 
 The Card components needs to have `stack={true}` or `align="stretch"` in order to stretch its children components.

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

@@ -16,8 +16,6 @@ import { Card } from '@dnb/eufemia'
 
 It uses [Flex.Item](/uilib/layout/flex/item) under the hood. When one of these properties were given, `stack`, `direction` or `spacing` – the [Flex.Container](/uilib/layout/flex/container) will be used.
 
-**BETA:** The design is not 100% finalised and may change to be officially approved by UX through an RFC.
-
 ```jsx
 import { Card } from '@dnb/eufemia'
 import { Form, Field } from '@dnb/eufemia/extensions/forms'

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

@@ -16,7 +16,7 @@ import '@dnb/eufemia/components/country-flag/style/dnb-country-flag-icons.scss'
 
 ## Description
 
-The CountryFlag component lets you display a country flag based on a [ISO 3166-1 alpha-2 code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) like `NO` for Norway.
+The `CountryFlag` component lets you display a country flag based on a [ISO 3166-1 alpha-2 code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) like `NO` for Norway.
 
 In order to use the CountryFlag component, you need to import the flag styles as CSS or SASS. The flag styles are available in the `dnb-country-flag-icons.min.css` and `dnb-country-flag-icons.scss` files. See the import example above.
 

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

@@ -361,3 +361,14 @@ export const DatePickerDateFnsRangeIsWeekend = () => (
     />
   </ComponentBox>
 )
+
+export const DatePickerCorrectInvalidDate = () => (
+  <ComponentBox>
+    <DatePicker
+      show_input
+      min_date="2024-11-01"
+      max_date="2024-12-31"
+      correct_invalid_date
+    />
+  </ComponentBox>
+)

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

@@ -17,6 +17,7 @@ import {
   DatePickerCalendar,
   DatePickerScreenshotTestSizes,
   DatePickerScreenshotTestDisabled,
+  DatePickerCorrectInvalidDate,
 } from 'Docs/uilib/components/date-picker/Examples'
 import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
 
@@ -81,6 +82,10 @@ import enUS from '@dnb/eufemia/shared/locales/en-US'
 
 <DatePickerLinked />
 
+### Min and Max date correction
+
+<DatePickerCorrectInvalidDate />
+
 ### DatePicker with error status (no input)
 
 <DatePickerNoInputStatus />

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

@@ -35,7 +35,6 @@ import {
 | `link`                                  | _(optional)_ link both calendars, once to the user is navigating between months. Only meant to use if the range is set to `true`. Defaults to `false`.                                                                                                                                                                                                                               |
 | `sync`                                  | _(optional)_ sync input values with the calendars views. Once the input values get changed, the calendar changes its views in sync. Defaults to `true`.                                                                                                                                                                                                                              |
 | `first_day`                             | _(optional)_ to define the first day of the week. Defaults to `monday`.                                                                                                                                                                                                                                                                                                              |
-| `locale`                                | _(optional)_ to define the locale used in the calendar. Needs to be an `date-fns` **v2** locale object, like `import enLocale from 'date-fns/locale/en-GB'`. Defaults to `nb-NO`.                                                                                                                                                                                                    |
 | `align_picker`                          | _(optional)_ use `right` to change the calendar alignment direction. Defaults to `left`.                                                                                                                                                                                                                                                                                             |
 | `only_month`                            | _(optional)_ use `true` to only show the defined month. Disables the month navigation possibility. Defaults to `false`.                                                                                                                                                                                                                                                              |
 | `hide_last_week`                        | _(optional)_ use `true` to only show the last week in the current month if it needs to be shown. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`.                                                                                                                                                                        |

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

@@ -168,8 +168,8 @@ export const DialogExampleProgressIndicator = () => (
       maxWidth="12rem"
     >
       <ProgressIndicator
-        show_label
-        label_direction="vertical"
+        showDefaultLabel
+        labelDirection="vertical"
         top="large"
         bottom="large"
       />

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

@@ -9,14 +9,14 @@ import { FormLabel, Checkbox, Switch } from '@dnb/eufemia/src'
 
 export const Default = () => (
   <ComponentBox data-visual-test="form-label-default">
-    <FormLabel for_id="alone-1">Default horizontal FormLabel</FormLabel>
+    <FormLabel forId="alone-1">Default horizontal FormLabel</FormLabel>
     <Checkbox id="alone-1" label="Checkbox" />
   </ComponentBox>
 )
 
 export const Vertical = () => (
   <ComponentBox data-visual-test="form-label-vertical">
-    <FormLabel for_id="alone-2" label_direction="vertical">
+    <FormLabel forId="alone-2" vertical>
       Vertical FormLabel
     </FormLabel>
     <Checkbox id="alone-2" label="Checkbox" />
@@ -25,7 +25,7 @@ export const Vertical = () => (
 
 export const NoForId = () => (
   <ComponentBox>
-    <FormLabel vertical={true}>Without for_id (select me)</FormLabel>
+    <FormLabel vertical={true}>Without forId (select me)</FormLabel>
     <Checkbox label="Checkbox" />
   </ComponentBox>
 )
@@ -35,7 +35,7 @@ export const LinkedLabel = () => (
     <form>
       <div>
         <div>
-          <FormLabel for_id="switch-1" text="Form Label (click me):" />
+          <FormLabel forId="switch-1" text="Form Label (click me):" />
         </div>
         <div>
           <Switch id="switch-1" value="Value of switch" />

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

@@ -14,7 +14,7 @@ import * as Examples from 'Docs/uilib/components/form-label/Examples'
 
 <Examples.Vertical />
 
-### Vertical form-label without a `for_id`
+### Vertical form-label without a `forId`
 
 <Examples.NoForId />
 

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

@@ -198,7 +198,7 @@ export const InputExampleSubmit = () => (
           console.log(event)
         }}
       >
-        <FormLabel for_id="search">Label</FormLabel>
+        <FormLabel forId="search">Label</FormLabel>
         <Flex.Horizontal align="baseline">
           <Input
             id="search"

packages/dnb-design-system-portal/src/docs/uilib/components/list-format.mdx

@@ -0,0 +1,20 @@
+---
+title: 'ListFormat'
+description: 'A ready to use DNB list formatter.'
+showTabs: true
+tabs:
+  - title: Info
+    key: /uilib/components/list-format/info
+  - title: Demos
+    key: /uilib/components/list-format/demos
+  - title: Properties
+    key: /uilib/components/list-format/properties
+theme: 'sbanken'
+status: 'new'
+---
+
+import ListFormatInfo from 'Docs/uilib/components/list-format/info'
+import ListFormatDemos from 'Docs/uilib/components/list-format/demos'
+
+<ListFormatInfo />
+<ListFormatDemos />