release of v10.41 (#3774)

dnbexperience · Jul 23, 2024 · 700198c · 700198c
2 parents 10f01b7 + 4ea8933
commit 700198c
Show file tree

Hide file tree

Showing 54 changed files with 1,679 additions and 173 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/demos.mdx
@@ -74,14 +74,14 @@ Accordion can be disabled, though is not exactly defined what the use case is.
 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>()
+const myCollapseAllRef = React.useRef<() => void>()
 
 return (
   <button onClick={() => myCloseAllRef.current()}>
     Close all accordions
   </button>
 
-  <Accordion.Group collapseAllHandleRef={myTableCollapseAll}>
+  <Accordion.Group collapseAllHandleRef={myCollapseAllRef}>
     {/* ... your accordions */}
   </Accordion.Group>
 )

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.tsx
@@ -15,7 +15,13 @@ import {
   P,
   Flex,
 } from '@dnb/eufemia/src'
-import { download, trash } from '@dnb/eufemia/src/icons'
+import {
+  chevron_down,
+  chevron_right,
+  download,
+  newspaper,
+  trash,
+} from '@dnb/eufemia/src/icons'
 
 import type { DropdownAllProps } from '@dnb/eufemia/src/components/dropdown/Dropdown'
 
@@ -659,3 +665,89 @@ export const DropdownListOpened = () => (
     </ComponentBox>
   </Wrapper>
 )
+
+export const DropdownCustomizedLook = () => {
+  return (
+    <Wrapper>
+      <ComponentBox scope={{ chevron_right, newspaper, chevron_down }}>
+        {() => {
+          const styles = {
+            customTrigger: {
+              backgroundColor: '#d4ecc5',
+              color: '#14555a',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '8px 16px',
+              fontWeight: 600,
+            },
+            customMenuItem: {
+              display: 'flex',
+              flexFlow: 'row nowrap',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            },
+            customMenuItemTitle: {
+              display: 'flex',
+              flexFlow: 'column',
+              gap: '0.5rem',
+            },
+          }
+
+          const MenuItem = ({ title, content, key }) => (
+            <span style={styles.customMenuItem} key="item-1">
+              <span style={styles.customMenuItemTitle}>
+                {title}
+                <span>{content}</span>
+              </span>
+              <Icon icon={chevron_right} />
+            </span>
+          )
+
+          const data = {
+            accounts: (
+              <MenuItem
+                key="item-1"
+                title="Accounts"
+                content={'Bills, Savings'}
+              />
+            ),
+            loans: (
+              <MenuItem
+                key="item-2"
+                title="Loans"
+                content={'Mortgage, Car'}
+              />
+            ),
+            cards: (
+              <MenuItem
+                key="item-3"
+                title="Cards"
+                content={'Visa, Mastercard'}
+              />
+            ),
+            stocks: (
+              <MenuItem
+                key="item-4"
+                title="Stocks"
+                content={'Nvidia, Apple'}
+              />
+            ),
+          }
+
+          return (
+            <Dropdown
+              data={data}
+              action_menu
+              trigger_element={(props) => (
+                <button {...props} style={styles.customTrigger}>
+                  <Icon icon={newspaper} /> Custom trigger{' '}
+                  <Icon icon={chevron_down} />
+                </button>
+              )}
+            />
+          )
+        }}
+      </ComponentBox>
+    </Wrapper>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/demos.mdx
@@ -18,6 +18,7 @@ import {
   DropdownListOpened,
   DropdownDisabledTertiary,
   DropdownEllipsisOverflow,
+  DropdownCustomizedLook,
 } from 'Docs/uilib/components/dropdown/Examples'
 
 ## Demos
@@ -86,6 +87,12 @@ With long list to make it scrollable and searchable
 
 <DropdownDisabledTertiary />
 
+### Customized Dropdown
+
+An example of how you can customize the look of your `Dropdown`
+
+<DropdownCustomizedLook />
+
 ### DrawerList opened
 
 Only to visualize and used for visual testing

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx
@@ -32,13 +32,13 @@ You can also use the file blob in combination with the [FileReader](https://deve
 
 ### Upload loading state
 
-When uploading the file you can set the loading state of the request using the `Upload.useUpload` hook and passing isLoading to the file that is being uploaded.
+When uploading the file you can set the loading state of the request using the `Upload.useUpload` hook and passing `isLoading` to the file that is being uploaded.
 
 <UploadIsLoading />
 
 ### Upload error message
 
-The only checks we do currently is for the file size and the file type. These errors are handled by the HTML element ´input´ so they aren't selectable. If you want any other error messages you can use the `Upload.useUpload` the same way as with the loading state.
+The only file verification the Upload component does is for the file size and the file type. These errors are handled by the HTML element `input` so they aren't selectable. If you want any other error messages you can use the `Upload.useUpload` hook the same way as with the loading state.
 
 <UploadErrorMessage />
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/events.mdx
@@ -2,11 +2,11 @@
 showTabs: true
 ---
 
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { UploadEvents } from '@dnb/eufemia/src/components/upload/UploadDocs'
+
 ## Events
 
-| Events         | Description                                                                                                                        |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `onChange`     | _(optional)_ will be called on `files` changes made by the user. Access the files with `{ files }` (containing each a `fileItem`). |
-| `onFileDelete` | _(optional)_ will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.                     |
+<PropertiesTable props={UploadEvents} />
 
 Each `fileItem` will contain a `{ file, id }` (File Object and an unique ID) along with other information.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/info.mdx
@@ -10,7 +10,7 @@ The Upload component should be used in scenarios where the user has to upload an
 
 - Files selected by the user should be uploaded immediately (temporary location).
 - The user should be able to remove them (files) during the session.
-- If the Upload component is shown in a submit form, then a [GlobalStatus](/uilib/components/global-status) should be a part of the form.
+- The Upload component connects to the [GlobalStatus](/uilib/components/global-status) and displays file error messages there as well.
 - Validation messages coming from the "backend" should be displayed for each file via the `useUpload` hook. See [example](/uilib/components/upload/#upload-error-message) below.
 - The `useUpload` hook can be placed on any location in your application, and does not need to be where the `Upload` component is used.
 
@@ -33,6 +33,10 @@ function YourComponent() {
 }
 ```
 
+## JPG vs JPEG
+
+When `jpg` is defined (most commonly used), then the component will also accept `jpeg` files.
+
 ## Backend integration
 
 The "backend" receiving the files is decoupled and can be any existing or new system.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/properties.mdx
@@ -2,28 +2,16 @@
 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 { UploadProperties } from '@dnb/eufemia/src/components/upload/UploadDocs'
+
 ## Properties
 
-| Properties                              | Description                                                                               |
-| --------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `acceptedFileTypes`                     | _(required)_ List of accepted file types. More details above.                             |
-| `filesAmountLimit`                      | _(optional)_ Defines the amount of files the user can select and upload. Defaults to 100. |
-| `fileMaxSize`                           | _(optional)_ `fileMaxSize` is max size of each file in MB. Defaults to 5 MB.              |
-| `title`                                 | _(optional)_ Custom text property. Replaces the default title.                            |
-| `text`                                  | _(optional)_ Custom text property. Replaces the default text.                             |
-| `fileTypeDescription`                   | _(optional)_ Custom text property. Replaces the default accepted format description.      |
-| `fileSizeDescription`                   | _(optional)_ Custom text property. Replaces the default max file size description.        |
-| `fileSizeContent`                       | _(optional)_ Custom text property. Replaces the default file size content.                |
-| `buttonText`                            | _(optional)_ Custom text property. Replaces the default upload button text.               |
-| `loadingText`                           | _(optional)_ Custom text property. Replaces the default loading text.                     |
-| `errorLargeFile`                        | _(optional)_ Custom text property. Replaces the default file size error message.          |
-| `errorUnsupportedFile`                  | _(optional)_ Custom text property. Replaces the default file type error message.          |
-| `errorAmountLimit`                      | _(optional)_ Custom text property. Replaces the default amount limit error message.       |
-| `deleteButton`                          | _(optional)_ Custom text property. Replaces the default delete button text.               |
-| `fileListAriaLabel`                     | _(optional)_ Custom text property. Replaces the default list aria label.                  |
-| `skeleton`                              | _(optional)_ Skeleton should be applied when loading content Default: `null`.             |
-| [Space](/uilib/layout/space/properties) | _(optional)_ Spacing properties like `top` or `bottom` are supported.                     |
+<PropertiesTable props={UploadProperties} />
+
+## Translations
 
-## JPG vs JPEG
+All translation keys listed in the translations table below, can be used as a component property (like `title` or `text`).
 
-When `jpg` is defined (most commonly used), then the component will also accept `jpeg` files.
+<TranslationsTable localeKey="Upload" />
diff --git a/...design-system-portal/src/docs/uilib/extensions/forms/blocks/ChildrenWithAge.mdx b/...design-system-portal/src/docs/uilib/extensions/forms/blocks/ChildrenWithAge.mdx
@@ -21,7 +21,7 @@ import { ChildrenWithAge, ChildrenWithAgeWizard } from './Examples'
 ## Usage
 
 ```tsx
-import { ChildrenWithAge } from '@dnb/eufemia/src/extensions/forms/blocks'
+import { ChildrenWithAge } from '@dnb/eufemia/extensions/forms/blocks'
 render(<ChildrenWithAge />)
 ```
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/blocks/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/blocks/info.mdx
@@ -20,7 +20,7 @@ Read about how to create a section (block) by using a [Form.Section](/uilib/exte
 You import a block like this:
 
 ```jsx
-import { ChildrenWithAge } from '@dnb/eufemia/src/extensions/forms/blocks'
+import { ChildrenWithAge } from '@dnb/eufemia/extensions/forms/blocks'
 render(<ChildrenWithAge />)
 ```
 
@@ -53,7 +53,7 @@ You can change the texts and translations used inside of a block via the [Form.H
 
 ```tsx
 import { Form } from '@dnb/eufemia/src/extensions/forms'
-import { ChildrenWithAge } from '@dnb/eufemia/src/extensions/forms/blocks'
+import { ChildrenWithAge } from '@dnb/eufemia/extensions/forms/blocks'
 
 const myTranslations = {
   'nb-NO': { ChildrenWithAge: { hasChildren: { title: 'Egendefinert' } } },

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx
@@ -13,6 +13,10 @@ breadcrumb:
 
 Change log for the Eufemia Forms extension.
 
+## v10.41
+
+- Added [Field.Upload](/uilib/extensions/forms/Field/Upload/) component.
+
 ## v10.38
 
 - Added support for nesting fields inside of [Form.Section](/uilib/extensions/forms/Form/Section/) and [Form.ArraySelection](/uilib/extensions/forms/Form/ArraySelection/).

diff --git a/...stem-portal/src/docs/uilib/extensions/forms/feature-fields/Email/properties.mdx b/...stem-portal/src/docs/uilib/extensions/forms/feature-fields/Email/properties.mdx
@@ -10,10 +10,10 @@ import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDo
 
 ### Field-specific props
 
-| Property                                      | Type     | Description                                                                     |
-| --------------------------------------------- | -------- | ------------------------------------------------------------------------------- |
-| `help`                                        | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `content`. |
-| `[Input](/uilib/components/input/properties)` | Various  | _(optional)_ All `Input` properties are supported.                              |
+| Property                                    | Type     | Description                                                                     |
+| ------------------------------------------- | -------- | ------------------------------------------------------------------------------- |
+| `help`                                      | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `content`. |
+| [Input](/uilib/components/input/properties) | Various  | _(optional)_ All `Input` properties are supported.                              |
 
 ### General props
 

diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/feature-fields/Slider/info.mdx b/...gn-system-portal/src/docs/uilib/extensions/forms/feature-fields/Slider/info.mdx
@@ -11,7 +11,7 @@ import { Field } from '@dnb/eufemia/extensions/forms'
 render(<Field.Slider />)
 ```
 
-## Multithub support
+## Multithumb support
 
 You can use the `paths` property to define an array with JSON Pointers for multiple thumb buttons.
 

diff --git a/...-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload.mdx b/...-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload.mdx
@@ -0,0 +1,29 @@
+---
+title: 'Upload'
+description: '`Field.Upload` is a wrapper for the Upload component to make it easier to use inside a form.'
+showTabs: true
+theme: 'sbanken'
+hideInMenu: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+  - title: Events
+    key: '/events'
+breadcrumb:
+  - text: Forms
+    href: /uilib/extensions/forms/
+  - text: Feature fields
+    href: /uilib/extensions/forms/feature-fields/
+  - text: Upload
+    href: /uilib/extensions/forms/feature-fields/Upload/
+---
+
+import Info from 'Docs/uilib/extensions/forms/feature-fields/Upload/info'
+import Demos from 'Docs/uilib/extensions/forms/feature-fields/Upload/demos'
+
+<Info />
+<Demos />