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
99 lines (98 loc) • 3.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.States = exports.Horizontal = exports.Full = void 0;
var _react = _interopRequireDefault(require("react"));
var _Radio = _interopRequireDefault(require("./Radio"));
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/Radio",
component: _Radio.default,
argTypes: {
feedback: {
description: "Objeto que detalha as mensagens para o campo de radio. A propriedade message é a mensagem que deverar ser apresentada na parte de baixo do input. A propriedade type descreve qual o tipo de sinalização será visível, podendo ser: success (sucesso), error (erros), warn (alerta de campo)."
},
info: {
description: "Texto informativo fixo."
},
inline: {
description: "Muda a posição do grupo de radio para em linha."
},
name: {
description: "Propriedade para referenciar um grupo de inputs.."
},
options: {
description: "Objeto que contém as informações do grupo de opções do radio. Possui as seguintes props: disabled (campo desabilitado), id (id do campo), label (label de referência), state (valor referente ao estado do campo, podendo ser vvalid ou invalid), value (valor do input)"
},
title: {
description: "Rótulo do grupo de input."
}
}
};
exports.default = _default;
var options = [{
id: "option1",
label: "Opção 1",
value: "1"
}, {
id: "option2",
label: "Opção 2",
value: "2"
}, {
id: "option3",
label: "Opção 3",
value: "3"
}];
var stateOptions = [{
id: "disabled",
label: "Desativado",
value: "1",
disabled: true
}, {
id: "invalid",
label: "Inválido",
value: "2",
state: "invalid"
}, {
id: "valid",
label: "Válido",
value: "3",
state: "valid"
}];
var Template = function Template(args) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Radio.default, _extends({
id: "option1",
name: "options",
options: options
}, args)));
};
var StateTemplate = function StateTemplate(args) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Radio.default, _extends({
id: "option1",
name: "stateOptions",
options: stateOptions
}, args)));
};
var Full = Template.bind({});
exports.Full = Full;
Full.storyName = "Exemplo completo";
Full.args = {
info: "Informações adicionais",
title: "Rótulo",
feedback: {
type: "warn",
message: "Texto da mensagem"
}
};
var Horizontal = Template.bind({});
exports.Horizontal = Horizontal;
Horizontal.storyName = "Listagem horizontal";
Horizontal.args = {
inline: true
};
var States = StateTemplate.bind({});
exports.States = States;
States.storyName = "Estados";
States.args = {};