design-system-govbr-rnp
Version:
## Padrão Digital de Governo - React Biblioteca de componentes React que implementa o [Padrão Visual digital do governo](https://www.gov.br/ds/). O objetivo da biblioteca é facilitar a implementação e promover a padronização das interfaces de sistemas do
133 lines (132 loc) • 8.69 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Header = _interopRequireDefault(require("../../components/Header/Header"));
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
var _Input = _interopRequireDefault(require("../../components/Input/Input"));
var _Item = require("../../components/Footer/Item");
var _Typography = _interopRequireDefault(require("../../utilities/Typography/Typography"));
var _Card = _interopRequireDefault(require("../../components/Card/Card"));
var _CardContent = _interopRequireDefault(require("../../components/Card/CardContent"));
var _Display = _interopRequireDefault(require("../../utilities/Display/Display"));
var _Row = _interopRequireDefault(require("../../utilities/Grid/Row"));
var _Col = _interopRequireDefault(require("../../utilities/Grid/Col"));
var _Footer = _interopRequireDefault(require("../../components/Footer/Footer"));
var _Divider = _interopRequireDefault(require("../../components/Divider/Divider"));
var _Button = _interopRequireDefault(require("../../components/Button/Button"));
var _styles = require("../../components/Footer/styles");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var TemplateDefault = function TemplateDefault(props) {
var footerArgs = props.footerArgs,
headerArgs = props.headerArgs;
var logoWhite = headerArgs.logoWhite,
titles = headerArgs.titles;
var licenseText = footerArgs.licenseText,
socialMedia = footerArgs.socialMedia,
nav = footerArgs.nav,
imagesBox = footerArgs.imagesBox;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.default, headerArgs), /*#__PURE__*/_react.default.createElement("main", null, titles.map(function (title) {
return /*#__PURE__*/_react.default.createElement(_Typography.default, {
component: title.component,
title: title.title
});
}), /*#__PURE__*/_react.default.createElement(_Display.default, {
display: "flex"
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Item sem ordena\xE7\xE3o"), /*#__PURE__*/_react.default.createElement("li", null, "Item sem ordena\xE7\xE3o"), /*#__PURE__*/_react.default.createElement("li", null, "Item sem ordena\xE7\xE3o"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("ol", null, /*#__PURE__*/_react.default.createElement("li", null, "Item com ordena\xE7\xE3o"), /*#__PURE__*/_react.default.createElement("li", null, "Item com ordena\xE7\xE3o"), /*#__PURE__*/_react.default.createElement("li", null, "Item com ordena\xE7\xE3o")))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-6"
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
label: "Nome",
name: "myInput",
placeholder: "Placeholder",
type: "text"
})), /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-6"
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
label: "CPF",
name: "myInput",
placeholder: "Placeholder",
type: "text"
})), /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-6"
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
label: "Sobrenome",
name: "myInput",
placeholder: "Placeholder",
type: "text"
})), /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-6"
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
buttonProps: {
icon: _freeSolidSvgIcons.faEye,
label: 'Mostrar senha',
onClick: function onClick() {
return console.log('clickei');
}
},
label: "Senha",
name: "myInput",
placeholder: "Digite sua senha",
type: "password"
}))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-6 col-md-3"
}, /*#__PURE__*/_react.default.createElement(_Card.default, null, /*#__PURE__*/_react.default.createElement(_CardContent.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus dignissimos, recusandae at accusamus autem error hic adipisci eligendi eum debitis dolores magnam quod sint doloribus omnis vitae placeat. Natus, minus.")))), /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-6 col-md-3"
}, /*#__PURE__*/_react.default.createElement(_Card.default, null, /*#__PURE__*/_react.default.createElement(_CardContent.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus dignissimos, recusandae at accusamus autem error hic adipisci eligendi eum debitis dolores magnam quod sint doloribus omnis vitae placeat. Natus, minus.")))), /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-6 col-md-3"
}, /*#__PURE__*/_react.default.createElement(_Card.default, null, /*#__PURE__*/_react.default.createElement(_CardContent.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus dignissimos, recusandae at accusamus autem error hic adipisci eligendi eum debitis dolores magnam quod sint doloribus omnis vitae placeat. Natus, minus.")))), /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-6 col-md-3"
}, /*#__PURE__*/_react.default.createElement(_Card.default, null, /*#__PURE__*/_react.default.createElement(_CardContent.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus dignissimos, recusandae at accusamus autem error hic adipisci eligendi eum debitis dolores magnam quod sint doloribus omnis vitae placeat. Natus, minus.")))))), /*#__PURE__*/_react.default.createElement(_Footer.default, {
dark: true
}, /*#__PURE__*/_react.default.createElement(_styles.Logo, null, /*#__PURE__*/_react.default.createElement("img", {
src: logoWhite,
alt: ""
})), /*#__PURE__*/_react.default.createElement(_Row.default, null, nav.map(function (item) {
return /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-6 col-md-3"
}, /*#__PURE__*/_react.default.createElement(_Item.Item, {
dark: true,
title: item.title
}), item.columns.map(function (link) {
return /*#__PURE__*/_react.default.createElement(_Item.Item, {
dark: true,
description: link.description
});
}));
})), /*#__PURE__*/_react.default.createElement(_Row.default, {
rowSize: "d-flex flex-wrap mt-4 mb-6"
}, /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-12 col-md-5"
}, /*#__PURE__*/_react.default.createElement(_styles.SocialMedia, null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("b", null, "REDES SOCIAIS")), /*#__PURE__*/_react.default.createElement(_styles.ButtonsMediaSocial, null, socialMedia === null || socialMedia === void 0 ? void 0 : socialMedia.map(function (media, index) {
return /*#__PURE__*/_react.default.createElement(_styles.Button, {
dark: true,
key: index
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
circle: true,
density: "medium",
iconProps: {
ariaLabel: media.ariaLabel,
icon: media.icon
},
onClick: media.onClick,
variant: "secondary"
}));
})))), /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-12 col-md-7"
}, /*#__PURE__*/_react.default.createElement(_styles.ImagesBox, null, /*#__PURE__*/_react.default.createElement(_Row.default, null, imagesBox.map(function (image) {
return /*#__PURE__*/_react.default.createElement(_Col.default, {
colSize: "col-sm-12 col-md-6"
}, /*#__PURE__*/_react.default.createElement(_styles.Img, {
alt: image.alt,
src: image.src
}));
}))))), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement(_styles.CenteredParagraph, null, /*#__PURE__*/_react.default.createElement("p", {
dangerouslySetInnerHTML: {
__html: licenseText
}
}))));
};
var _default = TemplateDefault;
exports.default = _default;