release of v10.37 (#3722)

.github/workflows/release.yml

@@ -59,15 +59,6 @@ jobs:
       - name: Audit dependencies
         run: yarn workspace @dnb/eufemia audit:ci
 
-      - name: Run lint
-        run: yarn workspace @dnb/eufemia lint:ci && yarn workspace dnb-design-system-portal lint:ci
-
-      - name: Run type checks
-        run: yarn workspace @dnb/eufemia test:types && yarn workspace dnb-design-system-portal test:types
-
-      - name: Run tests
-        run: yarn workspace @dnb/eufemia test:ci && yarn workspace dnb-design-system-portal test:ci
-
       - name: Prebuild Library
         run: yarn workspace @dnb/eufemia prebuild:ci
 

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

@@ -10,7 +10,15 @@ import {
   add_medium as AddIcon,
   subtract_medium as SubtractIcon,
 } from '@dnb/eufemia/src/icons'
-import { Accordion, P, Icon, Grid, Flex, Heading } from '@dnb/eufemia/src'
+import {
+  Accordion,
+  P,
+  Icon,
+  Grid,
+  Flex,
+  Heading,
+  Button,
+} from '@dnb/eufemia/src'
 
 export const AccordionDefaultExample = () => (
   <ComponentBox data-visual-test="accordion-default">
@@ -293,3 +301,61 @@ export const AccordionInColumns = () => {
     </ComponentBox>
   )
 }
+
+export function AccordionCloseAllInGroup() {
+  const collapseAll = React.createRef<() => void>()
+
+  return (
+    <>
+      <Button
+        bottom="large"
+        variant="secondary"
+        onClick={() => collapseAll.current()}
+      >
+        Close All
+      </Button>
+      <Accordion.Group
+        expanded
+        allow_close_all
+        collapseAllHandleRef={collapseAll}
+      >
+        <Accordion expanded>
+          <Accordion.Header>Accordion title 1</Accordion.Header>
+          <Accordion.Content>
+            <P>
+              Sociis sapien sociosqu vel sollicitudin accumsan laoreet
+              gravida himenaeos nostra mollis volutpat bibendum convallis
+              cum condimentum dictumst blandit rutrum vehicula
+            </P>
+          </Accordion.Content>
+        </Accordion>
+        <Accordion expanded>
+          <Accordion.Header>Accordion title 2</Accordion.Header>
+          <Accordion.Content>
+            {() => {
+              return (
+                <P>
+                  Nec sit mattis natoque interdum sagittis cubilia nibh
+                  nullam etiam
+                </P>
+              )
+            }}
+          </Accordion.Content>
+        </Accordion>
+        <Accordion expanded>
+          <Accordion.Header>Accordion title 2</Accordion.Header>
+          <Accordion.Content>
+            {() => {
+              return (
+                <P>
+                  Nec sit mattis natoque interdum sagittis cubilia nibh
+                  nullam etiam
+                </P>
+              )
+            }}
+          </Accordion.Content>
+        </Accordion>
+      </Accordion.Group>
+    </>
+  )
+}

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

@@ -14,6 +14,7 @@ import {
   AccordionDescriptionExample,
   AccordionFilledExample,
   AccordionInColumns,
+  AccordionCloseAllInGroup,
 } from 'Docs/uilib/components/accordion/Examples'
 
 ## Demos
@@ -67,3 +68,23 @@ Accordion can be disabled, though is not exactly defined what the use case is.
 <VisibleWhenVisualTest>
   <AccordionDescriptionExample />
 </VisibleWhenVisualTest>
+
+### Close All Accordions In A Group
+
+You can collapse all expanded accordions by sending a ref to the `collapseAllHandleRef` prop and calling the `.current()` function on your ref.
+
+```tsx
+const myCloseAllRef = React.useRef<() => void>()
+
+return (
+  <button onClick={() => myCloseAllRef.current()}>
+    Close all accordions
+  </button>
+
+  <Accordion.Group collapseAllHandleRef={myTableCollapseAll}>
+    {/* ... your accordions */}
+  </Accordion.Group>
+)
+```
+
+<AccordionCloseAllInGroup />

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

@@ -2,8 +2,9 @@
 showTabs: true
 ---
 
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { AccordionEvents } from '@dnb/eufemia/src/components/accordion/AccordionDocs'
+
 ## Events
 
-| Events      | Description                                                                                                                                          |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `on_change` | _(optional)_ will be called by user click interaction. Returns an object with a boolean state `expanded` inside `{ expanded, id, event, ...event }`. |
+<PropertiesTable props={AccordionEvents} />

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

@@ -2,39 +2,18 @@
 showTabs: true
 ---
 
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import {
+  AccordionProperties,
+  AccordionProviderGroupProperties,
+} from '@dnb/eufemia/src/components/accordion/AccordionDocs'
+
 ## Properties
 
 These properties can send along with the `Accordion.Provider` or `Accordion.Group`. It will affect every nested `Accordion`.
 
-| Accordion Properties                    | Description                                                                                                                                                                                                                                  |
-| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                                    | _(optional)_ a unique `id` that will be used on the button element. If you use `remember_state`, an id is required.                                                                                                                          |
-| `title`                                 | _(optional)_ a title as a string or React element. It will be used as the button text.                                                                                                                                                       |
-| `expanded`                              | _(optional)_ if set to `true` the accordion will be expanded as its initial state.                                                                                                                                                           |
-| `expanded_ssr`                          | _(optional)_ if set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that's mainly a technical aspect to consider. |
-| `remember_state`                        | _(optional)_ if set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.                                                                               |
-| `flush_remembered_state`                | _(optional)_ if set to `true`, the saved (remembered) will be removed and the initial component state will be used and set.                                                                                                                  |
-| `no_animation`                          | _(optional)_ if set to `true`, the open and close animation will be omitted.                                                                                                                                                                 |
-| `variant`                               | _(optional)_ defines the used styling. `outlined`, `filled`, or `plain`(no styling). Defaults to `outlined`.                                                                                                                                 |
-| `icon`                                  | _(optional)_ will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`.                         |
-| `icon_position`                         | _(optional)_ will set the placement of the icon. Defaults to `left`.                                                                                                                                                                         |
-| `icon_size`                             | _(optional)_ define a different icon size. Defaults to `medium` (1.5rem).                                                                                                                                                                    |
-| `left_component`                        | _(optional)_ will add a React element on the left side of the `title`, inside `AccordionHeaderContainer`.                                                                                                                                    |
-| `prerender`                             | _(optional)_ if set to `true` the content will be present, even the accordion is not expanded. Can be useful for assistive technology or SEO.                                                                                                |
-| `prevent_rerender`                      | _(optional)_ if set to `true` the accordion component will not re-render its content – can be useful for widgets you don't have control of storing the temporary state during an interaction.                                                |
-| `prevent_rerender_conditional`          | _(optional)_ use this prop together with `prevent_rerender` – and if it is to `true`, the accordion component will re-render if the children are a new React element and does not match the previous one anymore.                            |
-| `single_container`                      | _(optional)_ if set to `true`, a group of accordions will be wrapped to sidebar looking menu for medium and larger screens.                                                                                                                  |
-| `element`                               | _(optional)_ gives you the option to replace the used `button` element. Provide a React element, including a string (HTML element). Defaults to a `div` with all the needed accessibility features included.                                 |
-| `heading`                               | _(optional)_ if set to `true`, level 2 (h2) will be used. You can provide your own HTML heading (`h3`), or provide a `heading_level` property.                                                                                               |
-| `heading_level`                         | _(optional)_ if `heading` is set to `true`, you can provide a numeric value to define a different heading level. Defaults to `2`.                                                                                                            |
-| `disabled`                              | _(optional)_ if set to `true`, the accordion button will be disabled (dimmed).                                                                                                                                                               |
-| `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                                                                                                          |
-| `contentRef`                            | _(optional)_ send along a custom React Ref for `.dnb-accordion__content`.                                                                                                                                                                    |
-| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                        |
+<PropertiesTable props={AccordionProperties} />
+
+## Accordion.Provider and Accordion.Group Properties
 
-| Accordion.Provider and Accordion.Group Properties | Description                                                                              |
-| ------------------------------------------------- | ---------------------------------------------------------------------------------------- |
-| `group`                                           | _(optional)_ define a unique id, it will be used to "group" several accordions into one. |
-| `allow_close_all`                                 | _(optional)_ if set to `true`, the group of accordions will allow all to close.          |
-| `expanded_id`                                     | _(optional)_ define an `id` of a nested accordion that will get expanded.                |
-| [Space](/uilib/layout/space/properties)           | _(optional)_ spacing properties like `top` or `bottom` are supported.                    |
+<PropertiesTable props={AccordionProviderGroupProperties} />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/properties.mdx

@@ -5,6 +5,11 @@ showTabs: true
 import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
+import { DateProperties } from '@dnb/eufemia/src/extensions/forms/Value/Date/DateDocs'
+
+## Component-specific props
+
+<PropertiesTable props={DateProperties} />
 
 ## Properties
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/info.mdx

@@ -13,6 +13,30 @@ import { Field } from '@dnb/eufemia/extensions/forms'
 render(<Field.Boolean path="/myState" />)
 ```
 
-### Indeterminate checkbox
+## Indeterminate checkbox
 
 Here is a indeterminate state (partially checked) [working example](/uilib/extensions/forms/base-fields/Indeterminate/).
+
+## Schema validation
+
+You can use a Ajv schema to validate the value with either `const` or `enum`.
+
+```tsx
+import { Form, Field } from '@dnb/eufemia/extensions/forms'
+
+const schema = {
+  type: 'object',
+  properties: {
+    myField: {
+      type: 'boolean',
+      const: true, // or enum: [true]
+    },
+  },
+}
+
+render(
+  <Form.Handler schema={schema} data={{ myField: false }}>
+    <Field.Boolean path="/myField" />
+  </Form.Handler>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/getting-started.mdx

@@ -432,6 +432,8 @@ You can customize the translations in a form by using the `translations` propert
 
 Alternatively, you can use the global Eufemia [Provider](/uilib/usage/customisation/localization/) (example further down).
 
+You can find all available strings/keys in the properties tab of each field component. You can have a look at the [PhoneNumber field](!/uilib/extensions/forms/feature-fields/PhoneNumber/properties/#translations).
+
 ```tsx
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
 

packages/dnb-eufemia/src/components/accordion/Accordion.tsx

@@ -175,6 +175,7 @@ function Accordion({
   const [expanded, setExpanded] = useState<boolean>(
     getInitialExpandedState()
   )
+  const hasAddedCallbackRef = useRef<boolean>(false)
 
   // replacement for getDerivedStateFromProps
   if (props.expanded !== previousExpanded) {
@@ -228,6 +229,14 @@ function Accordion({
     }
   }, [context.flush_remembered_state, context.expanded_id])
 
+  // Add callback for closing all accordions inside a group if collapseAllHandleRef is defined
+  if (context?.collapseAllHandleRef && !hasAddedCallbackRef.current) {
+    context?.collapseAccordionCallbacks?.current.push(() =>
+      changeOpened(false)
+    )
+    hasAddedCallbackRef.current = true
+  }
+
   // Gets the initial expanded sate, to prevent the opening and closing of Accordion
   // That happens when if we put this logic in a useEffect that runs after the initial expanded state is set
   // Since useEffect runs after every render
@@ -297,7 +306,7 @@ function Accordion({
       event,
     })
   }
-
+  console.log('context', context)
   return (
     <Context.Consumer>
       {(globalContext) => (
@@ -427,6 +436,12 @@ Accordion.defaultProps = accordionDefaultProps
 
 export type GroupProps = AccordionProps & {
   allow_close_all?: boolean
+  /**
+   * ref handle to collapse all expanded accordions. Send in a ref and use `.current()` to collapse all accordions.
+   *
+   * Default: `undefined`
+   */
+  collapseAllHandleRef?: React.MutableRefObject<() => void>
   expanded_id?: string
 }