From b6e215dec9f2337dd79b68c38603eafdbdba05dd Mon Sep 17 00:00:00 2001
From: bc17 <bc17@inf.ufpr.br>
Date: Fri, 23 Apr 2021 10:10:23 -0300
Subject: [PATCH 1/2] add modal

---
 ds-gov-componentes-react/src/App.js           |  22 +++-
 .../src/Components/Card.js                    | 106 ++++++++++--------
 .../src/Components/Modal.js                   |  79 +++++++++++++
 .../src/Components/js-dsgov/Modal.js          |  29 +++++
 .../src/Components/js-dsgov/Scrim.js          |  54 +++++++++
 5 files changed, 242 insertions(+), 48 deletions(-)
 create mode 100644 ds-gov-componentes-react/src/Components/Modal.js
 create mode 100644 ds-gov-componentes-react/src/Components/js-dsgov/Modal.js
 create mode 100644 ds-gov-componentes-react/src/Components/js-dsgov/Scrim.js

diff --git a/ds-gov-componentes-react/src/App.js b/ds-gov-componentes-react/src/App.js
index cd86915..04470ba 100644
--- a/ds-gov-componentes-react/src/App.js
+++ b/ds-gov-componentes-react/src/App.js
@@ -3,7 +3,7 @@
 import '@govbr/dsgov/dist/dsgov.min.css'
 import DateTimePicker from './Components/DateTimePicker'
 import Avatar from './Components/Avatar'
-// import Breadcrumb from './Components/Breadcrumb'
+import Breadcrumb from './Components/Breadcrumb'
 import Button from './Components/Button'
 import Card from './Components/Card'
 import Checkbox from './Components/Checkbox';
@@ -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 d17295c..edcb8d8 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' (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,82 @@ 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;
+    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 0000000..2834170
--- /dev/null
+++ b/ds-gov-componentes-react/src/Components/Modal.js
@@ -0,0 +1,79 @@
+import BRModal from  './js-dsgov/Modal'
+
+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
+  */
+
+  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'
+
+  switch (modalType) {
+    case 'alert':
+      return(
+        <div className="container-fluid">
+          <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0">
+              <div className="br-modal">
+                <div className="br-card">
+                  <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>
+                </div>
+                </div>
+              </div>
+          </div>
+        )
+      break;
+      case 'loading':
+        return(
+          <div className="container-fluid">
+            <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0">
+
+                <div className="br-modal">
+                  <div className="br-card">
+                    <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>
+                  </div>
+                </div>
+              </div>
+            </div>
+        )
+      break;
+    default:
+
+  }
+
+
+}
+
+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 0000000..9075d4e
--- /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 0000000..ba17470
--- /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
-- 
GitLab


From c4dc85d17dc2778c636c2a3a8fc359c27f7cd1ce Mon Sep 17 00:00:00 2001
From: bc17 <bc17@inf.ufpr.br>
Date: Fri, 23 Apr 2021 10:31:07 -0300
Subject: [PATCH 2/2] add card inside modal

---
 ds-gov-componentes-react/src/App.js           |  2 +-
 .../src/Components/Card.js                    | 15 +++-
 .../src/Components/Modal.js                   | 84 +++++++++----------
 3 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/ds-gov-componentes-react/src/App.js b/ds-gov-componentes-react/src/App.js
index 04470ba..03fb217 100644
--- a/ds-gov-componentes-react/src/App.js
+++ b/ds-gov-componentes-react/src/App.js
@@ -3,7 +3,7 @@
 import '@govbr/dsgov/dist/dsgov.min.css'
 import DateTimePicker from './Components/DateTimePicker'
 import Avatar from './Components/Avatar'
-import Breadcrumb from './Components/Breadcrumb'
+// import Breadcrumb from './Components/Breadcrumb'
 import Button from './Components/Button'
 import Card from './Components/Card'
 import Checkbox from './Components/Checkbox';
diff --git a/ds-gov-componentes-react/src/Components/Card.js b/ds-gov-componentes-react/src/Components/Card.js
index edcb8d8..62edfe0 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)
+      - 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 ''
@@ -132,6 +132,19 @@ function Card (props) {
         </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">
diff --git a/ds-gov-componentes-react/src/Components/Modal.js b/ds-gov-componentes-react/src/Components/Modal.js
index 2834170..7e76ace 100644
--- a/ds-gov-componentes-react/src/Components/Modal.js
+++ b/ds-gov-componentes-react/src/Components/Modal.js
@@ -1,4 +1,5 @@
 import BRModal from  './js-dsgov/Modal'
+import Card from './Card'
 
 function Modal (props) {
 
@@ -13,6 +14,12 @@ function Modal (props) {
       - 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 : ''
@@ -20,59 +27,52 @@ function Modal (props) {
   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':
-      return(
-        <div className="container-fluid">
-          <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0">
-              <div className="br-modal">
-                <div className="br-card">
-                  <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>
-                </div>
-                </div>
-              </div>
+      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':
-        return(
-          <div className="container-fluid">
-            <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0">
-
-                <div className="br-modal">
-                  <div className="br-card">
-                    <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>
-                  </div>
-                </div>
-              </div>
+        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>
+  )
 
 }
 
-- 
GitLab