chore: add description prop and change variant names to nouns

packages/dnb-design-system-portal/src/docs/uilib/components/dialog/Examples.js

@@ -157,11 +157,11 @@ export const DialogConfirmDefault = () => (
   >
     {() => /* jsx */ `
 <Dialog
-  variant="confirm"
-  title="Dialog confirm title"
+  variant="confirmation"
+  title="Dialog confirmation title"
   icon={bell_medium}
-  modalContent="Some content describing the situation."
-  onConfirm={(e, close) => {close();}}
+  description="Some content describing the situation."
+  onConfirm={({close}) => close()}
   triggerAttributes={{
     text: 'Trigger button',
   }}
@@ -176,14 +176,14 @@ export const DialogConfirmDelete = () => (
   >
     {() => /* jsx */ `
 <Dialog
-  variant="confirm"
+  variant="confirmation"
   confirmType="warning"
   title="Are you sure you want to delete this?"
   icon={trash_medium}
-  modalContent="This action cannot be undone."
+  description="This action cannot be undone."
   confirmText="Delete"
   declineText="Cancel"
-  onConfirm={(e, close) => {close();}}
+  onConfirm={({close}) => close()}
   triggerAttributes={{
     text: 'Delete record',
     icon: trash_medium,
@@ -211,10 +211,10 @@ const Component = () => {
         on_click={() => setOpen(true)}
       />
       <Dialog
-        variant="confirm"
+        variant="confirmation"
         title="Du har blitt logget ut"
         icon={log_out_medium}
-        modalContent="For å fortsette må du logge inn igjen."
+        description="For å fortsette må du logge inn igjen."
         confirmText="Logg inn"
         hideDecline
         openState={open}
@@ -246,7 +246,7 @@ export const DialogConfirmCookies = () => (
     text: 'Show cookie dialog',
   }}
   icon={cookie_medium}
-  variant="confirm"
+  variant="confirmation"
   title="Informasjonskapsler (cookies)"
 >
   Vi bruker cookies for å gi deg den beste opplevelsen i nettbanken
@@ -261,13 +261,13 @@ export const DialogConfirmCookies = () => (
       text="Administrer"
       icon={edit}
       icon_position="left"
-      on_click={({_, close}) => {
+      on_click={({close}) => {
         close()
       }}
     />
     <Button
       text="Jeg godtar"
-      on_click={({_, close}) => {
+      on_click={({close}) => {
         close()
       }}
     />

packages/dnb-design-system-portal/src/docs/uilib/components/dialog/demos.md

@@ -18,10 +18,10 @@ DialogConfirmCookies,
 
 ## Table of contents
 
-1. [Inform demos](/uilib/components/dialog/demos#demos-for-variant-inform)
-1. [Confirm demos](/uilib/components/dialog/demos#demos-for-variant-confirm)
+1. [Inform demos](/uilib/components/dialog/demos#demos-for-variant-information)
+1. [Confirm demos](/uilib/components/dialog/demos#demos-for-variant-confirmation)
 
-## Demos for variant `inform`
+## Demos for variant `information`
 
 ### Basic Dialog
 
@@ -51,7 +51,7 @@ DialogConfirmCookies,
 
 <DialogExampleDelayClose />
 
-## Demos for variant `confirm`
+## Demos for variant `confirmation`
 
 ### Confirm dialog
 

packages/dnb-design-system-portal/src/docs/uilib/components/dialog/events.md

@@ -6,10 +6,10 @@ import ModalEventTable from 'Docs/uilib/components/modal/event-table'
 
 ## Events
 
-| Events      | Description                                                                                                                                   |
-| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onConfirm` | _(optional)_ For variant confirm, handle the confirm action click. Provided with the mouse event and the Modal function `close` as arguments. |
-| `onDecline` | _(optional)_ For variant confirm, handle the decline action click. Provided with the mouse event and the Modal function `close` as arguments. |
+| Events      | Description                                                                                                                                        |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onConfirm` | _(optional)_ For variant confirmation, handle the confirm action click. Provided with the mouse event and the Modal function `close` as arguments. |
+| `onDecline` | _(optional)_ For variant confirmation, handle the decline action click. Provided with the mouse event and the Modal function `close` as arguments. |
 
 Dialog also includes the same events as [Modal](/uilib/components/modal).
 

packages/dnb-design-system-portal/src/docs/uilib/components/dialog/info.md

@@ -12,22 +12,22 @@ The Dialog component is a [Modal](/uilib/components/modal) variation that appear
 
 ### Variants
 
-There are two variants of the Dialog component: `inform` and `confirm`.
+There are two variants of the Dialog component: `information` and `confirmation`.
 
 <InlineImg height="230" width="auto" src={DialogInformExample} caption="Example of an informational Dialog" className="mint-green-12" />
 <InlineImg height="230" width="auto" src={DialogConfirmExample} caption="Example of a confirmation Dialog" className="mint-green-12" />
 
-The informational variant (`inform`) is used for informational purposes, for example explaining a word/something on the page. It has to be triggered by the user to appear. Typical usage for it would be to read an explanation, then closing it.
+The informational variant (`information`) is used for informational purposes, for example explaining a word/something on the page. It has to be triggered by the user to appear. Typical usage for it would be to read an explanation, then closing it.
 
-The confirmation variant (`confirm`) is used when some action is needed, or if we have to inform of something without the users triggering it. A couple of examples would be a scenario where the user confirms to delete something, or if the user has been logged out automatically, which we would need to inform of, or a cookie consent dialogue.
+The confirmation variant (`confirmation`) is used when some action is needed, or if we have to inform of something without the users triggering it. A couple of examples would be a scenario where the user confirms to delete something, or if the user has been logged out automatically, which we would need to inform of, or a cookie consent dialogue.
 
 ### Parts in Dialog
 
 To provide custom content to parts of the Dialog, a set of component parts are provided:
 
 - `<Dialog.Navigation>`: The navigation field at the top of the component, default with a close button (Equal to the prop `navContent`).
 - `<Dialog.Header>`: The header field of the component, where the `title` will appear (Equal to the prop `headerContent`).
-- `<Dialog.Actions>`: An optional field for buttons at the bottom of the component. This field will appear by default for variant `confirm`.
+- `<Dialog.Actions>`: An optional field for buttons at the bottom of the component. This field will appear by default for variant `confirmation`.
 
 ### More detailed information
 

packages/dnb-design-system-portal/src/docs/uilib/components/dialog/prop-table.md

@@ -3,7 +3,7 @@
 
 | Properties         | Description                                                                                                                                                                                                                                  |
 | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `variant`          | _(optional)_ The dialog variant. Can either be `inform` or `confirm`. Defaults to `inform`.                                                                                                                                                  |
+| `variant`          | _(optional)_ The dialog variant. Can either be `information` or `confirmation`. Defaults to `information`.                                                                                                                                   |
 | `title`            | _(optional)_ The dialog title. Displays on the very top of the content.                                                                                                                                                                      |
 | `minWidth`         | _(optional)_ The minimum Dialog content width, defined by a CSS width value like `50vw` (50% of the viewport). Be careful on using fixed `minWidth` so you don't break responsiveness. Defaults to `30rem` (average width is set to `60vw`). |
 | `maxWidth`         | _(optional)_ The maximum Dialog content width, defined by a CSS width value like `20rem`. Defaults to `60rem` (average width is set to `60vw`).                                                                                              |
@@ -13,10 +13,11 @@
 | `navContent`       | _(optional)_ The content which will appear in the navigation, above the header, and side-by-side the close button.                                                                                                                           |
 | `headerContent`    | _(optional)_ The content which will appear in the header of the dialog.                                                                                                                                                                      |
 | `modalContent`     | _(optional)_ The content which will appear when triggering the dialog.                                                                                                                                                                       |
+| `description`      | _(optional)_ A description will be positioned below the title, but before the content. Used for Dialog variant `confirmation` to further describe what the actions will do.                                                                  |
 | `alignContent`     | _(optional)_ Define the inner horizontal alignment of the content. Can be set to `left`, `center`, `right` and `centered`. If `centered`, then the content will also be centered vertically. Defaults to `left`.                             |
 | `fullscreen`       | _(optional)_ If set to `true` then the dialog content will be shown as fullscreen, without showing the original content behind. Can be set to `false` to omit the auto fullscreen. Defaults to `auto`.                                       |
 | `icon`             | _(optional)_ An icon to display at the top of the component. Should be of size medium, so make sure you import the `_medium` version of the Eufemia icon.                                                                                    |
-| `confirmType`      | _(optional)_ For variant confirm, the dialog is either an informational (`info`) or a warning (`warning`) message. Defaults to 'info'.                                                                                                       |
+| `confirmType`      | _(optional)_ For variant confirmation, the dialog is either an informational (`info`) or a warning (`warning`) message. Defaults to 'info'.                                                                                                  |
 | `declineText`      | _(optional)_ For dialog actions, give a custom text for the decline button.                                                                                                                                                                  |
-| `confirmText`      | _(optional)_ For dialog actions, give a custom text for the confirm button.                                                                                                                                                                  |
-| `hideDecline`      | _(optional)_ For variant confirm, hide the default decline button and only show the confirm button.                                                                                                                                          |
+| `confirmText`      | _(optional)_ For dialog actions, give a custom text for the confirmation button.                                                                                                                                                             |
+| `hideDecline`      | _(optional)_ For variant confirmation, hide the default decline button and only show the confirmation button.                                                                                                                                |

packages/dnb-eufemia/src/components/dialog/Dialog.tsx

@@ -15,7 +15,7 @@ import DialogAction from './parts/DialogAction'
 import { usePropsWithContext } from '../../shared/hooks'
 
 const defaultProps = {
-  variant: 'inform',
+  variant: 'information',
   spacing: true,
 }
 
@@ -78,14 +78,14 @@ function Dialog(
   let currentTriggerAttributes = triggerAttributes
   let currentFullscreen = fullscreen
 
-  if (variant === 'confirm') {
+  if (variant === 'confirmation') {
     currentHideCloseButton =
       hideCloseButton !== undefined ? hideCloseButton : true
     currentTriggerAttributes = triggerAttributes || { hidden: true }
   }
 
   if (fullscreen === undefined) {
-    currentFullscreen = variant === 'inform' ? 'auto' : false
+    currentFullscreen = variant === 'information' ? 'auto' : false
   }
 
   const modalProps = {

packages/dnb-eufemia/src/components/dialog/DialogContent.tsx

@@ -35,9 +35,10 @@ export default function DialogContent({
   noAnimationOnMobile = false,
   minWidth: min_width = null,
   maxWidth: max_width = null,
-  variant = 'inform',
+  variant = 'information',
   confirmType = 'info',
   icon = null,
+  description,
   hideDecline,
   onConfirm,
   onDecline,
@@ -56,7 +57,7 @@ export default function DialogContent({
     )
 
   if (alignContent === null) {
-    alignContent = variant === 'inform' ? 'left' : 'centered'
+    alignContent = variant === 'information' ? 'left' : 'centered'
   }
 
   const innerParams = {
@@ -133,7 +134,7 @@ export default function DialogContent({
         {!headerExists && (
           <DialogHeader
             title={context?.title}
-            size={variant === 'inform' ? 'x-large' : 'large'}
+            size={variant === 'information' ? 'x-large' : 'large'}
           >
             {headerContent}
           </DialogHeader>
@@ -143,10 +144,11 @@ export default function DialogContent({
           id={context?.contentId + '-content'}
           className="dnb-dialog__content"
         >
+          {description}
           {content}
         </div>
 
-        {variant === 'confirm' && !actionExists && (
+        {variant === 'confirmation' && !actionExists && (
           <DialogAction {...dialogActionProps} />
         )}
       </div>

packages/dnb-eufemia/src/components/dialog/__tests__/Dialog.screenshot.test.js

@@ -154,7 +154,7 @@ describe('Dialog screenshot', () => {
   })
 })
 
-describe('Dialog confirm screenshot', () => {
+describe('Dialog confirmation screenshot', () => {
   setupPageScreenshot({
     url: '/uilib/components/dialog/demos',
     pageViewport,
@@ -173,7 +173,7 @@ describe('Dialog confirm screenshot', () => {
   })
 })
 
-describe('Dialog confirm screenshot', () => {
+describe('Dialog confirmation screenshot', () => {
   setupPageScreenshot({
     url: '/uilib/components/dialog/demos',
     pageViewport,
@@ -192,7 +192,7 @@ describe('Dialog confirm screenshot', () => {
   })
 })
 
-describe('Dialog confirm screenshot', () => {
+describe('Dialog confirmation screenshot', () => {
   setupPageScreenshot({
     url: '/uilib/components/dialog/demos',
     pageViewport,
@@ -210,7 +210,7 @@ describe('Dialog confirm screenshot', () => {
   })
 })
 
-describe('Dialog confirm screenshot', () => {
+describe('Dialog confirmation screenshot', () => {
   setupPageScreenshot({
     url: '/uilib/components/dialog/demos',
     pageViewport,