Add button to close the InformationBox (#216)

lojaintegrada · Jun 4, 2024 · 51f0170 · 51f0170
1 parent d362f89
commit 51f0170
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx b/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx
@@ -33,4 +33,10 @@ describe(specTitle('InformationBox tests'), () => {
     cy.get('.InformationBox-icon').should('have.class', 'icon-lightbulb')
     cy.get('.InformationBox').should('have.class', 'bg-focus-light')
   })
+
+  it('Close button', () => {
+    mount(<Default showClose={true} />)
+    cy.get('.InformationBox-close').click()
+    cy.get('.InformationBox').should('not.exist')
+  })
 })
diff --git a/styleguide/src/Indicators/InformationBox/InformationBox.tsx b/styleguide/src/Indicators/InformationBox/InformationBox.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Icon, IconProps } from '../../Icons'
 
 type InformationBoxTypesOptions = 'success' | 'warning' | 'danger' | 'info'
@@ -45,9 +45,20 @@ const InformationBoxTypes: Record<
 
 const InformationBoxComponent = ({
   type = 'info',
-  subtitle,
   title,
+  subtitle,
+  showClose = false,
+  onClose,
 }: InformationBoxProps) => {
+  const [isInformationBoxOpen, setIsInformationBoxOpen] = useState(true)
+
+  const handleOnClose = () => {
+    setIsInformationBoxOpen(false)
+    onClose?.()
+  }
+
+  if (!isInformationBoxOpen) return null
+
   return (
     <div
       className={`InformationBox pl-4 pr-6 pt-5 pb-6 rounded w-full relative flex items-start mb-3 ${InformationBoxTypes[type].class}`}
@@ -76,6 +87,15 @@ const InformationBoxComponent = ({
           )}
         </div>
       </div>
+
+      {(showClose || onClose) && (
+        <button
+          className="InformationBox-close absolute top-4 right-4 text-on-base-2"
+          onClick={handleOnClose}
+        >
+          <Icon icon="close" size={4} />
+        </button>
+      )}
     </div>
   )
 }
@@ -95,4 +115,12 @@ export interface InformationBoxProps {
    * InformationBox text below title
    */
   subtitle?: string | React.ReactNode
+  /** Show close button
+   * @default false
+   */
+  showClose?: boolean
+  /**
+   * Function to close InformationBox (also activate `showClose`)
+   */
+  onClose?: () => void
 }