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
142 lines (141 loc) • 9.07 kB
JavaScript
;
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.default = exports.ModalTimer = exports.ModalTerms = exports.ModalDefault = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Button = _interopRequireDefault(require("../Button/Button"));
var _Loading = _interopRequireDefault(require("../Loading/Loading"));
var _Modal = _interopRequireDefault(require("./Modal"));
var _ModalContent = _interopRequireDefault(require("./ModalContent"));
var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));
var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));
var _Types = require("./Types");
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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var _default = {
title: "Components/Modal",
component: _Modal.default,
argTypes: {
type: {
table: {
disable: true
}
},
setState: {
table: {
disable: true
}
},
stateOpen: {
table: {
disable: true
}
},
width: {
name: "Tamanho",
type: {
required: false
},
description: "Tamanho do modal"
}
}
};
exports.default = _default;
var Template = function Template(args) {
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({}, args, {
setState: setOpen,
stateOpen: open,
width: args.width
}), /*#__PURE__*/_react.default.createElement(_ModalHeader.default, {
buttonClose: true,
setState: setOpen
}, /*#__PURE__*/_react.default.createElement("p", null, "Retornar para p\xE1gina inicial?")), /*#__PURE__*/_react.default.createElement(_ModalContent.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Voc\xEA est\xE1 sendo redirecionado para a p\xE1gina inicial do sistema")), /*#__PURE__*/_react.default.createElement(_ModalFooter.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
density: "small",
id: "button01",
onClick: function onClick() {
return setOpen(false);
},
variant: "secondary"
}, "Cancelar"), /*#__PURE__*/_react.default.createElement(_Button.default, {
density: "small",
id: "button01",
onClick: function onClick() {
return setOpen(false);
},
variant: "primary"
}, "Retornar")));
};
var ModalDefault = Template.bind({});
exports.ModalDefault = ModalDefault;
ModalDefault.storyName = "Modal Simples";
ModalDefault.args = {
width: "50%"
};
var ModalTimer = function ModalTimer(args) {
var _useState3 = (0, _react.useState)(false),
_useState4 = _slicedToArray(_useState3, 2),
open = _useState4[0],
setOpen = _useState4[1];
return /*#__PURE__*/_react.default.createElement(_Modal.default, {
type: _Types.MODAL_TIMER,
setState: setOpen,
stateOpen: open,
width: args.width
}, /*#__PURE__*/_react.default.createElement(_ModalContent.default, null, /*#__PURE__*/_react.default.createElement(_Loading.default, null)), /*#__PURE__*/_react.default.createElement(_ModalFooter.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
density: "small",
id: "button01",
onClick: function onClick() {
return setOpen(false);
},
variant: "secondary"
}, "Cancelar")));
};
exports.ModalTimer = ModalTimer;
ModalTimer.storyName = "Modal com temporizador";
var ModalTerms = function ModalTerms(args) {
var _useState5 = (0, _react.useState)(false),
_useState6 = _slicedToArray(_useState5, 2),
open = _useState6[0],
setOpen = _useState6[1];
return /*#__PURE__*/_react.default.createElement(_Modal.default, {
type: _Types.MODAL_TERMS,
setState: setOpen,
stateOpen: open,
width: args.width
}, /*#__PURE__*/_react.default.createElement(_ModalHeader.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Concorda com os termos?")), /*#__PURE__*/_react.default.createElement(_ModalContent.default, {
type: _Types.MODAL_TERMS
}, /*#__PURE__*/_react.default.createElement("p", null, "Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Mauris id gravida nulla. Cras sagittis dapibus felis vitae semper. Donec vel hendrerit ante. Etiam sed blandit nisi. Praesent iaculis, nisl eget rutrum vehicula, lacus tortor feugiat diam, et euismod lacus metus eget nisi. Sed fermentum, nunc nec efficitur pharetra, felis dolor feugiat massa, et semper turpis felis quis ligula. Quisque non metus at risus maximus ultrices. Nam vel massa tellus. Vestibulum lobortis dui et pellentesque porta. Cras rhoncus augue a mauris porttitor, in malesuada metus eleifend. Praesent ac lacinia lorem. Sed cursus nisl ligula, vel ultrices ex pellentesque eu. Curabitur facilisis egestas libero, non pharetra lacus ultricies quis. Mauris non finibus justo, eu varius metus. Donec nec eros semper, consequat turpis id, fermentum dolor.")), /*#__PURE__*/_react.default.createElement(_ModalFooter.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
density: "small",
id: "button01",
onClick: function onClick() {
return setOpen(false);
},
variant: "secondary"
}, "Negar"), /*#__PURE__*/_react.default.createElement(_Button.default, {
density: "small",
id: "button01",
onClick: function onClick() {
return setOpen(false);
},
variant: "primary"
}, "Aceitar")));
};
exports.ModalTerms = ModalTerms;
ModalTerms.storyName = "Modal com termo de aceite";
ModalTerms.args = {
width: "80%"
};