Skip to content
Snippets Groups Projects
Commit 976272f7 authored by Rafael S Castilho's avatar Rafael S Castilho
Browse files

Merge branch 'cookiebar' into 'development'

Cookiebar

See merge request !10
parents ead22aa4 3441c2da
No related branches found
No related tags found
2 merge requests!28Add js support,!10Cookiebar
......@@ -29,10 +29,13 @@ import Tooltip from './Components/Tooltip';
import Modal from './Components/Modal';
import Table from './Components/Table';
import Notification from './Components/Notification';
import Cookiebar from './Components/Cookiebar'
import Menu from './Components/Menu'
import Submenu from './Components/Submenu'
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
//TO-DO : ver por que href não funciona direito
// fazer header e footer: ao invés de parametros implementar como variaveis internas ao invez de parametros
......@@ -210,6 +213,127 @@ function App() {
let test_table_titles = ['Título coluna 1', 'Título coluna 2', 'Título coluna 3', 'Título coluna 4']
let test_table_content = [['Linha 1 coluna 1', 'Linha 1 coluna 2', 'Linha 1 coluna 3', 'Linha 1 coluna 4'], ['Linha 2 coluna 1', 'Linha 2 coluna 2', 'Linha 2 coluna 3', 'Linha 2 coluna 4' ]]
let cookieData = [
{
lang: 'pt-br',
allOptOut: true,
acceptButton: 'Aceitar',
optInButton: 'Ver Política de Cookies',
infoText: 'Texto informativo',
mainTitle: 'Respeitamos a sua Privacidade',
lastUpdate: '01/02/2021',
entryText:
'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus aspernatur neque culpa nisi alias. Voluptatem dicta nihil magnam, cumque voluptatum animi distinctio molestias recusandae ipsam, sapiente unde error repellendus quibusdam?',
selectAll: false,
cookieGroups: [
{
groupId: 'necessarios',
groupName: 'Estritamente necessários',
groupOptOut: true,
groupSelected: false,
groupText:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum delectus fuga omnis, placeat harum id aliquam, blanditiis consectetur est cupiditate ipsam alias vitae veritatis beatae, aperiam totam assumenda. Sed, modi!',
cookieList: [
{
cookieId: 'necessario-1',
cookieOptOut: true,
cookieSelected: false,
alertMessage: 'Alerta group 0 - cookie 0',
cookieName: 'optimizelyEndUserId',
expires: '30 minutos',
domain: 'serpro.gov.br',
entreprise: 'Serpro',
purpose: 'Autorização',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui numquam inventore fuga consectetur minus accusantium sapiente, distinctio dolorum illum, doloremque rem deleniti recusandae quod rerum quidem amet? Unde, laudantium cum.',
},
],
},
{
groupId: 'desempenho',
groupName: 'Desempenho, funcionamento, marketing e personalização',
groupOptOut: true,
groupSelected: false,
groupText:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum delectus fuga omnis, placeat harum id aliquam, blanditiis consectetur est cupiditate ipsam alias vitae veritatis beatae, aperiam totam assumenda. Sed, modi!',
cookieList: [
{
cookieId: 'desempenho-2',
cookieOptOut: true,
cookieSelected: false,
cookieName: 'optimizelyEndUserId',
expires: '30 minutos',
domain: 'serpro.gov.br',
entreprise: 'Serpro',
purpose: 'Autorização',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui numquam inventore fuga consectetur minus accusantium sapiente, distinctio dolorum illum, doloremque rem deleniti recusandae quod rerum quidem amet? Unde, laudantium cum.',
},
],
},
{
groupId: 'experiencia',
groupName: 'Experiência do site',
groupOptOut: true,
groupSelected: false,
groupText:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum delectus fuga omnis, placeat harum id aliquam, blanditiis consectetur est cupiditate ipsam alias vitae veritatis beatae, aperiam totam assumenda. Sed, modi!',
cookieList: [
{
cookieId: 'experiencia-1',
cookieOptOut: true,
cookieSelected: true,
alertMessage: 'Alerta group 2 - cookie 0',
cookieName: 'optimizelyEndUserId',
expires: '30 minutos',
domain: 'serpro.gov.br',
entreprise: 'Serpro',
purpose: 'Autorização',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui numquam inventore fuga consectetur minus accusantium sapiente, distinctio dolorum illum, doloremque rem deleniti recusandae quod rerum quidem amet? Unde, laudantium cum.',
},
],
},
],
noteTitle: 'Aviso sobre cookies',
noteList: [
{
question: 'O que são cookies?',
answer:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eius distinctio rerum ad, maxime alias vel minima, asperiores sequi eveniet non optio officiis quaerat reiciendis quae odio explicabo ut debitis?',
},
{
question: 'Durabilidade?',
answer:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eius distinctio rerum ad, maxime alias vel minima, asperiores sequi eveniet non optio officiis quaerat reiciendis quae odio explicabo ut debitis?',
},
{
question: 'Proveniência?',
answer:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eius distinctio rerum ad, maxime alias vel minima, asperiores sequi eveniet non optio officiis quaerat reiciendis quae odio explicabo ut debitis?',
},
{
question: 'Finalidade?',
answer:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam eius distinctio rerum ad, maxime alias vel minima, asperiores sequi eveniet non optio officiis quaerat reiciendis quae odio explicabo ut debitis?',
},
],
links: [
'Declaração de Conformidade com os Princípios de Proteção de Dados',
],
},
]
function showCookiebar(){
console.log('sdj')
let style = ''
let x = document.getElementById("cookiebar")
if (x.style.display === 'none') {
x.style.display = 'block'
} else {
x.style.display = 'none'
}
}
return (
<div classNameName="App">
......@@ -296,12 +420,19 @@ function App() {
<h2>Notification</h2>
<Notification title={'Título da Notificação'} header={<div class="row"><div class="col-10"><span class="text-bold">Fulano da Silva</span><br/><small><a>nome.sobrenome@dominio.gov</a></small></div></div>} content={'Teste notiicações'}></Notification>
<h2>Cookiebar</h2>
<button onClick={showCookiebar}>Testar Cookiebar</button>
<div id='cookiebar' style={{display:'none'}}>
<Cookiebar cookiebarData={cookieData}></Cookiebar>
</div>
<h2>Menu teste</h2>
<Menu top_image={<img src="https://cdn.dsgovserprodesign.estaleiro.serpro.gov.br/design-system/images/logo-positive.png" alt="Imagem ilustrativa"/>} logos={test_logos} links={test_links2} social={test_social} items={test_menu} ></Menu>
{/* <Footer image={'https://picsum.photos/id/826/400'} social={social} social2={social2} contents={content} legal={legal} inverted={'inverted'} ></Footer> */}
<h1>end of page</h1>
</div>
......@@ -309,4 +440,5 @@ function App() {
}
export default App;
import BRCookiebar from './js-dsgov/Cookiebar'
// TODO: se usa o componente modal da erro no js por não encontrar os botões
function Cookiebar (props) {
/*
**Parameters**
- title: string
- text: string
- cookiebarData: json with data input
*/
let text = props.text ? props.text : ''
let title = props.title ? props.title : ''
let cookiebarData = props.cookiebarData ? props.cookiebarData : [
{
"lang": "",
"allOptOut": true,
"acceptButton": "",
"optInButton": "",
"optOutButton": "",
"infoText": "",
"mainTitle": "",
"lastUpdate": "",
"entryText": "",
"selectAll": false,
"cookieGroups":[
{
"groupId": "",
"groupName": "",
"groupOptOut": true,
"groupSelected": false,
"groupText": "",
"cookieList":[
{
"cookieId": "",
"cookieOptOut": true,
"cookieSelected": false,
"alertMessage": "",
"cookieName": "",
"expires": "",
"domain": "",
"entreprise": "",
"purpose": "",
"description": ""
}
]
}
],
"noteTitle": "",
"noteList":[
{
"question": "",
"answer": ""
}
],
"links":[
""
]
}
]
const cookiebarList = []
for (const brCookiebar of window.document.querySelectorAll('.br-cookiebar')) {
cookiebarList.push(
new BRCookiebar(
'br-cookiebar',
brCookiebar,
JSON.stringify(cookiebarData),
'pt-br',
callback
)
)
}
return (
<div class="br-cookiebar default">
<div class="br-modal">
<div class="br-card">
<div class="container-fluid p-1 p-sm-4">
<div class="wrapper">
<div class="br-modal-header entry-content">
<div class="br-modal-title" tabindex="0">{title}</div>
<button class="br-button close circle small" type="button" data-dismiss="br-modal" aria-label="Close"><i class="fas fa-times" aria-hidden="true"></i>
</button>
<p class="last-update"></p>
<p class="entry-text"></p>
</div>
<div class="br-modal-body" tabindex="-1">
<p class="info-text">{text}</p>
<div class="br-list main-content">
</div>
</div>
<div class="br-modal-footer actions justify-content-end">
<button class="br-button secondary small" type="button">
</button>
<button class="br-button primary small" type="button">
</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
function callback(json) {
// console.log(json)
}
export default Cookiebar
......@@ -60,6 +60,19 @@ function Modal (props) {
</div>
break;
default:
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>
}
......
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment