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 }