agroptima-design-system 0.31.7 → 0.31.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.31.7",
+  "version": "0.31.8",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Modal/Modal.scss

@@ -27,6 +27,21 @@ $backdrop-background-color: color_alias.$neutral-color-900;
   overflow-x: hidden;
   overflow-y: auto;
   outline: 0;
+  border: 0px;
+  background-color: transparent;
+  margin: 0 auto;
+
+  &::backdrop {
+    opacity: $backdrop-opacity;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: depth.$z-modal;
+    width: 100vw;
+    height: 100vh;
+    background-color: $backdrop-background-color;
+    transition: opacity 0.15s linear;
+  }
 }
 
 .modal-dialog {
@@ -88,18 +103,6 @@ $backdrop-background-color: color_alias.$neutral-color-900;
   gap: config.$space-2x;
 }
 
-.modal-backdrop {
-  opacity: $backdrop-opacity;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: depth.$z-modal;
-  width: 100vw;
-  height: 100vh;
-  background-color: $backdrop-background-color;
-  transition: opacity 0.15s linear;
-}
-
 .modal-details {
   .modal-dialog {
     max-width: 50rem;

package/src/atoms/Modal/Modal.tsx

@@ -26,6 +26,7 @@ export interface ModalProps {
   variant?: Variant
   scrollable?: boolean
   className?: string
+  isOpen?: boolean
   onClose?: () => void
   buttons: ButtonProps[]
   children: ReactNode
@@ -43,6 +44,7 @@ export function Modal({
   id,
   title,
   buttons,
+  isOpen = true,
   onClose,
   children,
   variant = 'details',
@@ -54,6 +56,7 @@ export function Modal({
     <ModalDialog
       aria-labelledby={`${id}-title`}
       aria-describedby={`${id}-body`}
+      isOpen={isOpen}
       onClose={onClose}
       details={isDetails}
       {...props}

package/src/atoms/Modal/ModalDialog.tsx

@@ -1,9 +1,11 @@
 'use client'
 import './Modal.scss'
-import React, { use, useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { classNames } from '../../utils/classNames'
 
-export interface ModalDialogProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ModalDialogProps
+  extends React.HTMLAttributes<HTMLDialogElement> {
+  isOpen?: boolean
   onClose?: () => void
   details?: boolean
   scrollable?: boolean
@@ -11,12 +13,14 @@ export interface ModalDialogProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export function ModalDialog({
   className,
+  isOpen = true,
   onClose,
   children,
   details = false,
   scrollable = false,
   ...props
 }: ModalDialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null)
   const handleClick = (event: React.MouseEvent) => {
     if (event.target !== event.currentTarget) return
     onClose?.()
@@ -33,36 +37,28 @@ export function ModalDialog({
   }, [])
 
   useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose?.()
-      }
+    if (isOpen) {
+      dialogRef.current?.showModal()
+    } else {
+      dialogRef.current?.close()
     }
-    document.addEventListener('keydown', handleKeyDown)
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [onClose])
+  }, [isOpen])
 
   return (
-    <>
-      <div className="modal-backdrop"></div>
+    <dialog
+      ref={dialogRef}
+      className={classNames('modal', className, { 'modal-details': details })}
+      onClick={handleClick}
+      {...props}
+    >
       <div
-        role="dialog"
-        className={classNames('modal', className, { 'modal-details': details })}
-        onClick={handleClick}
-        {...props}
+        className={classNames('modal-dialog', {
+          'modal-dialog-scrollable': scrollable,
+        })}
       >
-        <div
-          className={classNames('modal-dialog', {
-            'modal-dialog-scrollable': scrollable,
-          })}
-        >
-          <div className="modal-content">{children}</div>
-        </div>
+        <div className="modal-content">{children}</div>
       </div>
-    </>
+    </dialog>
   )
 }
 

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.31.8
+
+* Refactor Modal component to use HTML dialog
+
 ## 0.31.7
 
 * Fixed date clearing event in range and added a new translation to the footer for the first day of the selected range.

package/src/stories/Modal.stories.js

@@ -30,12 +30,16 @@ const meta = {
     docs: {
       description: {
         component:
-          "<h2>Usage guidelines</h2><p>Modal component is used when requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow. It creates a new floating layer over the current page to get user feedback or display information.</p><ul><li>Require a response from the user</li><li>Notify the user of any related information</li><li>Confirm a user decision</li></ul>",
+          "<h2>Usage guidelines</h2><p>Modal component is used when requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow. It creates a new floating layer over the current page to get user feedback or display information.</p><ul><li>Require a response from the user</li><li>Notify the user of any related information</li><li>Confirm a user decision</li><li>It's opened/closed through `isOpen` prop. If we don't want it to be part of the DOM, we can also add a conditional render on the frontend project.</li><li>Natively, focus is set on the first nested focusable element and explicitly indicated by default by the browser</li><li>When nesting a Form inside Modal component, remember to add `type='button'` to all Cancel buttons to not to be considered as submitable</li></ul>",
       },
     },
     figmaPrimaryDesign,
   },
   tags: ['autodocs'],
+  args: {
+    children: 'Modal',
+    isOpen: false,
+  },
   argTypes: {
     id: {
       description: 'Id for aria purposes',
@@ -60,242 +64,243 @@ const meta = {
 
 export default meta
 
+const OpenAndCloseInfo = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <Modal
+        id="info-dangerous-alone"
+        isOpen={isOpen}
+        variant="info"
+        title="It's dangerous to go alone!"
+        buttons={[
+          {
+            label: 'Done',
+            onClick: () => alert('click'),
+          },
+        ]}
+      >
+        Take this 🗡️
+      </Modal>
+      <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+    </>
+  )
+}
+
 export const Info = {
-  render: () => (
-    <Modal
-      id="info-dangerous-alone"
-      variant="info"
-      title="It's dangerous to go alone!"
-      buttons={[
-        {
-          label: 'Done',
-          onClick: () => alert('click'),
-        },
-      ]}
-    >
-      Take this 🗡️
-    </Modal>
-  ),
+  render: () => {
+    return <OpenAndCloseInfo />
+  },
+}
+
+const OpenAndCloseSuccess = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <Modal
+        id="success-dangerous-alone"
+        isOpen={isOpen}
+        variant="success"
+        title="It's dangerous to go alone!"
+        buttons={[
+          {
+            label: 'Done',
+            onClick: () => alert('click'),
+          },
+        ]}
+      >
+        Take this 🗡️
+      </Modal>
+      <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+    </>
+  )
 }
 
 export const Success = {
-  render: () => (
-    <Modal
-      id="success-dangerous-alone"
-      variant="success"
-      title="It's dangerous to go alone!"
-      buttons={[
-        {
-          label: 'Done',
-          onClick: () => alert('click'),
-        },
-      ]}
-    >
-      Take this 🗡️
-    </Modal>
-  ),
+  render: () => {
+    return <OpenAndCloseSuccess />
+  },
+}
+
+const OpenAndCloseWarning = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <Modal
+        id="warning-dangerous-alone"
+        isOpen={isOpen}
+        variant="warning"
+        title="It's dangerous to go alone!"
+        buttons={[
+          {
+            label: 'Done',
+            onClick: () => alert('click'),
+          },
+        ]}
+      >
+        Take this 🗡️
+      </Modal>
+      <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+    </>
+  )
 }
 
 export const Warning = {
-  render: () => (
-    <Modal
-      id="warning-dangerous-alone"
-      variant="warning"
-      title="It's dangerous to go alone!"
-      buttons={[
-        {
-          label: 'Done',
-          onClick: () => alert('click'),
-        },
-      ]}
-    >
-      Take this 🗡️
-    </Modal>
-  ),
+  render: () => {
+    return <OpenAndCloseWarning />
+  },
 }
 
-export const Error = {
-  render: () => (
-    <Modal
-      id="error-dangerous-alone"
-      variant="error"
-      title="It's dangerous to go alone!"
-      buttons={[
-        {
-          label: 'Done',
-          onClick: () => alert('click'),
-        },
-      ]}
-    >
-      Take this 🗡️
-    </Modal>
-  ),
+const OpenAndCloseError = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <Modal
+        id="error-dangerous-alone"
+        isOpen={isOpen}
+        variant="error"
+        title="It's dangerous to go alone!"
+        buttons={[
+          {
+            label: 'Done',
+            onClick: () => alert('click'),
+          },
+        ]}
+      >
+        Take this 🗡️
+      </Modal>
+      <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+    </>
+  )
 }
 
-export const DeleteOrDiscard = {
-  render: () => (
-    <Modal
-      id="discard-dangerous-alone"
-      variant="discard"
-      title="The far horizon was always steamy and indistinct"
-      buttons={[
-        {
-          label: 'Cancel',
-          variant: 'neutral',
-          onClick: () => alert('click'),
-        },
-        {
-          label: 'Delete',
-          variant: 'error',
-          onClick: () => alert('click'),
-        },
-      ]}
-    >
-      But I could see that great jungles of unknown tree-ferns, calamites,
-      lepidodendra, and sigillaria lay outside the city, their fantastic
-      frondage waving mockingly in the shifting vapours. Now and then there
-      would be suggestions of motion in the sky, but these my early visions
-      never resolved.
-    </Modal>
-  ),
+export const Error = {
+  render: () => {
+    return <OpenAndCloseError />
+  },
 }
 
-export const LargeModal = () => (
-  <Modal
-    title="Large Modal"
-    onClose={() => alert('Close')}
-    buttons={[
-      { label: 'Close', variant: 'neutral', onClick: () => alert('Close') },
-      { label: 'Save' },
-    ]}
-  >
-    <LoremIpsum lorems={10} />
-    <Select
-      id="select"
-      label="Select"
-      helpText="This is a help text"
-      placeholder="Select an option"
-      options={[
-        { id: '1', label: 'Option 1' },
-        { id: '2', label: 'Option 2' },
-        { id: '3', label: 'Option 3' },
-        { id: '4', label: 'Option 4' },
-        { id: '5', label: 'Option 5' },
-        { id: '6', label: 'Option 6' },
-        { id: '7', label: 'Option 7' },
-        { id: '8', label: 'Option 8' },
-        { id: '9', label: 'Option 9' },
-        { id: '10', label: 'Option 10' },
-        { id: '11', label: 'Option 11' },
-        { id: '12', label: 'Option 12' },
-        { id: '13', label: 'Option 13' },
-        { id: '14', label: 'Option 14' },
-        { id: '15', label: 'Option 15' },
-      ]}
-    />
-  </Modal>
-)
+const OpenAndCloseDeleteOrDiscard = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
 
-export const ScrollableModal = () => (
-  <Modal
-    title="Scrollable Modal Title"
-    onClose={() => console.log('close')}
-    scrollable
-    buttons={[
-      {
-        label: 'Close',
-        variant: 'neutral',
-        onClick: () => console.log('close'),
-      },
-    ]}
-  >
-    <LoremIpsum lorems={10} />
-    <Select
-      id="select"
-      label="Select"
-      helpText="This is a help text"
-      placeholder="Select an option"
-      options={[
-        { id: '1', label: 'Option 1' },
-        { id: '2', label: 'Option 2' },
-        { id: '3', label: 'Option 3' },
-        { id: '4', label: 'Option 4' },
-        { id: '5', label: 'Option 5' },
-        { id: '6', label: 'Option 6' },
-        { id: '7', label: 'Option 7' },
-        { id: '8', label: 'Option 8' },
-        { id: '9', label: 'Option 9' },
-        { id: '10', label: 'Option 10' },
-        { id: '11', label: 'Option 11' },
-        { id: '12', label: 'Option 12' },
-        { id: '13', label: 'Option 13' },
-        { id: '14', label: 'Option 14' },
-        { id: '15', label: 'Option 15' },
-      ]}
-    />
-  </Modal>
-)
+  return (
+    <>
+      <Modal
+        id="discard-dangerous-alone"
+        isOpen={isOpen}
+        variant="discard"
+        title="The far horizon was always steamy and indistinct"
+        buttons={[
+          {
+            label: 'Cancel',
+            variant: 'neutral',
+            onClick: () => alert('click'),
+          },
+          {
+            label: 'Delete',
+            variant: 'error',
+            onClick: () => alert('click'),
+          },
+        ]}
+      >
+        But I could see that great jungles of unknown tree-ferns, calamites,
+        lepidodendra, and sigillaria lay outside the city, their fantastic
+        frondage waving mockingly in the shifting vapours. Now and then there
+        would be suggestions of motion in the sky, but these my early visions
+        never resolved.
+      </Modal>
+      <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+    </>
+  )
+}
 
-const OpenAndCloseModalComponent = () => {
+export const DeleteOrDiscard = {
+  render: () => {
+    return <OpenAndCloseDeleteOrDiscard />
+  },
+}
+
+const OpenAndCloseLargeModal = () => {
   const [isOpen, setIsOpen] = React.useState(false)
-  const closeModal = () => setIsOpen(false)
+
   return (
     <>
-      {isOpen && (
-        <ModalDialog details onClose={closeModal}>
-          <ModalHeader>
-            <ModalTitle>Modal title</ModalTitle>
-            <ModalCloseButton onClick={closeModal} />
-          </ModalHeader>
-          <ModalBody>
-            <LoremIpsum lorems={1} />
-          </ModalBody>
-          <ModalFooter>
-            <Button label="Close" onClick={closeModal} />
-          </ModalFooter>
-        </ModalDialog>
-      )}
-      <LoremIpsum lorems={10} />
-      <br />
-      <hr />
-      <br />
+      <Modal
+        title="Large Modal"
+        isOpen={isOpen}
+        onClose={() => alert('Close')}
+        buttons={[
+          {
+            label: 'Close',
+            type: 'button',
+            variant: 'neutral',
+            onClick: () => alert('Close'),
+          },
+          { label: 'Save' },
+        ]}
+      >
+        <LoremIpsum lorems={10} />
+        <Select
+          id="select"
+          label="Select"
+          helpText="This is a help text"
+          placeholder="Select an option"
+          options={[
+            { id: '1', label: 'Option 1' },
+            { id: '2', label: 'Option 2' },
+            { id: '3', label: 'Option 3' },
+            { id: '4', label: 'Option 4' },
+            { id: '5', label: 'Option 5' },
+            { id: '6', label: 'Option 6' },
+            { id: '7', label: 'Option 7' },
+            { id: '8', label: 'Option 8' },
+            { id: '9', label: 'Option 9' },
+            { id: '10', label: 'Option 10' },
+            { id: '11', label: 'Option 11' },
+            { id: '12', label: 'Option 12' },
+            { id: '13', label: 'Option 13' },
+            { id: '14', label: 'Option 14' },
+            { id: '15', label: 'Option 15' },
+          ]}
+        />
+      </Modal>
       <Button label="Open Modal" onClick={() => setIsOpen(true)} />
     </>
   )
 }
 
-export const OpenAndCloseModal = {
+export const LargeModal = {
   render: () => {
-    return <OpenAndCloseModalComponent />
+    return <OpenAndCloseLargeModal />
   },
 }
 
-export const FormModal = () => (
-  <form
-    onSubmit={(e) => {
-      e.preventDefault()
-      const formData = new FormData(e.currentTarget)
-      alert(`Form submitted:  ${JSON.stringify(Object.fromEntries(formData))}`)
-    }}
-  >
-    <Modal
-      title="Form Modal"
-      onClose={() => alert('Close')}
-      buttons={[
-        {
-          label: 'Close',
-          type: 'button',
-          variant: 'neutral',
-          onClick: () => alert('Close'),
-        },
-        { label: 'Save', type: 'submit' },
-      ]}
-    >
-      <FormContainer fluid>
-        <Input name="input" label="Input" placeholder="Type something" />
+const OpenAndCloseScrollableModal = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <Modal
+        title="Scrollable Modal Title"
+        isOpen={isOpen}
+        onClose={() => console.log('close')}
+        scrollable
+        buttons={[
+          {
+            label: 'Close',
+            variant: 'neutral',
+            onClick: () => console.log('close'),
+          },
+        ]}
+      >
+        <LoremIpsum lorems={10} />
         <Select
+          id="select"
           label="Select"
-          name="select"
           helpText="This is a help text"
           placeholder="Select an option"
           options={[
@@ -316,7 +321,117 @@ export const FormModal = () => (
             { id: '15', label: 'Option 15' },
           ]}
         />
-      </FormContainer>
-    </Modal>
-  </form>
-)
+      </Modal>
+      <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+    </>
+  )
+}
+
+export const ScrollableModal = {
+  render: () => {
+    return <OpenAndCloseScrollableModal />
+  },
+}
+
+const OpenAndCloseModalComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const closeModal = () => setIsOpen(false)
+  return (
+    <>
+      <ModalDialog isOpen={isOpen} details onClose={closeModal}>
+        <ModalHeader>
+          <ModalTitle>Modal title</ModalTitle>
+          <ModalCloseButton onClick={closeModal} />
+        </ModalHeader>
+        <ModalBody>
+          <LoremIpsum lorems={1} />
+        </ModalBody>
+        <ModalFooter>
+          <Button label="Close" onClick={closeModal} />
+        </ModalFooter>
+      </ModalDialog>
+
+      <LoremIpsum lorems={10} />
+      <br />
+      <hr />
+      <br />
+      <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+    </>
+  )
+}
+
+export const OpenAndCloseModal = {
+  render: () => {
+    return <OpenAndCloseModalComponent />
+  },
+}
+
+const OpenAndCloseFormModal = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        const formData = new FormData(e.currentTarget)
+        alert(
+          `Form submitted:  ${JSON.stringify(Object.fromEntries(formData))}`,
+        )
+      }}
+    >
+      <Modal
+        isOpen={isOpen}
+        title="Form Modal"
+        onClose={() => alert('Close')}
+        buttons={[
+          {
+            label: 'Close',
+            type: 'button',
+            variant: 'neutral',
+            onClick: () => alert('Close'),
+          },
+          { label: 'Save', type: 'submit' },
+        ]}
+      >
+        <FormContainer fluid>
+          <Input name="input" label="Input" placeholder="Type something" />
+          <Select
+            label="Select"
+            name="select"
+            helpText="This is a help text"
+            placeholder="Select an option"
+            options={[
+              { id: '1', label: 'Option 1' },
+              { id: '2', label: 'Option 2' },
+              { id: '3', label: 'Option 3' },
+              { id: '4', label: 'Option 4' },
+              { id: '5', label: 'Option 5' },
+              { id: '6', label: 'Option 6' },
+              { id: '7', label: 'Option 7' },
+              { id: '8', label: 'Option 8' },
+              { id: '9', label: 'Option 9' },
+              { id: '10', label: 'Option 10' },
+              { id: '11', label: 'Option 11' },
+              { id: '12', label: 'Option 12' },
+              { id: '13', label: 'Option 13' },
+              { id: '14', label: 'Option 14' },
+              { id: '15', label: 'Option 15' },
+            ]}
+          />
+        </FormContainer>
+      </Modal>
+
+      <Button
+        label="Open Modal"
+        type="button"
+        onClick={() => setIsOpen(true)}
+      />
+    </form>
+  )
+}
+
+export const FormModal = {
+  render: () => {
+    return <OpenAndCloseFormModal />
+  },
+}

package/tests/Modal.spec.tsx

@@ -3,6 +3,12 @@ import React from 'react'
 import { Modal, type Variant } from '../src/atoms/Modal'
 
 describe('Modal', () => {
+  beforeAll(() => {
+    HTMLDialogElement.prototype.show = jest.fn()
+    HTMLDialogElement.prototype.showModal = jest.fn()
+    HTMLDialogElement.prototype.close = jest.fn()
+  })
+
   const variants = ['info', 'success', 'warning', 'error']
   it.each(variants)(
     'renders the %s variant with title and the expected icon and button',
@@ -14,6 +20,7 @@ describe('Modal', () => {
           variant={variant as Variant}
           id={`${variant}-modal`}
           title={title}
+          isOpen={true}
           buttons={[
             {
               label: 'Done',
@@ -23,11 +30,11 @@ describe('Modal', () => {
           {content}
         </Modal>,
       )
-      expect(getByRole('img')).toHaveClass(variant)
+      expect(getByRole('img', { hidden: true })).toHaveClass(variant)
       expect(getByText(title)).toBeInTheDocument()
       expect(getByText(content)).toBeInTheDocument()
-      expect(getByRole('button')).toHaveTextContent('Done')
-      expect(getByRole('button')).toHaveClass('primary')
+      expect(getByRole('button', { hidden: true })).toHaveTextContent('Done')
+      expect(getByRole('button', { hidden: true })).toHaveClass('primary')
     },
   )
 
@@ -39,6 +46,7 @@ describe('Modal', () => {
         id="discard-modal"
         title={title}
         variant="discard"
+        isOpen={true}
         buttons={[
           {
             label: 'Cancel',
@@ -53,12 +61,20 @@ describe('Modal', () => {
         {content}
       </Modal>,
     )
-    expect(getByRole('img')).toHaveClass('warning')
+    expect(getByRole('img', { hidden: true })).toHaveClass('warning')
     expect(getByText(title)).toBeInTheDocument()
     expect(getByText(content)).toBeInTheDocument()
-    expect(screen.getAllByRole('button')[0]).toHaveTextContent('Cancel')
-    expect(screen.getAllByRole('button')[0]).toHaveClass('neutral')
-    expect(screen.getAllByRole('button')[1]).toHaveTextContent('Delete')
-    expect(screen.getAllByRole('button')[1]).toHaveClass('error')
+    expect(
+      screen.getAllByRole('button', { hidden: true })[0],
+    ).toHaveTextContent('Cancel')
+    expect(screen.getAllByRole('button', { hidden: true })[0]).toHaveClass(
+      'neutral',
+    )
+    expect(
+      screen.getAllByRole('button', { hidden: true })[1],
+    ).toHaveTextContent('Delete')
+    expect(screen.getAllByRole('button', { hidden: true })[1]).toHaveClass(
+      'error',
+    )
   })
 })

package/tests/a11y.spec.tsx

@@ -13,6 +13,11 @@ const stories = Object.values(components).map((component) => {
 })
 
 stories.forEach(({ title, stories }) => {
+  beforeAll(() => {
+    HTMLDialogElement.prototype.show = jest.fn()
+    HTMLDialogElement.prototype.showModal = jest.fn()
+    HTMLDialogElement.prototype.close = jest.fn()
+  })
   const variations = Object.entries(stories)
 
   variations.forEach(([variationName, story]: [string, any]) => {