From 2936205e6f767efba73d2e23ebf27329575d0137 Mon Sep 17 00:00:00 2001
From: Matheus Alves <web.matheusalves@gmail.com>
Date: Tue, 4 Jun 2024 10:35:07 -0300
Subject: [PATCH 1/3] feat: add button to close the informationbox

---
 .../InformationBox/InformationBox.spec.tsx    |  6 ++++
 .../InformationBox/InformationBox.tsx         | 35 +++++++++++++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx b/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx
index ebc05977..f66bf3c1 100644
--- 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 />)
+    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
index fa7fad06..827c29e1 100644
--- 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,18 @@ const InformationBoxComponent = ({
           )}
         </div>
       </div>
+
+      {showClose && (
+        <button
+          className="InformationBox-close absolute top-4 right-4 text-on-base-2"
+          onClick={handleOnClose}
+        >
+          <Icon
+            icon="close"
+            size={4}
+          />
+        </button>
+      )}
     </div>
   )
 }
@@ -95,4 +118,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
 }

From f40a0226b44957782d1b10926a2cd95f3251e9f9 Mon Sep 17 00:00:00 2001
From: Matheus Alves <web.matheusalves@gmail.com>
Date: Tue, 4 Jun 2024 11:26:01 -0300
Subject: [PATCH 2/3] chore: lint

---
 styleguide/src/Indicators/InformationBox/InformationBox.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/styleguide/src/Indicators/InformationBox/InformationBox.tsx b/styleguide/src/Indicators/InformationBox/InformationBox.tsx
index 827c29e1..15dec120 100644
--- a/styleguide/src/Indicators/InformationBox/InformationBox.tsx
+++ b/styleguide/src/Indicators/InformationBox/InformationBox.tsx
@@ -93,10 +93,7 @@ const InformationBoxComponent = ({
           className="InformationBox-close absolute top-4 right-4 text-on-base-2"
           onClick={handleOnClose}
         >
-          <Icon
-            icon="close"
-            size={4}
-          />
+          <Icon icon="close" size={4} />
         </button>
       )}
     </div>

From 182906b9805f51474f30e4a4bdff65f45c0a5cbb Mon Sep 17 00:00:00 2001
From: Matheus Alves <web.matheusalves@gmail.com>
Date: Tue, 4 Jun 2024 11:37:21 -0300
Subject: [PATCH 3/3] fix: test

---
 .../src/Indicators/InformationBox/InformationBox.spec.tsx       | 2 +-
 styleguide/src/Indicators/InformationBox/InformationBox.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx b/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx
index f66bf3c1..5ef29898 100644
--- a/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx
+++ b/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx
@@ -35,7 +35,7 @@ describe(specTitle('InformationBox tests'), () => {
   })
 
   it('Close button', () => {
-    mount(<Default />)
+    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
index 15dec120..2fc84752 100644
--- a/styleguide/src/Indicators/InformationBox/InformationBox.tsx
+++ b/styleguide/src/Indicators/InformationBox/InformationBox.tsx
@@ -88,7 +88,7 @@ const InformationBoxComponent = ({
         </div>
       </div>
 
-      {showClose && (
+      {(showClose || onClose) && (
         <button
           className="InformationBox-close absolute top-4 right-4 text-on-base-2"
           onClick={handleOnClose}