release of v10.18 (#3231)

dnbexperience · Jan 16, 2024 · da6cec7 · da6cec7
2 parents a365f9a + 92ad8e8
commit da6cec7
Show file tree

Hide file tree

Showing 109 changed files with 1,787 additions and 581 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx
@@ -59,12 +59,6 @@ Tertiary button with long text and text `wrap` enabled.
 
 <ButtonDisabled />
 
-### Error state
-
-Buttons can have an error state
-
-<ButtonErrorState />
-
 <VisibilityByTheme hidden="sbanken">
 
 ### Signal button
@@ -90,3 +84,9 @@ Large Signal button with medium sized icon. To import custom icons, use: `import
 This is, as all of the demos, only an example of how to achieve various needs, and not that you should do it.
 
 <ButtonCustomContent />
+
+<VisibleWhenVisualTest>
+
+<ButtonErrorState />
+
+</VisibleWhenVisualTest>
diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/components/input-masked/events.mdx b/...ages/dnb-design-system-portal/src/docs/uilib/components/input-masked/events.mdx
@@ -13,6 +13,8 @@ showTabs: true
 
 ### MultiInputMask
 
-| Events     | Description                                                                                                                                                                    |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onChange` | _(optional)_ runs an input value changes. Has an object parameter with keys matching the id's defined in `inputs`, and values of string. E.g: `{month: string, year: string}`. |
+| Events     | Description                                                                                                                                                                         |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onChange` | _(optional)_ runs when an input value changes. Has an object parameter with keys matching the id's defined in `inputs`, and values of string. E.g: `{month: string, year: string}`. |
+| `onFocus`  | _(optional)_ runs when an input gains focus. Has an object parameter with keys matching the id's defined in `inputs`, and values of string. E.g: `{month: string, year: string}`.   |
+| `onBlur`   | _(optional)_ runs when an input lose focus. Has an object parameter with keys matching the id's defined in `inputs`, and values of string. E.g: `{month: string, year: string}`.    |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/Examples.tsx
@@ -122,7 +122,12 @@ export const ToggleButtonStatusMessages = () => (
 
 export const ToggleButtonDisabledGroup = () => (
   <ComponentBox data-visual-test="toggle-button-group-disabled">
-    <ToggleButton.Group label="Disabled Group" disabled variant="checkbox">
+    <ToggleButton.Group
+      label="Disabled Group"
+      disabled
+      value="first"
+      variant="checkbox"
+    >
       <ToggleButton text="First" value="first" />
       <ToggleButton text="Second" value="second" />
       <ToggleButton text="Third" value="third" checked />

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden.mdx
@@ -2,6 +2,8 @@
 title: 'VisuallyHidden'
 description: 'VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.'
 showTabs: true
+hideTabs:
+  - title: Events
 theme: 'sbanken'
 ---
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx
@@ -8,6 +8,7 @@ breadcrumb:
     href: /uilib/extensions/forms/
 ---
 
+import * as Examples from './forms/Examples'
 import InlineImg from 'dnb-design-system-portal/src/shared/tags/Img'
 import FormDiagram1 from 'Docs/uilib/extensions/forms/form-diagram-1.png'
 import FormDiagram2 from 'Docs/uilib/extensions/forms/form-diagram-2.png'
@@ -66,6 +67,24 @@ render(
 )
 ```
 
+Use the [useData](/uilib/extensions/forms/extended-features/Form/useData/) hook to access or modify your form data outside of the form context within your application:
+
+```jsx
+import { Form } from '@dnb/eufemia/extensions/forms'
+function Component() {
+  const { data, update } = Form.useData('unique')
+
+  return (
+    <Form.Handler
+      id="unique"
+      ...
+    >
+      ...
+    </Form.Handler>
+  )
+}
+```
+
 ## Philosophy
 
 Eufemia Forms is:
@@ -88,8 +107,9 @@ In summary:
 
 - Ready to use data driven form components.
 - All functionality in all components can be controlled and overridden via props.
-- State management using the declarative [JSON Pointer](https://datatracker.ietf.org/doc/html/draft-ietf-appsawg-json-pointer-03) directive (i.e `path="/firstName"`).
-- Simple validation (like `minLength` on text fields) as well as [Ajv JSON schema validator](https://ajv.js.org/) support on both single fields and the whole data set.
+- State management using the declarative [JSON Pointer](/uilib/extensions/forms/#what-is-a-json-pointer) directive (i.e `path="/firstName"`).
+- State can be handled outside of the Form.Handler (Provider Context) with the [useData](/uilib/extensions/forms/extended-features/Form/useData) hook.
+- Simple validation (like `minLength` on text fields) as well as advanced and complex [Ajv](https://ajv.js.org/) JSON schema validator (Ajv is like Joi or Yup – check out [some examples](/uilib/extensions/forms/extended-features/#schema-validation)) support on both single fields and the whole data set.
 - Building blocks for [creating custom field components](/uilib/extensions/forms/create-component).
 - Static [value components](/uilib/extensions/forms/extended-features/Value/) for displaying data with proper formatting.
 
@@ -151,6 +171,10 @@ The data-driven [base field components](/uilib/extensions/forms/base-fields) are
 
 On top of these, a number of [feature fields](/uilib/extensions/forms/feature-fields) have been built that have special functionality based on given types of data, such as bank account numbers, e-mails and social security numbers.
 
+### Value components
+
+Beside the interactive [Field](/uilib/extensions/forms/fields/) components, there are also the static [Value](/uilib/extensions/forms/extended-features/Value/) components. Use these to show summaries or read-only parts of your application with benefits such as linking to source data and standardized formatting based on the type of data to be displayed.
+
 ### Layout
 
 When building your application forms, preferably use the following layout components. They seamlessly places all the fields and components of Eufemia Forms correctly into place.
@@ -162,13 +186,32 @@ When building your application forms, preferably use the following layout compon
 
 To build an entire form, there are surrounding components such as [Form.Handler](/uilib/extensions/forms/extended-features/Form/Handler) and [StepsLayout](/uilib/extensions/forms/extended-features/StepsLayout) that make data flow and layout easier and save you a lot of extra code, without compromising flexibility.
 
-#### Related topics
+### State management
 
-- [Best Practices on Forms](/uilib/extensions/forms/best-practices-on-forms/).
+The state management is done via the [JSON Pointer](/uilib/extensions/forms/#what-is-a-json-pointer) directive (i.e `path="/firstName"`). This is a standardized way of pointing to a specific part of a JavaScript/JSON object. The JSON Pointer is used to both read and write data, and is also used to validate the data.
 
-### Value components
+<Examples.GettingStarted />
 
-Beside the interactive [Field](/uilib/extensions/forms/fields/) components, there are also the static [Value](/uilib/extensions/forms/extended-features/Value/) components. Use these to show summaries or read-only parts of your application with benefits such as linking to source data and standardized formatting based on the type of data to be displayed.
+### What is a JSON Pointer?
+
+A [JSON Pointer](https://datatracker.ietf.org/doc/html/draft-ietf-appsawg-json-pointer-03) is a string of tokens separated by `/` characters, these tokens either specify keys in objects or indexes into arrays.
+
+```ts
+const data = {
+  foo: {
+    bar: [
+      {
+        baz: 'value',
+      },
+    ],
+  },
+}
+const pointer = '/foo/bar/0/baz' // points to 'value'
+```
+
+### Best Practices
+
+- [Best Practices on Forms](/uilib/extensions/forms/best-practices-on-forms/).
 
 ## Create your own components
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx
@@ -74,6 +74,65 @@ export const CreateBasicFieldComponent = () => {
   )
 }
 
+export const GettingStarted = () => {
+  return (
+    <ComponentBox hideCode>
+      {() => {
+        const existingData = {
+          companyName: 'DNB',
+          companyOrganizationNumber: '123456789',
+          postalAddressSelect: 'companyAddress',
+        }
+
+        function Component() {
+          const { data } = Form.useData('company-form')
+          console.log('State:', data)
+
+          return (
+            <Form.Handler
+              id="company-form"
+              data={existingData}
+              onChange={console.log}
+              onSubmit={console.log}
+            >
+              <Flex.Stack>
+                <Form.MainHeading>Bedrift</Form.MainHeading>
+                <Card spacing="medium">
+                  <Field.String
+                    path="/companyName"
+                    label="Bedriftens navn"
+                    required
+                  />
+                  <Field.OrganizationNumber
+                    path="/companyOrganizationNumber"
+                    required
+                  />
+                  <Field.Selection
+                    path="/postalAddressSelect"
+                    label="Ønsket sted for tilsendt post"
+                    variant="radio"
+                  >
+                    <Field.Option
+                      value="companyAddress"
+                      title="Samme som forretningsadresse"
+                    />
+                    <Field.Option value="other" title="Annet" />
+                  </Field.Selection>
+                </Card>
+                <Form.ButtonRow>
+                  <Form.SubmitButton />
+                </Form.ButtonRow>
+              </Flex.Stack>
+            </Form.Handler>
+          )
+        }
+
+        return <Component />
+      }}
+    </ComponentBox>
+  )
+}
+
 export const CreateComposedFieldComponent = () => {
   return (
     <ComponentBox

diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection.mdx b/...gn-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection.mdx
@@ -1,9 +1,9 @@
 ---
 title: 'ArraySelection'
-description: '`Field.ArraySelection` is a component for selecting between a fixed set of options using a dropdown, checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.'
+description: '`Field.ArraySelection` is a component for selecting between a fixed set of options using checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.'
 componentType: 'base-selection'
-hideInMenu: true
 showTabs: true
+theme: 'sbanken'
 tabs:
   - title: Info
     key: '/info'

diff --git a/...tem-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/demos.mdx b/...tem-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/demos.mdx
@@ -8,84 +8,88 @@ import * as Examples from './Examples'
 
 ### Checkbox variant (default)
 
-#### Empty
-
 <Examples.CheckboxEmpty />
 
-#### Label
+### Button variant
+
+<Examples.ButtonEmpty />
+
+---
+
+### Checkbox variant demos
+
+#### Checkbox label
 
 <Examples.CheckboxLabel />
 
-#### Option selected
+#### Checkbox option selected
 
 <Examples.CheckboxOptionSelected />
 
-#### Horizontal layout
+#### Checkbox horizontal layout
 
 <Examples.CheckboxHorizontalLayout />
 
-#### Horizontal options-layout
+#### Checkbox horizontal options-layout
 
 <Examples.CheckboxHorizontalOptionsLayout />
 
-#### Horizontal layout and horizontal options-layout
+#### Checkbox horizontal layout and horizontal options-layout
 
 <Examples.CheckboxHorizontalLayoutAndHorizontalOptionsLayout />
 
-#### Disabled
+#### Checkbox disabled
 
 <Examples.CheckboxDisabled />
 
-#### Info
+#### Checkbox info
 
 <Examples.CheckboxInfo />
 
-#### Warning
+#### Checkbox warning
 
 <Examples.CheckboxWarning />
 
-#### Error
+#### Checkbox error
 
 <Examples.CheckboxError />
 
-### Button variant
-
-#### Empty
+---
 
-<Examples.ButtonEmpty />
+### Button variant demos
 
-#### Label
+#### Button Label
 
 <Examples.ButtonLabel />
 
-#### Option selected
+#### Button option selected
 
 <Examples.ButtonOptionSelected />
 
-#### Horizontal layout
+#### Button horizontal layout
 
 <Examples.ButtonHorizontalLayout />
 
-#### Horizontal options-layout
+#### Button horizontal options-layout
 
 <Examples.ButtonHorizontalOptionsLayout />
 
-#### Horizontal layout and horizontal options-layout
+#### Button horizontal layout and horizontal options-layout
 
 <Examples.ButtonHorizontalLayoutAndHorizontalOptionsLayout />
 
-#### Disabled
+#### Button disabled
 
 <Examples.ButtonDisabled />
 
-#### Info
+#### Button info
 
 <Examples.ButtonInfo />
 
-#### Warning
+#### Button warning
 
 <Examples.ButtonWarning />
 
-#### Error
+#### Button error
 
 <Examples.ButtonError />
diff --git a/...stem-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx b/...stem-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx
@@ -4,4 +4,4 @@ showTabs: true
 
 ## Description
 
-`Field.ArraySelection` is a component for selecting between a fixed set of options using a dropdown, checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.
+`Field.ArraySelection` is a component for selecting between a fixed set of options using checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,4 @@ showTabs: true

		## Description

		`Field.ArraySelection` is a component for selecting between a fixed set of options using a dropdown, checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.
		`Field.ArraySelection` is a component for selecting between a fixed set of options using checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.