release of v10.20 (#3303)

packages/dnb-design-system-portal/src/docs/contribute/getting-started/make-and-run-tests.mdx

@@ -97,13 +97,13 @@ When a visual test fails, a visual comparison file (diff) will be created. Its l
 
 - `**/__tests__/__image_snapshots__/__diff_output__/*.snap-diff.png`
 
-You find a report entry (`index.html`), that lists all of the failed tests here:
+you can find a report entry (`index.html`), that lists all of the failed tests here:
 
 - `/packages/dnb-eufemia/jest-visual-diff-report/index.html`
 
 You may check out the CI/CLI logs for more details.
 
-**GitHub Actions:** If visual screenshot test is failing on the CI, you can navigate to the test "Summary" where you find "Artifacts". There you can download the **visual-test-artifact** zip file, containing the visual diff files as well as the report entry inside `/jest-visual-diff-report`.
+**GitHub Actions:** If visual screenshot test is failing on the CI, you can navigate to the test "Summary" where you can find "Artifacts". There you can download the **visual-test-artifact** zip file, containing the visual diff files as well as the report entry inside `/jest-visual-diff-report`.
 
 ## Support SCSS snapshot test
 

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

@@ -64,7 +64,7 @@ Running the build command will walk through all parts and tie together all neede
 $ yarn build
 ```
 
-You find the output in the `./packages/dnb-eufemia/build` folder.
+You can find the output in the `./packages/dnb-eufemia/build` folder.
 
 ## Additional component support
 

packages/dnb-design-system-portal/src/docs/contribute/style-guides/git.mdx

@@ -55,7 +55,7 @@ Additional text such as:
 2. List item
 ```
 
-You find more info in the [docs of semantic-release](https://github.com/semantic-release/semantic-release#how-does-it-work) and [Conventional Commits](https://www.conventionalcommits.org/).
+You can find more info in the [docs of semantic-release](https://github.com/semantic-release/semantic-release#how-does-it-work) and [Conventional Commits](https://www.conventionalcommits.org/).
 
 ### Ignore CI run
 

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

@@ -9,7 +9,7 @@ import { Logo } from '@dnb/eufemia/src'
 
 ## Brand Center
 
-**NB!** If you have access to the DNB's Brand Center, [you find the logos under "Visuell identitet"](https://bc.dnb.no/brandcenter/no/dnbvisualguidelines/component/default/761).
+**NB!** If you have access to the DNB's Brand Center, [you can find the logos under "Visuell identitet"](https://bc.dnb.no/brandcenter/no/dnbvisualguidelines/component/default/761).
 
 ## Brandbook
 

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

@@ -13,7 +13,7 @@ import { Icon } from '@dnb/eufemia/src'
 
 You may also have a look at the [<Icon icon={GithubLogo} size="default" />**GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [@dnb/eufemia](/uilib/).
 
-Here you find an overview of all major releases (versions) and changes, including migration guides:
+Here you can find an overview of all major releases (versions) and changes, including migration guides:
 
 - [**@dnb/eufemia@v10**](/uilib/about-the-lib/releases/eufemia/v10-info) _May, 31. 2023_
 - [**@dnb/eufemia@v9**](/uilib/about-the-lib/releases/eufemia/v9-info) _March, 3. 2021_

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

@@ -7,7 +7,7 @@ redirect_from:
 
 ## Since last release info
 
-- In the Customization section you find now ready to use and optimized [favicons](/uilib/usage/customisation#favicon-and-manifest).
+- In the Customization section you can now find the ready to use and optimized [favicons](/uilib/usage/customisation#favicon-and-manifest).
 - New icons: `upload`
 - Added layout [CSS properties](/uilib/usage/layout#sizing) (`--layout-*`), like: `--layout-large: 60em;`
 
@@ -44,6 +44,6 @@ $ npm i dnb-ui-lib@4.18
 $ npm i https://github.com/dnbexperience/eufemia/releases/download/v4.18.0/dnb-ui-lib-4.18.0.tgz
 ```
 
-More details you find in the [Releases section on GitHub](https://github.com/dnbexperience/eufemia/releases)
+More details you can find in the [Releases section on GitHub](https://github.com/dnbexperience/eufemia/releases)
 
 _September, 28. 2019_

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

@@ -1,5 +1,5 @@
 import ComponentBox from '../../../../shared/tags/ComponentBox'
-import { Card, Flex, P } from '@dnb/eufemia/src'
+import { Card, Flex, Grid, H2, P } from '@dnb/eufemia/src'
 import { Field, Form } from '@dnb/eufemia/src/extensions/forms'
 
 export const Default = () => {
@@ -19,6 +19,80 @@ export const Default = () => {
   )
 }
 
+export const WithGrid = () => {
+  return (
+    <ComponentBox data-visual-test="layout-card-grid">
+      <Grid.Container
+        columns={{
+          small: 1,
+          medium: 3,
+          large: 3,
+        }}
+        columnGap="small"
+      >
+        <Card stack>
+          <H2>Heading</H2>
+          <P>Text</P>
+        </Card>
+        <Card stack>
+          <H2>Heading</H2>
+          <P>
+            Pariatur officia sit adipisicing pariatur commodo enim do quis
+          </P>
+        </Card>
+        <Card stack>
+          <H2>Heading</H2>
+          <P>Text</P>
+        </Card>
+      </Grid.Container>
+    </ComponentBox>
+  )
+}
+
+export const WithFlex = () => {
+  return (
+    <ComponentBox data-visual-test="layout-card-flex">
+      <Flex.Container>
+        <Card
+          size={{
+            small: 'auto',
+            medium: 4,
+            large: 4,
+          }}
+          stack
+        >
+          <H2>Heading</H2>
+          <P>Text</P>
+        </Card>
+        <Card
+          size={{
+            small: 'auto',
+            medium: 4,
+            large: 4,
+          }}
+          stack
+        >
+          <H2>Heading</H2>
+          <P>
+            Pariatur officia sit adipisicing pariatur commodo enim do quis
+          </P>
+        </Card>
+        <Card
+          size={{
+            small: 'auto',
+            medium: 4,
+            large: 4,
+          }}
+          stack
+        >
+          <H2>Heading</H2>
+          <P>Text</P>
+        </Card>
+      </Flex.Container>
+    </ComponentBox>
+  )
+}
+
 export const Stack = () => {
   return (
     <ComponentBox data-visual-test="layout-card-stack">

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

@@ -21,3 +21,15 @@ import * as Examples from './Examples'
 ### Stack
 
 <Examples.Stack />
+
+### With Grid
+
+Grid wraps the Cards nicely on smaller screens.
+
+<Examples.WithGrid />
+
+### With Flex
+
+While Flex has the horizontal direction, it uses rowGap when wrapping. So its the container spacing the Cards then. This is not ideal, because the Cards should ideally have no gap, like in the Grid example above.
+
+<Examples.WithFlex />

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

@@ -21,4 +21,5 @@ redirect_from:
 | `no_animation`                          | _(optional)_ NB: Animation is disabled as of now. ~~use `true` to omit the animation on content visibility. Defaults to `false`.~~                                      |
 | `globalStatus`                          | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). |
 | `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                                     |
+| `shellSpace`                            | _(optional)_ Use it to set an inner margin. It supports the same props as `space`. Useful for animation.                                                                |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                   |

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

@@ -21,7 +21,6 @@ export function HeightAnimationDefault() {
       {() => {
         const Example = () => {
           const [openState, setOpenState] = React.useState(false)
-          const [isOpen, setIsOpen] = React.useState(openState)
           const [contentState, setContentState] = React.useState(false)
 
           const onChangeHandler = ({ checked }) => {
@@ -39,7 +38,7 @@ export function HeightAnimationDefault() {
               </ToggleButton>
               <ToggleButton
                 checked={contentState || !openState}
-                disabled={!isOpen}
+                disabled={!openState}
                 on_change={({ checked }) => {
                   setContentState(checked)
                 }}
@@ -49,7 +48,7 @@ export function HeightAnimationDefault() {
               </ToggleButton>
 
               <Section style_type="lavender" top>
-                <HeightAnimation open={openState} onOpen={setIsOpen}>
+                <HeightAnimation open={openState}>
                   <Section spacing style_type="lavender">
                     <P space={0}>Your content</P>
                   </Section>
@@ -114,7 +113,6 @@ export function HeightAnimationKeepInDOM() {
       {() => {
         const Example = () => {
           const [openState, setOpenState] = React.useState(true)
-          const [isOpen, setIsOpen] = React.useState(openState)
           const [contentState, setContentState] = React.useState(false)
 
           const onChangeHandler = ({ checked }) => {
@@ -132,7 +130,7 @@ export function HeightAnimationKeepInDOM() {
               </ToggleButton>
               <ToggleButton
                 checked={contentState || !openState}
-                disabled={!isOpen}
+                disabled={!openState}
                 on_change={({ checked }) => {
                   setContentState(checked)
                 }}
@@ -146,7 +144,6 @@ export function HeightAnimationKeepInDOM() {
                   open={openState}
                   keepInDOM={true}
                   duration={1000}
-                  onOpen={setIsOpen}
                 >
                   <Section spacing style_type="lavender">
                     <P space={0}>Your content</P>

packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/events.mdx

@@ -4,8 +4,9 @@ showTabs: true
 
 ## Events
 
-| Events           | Description                                                                                                                        |
-| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `onOpen`         | _(optional)_ Is called when fully opened or closed. Returns `true` or `false` depending on the state.                              |
-| `onAnimationEnd` | _(optional)_ Is called when animation is done and the full height is reached.                                                      |
-| `onInit`         | _(optional)_ Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class. |
+| Events             | Description                                                                                                                        |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `onOpen`           | _(optional)_ Is called when fully opened or closed. Returns `true` or `false` depending on the state.                              |
+| `onAnimationStart` | _(optional)_ Is called when animation has started.                                                                                 |
+| `onAnimationEnd`   | _(optional)_ Is called when animation is done and the full height is reached.                                                      |
+| `onInit`           | _(optional)_ Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class. |

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

@@ -10,7 +10,8 @@ showTabs: true
 | `animate`                               | _(optional)_ Set to `false` to omit the animation. Defaults to `true`.                                            |
 | `keepInDOM`                             | _(optional)_ Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.       |
 | `showOverflow`                          | _(optional)_ Set to `true` to omit the usage of "overflow: hidden;". Defaults to `false`.                         |
-| `duration`                              | _(optional)_ Custom duration of the animation in ms.                                                              |
+| `duration`                              | _(optional)_ Custom duration of the animation in milliseconds. Defaults to `400ms`.                               |
+| `delay`                                 | _(optional)_ Custom delay of the animation in milliseconds. Defaults to `0ms`.                                    |
 | `element`                               | _(optional)_ Custom HTML element for the component. Defaults to `div` HTML Element.                               |
 | `innerRef`                              | _(optional)_ Send along a custom React Ref.                                                                       |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                             |

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

@@ -51,6 +51,8 @@ Also, this is an example of how to define a different content background color,
 
 By using `prerender={true}` the content is kept inside the DOM.
 
+Also, when switching the tabs, the height is animated.
+
 <TabsExamplePrerender />
 
 ### Tabs optimized for narrow screens

packages/dnb-design-system-portal/src/docs/uilib/elements/code.mdx

@@ -10,7 +10,7 @@ title: 'Code'
 
 - `@dnb/eufemia/style/themes/theme-ui/prism/dnb-prism-theme.js`
 
-You find the theme and its definitions in the [GitHub repository](https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/style/themes/theme-ui/prism/dnb-prism-theme.js).
+You can find the theme and its definitions in the [GitHub repository](https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/style/themes/theme-ui/prism/dnb-prism-theme.js).
 
 ## Code and Pre Tag usage