feat(Dialog): add new variant confirm

- added a generic demo

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

@@ -4,6 +4,13 @@
  */
 
 import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+import {
+  trash_medium,
+  log_out_medium,
+  cookie_medium,
+  bell_medium,
+  edit,
+} from '@dnb/eufemia/src/icons'
 
 export const DialogExampleDefault = () => (
   <ComponentBox data-visual-test="dialog-default">
@@ -140,3 +147,130 @@ export const DialogExampleProgressIndicator = () => (
 	`}
   </ComponentBox>
 )
+
+export const DialogConfirmDefault = () => (
+  <ComponentBox
+    data-visual-test="dialog-confirm-default"
+    scope={{ bell_medium }}
+  >
+    {() => /* jsx */ `
+<Dialog
+  variant="confirm"
+  title="Dialog confirm title"
+  icon={bell_medium}
+  modalContent="Some content describing the situation."
+  onConfirm={(e, close) => {close();}}
+  triggerAttributes={{
+    text: 'Trigger button',
+  }}
+/>`}
+  </ComponentBox>
+)
+
+export const DialogConfirmDelete = () => (
+  <ComponentBox
+    data-visual-test="dialog-confirm-delete"
+    scope={{ trash_medium }}
+  >
+    {() => /* jsx */ `
+<Dialog
+  variant="confirm"
+  confirmType="warning"
+  title="Are you sure you want to delete this?"
+  icon={trash_medium}
+  modalContent="This action cannot be undone."
+  confirmText="Delete"
+  declineText="Cancel"
+  onConfirm={(e, close) => {close();}}
+  triggerAttributes={{
+    text: 'Delete record',
+    icon: trash_medium,
+  }}
+/>`}
+  </ComponentBox>
+)
+
+const loginHandler = () => {}
+
+export const DialogConfirmLoggedOut = () => (
+  <ComponentBox
+    data-visual-test="dialog-confirm-loggedout"
+    scope={{ log_out_medium, loginHandler }}
+    useRender
+  >
+    {() => /* jsx */ `
+const Component = () => {
+  const [open, setOpen] = React.useState(false)
+  return (
+    <>
+      <Button
+        id="custom-triggerer"
+        text="Manually trigger"
+        on_click={() => setOpen(true)}
+      />
+      <Dialog
+        variant="confirm"
+        title="Du har blitt logget ut"
+        icon={log_out_medium}
+        modalContent="For å fortsette må du logge inn igjen."
+        confirmText="Logg inn"
+        hideDecline
+        openState={open}
+        onClose={() => {
+          setOpen(false)
+        }}
+        onConfirm={() => {
+          setOpen(false)
+          loginHandler()
+        }}
+        labelled_by="custom-triggerer"
+      />
+    </>
+  )
+}
+render(<Component />)	
+`}
+  </ComponentBox>
+)
+
+export const DialogConfirmCookies = () => (
+  <ComponentBox
+    data-visual-test="dialog-confirm-cookie"
+    scope={{ cookie_medium, edit }}
+  >
+    {() => /* jsx */ `
+<Dialog
+  triggerAttributes={{
+    text: 'Show cookie dialog',
+  }}
+  icon={cookie_medium}
+  variant="confirm"
+  title="Informasjonskapsler (cookies)"
+>
+  Vi bruker cookies for å gi deg den beste opplevelsen i nettbanken
+  vår.
+  <br />
+  <Anchor target="_blank" href="https://www.dnb.no/cookies">
+    Les mer om cookies
+  </Anchor>
+  <Dialog.Action>
+    <Button
+      variant="tertiary"
+      text="Administrer"
+      icon={edit}
+      icon_position="left"
+      on_click={({_, close}) => {
+        close()
+      }}
+    />
+    <Button
+      text="Jeg godtar"
+      on_click={({_, close}) => {
+        close()
+      }}
+    />
+  </Dialog.Action>
+</Dialog>
+`}
+  </ComponentBox>
+)

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

@@ -9,10 +9,19 @@ DialogExampleFullscreen,
 DialogExampleDelayClose,
 DialogExampleCustomTrigger,
 DialogExampleProgressIndicator,
-FullDialogExample
+FullDialogExample,
+DialogConfirmDefault,
+DialogConfirmDelete,
+DialogConfirmLoggedOut,
+DialogConfirmCookies,
 } from 'Docs/uilib/components/dialog/Examples'
 
-## Demos
+## 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)
+
+## Demos for variant `inform`
 
 ### Basic Dialog
 
@@ -41,3 +50,27 @@ FullDialogExample
 ### Dialog with close delay
 
 <DialogExampleDelayClose />
+
+## Demos for variant `confirm`
+
+### Confirm dialog
+
+<DialogConfirmDefault />
+
+### Deletion Dialog
+
+A `confirmType="warning"` will enhance the context by applying a red color to the icon, as in the deletion scenario.
+
+<DialogConfirmDelete />
+
+### Logged out Dialog
+
+Use the `openState` prop to automatically trigger the Dialog, here demonstrated with a button for simplicity. You can also change the default confirm text and hide the decline button when suited.
+
+<DialogConfirmLoggedOut />
+
+### Cookie concent Dialog
+
+Provide a custom set of buttons, like this cookie concent Dialog that has a `tertiary` "Administrate" button. Notice that the `close` function will be provided for every child of type [Button](/uilib/components/button) given to `Dialog.Actions`.
+
+<DialogConfirmCookies />

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

@@ -6,6 +6,11 @@ import ModalEventTable from 'Docs/uilib/components/modal/event-table'
 
 ## Events
 
-Dialog includes the same events as [Modal](/uilib/components/modal).
+| 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. |
+
+Dialog also includes the same events as [Modal](/uilib/components/modal).
 
 <ModalEventTable />

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

@@ -2,16 +2,32 @@
 showTabs: true
 ---
 
+import InlineImg from 'dnb-design-system-portal/src/shared/tags/Img'
+import DialogConfirmExample from 'Docs/uilib/components/dialog/assets/dialog_confirm.png'
+import DialogInformExample from 'Docs/uilib/components/dialog/assets/dialog_inform.png'
+
 ## Description
 
-The Dialog component is a [Modal](/uilib/components/modal) variation that appears at the center of the screen. The Dialog has similar functionality to a traditional popup window and is mostly used for informational purposes (for example explaining a word on the page). Similar to Modal, it has to be triggered by the user to appear. Typical usage would be to read an explanation, then closing it.
+The Dialog component is a [Modal](/uilib/components/modal) variation that appears at the center of the screen. The Dialog has similar functionality to a traditional popup window. Similar to Modal, it has to be triggered by the user to appear. Typical usage would be to read an explanation, then closing it.
+
+### Variants
+
+There are two variants of the Dialog component: `inform` and `confirm`.
+
+<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 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.
 
 ### 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`.
 
 ### More detailed information
 

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

@@ -3,6 +3,7 @@
 
 | Properties         | Description                                                                                                                                                                                                                                  |
 | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `variant`          | _(optional)_ The dialog variant. Can either be `inform` or `confirm`. Defaults to `inform`.                                                                                                                                                  |
 | `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`).                                                                                              |
@@ -14,4 +15,8 @@
 | `modalContent`     | _(optional)_ The content which will appear when triggering the dialog.                                                                                                                                                                       |
 | `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`.                                       |
-| `variant` (COMING) | _(optional)_ The dialog variant. Can either be `inform`, `confirm` or `custom`. Defaults to `inform`.                                                                                                                                        |
+| `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'.                                                                                                       |
+| `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.                                                                                                                                          |

packages/dnb-design-system-portal/src/docs/uilib/components/modal/event-table.md

@@ -1,8 +1,8 @@
 ---
 ---
 
-| Events                              | Description                                                                                                                                                                                                                                                                          |
-| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onOpen` / `on_open`                | _(optional)_ This event gets triggered once the modal shows up. Returns the modal id: `{ id }`.`.                                                                                                                                                                                    |
-| `onClose` / `on_close`              | _(optional)_ this event gets triggered once the modal gets closed. Returns the modal id: `{ id, event, triggeredBy }`.                                                                                                                                                               |
-| `onClosePrevent` / `onClosePrevent` | _(optional)_ this event gets triggered once the user tries to close the modal, but `prevent_close` is set to **true**. Returns a callback `close` You can call to trigger the close mechanism. More details below. Returns the modal id: `{ id, event, close: Method, triggeredBy }` |
+| Events                                | Description                                                                                                                                                                                                                                                                          |
+| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onOpen` / `on_open`                  | _(optional)_ This event gets triggered once the modal shows up. Returns the modal id: `{ id }`.`.                                                                                                                                                                                    |
+| `onClose` / `on_close`                | _(optional)_ this event gets triggered once the modal gets closed. Returns the modal id: `{ id, event, triggeredBy }`.                                                                                                                                                               |
+| `onClosePrevent` / `on_close_prevent` | _(optional)_ this event gets triggered once the user tries to close the modal, but `prevent_close` is set to **true**. Returns a callback `close` You can call to trigger the close mechanism. More details below. Returns the modal id: `{ id, event, close: Method, triggeredBy }` |

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

@@ -12,6 +12,7 @@ import { DialogProps, DialogContentProps } from './types'
 import classnames from 'classnames'
 import Context from '../../shared/Context'
 import { removeUndefinedProps } from '../../shared/component-helper'
+import DialogAction from './parts/DialogAction'
 
 function Dialog({
   id,
@@ -31,7 +32,9 @@ function Dialog({
   noAnimation,
   noAnimationOnMobile,
   animationDuration,
-  fullscreen = 'auto',
+  fullscreen,
+
+  variant = 'inform',
 
   onOpen,
   onClose,
@@ -57,6 +60,16 @@ function Dialog({
 }: DialogProps & DialogContentProps): JSX.Element {
   const context = useContext(Context)
 
+  if (variant == 'confirm') {
+    hideCloseButton =
+      hideCloseButton !== undefined ? hideCloseButton : true
+    triggerAttributes = triggerAttributes || { hidden: true }
+  }
+
+  if (fullscreen === undefined) {
+    fullscreen = variant === 'inform' ? 'auto' : false
+  }
+
   const modalProps = removeUndefinedProps({
     title,
     id,
@@ -99,6 +112,7 @@ function Dialog({
     noAnimationOnMobile,
     fullscreen,
     spacing,
+    variant,
   })
 
   return (
@@ -116,5 +130,6 @@ function Dialog({
 Dialog.Body = DialogBody
 Dialog.Header = DialogHeader
 Dialog.Navigation = DialogNavigation
+Dialog.Action = DialogAction
 
 export default Dialog