Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • painel-pnld/ds-gov-componentes-react
1 result
Show changes
Commits on Source (2)
Showing
with 511 additions and 174 deletions
......@@ -29,6 +29,8 @@ import Tooltip from './Components/Tooltip';
import Modal from './Components/Modal';
import Table from './Components/Table';
import Notification from './Components/Notification';
import Menu from './Components/Menu'
import Submenu from './Components/Submenu'
import React, { useState, useEffect } from 'react';
......@@ -36,18 +38,15 @@ import React, { useState, useEffect } from 'react';
// fazer header e footer: ao invés de parametros implementar como variaveis internas ao invez de parametros
//breadcrumb deixar pra quando começar interface
// implementar direito: card, menu(criar componente submenu pra facilitar), modal(esperar card ficar pronto), notification, Table, dividier(rever)
// implementar direito: dividier(rever)
//implementar cookieBar
//rever porque duplo upload
//rever lista
// rever componentes com warning para usar componente message com mensagem contextual
// rever componentes com js extra e inicializar o js corretamente (ja feito em datetimepicker e message+)
//adicionar cabeçalho com licença GPL
//atualizar input (e outros componentes que podem ter tooltips, para usar tooltip)
//ver por que o botão do input não esta mais na posição corret
//se for remover o div extra em tooltip lembrar de remover os div extras em input
//ver por que o botão do datetimepicker não esta mais na posição correta
function App() {
// ----------------------------------------------------------------------//
......@@ -61,53 +60,28 @@ function App() {
if (!didLoad){
setLoaded(!didLoad)
}
})
},[didLoad])
// ----------------------------------------------------------------------//
const warn = <div>
{/* <span className="feedback danger" role="alert"><i className="fas fa-times-circle" aria-hidden="true"></i>Preenchimento Obrigatório</span> */}
</div>
let test_button = <button className="br-button circle small" type="button" aria-label="Mostrar senha"><i className="fas fa-eye" aria-hidden="true"></i>
</button>
let test_button2 = <div> <button className="br-button circle" type="button"><i className="fas fa-city" aria-hidden="true"></i>
</button>
</div>
let test_button3 = <button className="br-button" type="button">Cancelar
</button>
let test_image = <img classNameName="rounded" src="https://picsum.photos/40" alt="Imagem de exemplo do item sem interação"/>
let test_image2 = <i classNameName="fas fa-cart-plus" aria-hidden="true"></i>
let test_text = <div><p>texto de teste para componentes com texto</p>
<a href="www.google.com">link</a>
</div>
let test_warn = <span classNameName="feedback warning mt-1" role="alert"><i classNameName="fas fa-exclamation-triangle" aria-hidden="true"></i>Texto de mensagem</span>
let test_radio = <Radio horizontal={false} options={['op1','op2','op3','op4']} base_id={'test-'} ></Radio>
let test_checkbox = <Checkbox labels={['opt1','opt2','opt3']} warn={warn} horizontal={false} baseid={'teste-'} ></Checkbox>
// let test_radio = <Radio horizontal={false} options={['op1','op2','op3','op4']} base_id={'test-'} ></Radio>
let test_list = [{'text':'texto teste','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT'},
{'text':'texto teste2','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT2'},
{'text':'texto teste3','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT3'}]
// let test_checkbox = <Checkbox labels={['opt1','opt2','opt3']} warn={warn} horizontal={false} baseid={'teste-'} ></Checkbox>
let test_list2 = [{'text':'texto teste','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':<div classNameName="br-checkbox"><input id="check-01" type="checkbox" aria-label="selecione"/><label for="check-01"></label></div>},
{'text':'texto teste2','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':<div classNameName="br-checkbox"><input id="check-02" type="checkbox" aria-label="selecione"/><label for="check-02"></label></div>},
{'text':'texto teste3','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':<div classNameName="br-checkbox"><input id="check-03" type="checkbox" aria-label="selecione"/><label for="check-03"></label></div>}]
let test_list = [{'text':'texto teste','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT'},
{'text':'texto teste2','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT2'},
{'text':'texto teste3','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT3'}]
let test_list3 = [{'rotulo':'ROTULO 1','content': [{'text':'subitem teste','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT'},
{'text':'subitem teste2','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT2'}]},
{'rotulo':'ROTULO 2','content': [{'text':'subitem teste','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT'},
{'text':'subitem teste2','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT2'},{'text':'subitem teste3','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT3'}]},
{'rotulo':'ROTULO 3','content': [{'text':'subitem teste','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT'},
{'text':'subitem teste2','image':<i classNameName="fas fa-heartbeat" aria-hidden="true"></i>,'meta':'META TEXT2'}]}
];
let test_select = [{'nome':"Acre",'checked':''}, {'nome':"Alagoas",'checked':''}, {'nome':"Amapá",'checked':''}, {'nome':"Amazonas",'checked':''}, {'nome':"Bahia",'checked':''}, {'nome':"Ceará",'checked':''}, {'nome':"Distrito Federal",'checked':''}, {'nome':"Espírito Santo",'checked':''}, {'nome':"Goiás",'checked':''}, {'nome':"Maranhão",'checked':''}, {'nome':"Mato Grosso",'checked':''}, {'nome':"Mato Grosso do Sul",'checked':''}, {'nome':"Minas Gerais",'checked':''}, {'nome':"Pará",'checked':''}, {'nome':"Paraíba",'checked':''}, {'nome':"Paraná",'checked':''}, {'nome':"Pernambuco",'checked':''}, {'nome':"Piauí",'checked':''}, {'nome':"Rio de Janeiro",'checked':''}, {'nome':"Rio Grande do Norte",'checked':''}, {'nome':"Rio Grande do Sul",'checked':''}, {'nome':"Rondônia",'checked':''}, {'nome':"Santa Catarina",'checked':''}, {'nome':"São Paulo",'checked':''}, {'nome':"Sergipe",'checked':''}, {'nome':"Tocantins",'checked':''}, {'nome':"Exterior",'checked':''}]
......@@ -124,9 +98,7 @@ function App() {
{'aria_label':'panel-6', 'label':'label6', 'sub_label':'sublabel6', 'active': '' }
]
let test_count={'type':'danger','ammo':12,'maxAmmo':999}
let test_count2={'type':'warning','ammo':182,'maxAmmo':999}
let test_count3={'type':'success','ammo':1266,'maxAmmo':999}
let test_count={'type':'danger','ammo':1200,'maxAmmo':999}
let wizard_text = <div className="text">Conteúdo aqui - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
......@@ -138,18 +110,60 @@ function App() {
{'title':'Conteúdo 5', 'panel_content': ['texto 5'], 'class': 'info', 'active': '', 'aria_label': 'label 5'},
]
let test_tooltip = <Tooltip content={'conteudo tooltip input'} ></Tooltip>
let test_tooltip_header = <div className="popover-header"><span className="text">Teste header</span></div>
let test_tooltip_body = <div className="popover-body"><span className="subtext">Teste Body</span></div>
let test_tooltip_footer = <div className="popover-footer"><a className="link" href="javascript:void(0)">Teste Footer</a></div>
let test_tooltip_footer2 = <div className="popover-footer"><button className="br-button primary" type="button"><span>Atualizar</span></button></div>
let test_tooltip_icon = <div className="popover-icon"><i className="fas fa-exclamation-triangle fa-3x" aria-hidden="true"></i></div>
var test_logos = [<img src="https://i.picsum.photos/id/634/40/40.jpg?hmac=l9KVegAgp1oIqXsM31je_SMY-lDFnf_0yscqWa1BW_w" alt="Imagem ilustrativa"/>,<img src="https://i.picsum.photos/id/637/40/40.jpg?hmac=l9KVegAgp1oIqXsM31je_SMY-lDFnf_0yscqWa1BW_w" alt="Imagem ilustrativa2"/> ]
var test_links2 = [ { 'nome':'Orgão', 'link':'javascript: void(0)' },{'nome':'Legis', 'link':'javascript: void(0)' } ]
let test_social = [ { 'link':'javascript: void(0)', 'aria_label':'log facebook', 'icon':<i className="fab fa-facebook-f" aria-hidden="true">
</i> } , { 'link':'javascript: void(0)', 'aria_label':'log twitter', 'icon':<i className="fab fa-twitter" aria-hidden="true"></i> } ]
//[ {icon:icon,link:link,label:label} , {} ]
{/* <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> */}
let test_submenu = [{'name':'submenu1','link':'javascript: void(0)','submenu':'' },{'name':'submenu2','link':'javascript: void(0)','submenu':''}]
let test_submenu2 = [{'name':'submenu21','link':'javascript: void(0)','submenu':'' },{'name':'submenu22','link':'javascript: void(0)','submenu': <Submenu items={test_submenu} ></Submenu>}]
// <Submenu ></Submenu>
// let items = props.items ? props.items : [] //[ { name, link, submenu }, {} ]
let test_menu = [
{
'group_link':'javascript: void(0)',
'group_name':'grupo A',
'content': [
{
'link':'javascript: void(0)',
'name': 'subitem A.1',
'submenu': <Submenu items={test_submenu2} ></Submenu>
},
{
'link':'javascript: void(0)',
'name': 'subitem A.2',
'submenu': ''
}
]
},
{
'group_link':'javascript: void(0)',
'group_name':'grupo B',
'content': [
{
'link':'javascript: void(0)',
'name': 'subitem B.1',
'submenu': ''
},
{
'link':'javascript: void(0)',
'name': 'subitem B.2',
'submenu': ''
}
]
}
]
let test_tooltip_icon2 = <div className="popover-image"><img src="https://picsum.photos/80" alt="Avatar"/></div>
let test_card =
<div> <img src="https://picsum.photos/id/0/1080" alt="Imagem de exemplo"/> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p> </div>
......@@ -207,22 +221,20 @@ function App() {
<h2>Avatar</h2>
<Avatar type={'letra'} image={'https://picsum.photos/id/829/400'} title={'Fulano da silva'} texto={'ds'} ></Avatar>
{/* <Breadcrumb></Breadcrumb> */}
<h2>button</h2>
<Button label={'button'} bground={'primary'} ></Button>
<h2>Checkbox</h2>
<Checkbox labels={['opt1','opt2','opt3']} warn={warn} horizontal={false} ></Checkbox>
<Checkbox labels={['opt1','opt2','opt3']} message={test_message} horizontal={false} ></Checkbox>
<h2>Input</h2>
<Input placeholder='Texto' title={'plocs'} size={'medium'} state={'warningmm'} state_msg={'message 1'} state_msg2={'message 2'} filter={false} button={test_button} ></Input>
<Input placeholder='Texto' title={'plocs'} size={'medium'} state={'warning'} message={test_message} message_extra={'message 2'} filter={false} button={test_button} ></Input>
<h2>Item</h2>
<Item text={test_text} image={test_image} ></Item>
<h2>Radio</h2>
<Radio horizontal={false} options={['op1','op2','op3','op4']} ></Radio>
<Radio horizontal={false} options={['op1','op2','op3','op4']} message={test_message} ></Radio>
<h2>Lista </h2>
<List title={'titulo teste'} content={test_list} ></List>
......@@ -256,6 +268,7 @@ function App() {
<h2>Tag </h2>
<Tag label={'tag'} icon={<i className="fas fa-car" aria-hidden="true"></i>} ></Tag>
<Tag label={'tag'} count={test_count} ></Tag>
<h2>Textarea</h2>
<Textarea label={'LABEL'} placeholder={'texto placeholder'} aux_text={'texto auxiliar'} ></Textarea>
......@@ -282,6 +295,11 @@ 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>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>
......
function Avatar(props) {
const type = props.type //icon ou foto ou letra
const image = props.image ? props.image : ''
const ptitle = props.title ? props.type : ''
const texto = props.texto ? props.texto : 'A'
var type = props.type //icon ou foto ou letra
var image = props.image ? props.image : ''
var ptitle = props.title ? props.type : ''
var texto = props.texto ? props.texto : 'A'
if (type !== 'icon' && type !== 'foto' && type !== 'letra'){
type = 'letra'
......
......@@ -2,8 +2,13 @@ import BRBreadcrumb from './js-dsgov/Breadcrumb'
function Breadcrumb(props) {
// new BRBreadcrumb('br-breadcrumb', brBreadcrumb)
//TO-DO fazer li dinamica para montar breadcrumb
const breadcrumbList = []
for (const brBreadcrumb of window.document.querySelectorAll('.br-breadcrumb')) {
breadcrumbList.push(new BRBreadcrumb('br-breadcrumb', brBreadcrumb))
}
return(
<div>
<div className="container-fluid">
......
......@@ -19,7 +19,6 @@ function Button (props){
<div>
<button className={class_content} type="button" disabled={pstate}><i className={icon} aria-hidden="true"></i>{label}
</button>
<script src="../../dsgov.js"></script>
</div>
)
}
......@@ -28,7 +27,6 @@ function Button (props){
<div>
<button className={class_content} type="button" disabled={pstate}>{label}
</button>
<script src="../../dsgov.js"></script>
</div>
)
}
......
......@@ -6,9 +6,9 @@ function Checkbox(props) {
//ver como deixar id dinamico, sem id dinamico não funciona escolher
let horizontal = props.horizontal ? props.horizontal : false
let disable = props.disabled ? props.disable : ''
// let disable = props.disabled ? props.disable : '' //uncoment if it becomes necessary to have a box disabled
let options = props.labels ? props.labels : ''
let warn = props.warn ? props.warn : ''
let message = props.message ? props.message : ''
let baseid = props.baseid ? props.baseid : 'checkbox- '
if (horizontal){
......@@ -22,7 +22,7 @@ function Checkbox(props) {
</div>
)
}
{warn}
{message}
</div>
)
}else{
......@@ -38,7 +38,7 @@ function Checkbox(props) {
</div>
)
}
{warn}
{message}
</div>
)
}
......
......@@ -9,8 +9,8 @@ function Input (props){
let id = props.id ? props.id : 'input-1'
let disabled = props.disabled ? props.disabled : ''
let state = props.state ? props.state : ''
let state_msg = props.state_msg ? props.state_msg : ''
let state_msg2 = props.state_msg2 ? props.state_msg2 : ''
let message = props.message ? props.message : '' //use component message
let message_extra = props.message_extra ? props.message_extra : ''
let type = props.type ? props.type : 'text'
let button = props.button ? props.button : <div></div>
let filter = props.filter ? props.filter : false
......@@ -32,7 +32,7 @@ function Input (props){
if (size !== 'large' && size !== 'small' && size !== 'medium' ){
size = 'medium'
}
const fname = (placeholder,title,size,id,disabled,state,state_msg,state_msg2,type,button,filter) => {
const fname = (placeholder,title,size,id,disabled,state,message,message_extra,type,button,filter) => {
if(filter){
switch(state){
case 'success':
......@@ -46,11 +46,8 @@ function Input (props){
{tooltip}
{button}
<div className="mt-1">
<span className="feedback success" role="alert">
<i className="fas fa-check-circle" aria-hidden="true">
</i>{state_msg}
</span>
<div className="text-base">{state_msg2}</div>
{message}
<div className="text-base">{message_extra}</div>
</div>
</div>
</div>
......@@ -68,11 +65,8 @@ function Input (props){
{tooltip}
{button}
<div className="mt-1">
<span className="feedback danger" role="alert">
<i className="fas fa-times-circle" aria-hidden="true">
</i>{state_msg}
</span>
<div className="text-base">{state_msg2}</div>
{message}
<div className="text-base">{message_extra}</div>
</div>
</div>
</div>
......@@ -90,11 +84,8 @@ function Input (props){
{tooltip}
{button}
<div className="mt-1">
<span className="feedback warning" role="alert">
<i className="fas fa-exclamation-triangle" aria-hidden="true">
</i>{state_msg}
</span>
<div className="text-base">{state_msg2}</div>
{message}
<div className="text-base">{message_extra}</div>
</div>
</div>
</div>
......@@ -112,11 +103,8 @@ function Input (props){
{tooltip}
{button}
<div className="mt-1">
<span className="feedback info" role="alert">
<i className="fas fa-info-circle" aria-hidden="true">
</i>{state_msg}
</span>
<div className="text-base">{state_msg2}</div>
{message}
<div className="text-base">{message_extra}</div>
</div>
</div>
</div>
......@@ -153,11 +141,8 @@ function Input (props){
{tooltip}
{button}
<div className="mt-1">
<span className="feedback success" role="alert">
<i className="fas fa-check-circle" aria-hidden="true">
</i>{state_msg}
</span>
<div className="text-base">{state_msg2}</div>
{message}
<div className="text-base">{message_extra}</div>
</div>
</div>
</div>
......@@ -175,11 +160,8 @@ function Input (props){
{tooltip}
{button}
<div className="mt-1">
<span className="feedback danger" role="alert">
<i className="fas fa-times-circle" aria-hidden="true">
</i>{state_msg}
</span>
<div className="text-base">{state_msg2}</div>
{message}
<div className="text-base">{message_extra}</div>
</div>
</div>
</div>
......@@ -197,11 +179,8 @@ function Input (props){
{tooltip}
{button}
<div className="mt-1">
<span className="feedback warning" role="alert">
<i className="fas fa-exclamation-triangle" aria-hidden="true">
</i>{state_msg}
</span>
<div className="text-base">{state_msg2}</div>
{message}
<div className="text-base">{message_extra}</div>
</div>
</div>
</div>
......@@ -219,11 +198,8 @@ function Input (props){
{tooltip}
{button}
<div className="mt-1">
<span className="feedback info" role="alert">
<i className="fas fa-info-circle" aria-hidden="true">
</i>{state_msg}
</span>
<div className="text-base">{state_msg2}</div>
{message}
<div className="text-base">{message_extra}</div>
</div>
</div>
</div>
......@@ -250,7 +226,7 @@ function Input (props){
}
return(
fname(placeholder,title,size,id,disabled,state,state_msg,state_msg2,type,button,filter)
fname(placeholder,title,size,id,disabled,state,message,message_extra,type,button,filter)
)
}
......
......@@ -4,8 +4,12 @@ import BRItem from './js-dsgov/Item'
// voltar quando tiver feito componente radio
function Item (props){
//estados: active,selected,disabled
//checkbox/radio
//id
const itemList = []
for (const brItem of window.document.querySelectorAll('.br-item')) {
itemList.push(new BRItem('br-item', brItem))
}
let text = props.text ? props.text : ''
let image = props.image ? props.image : <div></div>
let button = props.button ? props.button : <div></div>
......
......@@ -16,6 +16,20 @@ function Item(props){
let size;
let div;
const listList = []
for (const brList of window.document.querySelectorAll(
'.br-list[data-toggle]'
)) {
listList.push(new BRList('br-list-collapsible', brList))
}
for (const brList of window.document.querySelectorAll(
'.br-list[data-checkable]'
)) {
listList.push(new BRList('br-list-checkable', brList))
}
switch(density){
case 'media':
size = "align-items-center br-item py-3"
......@@ -171,7 +185,6 @@ function Item(props){
</div>
</div>
)
break
case 'separator':
return(
<div>
......@@ -211,7 +224,6 @@ function Item(props){
</div>
</div>
)
break
case 'expansion':
return(
<div>
......@@ -304,7 +316,6 @@ function Item(props){
</div>
</div>
)
break
default:
return(
<div>
......
import BRMenu from './js-dsgov/Menu'
import { useState, useEffect } from 'react';
function Menu (props){
//TO-DO: No caso de ser necessario modo 2 descomentar função que fecha o menu em clique e ver o erro de clique duplo
const [menuList,setMenuList] = useState([])
let mode = props.mode ? props.mode : '1'
let items = props.items ? props.items : [] //[ 'nome grupo': nome, items:[{nome:nome,link:link}] ]
let top_image = props.top_image ? props.top_image : ''
let logos = props.logos ? props.logos : []
let links = props.links ? props.links : []
let social = props.social ? props.social : [] //[ {icon:icon,link:link,label:label} , {} ]
let social_title = props.social_title ? props.social_title : 'Title'
let menu_info = props.menu_info ? props.menu_info : <div className="text-center text-down-01">Todo o conteúdo deste site está publicado sob a licença <strong>Creative Commons Atribuição-SemDerivações 3.0</strong>
</div>
let density = props.density ? props.density : 'medium' //small, medium, large
let menu_title = props.menu_title ? props.menu_title : 'Titulo padrão'
const menuListTemp = []
useEffect(()=>{
for (const brMenu of window.document.querySelectorAll('.br-menu:not(.dsgov)')) {
menuListTemp.push(new BRMenu('br-menu', brMenu))
}
setMenuList(menuListTemp)
},[])
if(mode === '1'){
return(
<div className="col-sm">
<div className="d-flex align-items-center">
<div className={"br-menu "+density}>
<div className="menu-trigger">
<button className="br-button circle small" type="button" data-toggle="menu" aria-label="Abrir Menu Principal"><i className="fas fa-bars" aria-hidden="true"></i>
</button>
</div>
<div className="menu-container">
<div className="row">
<div className="col-sm-4 col-lg-3">
<div className="menu-panel">
<div className="menu-header">
<div className="menu-close">
<button className="br-button circle" type="button" arial-label="Fechar o menu" data-dismiss="menu"><i className="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<div className="menu-title">
{top_image}
</div>
</div>
<nav className="menu-body">
{
items.map( item =>
<div className='menu-folder'>
<a className='menu-item' href={item.group_link}>
<span className='content'>{item.group_name}</span>
</a>
<ul>
{
item.content.map(cont =>
<li>
<a className='menu-item' href={cont.link}>
<span className='content'>{cont.name}</span>
</a>
{cont.submenu}
</li>
)
}
</ul>
</div>
)
}
</nav>
<div className="menu-footer">
<div className="menu-logos">
{
logos.map(logo =>
logo
)
}
</div>
<div className="menu-links">
{
links.map(link =>
<a href={link.link}>{link.nome}&nbsp;
<i className="fas fa-external-link-square-alt" aria-hidden="true"></i>
</a>
)
}
</div>
<div className="menu-social">
<div className="text-semi-bold mb-1">{social_title}</div>
<div className="sharegroup">
{
social.map(social =>
<div className="share">
<a className="br-button circle" href={social.link} aria-label={social.aria_label}>
{social.icon}
</a>
</div>
)
}
</div>
</div>
<div className="menu-info">
{menu_info}
</div>
</div>
</div>
</div>
</div>
<div className="menu-scrim" data-dismiss="menu" tabindex="0"></div>
</div>
</div>
<div className="ml-1">{menu_title}</div>
</div>
</div>
)
}
}
export default Menu;
\ No newline at end of file
......@@ -6,7 +6,7 @@ function Pagination (props){
//implementar pagination com elipses, ver exemplos e documentação em: https://dsgov.estaleiro.serpro.gov.br/ds/components/pagination
let npages = props.npages ? props.npages : 1
let per_page = props.per_page ? props.per_page : 10;
// let per_page = props.per_page ? props.per_page : 10; //uncoment if it becomes necessary to use this
let page_from = props.page_from ? props.page_from : 1;
let page_to = props.page_to ? props.page_to : 10;
let dtype = props.dtype ? props.dtype : 'itens'
......@@ -70,7 +70,6 @@ function Pagination (props){
<div className="pagination-information d-none d-sm-flex"><span className="current">{page_from}</span>&ndash;<span className="per-page">{page_to}</span>&nbsp;de&nbsp;<span className="total">{links.length}</span>&nbsp;{dtype}</div>
</nav>
)
break
case 3:
return(
<nav className={use_size} aria-label="Paginação de resultados" data-total="50" data-current="1" data-per-page="10">
......@@ -110,7 +109,6 @@ function Pagination (props){
</div>
</nav>
)
break
default:
return(
<nav className={use_size} aria-label="Paginação de resultados" data-total="50" data-current="1" data-per-page="20">
......
......@@ -3,7 +3,7 @@
function Radio (props){
let label = props.label ? props.label : ''
let extra = props.extra ? props.extra : ''
let warn_box = props.warn ? props.warn : <div></div>
let message = props.message ? props.message : ''
let horizontal = props.horizontal ? props.horizontal : false
let options = props.options ? props.options : ['sem opções']
let base_id = props.base_id ? props.base_id : 'radio-'
......@@ -22,15 +22,15 @@ function Radio (props){
<p className="help-text">{extra}</p>
{
options.map((option,index) =>
<div className="mb-1">
<div className="br-radio d-inline">
<input id={base_id+index} type="radio" name="radio" aria-label="radio"/>
<label for={base_id+index}>{option}</label>
</div>
<div className="mb-1">
<div className="br-radio d-inline">
<input id={base_id+index} type="radio" name="radio" aria-label="radio"/>
<label for={base_id+index}>{option}</label>
</div>
</div>
)
}
{warn_box}
{message}
</div>
)
}
......@@ -41,15 +41,15 @@ function Radio (props){
<p className="help-text">{extra}</p>
{
options.map((option,index) =>
<div className="mb-1">
<div className="br-radio">
<input id={base_id+index} type="radio" name="radio" aria-label="radio"/>
<label for={base_id+index}>{option}</label>
</div>
<div className="mb-1">
<div className="br-radio">
<input id={base_id+index} type="radio" name="radio" aria-label="radio"/>
<label for={base_id+index}>{option}</label>
</div>
</div>
)
}
{warn_box}
{message}
</div>
)
}
......
......@@ -7,7 +7,7 @@ function Select (props){
let options = props.options ? props.options : ['opção padrão']
let placeholder = props.placeholder ? props.placeholder : 'placeholder'
let message = props.message ? props.message : <div></div>
let message = props.message ? props.message : ''
let multiple = props.multiple ? props.multiple : false
const selectList = []
......
import BRMenu from './js-dsgov/Menu'
function Submenu (props){
let items = props.items ? props.items : [] //[ { name, link, submenu }, {} ]
return(
<ul>
{
items.map( item =>
<li>
<a className='menu-item' href={item.link}>
<span className='content'>{item.name}</span>
</a>
{item.submenu}
</li>
)
}
</ul>
)
}
export default Submenu;
\ No newline at end of file
......@@ -72,22 +72,6 @@ function Tooltip(props){
</div>
)
}
{/* <div className="row align-items-center">
<div className="col-md-6 text-center">
<div className="mb-3">
<div></div>
<a className="h5" href="javascript:void(0);">Sucesso</a>
<div className="br-tooltip" role="tooltip" success="success" place="left"><span className="text" role="tooltip">Incluído com Sucesso!</span><span className="subtext">Protocolo 000.22-11</span>
</div>
</div>
</div>
</div> */}
}
export default Tooltip;
\ No newline at end of file
......@@ -28,7 +28,7 @@ function Upload(props){
})))
}
if(multiple == 'multiple'){
if(multiple === 'multiple'){
return(
<div className="row">
<div className="col-sm-4">
......
......@@ -138,9 +138,9 @@ class BRBreadcrumb {
}
}
const breadcrumbList = []
for (const brBreadcrumb of window.document.querySelectorAll('.br-breadcrumb')) {
breadcrumbList.push(new BRBreadcrumb('br-breadcrumb', brBreadcrumb))
}
// const breadcrumbList = []
// for (const brBreadcrumb of window.document.querySelectorAll('.br-breadcrumb')) {
// breadcrumbList.push(new BRBreadcrumb('br-breadcrumb', brBreadcrumb))
// }
export default BRBreadcrumb
\ No newline at end of file
......@@ -59,8 +59,8 @@ class BRItem {
}
}
const itemList = []
for (const brItem of window.document.querySelectorAll('.br-item')) {
itemList.push(new BRItem('br-item', brItem))
}
// const itemList = []
// for (const brItem of window.document.querySelectorAll('.br-item')) {
// itemList.push(new BRItem('br-item', brItem))
// }
export default BRItem
\ No newline at end of file
......@@ -101,15 +101,16 @@ class BRList {
}
}
const listList = []
for (const brList of window.document.querySelectorAll(
'.br-list[data-toggle]'
)) {
listList.push(new BRList('br-list-collapsible', brList))
}
for (const brList of window.document.querySelectorAll(
'.br-list[data-checkable]'
)) {
listList.push(new BRList('br-list-checkable', brList))
}
// const listList = []
// for (const brList of window.document.querySelectorAll(
// '.br-list[data-toggle]'
// )) {
// listList.push(new BRList('br-list-collapsible', brList))
// }
// for (const brList of window.document.querySelectorAll(
// '.br-list[data-checkable]'
// )) {
// listList.push(new BRList('br-list-checkable', brList))
// }
export default BRList
\ No newline at end of file
class BRMenu {
constructor(name, component) {
this.name = name
this.component = component
this.trigger = this.component.querySelector('[data-toggle="menu"]')
this.scrim = this.component.querySelector('.menu-scrim')
this.dismiss = this.component.querySelectorAll('[data-dismiss="menu"]')
this.componentFolders = this.component.querySelectorAll('.menu-folder')
this.componentItems = this.component.querySelectorAll('.menu-item')
this._setBehavior()
}
_setBehavior() {
this._toggleMenu()
// this._closeMenu()
this._setDropMenu()
this._setSideMenu()
this._setKeyboardBehaviors()
this._initType2Menu()
}
_setKeyboardBehaviors() {
// Fechar com tecla ESC
this.component.addEventListener('keyup', (event) => {
switch (event.keyCode) {
case 27:
this._closeMenu()
break
default:
break
}
})
// Fechar com Tab fora do menu
if (this.scrim) {
this.scrim.addEventListener('keyup', () => {
return this._closeMenu()
})
}
}
_toggleMenu() {
// Clicar no trigger
if (this.trigger) {
this.trigger.addEventListener('click', () => {
// Fechar Menu caso esteja aberto
if (this.component.classList.contains('active')) {
// this._closeMenu()
return
}
// Abre Menu
this._openMenu()
})
}
// Clicar no dismiss
for (const close of this.dismiss) {
close.addEventListener('click', () => {
return this._closeMenu()
})
}
}
_openMenu() {
return this.component.classList.add('active')
}
_closeMenu() {
return this.component.classList.remove('active')
}
_setDropMenu() {
// Configura Drop Menu para filho imediato de ".menu-folder"
for (const item of this.component.querySelectorAll(
'.menu-folder > a.menu-item'
)) {
// Inclui ícone de Drop Menu
this._createIcon(item, 'fa-angle-down')
// Configura como Drop Menu
item.parentNode.classList.add('drop-menu')
// Inicializa Drop Menu
this._toggleDropMenu(item)
}
}
_setSideMenu() {
// Configura Side Menu para quem não for filho imediato de ".menu-folder"
for (const ul of this.component.querySelectorAll('a.menu-item + ul')) {
if (!ul.parentNode.classList.contains('menu-folder')) {
// Inclui ícone de Side Menu
this._createIcon(ul.previousElementSibling, 'fa-angle-right')
// Configura como Side Menu
ul.parentNode.classList.add('side-menu')
// Inicializa Side Menu
this._toggleSideMenu(ul.previousElementSibling)
}
}
}
_toggleDropMenu(element) {
element.addEventListener('click', () => {
// Fecha Drop Menu caso esteja aberto
if (element.parentNode.classList.contains('active')) {
element.parentNode.classList.remove('active')
return
}
// Abre Drop Menu
element.parentNode.classList.add('active')
})
}
_toggleSideMenu(element) {
element.addEventListener('click', () => {
// Esconde todos os itens
this._hideItems(element)
// Mostra itens do Side Menu ativo
this._showItems(element.parentNode)
// Fecha Side Menu caso esteja aberto
if (element.parentNode.classList.contains('active')) {
this._closeSideMenu(element)
element.focus()
return
}
// Abre Side Menu
element.parentNode.classList.add('active')
element.focus()
})
}
_closeSideMenu(element) {
element.parentNode.classList.remove('active')
// Verifica se existe Side Menu anterior, caso contrário mostra todos os itens de volta
const parentFolder = element.parentNode.closest('.side-menu.active')
? element.parentNode.closest('.side-menu.active')
: element.closest('.menu-body')
this._showItems(parentFolder)
}
_hideItems(element) {
for (const item of element
.closest('.menu-body')
.querySelectorAll('.menu-item')) {
item.setAttribute('hidden', '')
}
}
_showItems(element) {
for (const item of element.querySelectorAll('.menu-item')) {
item.removeAttribute('hidden')
}
}
_createIcon(element, icon) {
// if(element.children)
const menuIconContainer = document.createElement('span')
menuIconContainer.classList.add('support')
const menuIcon = document.createElement('i')
menuIcon.classList.add('fas')
menuIcon.classList.add(icon)
menuIcon.setAttribute('aria-hidden', 'true')
menuIconContainer.appendChild(menuIcon)
element.appendChild(menuIconContainer)
}
_initType2Menu() {
const ativadorMenu = document.querySelector(
'[data-toggle="menu"][data-target="#navigation"]'
)
if (ativadorMenu) {
ativadorMenu.addEventListener('click', () => {
document
.querySelector(ativadorMenu.dataset.target)
.classList.toggle('active')
})
}
}
}
// const menuList = []
// for (const brMenu of window.document.querySelectorAll('.br-menu:not(.dsgov)')) {
// menuList.push(new BRMenu('br-menu', brMenu))
// }
export default BRMenu
\ No newline at end of file
......@@ -201,8 +201,8 @@ class BRTab {
}
}
}
const abasList = []
for (const brTab of window.document.querySelectorAll('.br-tab')) {
abasList.push(new BRTab('br-tab', brTab))
}
// const abasList = []
// for (const brTab of window.document.querySelectorAll('.br-tab')) {
// abasList.push(new BRTab('br-tab', brTab))
// }
export default BRTab
\ No newline at end of file