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
168 lines (167 loc) • 12.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Vertical = exports.Horizontal = void 0;
var _react = _interopRequireDefault(require("react"));
var _Wizard = _interopRequireDefault(require("./Wizard"));
var _WizardTop = _interopRequireDefault(require("./WizardTop"));
var _Step = _interopRequireDefault(require("../Step/Step"));
var _StepProgress = _interopRequireDefault(require("../Step/StepProgress"));
var _StepBall = _interopRequireDefault(require("../Step/StepBall"));
var _Label = _interopRequireDefault(require("../Step/Label"));
var _WizardBottom = _interopRequireDefault(require("./WizardBottom"));
var _WizardPages = _interopRequireDefault(require("./WizardPages"));
var _addons = require("@storybook/addons");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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/Wizard",
component: _Wizard.default,
argTypes: {}
};
exports.default = _default;
var Page1 = function Page1() {
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Dados Pessoais"), "Conte\xFAdo 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.");
};
var Page2 = function Page2() {
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Validar Dados"), "Conte\xFAdo 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.centuries, but also the leap into electronic typesetting, remaining centuries, but also the leap into electronic typesetting, remaining");
};
var Page3 = function Page3() {
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Habilitar Cadastro"), "Conte\xFAdo 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.");
};
var Page4 = function Page4() {
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Cadastrar Senha"), "Conte\xFAdo 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.centuries, but also the leap into electronic typesetting, remaining.");
};
var Page5 = function Page5() {
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Finalizar"), "Conte\xFAdo 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.");
};
var TemplateHorizontal = function TemplateHorizontal(args) {
var _useState = (0, _addons.useState)(0),
_useState2 = _slicedToArray(_useState, 2),
indexActive = _useState2[0],
setIndexActive = _useState2[1];
return /*#__PURE__*/_react.default.createElement(_Wizard.default, args, /*#__PURE__*/_react.default.createElement(_WizardTop.default, null, /*#__PURE__*/_react.default.createElement(_StepProgress.default, args, /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step1",
name: "wizard",
onClick: function onClick() {
return setIndexActive(0);
},
activeControlled: indexActive === 0
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "1"), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Dados Pessoais")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step2",
name: "wizard",
onClick: function onClick() {
return setIndexActive(1);
},
activeControlled: indexActive === 1
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "2"), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Validar Dados")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step3",
name: "wizard",
onClick: function onClick() {
return setIndexActive(2);
},
activeControlled: indexActive === 2
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "3"), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Habilitar Cadastro")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step4",
name: "wizard",
onClick: function onClick() {
return setIndexActive(3);
},
activeControlled: indexActive === 3
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "4"), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Cadastrar Senha")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step5",
name: "wizard",
onClick: function onClick() {
return setIndexActive(4);
},
activeControlled: indexActive === 4
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "5"), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Finalizar")))), /*#__PURE__*/_react.default.createElement(_WizardBottom.default, null, /*#__PURE__*/_react.default.createElement(_WizardPages.default, {
index: indexActive,
setIndex: function setIndex(index) {
return setIndexActive(index);
}
}, /*#__PURE__*/_react.default.createElement(Page1, null), /*#__PURE__*/_react.default.createElement(Page2, null), /*#__PURE__*/_react.default.createElement(Page3, null), /*#__PURE__*/_react.default.createElement(Page4, null), /*#__PURE__*/_react.default.createElement(Page5, null))));
};
var TemplateVertical = function TemplateVertical(args) {
var _useState3 = (0, _addons.useState)(0),
_useState4 = _slicedToArray(_useState3, 2),
indexActive = _useState4[0],
setIndexActive = _useState4[1];
return /*#__PURE__*/_react.default.createElement(_Wizard.default, _extends({
position: "vertical"
}, args), /*#__PURE__*/_react.default.createElement(_WizardTop.default, {
position: "vertical"
}, /*#__PURE__*/_react.default.createElement(_StepProgress.default, args, /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step1",
name: "wizard",
onClick: function onClick() {
return setIndexActive(0);
},
activeControlled: indexActive === 0
}), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Dados Pessoais"), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "1")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step2",
name: "wizard",
onClick: function onClick() {
return setIndexActive(1);
},
activeControlled: indexActive === 1
}), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Validar Dados"), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "2")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step3",
name: "wizard",
onClick: function onClick() {
return setIndexActive(2);
},
activeControlled: indexActive === 2
}), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Habilitar Cadastro"), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "3")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step4",
name: "wizard",
onClick: function onClick() {
return setIndexActive(3);
},
activeControlled: indexActive === 3
}), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Cadastrar Senha"), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "4")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step5",
name: "wizard",
onClick: function onClick() {
return setIndexActive(4);
},
activeControlled: indexActive === 4
}), /*#__PURE__*/_react.default.createElement(_Label.default, args, "Finalizar"), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "5")))), /*#__PURE__*/_react.default.createElement(_WizardBottom.default, {
position: "vertical"
}, /*#__PURE__*/_react.default.createElement(_WizardPages.default, {
index: indexActive,
setIndex: function setIndex(index) {
return setIndexActive(index);
},
handleCancel: function handleCancel() {
return console.log("cancelar");
}
}, /*#__PURE__*/_react.default.createElement(Page1, null), /*#__PURE__*/_react.default.createElement(Page2, null), /*#__PURE__*/_react.default.createElement(Page3, null), /*#__PURE__*/_react.default.createElement(Page4, null), /*#__PURE__*/_react.default.createElement(Page5, null))));
};
var Horizontal = TemplateHorizontal.bind({});
exports.Horizontal = Horizontal;
Horizontal.storyName = "Horizontal";
Horizontal.args = {
id: "stepHorizontal",
position: "horizontal",
style: {
flexDirection: "column"
}
};
var Vertical = TemplateVertical.bind({});
exports.Vertical = Vertical;
Vertical.storyName = "Vertical";
Vertical.args = {
id: "stepVertical",
position: "vertical",
style: {
justifyContent: "flex-end"
}
};