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
247 lines (246 loc) • 10.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.VerticalRight = exports.VerticalLeft = exports.Horizontal = exports.Disable = exports.AlertNoLabelWichIcon = exports.AlertNoLabel = exports.Alert = void 0;
var _react = _interopRequireDefault(require("react"));
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
var _Step = _interopRequireDefault(require("./Step"));
var _StepProgress = _interopRequireDefault(require("./StepProgress"));
var _Label = _interopRequireDefault(require("./Label"));
var _StepBall = _interopRequireDefault(require("./StepBall"));
var _styles = require("./styles");
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); }
var _default = {
title: "Components/Step",
component: _Step.default,
argTypes: {}
};
exports.default = _default;
var TemplateVerticalRight = function TemplateVerticalRight(args) {
return /*#__PURE__*/_react.default.createElement(_StepProgress.default, args, /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step1",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Exemplo de r\xF3tulo 1"), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "1")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step2",
name: "teste",
active: true
}), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Exemplo de r\xF3tulo 2"), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "2")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step3",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Exemplo de r\xF3tulo 3"), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "3")));
};
var Template = function Template(args) {
return /*#__PURE__*/_react.default.createElement(_StepProgress.default, args, /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step1",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "1"), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Exemplo de r\xF3tulo 1")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step2",
name: "teste",
active: true
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "2"), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Exemplo de r\xF3tulo 2")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step3",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "3"), /*#__PURE__*/_react.default.createElement(_Label.default, null, "Exemplo de r\xF3tulo 3")));
};
var TemplateNoLabel = function TemplateNoLabel(args) {
return /*#__PURE__*/_react.default.createElement(_StepProgress.default, args, /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step1",
textBalloon: "Exemplo de r\xF3tulo 1",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null)), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step2",
textBalloon: "Exemplo de r\xF3tulo 2",
name: "teste",
active: true
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null)), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
textBalloon: "Exemplo de r\xF3tulo 3",
id: "step3",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null)));
};
var TemplateDisable = function TemplateDisable(args) {
return /*#__PURE__*/_react.default.createElement(_StepProgress.default, args, /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step1",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, /*#__PURE__*/_react.default.createElement(_styles.Icon, {
id: "svg",
icon: _freeSolidSvgIcons.faLock
}))), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step2",
name: "teste",
active: true
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, /*#__PURE__*/_react.default.createElement(_styles.Icon, {
icon: _freeSolidSvgIcons.faTruck
}))), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step3",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, /*#__PURE__*/_react.default.createElement(_styles.Icon, {
icon: _freeSolidSvgIcons.faCreditCard
}))), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step4",
disabled: true,
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, /*#__PURE__*/_react.default.createElement(_styles.Icon, {
icon: _freeSolidSvgIcons.faAnchor
}))));
};
var TemplateNoLabelWichIcon = function TemplateNoLabelWichIcon(args) {
return /*#__PURE__*/_react.default.createElement(_StepProgress.default, args, /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
textBalloon: "Acesse sua conta",
id: "step1",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, {
style: {
background: "green"
}
}, /*#__PURE__*/_react.default.createElement(_styles.Icon, {
id: "svg",
icon: _freeSolidSvgIcons.faLock
}))), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
textBalloon: "Dados da entrega",
id: "step2",
name: "teste",
active: true
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, {
style: {
background: "blue"
}
}, /*#__PURE__*/_react.default.createElement(_styles.Icon, {
icon: _freeSolidSvgIcons.faTruck
}))), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
textBalloon: "Dados do pagamento",
id: "step3",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, {
style: {
background: "red"
}
}, /*#__PURE__*/_react.default.createElement(_styles.Icon, {
icon: _freeSolidSvgIcons.faCreditCard
}))), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({}, args, {
id: "step4",
disabled: true,
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, {
style: {
background: "yellow"
}
}, /*#__PURE__*/_react.default.createElement(_styles.Icon, {
icon: _freeSolidSvgIcons.faAnchor
}))));
};
var TemplateAlert = function TemplateAlert(args) {
return /*#__PURE__*/_react.default.createElement(_StepProgress.default, args, /*#__PURE__*/_react.default.createElement(_Step.default, _extends({
alert: "success"
}, args, {
id: "step1",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "1"), /*#__PURE__*/_react.default.createElement(_Label.default, {
style: {
color: "green",
marginTop: "10px"
}
}, "Acesse sua conta")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({
alert: "info"
}, args, {
id: "step2",
name: "teste",
active: true
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "2"), /*#__PURE__*/_react.default.createElement(_Label.default, {
style: {
marginTop: "10px"
}
}, "Dados da entrega")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({
alert: "error"
}, args, {
id: "step3",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "3"), /*#__PURE__*/_react.default.createElement(_Label.default, {
style: {
color: "red",
marginTop: "10px"
}
}, "Dados do pagamento")), /*#__PURE__*/_react.default.createElement(_Step.default, _extends({
alert: "warn",
disabled: true
}, args, {
id: "step4",
name: "teste"
}), /*#__PURE__*/_react.default.createElement(_StepBall.default, null, "\u2714"), /*#__PURE__*/_react.default.createElement(_Label.default, {
style: {
color: "black",
marginTop: "10px"
}
}, "Finalizar")));
};
var VerticalLeft = Template.bind({});
exports.VerticalLeft = VerticalLeft;
VerticalLeft.storyName = "Vertical com step na esquerda";
VerticalLeft.args = {
id: "stepVertical",
position: "vertical"
};
var VerticalRight = TemplateVerticalRight.bind({});
exports.VerticalRight = VerticalRight;
VerticalRight.storyName = "Vertical com step na direita";
VerticalRight.args = {
id: "stepVertical",
position: "vertical",
style: {
justifyContent: "space-between"
}
};
var Horizontal = Template.bind({});
exports.Horizontal = Horizontal;
Horizontal.storyName = "Horizontal";
Horizontal.args = {
id: "stepHorizontal ",
position: "horizontal",
style: {
flexDirection: "column"
}
};
var Disable = TemplateDisable.bind({});
exports.Disable = Disable;
Disable.storyName = "Desabilitado";
Disable.args = {
id: "stepHorizontal ",
position: "horizontal",
style: {
flexDirection: "column"
}
};
var Alert = TemplateAlert.bind({});
exports.Alert = Alert;
Alert.storyName = "Alerta";
Alert.args = {
id: "stepHorizontal ",
position: "horizontal",
style: {
flexDirection: "column"
}
};
var AlertNoLabel = TemplateNoLabel.bind({});
exports.AlertNoLabel = AlertNoLabel;
AlertNoLabel.storyName = "Alerta sem rótulo";
AlertNoLabel.args = {
id: "stepHorizontal ",
position: "horizontal",
style: {
flexDirection: "column"
},
type: "stepNoLabel"
};
var AlertNoLabelWichIcon = TemplateNoLabelWichIcon.bind({});
exports.AlertNoLabelWichIcon = AlertNoLabelWichIcon;
AlertNoLabelWichIcon.storyName = "Alerta sem rótulo com icon";
AlertNoLabelWichIcon.args = {
id: "stepHorizontal ",
position: "horizontal",
style: {
flexDirection: "column"
},
type: "stepNoLabelIcon"
};