diff --git a/ds-gov-componentes-react/src/App.js b/ds-gov-componentes-react/src/App.js index cd86915e12a7dc11b30504ce01dcc4f770173299..03fb217ede028b36cb74f723e21aa18d2afd6040 100644 --- a/ds-gov-componentes-react/src/App.js +++ b/ds-gov-componentes-react/src/App.js @@ -26,6 +26,7 @@ import Tag from './Components/Tag'; import Textarea from './Components/Textarea'; import Wizard from './Components/Wizard'; import Tooltip from './Components/Tooltip'; +import Modal from './Components/Modal'; import React, { useState, useEffect } from 'react'; @@ -179,7 +180,16 @@ function App() { </div> </div> - let test_card_flip_titles = {'front': 'Frente Card', 'back': 'Atrás Card'} + + let test_modal_footer = + <div> + <button className="br-button secondary small m-2" type="button">Cancelar + </button> + <button className="br-button primary small m-2" type="button">Retornar + </button> + </div> + + let test_modal_header = <button className="br-button close circle small" type="button" data-dismiss="br-modal" aria-label="Close"><i className="fas fa-times" aria-hidden="true"></i></button> return ( <div classNameName="App"> @@ -254,7 +264,13 @@ function App() { <h2>Card</h2> <Card cardType={'complete'} title={'Card com expansão'} content={test_card} title={'Card'} header={true} headerContent={test_card_header} footer={true} footerContent={test_card_footer} expanded={true} expandedContent={test_card_expanded}></Card> - <Card cardType={'flip'} title={'Flip card'} content={'Conteúdo da frent do card'} verseContent={'Conteúdo do verso do card'} flipTitle={test_card_flip_titles}></Card> + <Card cardType={'flip'} title={'Flip card'} content={'Conteúdo da frent do card'} verseContent={'Conteúdo do verso do card'} flipTitle={ {'front': 'Frente Card', 'back': 'Atrás Card'}}></Card> + + <h2>Modal</h2> + <Modal title={'Retornar para página inicial?'} content={'Você está sendo redirecionado para a página inicial do sistema'} header={test_modal_header} footer={test_modal_footer} closeIcon={true}></Modal> + + <Modal title={'Carregando'} modalType={'loading'} footer={test_modal_footer} header={test_modal_header} footer_justify_content={'justify-content-around'}></Modal> + {/* <Footer image={'https://picsum.photos/id/826/400'} social={social} social2={social2} contents={content} legal={legal} inverted={'inverted'} ></Footer> */} diff --git a/ds-gov-componentes-react/src/Components/Card.js b/ds-gov-componentes-react/src/Components/Card.js index d17295c52388e08c52d11c224850499f7f752a94..62edfe0cec97149215d4228f0ae5bb5bd5acbf5d 100644 --- a/ds-gov-componentes-react/src/Components/Card.js +++ b/ds-gov-componentes-react/src/Components/Card.js @@ -5,7 +5,7 @@ function Card (props) { /* **Parameters** - title: string - - cardType: 'simple', 'complete', 'flip' (default simple/complete) + - cardType: 'simple', 'complete', 'flip' e 'modal' (default simple) - content: content of cart (card front if it is cardType flip) - verseContent: content of verse if cardType flip - disabled: 'disabled' or '' @@ -72,66 +72,95 @@ function Card (props) { } } - if (cardType == 'flip'){ - return( - <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-sm-0"> - <p className="h5">{title}</p> - <div className={`br-card ${disabled}`} data-flip="data-flip"> - <div className="front" id="front"> - <div className="header"> - <div className="d-flex"> - <p className="h5">{flipTitle.front}</p> - <div className="ml-auto"> - {flipButton} + switch (cardType) { + case 'complete': + return( + <div className="container-fluid"> + <div className="row"> + <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> + <p className="h5">{title}</p> + <div className={`br-card ${disabled}`} > + <div className="header"> + {headerContent} </div> - </div> - </div> - <div className="card-content"> - {content} - </div> - </div> - <div className="back" id="back"> - <div className="header"> - <div className="d-flex"> - <div> - <p className="h5">{flipTitle.back}</p> + <div className="card-content"> + {content} </div> - <div className="ml-auto"> - {flipBackButton} + <div className="card-footer"> + {div_footer} </div> </div> </div> - <div className="card-content"> - {verseContent} - </div> </div> </div> - </div> - - ) - - } - else { - return( - <div className="container-fluid"> - <div className="row"> - <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> - <p className="h5">{title}</p> - <div className={`br-card ${disabled}`} > + ) + break; + case 'flip': + return( + <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-sm-0"> + <p className="h5">{title}</p> + <div className={`br-card ${disabled}`} data-flip="data-flip"> + <div className="front" id="front"> <div className="header"> - {headerContent} + <div className="d-flex"> + <p className="h5">{flipTitle.front}</p> + <div className="ml-auto"> + {flipButton} + </div> + </div> </div> <div className="card-content"> {content} </div> - <div className="card-footer"> - {div_footer} + </div> + <div className="back" id="back"> + <div className="header"> + <div className="d-flex"> + <div> + <p className="h5">{flipTitle.back}</p> + </div> + <div className="ml-auto"> + {flipBackButton} + </div> + </div> + </div> + <div className="card-content"> + {verseContent} + </div> + </div> + </div> + </div> + ) + break; + case 'modal': + return( + <div className="container-fluid"> + <div className="row"> + <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> + <div className={`br-card ${disabled}`} > + {content} + </div> + </div> + </div> + </div> + ) + break; + default: + return( + <div className="container-fluid"> + <div className="row"> + <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> + <p className="h5">{title}</p> + <div className={`br-card ${disabled}`} > + <div className="card-content"> + {content} + </div> </div> </div> </div> </div> - </div> - ) + ) + } } diff --git a/ds-gov-componentes-react/src/Components/Modal.js b/ds-gov-componentes-react/src/Components/Modal.js new file mode 100644 index 0000000000000000000000000000000000000000..7e76acee097766dad5e1700b68b5f570f676c338 --- /dev/null +++ b/ds-gov-componentes-react/src/Components/Modal.js @@ -0,0 +1,79 @@ +import BRModal from './js-dsgov/Modal' +import Card from './Card' + +function Modal (props) { + + /* + **Parameters** + - title: string + - modalType: 'alert', 'loading' + - content: content of modal + - loading: boolean + - justify_content: 'justify-content-around' 'justify-content-end' + - header: content of header + - footer: content of footer + */ + + const modalList = [] + for (const brModal of window.document.querySelectorAll('.br-modal')) { + modalList.push(new BRModal('br-modal', brModal)) + } + + + let modalType = props.modalType ? props.modalType : 'alert' + let title = props.title ? props.title : '' + let header = props.header ? props.header : '' + let content = props.content ? props.content : '' + let footer = props.footer ? props.footer : '' + let justify_content = props.footer_justify_content === 'justify-content-around' ? 'justify-content-around' : 'justify-content-end' + + let div_modal= '' + + switch (modalType) { + case 'alert': + div_modal = + <div className="container-fluid p-1 p-sm-4"> + <div className="br-modal-header"> + <div className="br-modal-title" tabindex="0" title={title}>{title}</div> + {header} + </div> + <div className="br-modal-body" tabindex="-1"> + <p tabindex="0">{content}</p> + </div> + <div className={`br-modal-footer ${justify_content}`}> + {footer} + </div> + </div> + break; + case 'loading': + div_modal = + <div className="container-fluid p-1 p-sm-4"> + <div className="br-modal-header"> + <div className="br-modal-title" tabindex="0" title={title}>{title}</div> + {header} + </div> + <div className="br-modal-body align-center is-loading" tabindex="-1"> + </div> + <div className={`br-modal-footer ${justify_content}`}> + {footer} + </div> + </div> + break; + default: + + } + + let div_card = <Card cardType={'modal'} content={div_modal}></Card> + + + return( + <div className="container-fluid"> + <div className="br-modal"> + {div_card} + </div> + </div> + ) + +} + +export default Modal; diff --git a/ds-gov-componentes-react/src/Components/js-dsgov/Modal.js b/ds-gov-componentes-react/src/Components/js-dsgov/Modal.js new file mode 100644 index 0000000000000000000000000000000000000000..9075d4ebca10a15ce07a46f44c8fdcf49cbdac75 --- /dev/null +++ b/ds-gov-componentes-react/src/Components/js-dsgov/Modal.js @@ -0,0 +1,29 @@ +import brScrim from './Scrim' + +class BRModal { + constructor(name, component) { + this.name = name + this.component = component + this._setBehavior() + } + + _setBehavior() { + for (const brScrim of window.document.querySelectorAll('.br-scrim')) { + const scrim = new ('br-scrim', brScrim) + for (const button of window.document.querySelectorAll( + '.br-scrim + button' + )) { + button.addEventListener('click', () => { + scrim.showScrim() + }) + } + } + } +} + +const modalList = [] +for (const brModal of window.document.querySelectorAll('.br-modal')) { + modalList.push(new BRModal('br-modal', brModal)) +} + +export default BRModal diff --git a/ds-gov-componentes-react/src/Components/js-dsgov/Scrim.js b/ds-gov-componentes-react/src/Components/js-dsgov/Scrim.js new file mode 100644 index 0000000000000000000000000000000000000000..ba174705e067679716d4461e60b481139e61667e --- /dev/null +++ b/ds-gov-componentes-react/src/Components/js-dsgov/Scrim.js @@ -0,0 +1,54 @@ +class BRScrim { + constructor(name, component) { + this.name = name + this.component = component + this._setType() + this._setBehavior() + } + + _setType() { + if (this.component.classList.contains('foco')) { + this._type = 'foco' + } + if (this.component.classList.contains('legibilidade')) { + this._type = 'legibilidade' + } + if (this.component.classList.contains('inibicao')) { + this._type = 'inibicao' + } + } + + _setBehavior() { + if (this.component.classList.contains('foco')) { + this.component.addEventListener('click', (event) => { + this._hideScrim(event) + }) + } + } + + _hideScrim(event) { + event.currentTarget.classList.remove('active') + } + + showScrim() { + if (this._type === 'foco') { + this.component.classList.add('active') + } + } +} +const scrimList = [] +for (const brScrim of window.document.querySelectorAll('.br-scrim')) { + scrimList.push(new BRScrim('br-scrim', brScrim)) +} + +for (const buttonBloco1 of window.document.querySelectorAll( + '.scrimexemplo button' +)) { + buttonBloco1.addEventListener('click', () => { + for (const brScrim of scrimList) { + brScrim.showScrim() + } + }) +} + +export default BRScrim