release of v10.19 (#3253)

packages/dnb-design-system-portal/.eslintignore

@@ -1,5 +1,4 @@
 !/*.js
-!/**/.eslintrc.js
 **/tests/**/*.js
 **/public/**
 **/static/**

packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx

@@ -1,8 +1,22 @@
+## January, 18. 2024
+
+- New component: [AriaLive](/uilib/components/aria-live)
+
+## November 03, 2023
+
+- Add responsive properties for [Section](/uilib/component/section/) component.
+
+## October 19, 2023
+
+- New components released:
+  - [Card](/uilib/components/card/)
+  - [Flex](/uilib/layout/flex/)
+  - [Grid](/uilib/layout/grid/)
+
 ## May, 31. 2023
 
 - [New major version 10](/uilib/about-the-lib/releases/eufemia/v10-info/)
-- New components released:
-  - [SkipContent](/uilib/components/skip-content)
+- New component: [SkipContent](/uilib/components/skip-content)
 - [GlobalError](/uilib/components/global-error) got new styles (without illustrations).
 - New [Icons](/icons/secondary):
   - `handshake`

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

@@ -0,0 +1,15 @@
+---
+title: 'AriaLive'
+description: 'AriaLive is a React component and hook that helps make your web app more accessible by announcing dynamic changes to screen readers.'
+showTabs: true
+hideTabs:
+  - title: Events
+theme: 'sbanken'
+status: 'new'
+---
+
+import AriaLiveInfo from 'Docs/uilib/components/aria-live/info'
+import AriaLiveDemos from 'Docs/uilib/components/aria-live/demos'
+
+<AriaLiveInfo />
+<AriaLiveDemos />

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

@@ -0,0 +1,154 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import { Field, FieldBlock, Form } from '@dnb/eufemia/src/extensions/forms'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+import { AriaLive, Button, Flex, P } from '@dnb/eufemia/src'
+
+export const AriaLivePlayground = () => (
+  <ComponentBox hideCode>
+    {() => {
+      const priorities = ['low', 'high']
+      const contents = {
+        default: 'This is a default announcement',
+        second: 'And a second one',
+        third: 'A third one',
+        fourth: 'And a fourth one',
+      }
+      const priority: 'low' | 'high' = 'low'
+      const defaultData = {
+        enabled: false,
+        content: contents.default,
+        priority,
+      }
+
+      function AriaLiveExample() {
+        const { data } = Form.useData('aria-live-playground', defaultData)
+
+        return (
+          <Form.Handler id="aria-live-playground">
+            <Flex.Stack>
+              <Field.Boolean label="Enabled" path="/enabled" />
+              <Field.Selection
+                variant="button"
+                optionsLayout="horizontal"
+                label="Priority"
+                path="/priority"
+              >
+                {priorities.map((content) => {
+                  return (
+                    <Field.Option
+                      key={content}
+                      title={content}
+                      value={content}
+                    />
+                  )
+                })}
+              </Field.Selection>
+
+              <Field.Selection
+                optionsLayout="horizontal"
+                label="Content"
+                path="/content"
+              >
+                {Object.entries(contents).map(([key, value]) => {
+                  return (
+                    <Field.Option key={key} title={key} value={value} />
+                  )
+                })}
+              </Field.Selection>
+
+              <Field.String
+                label="Content as freetext"
+                path="/content"
+                multiline
+              />
+
+              <Flex.Item>
+                Output:{' '}
+                <AriaLive
+                  delay={1000}
+                  disabled={!data.enabled}
+                  priority={data.priority}
+                  showAnnouncement
+                >
+                  Message: {data.content}
+                </AriaLive>
+              </Flex.Item>
+            </Flex.Stack>
+          </Form.Handler>
+        )
+      }
+
+      return <AriaLiveExample />
+    }}
+  </ComponentBox>
+)
+
+export const AriaLiveAdditions = () => (
+  <ComponentBox hideCode scope={{ FieldBlock }}>
+    {() => {
+      const defaultData = {
+        enabled: false,
+        content: [<P key="one">Line 1</P>],
+      }
+
+      function AriaLiveExample() {
+        const { data, update } = Form.useData(
+          'aria-live-additions',
+          defaultData,
+        )
+
+        return (
+          <Form.Handler id="aria-live-additions">
+            <Flex.Stack>
+              <Field.Boolean label="Enabled" path="/enabled" />
+
+              <FieldBlock label="Content">
+                <Form.ButtonRow>
+                  <Button
+                    text="Add more content"
+                    variant="secondary"
+                    icon="add"
+                    icon_position="left"
+                    on_click={() => {
+                      update('/content', (content) => {
+                        const c = content.length + 1
+                        content.push(<P key={c}>Line {c}</P>)
+                        return content
+                      })
+                    }}
+                  />
+                  <Button
+                    text="Remove content"
+                    variant="tertiary"
+                    icon="subtract"
+                    icon_position="left"
+                    on_click={() => {
+                      update('/content', (content) => {
+                        content.pop()
+                        return content
+                      })
+                    }}
+                  />
+                </Form.ButtonRow>
+              </FieldBlock>
+
+              <Flex.Item>
+                Output:{' '}
+                <AriaLive variant="content" disabled={!data.enabled}>
+                  Message: {data.content}
+                </AriaLive>
+              </Flex.Item>
+            </Flex.Stack>
+          </Form.Handler>
+        )
+      }
+
+      return <AriaLiveExample />
+    }}
+  </ComponentBox>
+)

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

@@ -0,0 +1,15 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Playground
+
+<Examples.AriaLivePlayground />
+
+### Additions
+
+<Examples.AriaLiveAdditions />

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

@@ -0,0 +1,52 @@
+---
+showTabs: true
+---
+
+## Description
+
+AriaLive is a React component and hook that helps make your web app more accessible by adding or defining an ARIA live region that announces dynamic changes to screen readers.
+
+Use it to manually inform users using a screen reader, about changes on the screen that isn't normally covered by screen readers.
+
+By default, the `AriaLive` component will announce changes to the screen reader in a polite manner. This means that the announcement will wait until the screen reader is idle. This is the recommended way to use the component.
+
+## Usage
+
+For invisible text content:
+
+```tsx
+import { AriaLive } from '@dnb/eufemia'
+render(<AriaLive>invisible message to announce</AriaLive>)
+```
+
+For content that is visible, but where changes need to be announced:
+
+```tsx
+import { AriaLive } from '@dnb/eufemia'
+render(
+  <AriaLive variant="content">
+    <ul>
+      <li>item one</li>
+      <li>item two</li>
+      {/* When item three appears, it will be announced */}
+    </ul>
+  </AriaLive>,
+)
+```
+
+## Priority
+
+The `priority` prop in the `AriaLive` component is used to control the urgency of the announcement. It can be set to `high` (defaults to `low`). This allows you to control how assertive the announcement should be, helping to create a better user experience for users who rely on screen readers.
+
+## AriaLive Hook
+
+The `useAriaLive` hook is a part of the `AriaLive` component. It can be used to make announcements in functional components. In this example `<section>` is turned into an ARIA live region with all the functionality of the `<AriaLive>` component:
+
+```tsx
+import useAriaLive from '@dnb/eufemia/components/aria-live/useAriaLive'
+
+function MyCustomAriaLive(props) {
+  const ariaAttributes = useAriaLive(props)
+  return <section {...ariaAttributes} />
+}
+```

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

@@ -0,0 +1,17 @@
+---
+showTabs: true
+---
+
+## Properties
+
+| Properties         | Types       | Description                                                                                                                             |
+| ------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `variant`          | `string`    | _(optional)_ Can be `text` for text messages or `content` for whole application content. Defaults to `text`.                            |
+| `priority`         | `string`    | _(optional)_ Priority of the announcement. Can be `low` or `high`. Defaults to `low`.                                                   |
+| `delay`            | `number`    | _(optional)_ Delay in milliseconds before the announcement is made. Defaults to `1000`.                                                 |
+| `disabled`         | `boolean`   | _(optional)_ If `true`, the announcement will not be made. Defaults to `false`.                                                         |
+| `atomic`           | `boolean`   | _(optional)_ If `true`, assistive technologies will present the entire region as a whole. If `false`, only additions will be announced. |
+| `politeness`       | `string`    | _(optional)_ The politeness setting for the announcement. Can be `polite` or `assertive`.                                               |
+| `relevant`         | `string`    | _(optional)_ A space-separated list of the types of changes that should be announced. Can be `additions`, `removals`, `text`, or `all`. |
+| `showAnnouncement` | `boolean`   | _(optional)_ Whether to show the children or not.                                                                                       |
+| `children`         | `ReactNode` | The content that will be announced to the user.                                                                                         |

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

@@ -50,6 +50,7 @@ import {
 | `status_state`                          | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.                                                                                                                                                                                                                                                                |
 | `status_props`                          | _(optional)_ use an object to define additional FormStatus properties.                                                                                                                                                                                                                                                                                                               |
 | `disable_autofocus`                     | _(optional)_ once the date picker gets opened, there is a focus handling to ensure good accessibility. This can be disabled with this property. Defaults to `false`.                                                                                                                                                                                                                 |
+| `correct_invalid_date`                  | _(optional)_ corrects the input date value to be the same as either `min_date` or `max_date`, when the user types in a date that is either before or after one of these. 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.                                                                                                                                                                                                                                                                                                  |
 | `size`                                  | _(optional)_ the sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`.                                                                                                                                                                                                     |

packages/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter.mdx

@@ -0,0 +1,15 @@
+---
+title: 'TextCounter'
+description: 'The TextCounter is a component designed to provide real-time character count feedback in text input fields.'
+showTabs: true
+theme: 'sbanken'
+status: null
+hideTabs:
+  - title: Events
+---
+
+import Info from './text-counter/info'
+import Demos from './text-counter/demos'
+
+<Info />
+<Demos />

packages/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter/Examples.tsx

@@ -0,0 +1,86 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from '../../../../../shared/tags/ComponentBox'
+import { TextCounter } from '@dnb/eufemia/src/fragments'
+import { Field, Form } from '@dnb/eufemia/src/extensions/forms'
+import { Flex } from '@dnb/eufemia/src'
+import type { TextCounterProps } from '@dnb/eufemia/src/fragments/text-counter/TextCounter'
+
+export function CountCharactersDown() {
+  return (
+    <ComponentBox data-visual-test="text-counter-down">
+      <TextCounter variant="down" text="test" max={10} />
+    </ComponentBox>
+  )
+}
+
+export function CountCharactersUp() {
+  return (
+    <ComponentBox data-visual-test="text-counter-up">
+      <TextCounter variant="up" text="test" max={10} />
+    </ComponentBox>
+  )
+}
+
+export function CountCharactersExceeded() {
+  return (
+    <ComponentBox data-visual-test="text-counter-exceeded">
+      <TextCounter text="test" max={2} />
+    </ComponentBox>
+  )
+}
+
+export function CountCharactersInteractive() {
+  return (
+    <ComponentBox>
+      {() => {
+        const text = 'Count me!'
+        const variant: TextCounterProps['variant'] = 'down'
+        const initialData = {
+          max: 10,
+          variant,
+          text,
+        }
+
+        const Counter = () => {
+          const { data } = Form.useData('text-counter', initialData)
+          return (
+            <Flex.Stack divider="line">
+              <Flex.Vertical spacing="x-small">
+                <Field.String
+                  label="Text"
+                  path="/text"
+                  maxLength={data.max}
+                />
+                <TextCounter
+                  variant={data.variant}
+                  text={data.text}
+                  max={data.max}
+                />
+              </Flex.Vertical>
+              <Field.Toggle
+                valueOn="down"
+                valueOff="up"
+                textOn="Down"
+                textOff="Up"
+                variant="buttons"
+                label="Variant"
+                path="/variant"
+              />
+            </Flex.Stack>
+          )
+        }
+
+        return (
+          <Form.Handler id="text-counter">
+            <Counter />
+          </Form.Handler>
+        )
+      }}
+    </ComponentBox>
+  )
+}