release of v10.57

packages/dnb-design-system-portal/src/core/ChangeStyleTheme.tsx

@@ -7,7 +7,7 @@ import {
   setTheme,
 } from 'gatsby-plugin-eufemia-theme-handler'
 
-export default function ChangeStyleTheme({ label = null } = {}) {
+export default function ChangeStyleTheme({ label = null, ...rest } = {}) {
   const themes = getThemes()
   const { name } = getTheme()
   const { update } = React.useContext(Context)
@@ -31,6 +31,7 @@ export default function ChangeStyleTheme({ label = null } = {}) {
           update({ skeleton: false })
         })
       }}
+      {...rest}
     />
   )
 }

packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx

@@ -1,14 +1,15 @@
 import { H3 } from '@dnb/eufemia/src'
 
+# Font Families
+
 <VisibilityByTheme hidden="sbanken">
-## Font Families
 
 The default font family for all web applications is the `DNB` font.
 
 ## DNB Regular
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-regular">
+  <p className="dnb-p dnb-t__weight--regular dnb-t__family--default">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -20,7 +21,7 @@ The default font family for all web applications is the `DNB` font.
 ## DNB Medium
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-medium">
+  <p className="dnb-p dnb-t__weight--medium dnb-t__family--default">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -31,8 +32,10 @@ The default font family for all web applications is the `DNB` font.
 
 ## DNB Bold
 
+**NB!** bold is generally not used, use medium, unless there is a specific unique use case.
+
 <TypographyBox>
-  <p className="dnb-p dnb-typo-bold">
+  <p className="dnb-p dnb-t__weight--bold dnb-t__family--default">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -44,7 +47,7 @@ The default font family for all web applications is the `DNB` font.
 ## DNBMono Regular
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-mono-regular">
+  <p className="dnb-p dnb-t__weight--regular dnb-t__family--monospace">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -53,21 +56,35 @@ The default font family for all web applications is the `DNB` font.
   </p>
 </TypographyBox>
 </VisibilityByTheme>
+
 <VisibilityByTheme visible="sbanken">
-## Font Families
 
 The default font family for all web applications is `Roboto`, however for headlines and some other items we use `Maison Neue`.
 
 ### Maison Neue
 
 <TypographyBox>
-  <H3>This is a headline in Maison Neue</H3>
+  <p className="dnb-p dnb-t__size--large dnb-t__line-height--large dnb-t__family--heading">
+    This is a paragraph using the headline font Maison Neue
+  </p>
 </TypographyBox>
 
 ### Roboto regular
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-regular">
+  <p className="dnb-p dnb-t__weight--regular dnb-t__family--default">
+    Here is a paragraph with some nonsense lipsum text. Contrary to popular
+    belief, Lorem Ipsum passage, and going through the cites of the word in
+    classical literature, discovered the undoubtable source. Lorem Ipsum
+    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
+  </p>
+</TypographyBox>
+
+## Roboto Medium
+
+<TypographyBox>
+  <p className="dnb-p dnb-t__weight--medium dnb-t__family--default">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -78,8 +95,10 @@ The default font family for all web applications is `Roboto`, however for headli
 
 ### Roboto bold
 
+**NB!** bold is generally not used, use medium, unless there is a specific unique use case.
+
 <TypographyBox>
-  <p className="dnb-p dnb-typo-bold">
+  <p className="dnb-p dnb-t__weight--bold dnb-t__family--default">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum

packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx

@@ -1,14 +1,16 @@
 ## Font Weights
 
-Achieved with HTML classes: `.dnb-typo-regular`, <VisibilityByTheme hidden="sbanken">`.dnb-typo-medium`, </VisibilityByTheme>`.dnb-typo-bold`
+Achieved with HTML classes: `.dnb-t__weight--regular`,`.dnb-t__weight--medium` or `.dnb-t__weight--bold`.
+
+The old classes, `.dnb-typo-regular`, `.dnb-typo-medium` and `.dnb-typo-bold`, still work, but will also set font-family and font-style.
 
 ### Body Regular
 
 **NB!** body text is automatically set to use **regular** weight so there is
 no need to use a class.
 
 <TypographyBox>
-  <p className="dnb-typo-regular">
+  <p className="dnb-t__weight--regular">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -17,24 +19,24 @@ no need to use a class.
   </p>
 </TypographyBox>
 
-<VisibilityByTheme hidden="sbanken">
 ### Body Medium
 
 <TypographyBox>
-  <p className="dnb-typo-medium">
+  <p className="dnb-t__weight--medium">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
     comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
 </TypographyBox>
-</VisibilityByTheme>
 
 ### Body Bold
 
+**NB!** bold is generally not used, use medium, unless there is a specific unique use case.
+
 <TypographyBox>
-  <p className="dnb-typo-bold">
+  <p className="dnb-t__weight--bold">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum

packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx

@@ -137,16 +137,16 @@ This is an overview of the default, basic typographic elements such as **heading
 
 ### Note:
 
-There are two methods to create small text. One, is to use the `.dnb-p--small` modifier class which can be used on paragraphs etc. and allows you to use a bottom margin. The other method is to just use a `<small>` tag which is inline and cannot have a margin.
+There are two methods to create small text. One, is to use the `.dnb-t__size--small` modifier class. The other method is to just use a `<small>` tag.
 
 ### Example
 
 <TypographyBox>
-  <p className="dnb-p dnb-p--small">
-    This is a paragraph with a <b>modifier class</b>. This is the small
-    content. Quem facilisi moderatius id eam, id tamquam albucius per. Vel
-    quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea,
-    ei exerci tacimates pro, aliquam pertinacia eu vim.
+  <p className="dnb-p dnb-t__size--small">
+    This is a paragraph with a <b>modifier class</b> `.dnb-t__size--small`.
+    This is the small content. Quem facilisi moderatius id eam, id tamquam
+    albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea
+    bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.
   </p>
   <p className="dnb-p">
     <small>

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx

@@ -367,7 +367,7 @@ The Anchor was moved from `/elements` to `/components`.
 
    2. Only camelCase props are supported for Drawer, so you will need to update the prop names.
    3. `Modal.Inner` or `Modal.Content` converts to `Drawer.Body`.
-   4. `Modal.Bar` converts to `Drawer.Navigaton`.
+   4. `Modal.Bar` converts to `Drawer.Navigation`.
    5. `Modal` was a class component and `Drawer` is a functional component.
 
    When you convert from `<Modal />` or `<Modal mode="dialog" />` to `<Dialog />` – follow these steps:
@@ -378,7 +378,7 @@ The Anchor was moved from `/elements` to `/components`.
 
    2. Only camelCase props are supported for Dialog, so you will need to update the prop names.
    3. `Modal.Inner` or `Modal.Content` converts to `Dialog.Body`.
-   4. `Modal.Bar` converts to `Dialog.Navigaton`.
+   4. `Modal.Bar` converts to `Dialog.Navigation`.
    5. `Modal` was a class component and `Dialog` is a functional component.
 
 ### [Lists](/uilib/elements/lists)

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx

@@ -148,6 +148,8 @@ The `InputPassword` component has been moved to `Field.Password`, and is now a p
 - replace `useError` with `useValidation`.
 - replace Form.Iterate label variable `{itemNr}` with `{itemNo}`.
 - replace `Form.FieldProps` with `Field.Provider`.
+- replace `<Card stack>...</Card>` with `<Form.Card>...</Form.Card>`.
+- replace `<Card>...</Card>` with `<Form.Card>...</Form.Card>`.
 
 ## NumberFormat
 
@@ -199,4 +201,9 @@ const errorMessages = {
 
 - Got removed. Simply provide your error message as a object in the `errorMessages` property with an `useMemo` hook.
 
+## DrawerList
+
+- replace type `DrawerListDataObjectUnion` with `DrawerListDataArrayItem`.
+- replace type `DrawerListDataObject` with `DrawerListDataArrayObject`.
+
 _February, 6. 2024_

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

@@ -543,6 +543,50 @@ export const AutocompleteDisabledExample = () => (
   </Wrapper>
 )
 
+export const AutocompleteDisabledOptionsExample = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="autocomplete-disabled-options">
+      <Autocomplete
+        show_submit_button
+        data={[
+          {
+            disabled: true,
+            content: (
+              <Autocomplete.HorizontalItem>
+                <IconPrimary size="medium" icon="bell" right="x-small" />
+                The Shawshank Redemption
+              </Autocomplete.HorizontalItem>
+            ),
+            year: 1994,
+          },
+          {
+            disabled: true,
+            content: ['The Godfather', 'Line with more info'],
+            year: 1972,
+          },
+          {
+            disabled: true,
+            content: [
+              'The Godfather: Part II',
+              <a key="a-1" className="dnb-anchor" href="/">
+                Anchor 1
+              </a>,
+              <a key="a-2" className="dnb-anchor" href="/">
+                Anchor 2
+              </a>,
+              'Line with more info',
+            ],
+            year: 1974,
+          },
+          { disabled: true, content: 'The Dark Knight', year: 2008 },
+        ]}
+        label="Label"
+        bottom
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
 export const AutocompleteContentAsArrayExample = () => (
   <Wrapper>
     <ComponentBox hidePreview>

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

@@ -6,6 +6,7 @@ import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/Transla
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { autocompleteProperties } from '@dnb/eufemia/src/components/autocomplete/AutocompleteDocs'
 import { DrawerListProperties } from '@dnb/eufemia/src/fragments/drawer-list/DrawerListDocs'
+import DrawerListDataDoc from '../fragments/drawer-list/_prop-data.mdx'
 
 ## Properties
 
@@ -17,59 +18,7 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below
 
 <PropertiesTable props={DrawerListProperties} />
 
-## Data structure
-
-```js
-// 1. as array
-const data = [
-  // Every data item can, beside "content" - contain what ever
-  {
-    // (optional) can be what ever
-    selected_key: 'key_0',
-
-    // (optional) is show instead of "content", once selected
-    selected_value: 'Item 1 Value',
-    suffix_value: 'Addition 1',
-
-    // Item content as a string, array or React Element
-    content: 'Item 1 Content',
-  },
-
-  // more items ...
-  {
-    selected_key: 'key_1',
-    content: (
-      <>
-        <IconPrimary icon="bell" />
-        <span className="dnb-typo-bold">Searchable content</span>
-      </>
-    ),
-  },
-  {
-    selected_key: 'key_2',
-    selected_value: 'Item 3 Value',
-    suffix_value: 'Addition 3',
-    content: (
-      <Autocomplete.HorizontalItem>
-        <IconPrimary icon="bell" />
-        <span className="dnb-typo-bold">Searchable content</span>
-      </Autocomplete.HorizontalItem>
-    ),
-  },
-  {
-    selected_key: 'key_3',
-    selected_value: 'Item 4 Value',
-    suffix_value: 'Addition 4',
-    content: ['Item 4 Content A', <>Custom Component</>],
-  },
-]
-
-// 2. as object
-const data = {
-  a: 'A',
-  b: 'B',
-}
-```
+<DrawerListDataDoc />
 
 ## Translations
 

packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/visual-tests.mdx

@@ -5,9 +5,11 @@ draft: true
 import {
   AutocompleteOpened,
   AutocompleteDisabledExample,
+  AutocompleteDisabledOptionsExample,
 } from 'Docs/uilib/components/autocomplete/Examples'
 
 <VisibleWhenVisualTest>
   <AutocompleteOpened />
   <AutocompleteDisabledExample />
+  <AutocompleteDisabledOptionsExample />
 </VisibleWhenVisualTest>