diff --git a/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx b/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx
index ebc05977..5ef29898 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()
+ 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..2fc84752 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 (
+
+ {(showClose || onClose) && (
+
+ )}
)
}
@@ -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
}