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
78 lines (77 loc) • 11.1 kB
JavaScript
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.WrapperHeader = exports.StyledTitle = exports.StyledSubTitle = exports.SearchItem = exports.Login = exports.List = exports.LinkMenu = exports.Item = exports.InputSearchContainer = exports.HideShowAction = exports.HideContainerActions = exports.HeaderTop = exports.HeaderMenu = exports.HeaderLogoTag = exports.HeaderLink = exports.HeaderActions = exports.DropdownIcon = exports.DropdownContainer = exports.ContainerActionsTag = exports.Actions = void 0;
var _reactFontawesome = require("@fortawesome/react-fontawesome");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _Col = _interopRequireDefault(require("../../utilities/Grid/Col"));
var _Row = _interopRequireDefault(require("../../utilities/Grid/Row"));
var _Typography = _interopRequireDefault(require("../../utilities/Typography/Typography"));
var _medias = _interopRequireDefault(require("../../utilities/Grid/medias"));
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var notification = function notification(type) {
switch (type) {
case 'notification':
return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 600px;\n margin-left: -570px;\n "])));
default:
return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 250px;\n margin-left: -170px;\n "])));
}
};
var HeaderTop = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n height: var(--spacing-scale-5x);\n margin-bottom: var(--spacing-scale-2xh);\n"])));
exports.HeaderTop = HeaderTop;
var HeaderLink = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n @media (min-width: ", ") and (max-width: ", ") {\n display: none;\n }\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1%;\n width: 50%;\n"])), _medias.default.breakpointXs, _medias.default.breakpointLg);
exports.HeaderLink = HeaderLink;
var LinkMenu = _styledComponents.default.a(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n"])));
exports.LinkMenu = LinkMenu;
var HeaderActions = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n border-left: 1px solid var(--gray-20);\n"])));
exports.HeaderActions = HeaderActions;
var ContainerActionsTag = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-end;\n width: 100%;\n"])));
exports.ContainerActionsTag = ContainerActionsTag;
var HideContainerActions = (0, _styledComponents.default)(ContainerActionsTag)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n @media (min-width: ", ") and (max-width: ", ") {\n display: none;\n }\n"])), _medias.default.breakpointXs, _medias.default.breakpointLg);
exports.HideContainerActions = HideContainerActions;
var HideShowAction = (0, _styledComponents.default)(ContainerActionsTag)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n @media (min-width: ", ") {\n display: none;\n }\n"])), _medias.default.breakpointLg);
exports.HideShowAction = HideShowAction;
var HeaderLogoTag = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n display: flex;\n\n @media (max-width: ", ") {\n & span {\n display: none !important;\n }\n & img {\n padding: var(--spacing-scale-baseh);\n }\n }\n & span {\n padding: var(--spacing-scale-default) var(--spacing-scale-2x);\n border-left: 1px solid var(--gray-20);\n display: flex;\n align-items: center;\n }\n\n & img {\n padding-right: var(--spacing-scale-2x);\n }\n\n & hr {\n margin: var(--spacing-scale-default) var(--spacing-scale-base);\n border-color: var(--gray-20);\n border-style: solid;\n border-top-width: 1px;\n border-right-width: 1px;\n }\n"])), _medias.default.breakpointSm);
exports.HeaderLogoTag = HeaderLogoTag;
var DropdownContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n @media (min-width: ", ") {\n display: none;\n }\n"])), _medias.default.breakpointXl);
exports.DropdownContainer = DropdownContainer;
var List = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n display: ", ";\n border-top: 1px solid transparent;\n max-height: ", ";\n overflow: auto;\n background-color: var(--pure-0);\n position: absolute;\n z-index: 999;\n box-shadow: var(--surface-blur-none) var(--surface-offset-md)\n var(--surface-blur-lg)\n rgba(var(--surface-shadow-color), var(--surface-opacity-xs));\n\n &:focus {\n opacity: 1;\n visibility: visible;\n }\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: var(--gray-20);\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: var(--gray-40);\n }\n\n & li {\n margin-bottom: var(--spacing-scale-default);\n display: flex;\n cursor: pointer;\n padding: var(--spacing-scale-baseh) var(--spacing-scale-default);\n width: 100%;\n border-top: 1px solid var(--rgb-secondary-04);\n justify-content: center;\n }\n\n & li,\n ul {\n list-style-type: none;\n margin-block-start: 0;\n margin-block-end: 0;\n padding-inline-start: 0;\n }\n\n & li:nth-child(1),\n li:nth-child(2) {\n border-top: 1px solid transparent;\n }\n\n & li:first-child:hover {\n background-image: none;\n cursor: default;\n }\n\n & li:hover {\n background-image: linear-gradient(\n rgba(var(--rgb-secondary-08), var(--surface-opacity-xs)),\n rgba(var(--rgb-secondary-08), var(--surface-opacity-xs))\n );\n }\n\n ", "\n"])), function (props) {
return props !== null && props !== void 0 && props.open ? 'block' : 'none';
}, function (props) {
return props.maxHeight || '200px';
}, function (props) {
return notification(props.type);
});
exports.List = List;
var InputSearchContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n width: 100%;\n position: relative;\n @media (max-width: ", ") {\n background-color: var(--pure-0);\n padding: 6%;\n position: absolute;\n width: 100%;\n margin-left: 0;\n top: 0;\n left: 0;\n z-index: 1;\n }\n input {\n background: var(--gray-2);\n font-size: 14px;\n border: none;\n }\n"])), _medias.default.breakpointLg);
exports.InputSearchContainer = InputSearchContainer;
var Actions = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n display: flex;\n margin-right: var(--spacing-scale-2x);\n background-color: purple;\n"])));
exports.Actions = Actions;
var Login = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n display: flex;\n"])));
exports.Login = Login;
var DropdownIcon = (0, _styledComponents.default)(_reactFontawesome.FontAwesomeIcon)(function (props) {
return {
marginRight: props.circle ? '0px' : "var(--spacing-scale-base) !important",
textAlign: 'center',
ariaHidden: true
};
});
exports.DropdownIcon = DropdownIcon;
var Item = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
exports.Item = Item;
var HeaderMenu = (0, _styledComponents.default)(_Row.default)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n"])));
exports.HeaderMenu = HeaderMenu;
var WrapperHeader = (0, _styledComponents.default)(_Row.default)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n position: relative;\n padding: 0;\n"])));
exports.WrapperHeader = WrapperHeader;
var SearchItem = (0, _styledComponents.default)(_Col.default)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n @media (min-width: ", ") and (max-width: ", ") {\n display: none;\n }\n"])), _medias.default.breakpointXs, _medias.default.breakpointLg);
exports.SearchItem = SearchItem;
var StyledTitle = (0, _styledComponents.default)(_Typography.default)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n font-size: var(--font-size-scale-up-02);\n margin: 0;\n font-weight: bold;\n padding: 0;\n"])));
exports.StyledTitle = StyledTitle;
var StyledSubTitle = (0, _styledComponents.default)(_Typography.default)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n font-weight: 400;\n font-size: var(--font-size-scale-base);\n margin: 0;\n"])));
exports.StyledSubTitle = StyledSubTitle;