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
458 lines (457 loc) • 12.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.TextTag = exports.StatusTag = exports.RadiosTag = exports.IconsTag = exports.CountsTag = exports.CheckBoxTag = void 0;
var _react = _interopRequireDefault(require("react"));
var _Tag = _interopRequireDefault(require("./Tag"));
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + 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/Tag',
component: _Tag.default,
argTypes: {
bgColor: {
name: 'Cor de Fundo',
type: {
name: 'string',
required: false
},
description: 'Cor de fundo da Tag',
table: {
type: {
summary: 'string'
}
},
control: {
type: 'color'
}
},
color: {
name: 'Cor',
type: {
name: 'string',
required: false
},
description: 'Aplica uma das cores predefinidas',
table: {
type: {
summary: 'string'
}
},
control: {
type: 'select',
options: ['success', 'danger', 'warning', 'info']
}
},
density: {
name: 'Densidade',
type: {
name: 'string',
required: false
},
description: 'Aplica densidade',
table: {
type: {
summary: 'string'
},
defaultValue: {
summary: 'medium'
}
},
control: {
type: 'select',
options: ['small', 'medium', 'large']
}
},
iconProps: {
description: 'Objeto que configura o ícone que vai no botão. Recebe como parâmetro o ícone e o aria label para descrever o botão.'
},
label: {
name: 'Label',
type: {
name: 'string',
required: false
},
description: 'Label da tag',
table: {
type: {
summary: 'string'
}
},
control: {
type: 'text'
}
},
type: {
name: 'Tipo',
type: {
name: 'string',
required: false
},
description: 'Aplica o tipo da Tag',
table: {
type: {
summary: 'string'
}
}
},
txtColor: {
name: 'Cor do texto',
type: {
name: 'string',
required: false
},
description: 'Cor de texto da Tag',
table: {
type: {
summary: 'string'
},
defaultValue: {
summary: '#FFFFFF'
}
},
control: {
type: 'color'
}
}
}
};
exports.default = _default;
var TextTags = function TextTags(_ref) {
var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '20px',
display: 'flex'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "text",
iconProps: {
icon: _freeSolidSvgIcons.faCar,
ariaLabel: 'Ícone Carro'
}
}, args))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "text"
}, args))));
};
var TextTag = TextTags.bind({});
exports.TextTag = TextTag;
TextTag.storyName = 'Tag de texto';
TextTag.args = {
density: 'large',
bgColor: '#63007f',
label: 'Label'
};
TextTag.parameters = {
controls: {
exclude: ['Cor', 'Tipo', 'iconProps']
}
};
var StatusTags = function StatusTags(_ref2) {
var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '20px',
display: 'flex',
alignItems: 'center'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, {
type: "status",
iconProps: {
icon: _freeSolidSvgIcons.faCar,
ariaLabel: 'Ícone Carro'
},
color: 'danger',
density: 'large'
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, {
type: "status",
iconProps: {
icon: _freeSolidSvgIcons.faCar,
ariaLabel: 'Ícone Carro'
},
color: 'warning',
density: 'medium'
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '48px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, {
type: "status",
iconProps: {
icon: _freeSolidSvgIcons.faCar,
ariaLabel: 'Ícone Carro'
},
color: 'success',
density: 'small'
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '72px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, {
type: "status",
iconProps: {
icon: _freeSolidSvgIcons.faCar,
ariaLabel: 'Ícone Carro'
},
color: 'danger',
txtColor: 'black',
label: 'Offline',
density: 'large'
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '72px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, {
type: "status",
iconProps: {
icon: _freeSolidSvgIcons.faCar,
ariaLabel: 'Ícone Carro'
},
color: 'warning',
txtColor: 'black',
label: 'Ausente',
density: 'medium'
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '24px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, {
type: "status",
iconProps: {
icon: _freeSolidSvgIcons.faCar,
ariaLabel: 'Ícone Carro'
},
color: 'success',
txtColor: 'black',
label: 'Online',
density: 'small'
})));
};
var StatusTag = StatusTags.bind({});
exports.StatusTag = StatusTag;
StatusTag.storyName = 'Tag de status';
StatusTag.parameters = {
controls: {
exclude: ['Cor de Fundo', 'Densidade', 'Cor', 'Label', 'Cor do texto', 'Tipo', 'iconProps']
}
};
var CountTags = function CountTags(_ref3) {
var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '20px',
display: 'flex'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "count",
label: "1"
}, args))), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "count",
label: "10"
}, args))), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "count",
label: "130"
}, args))), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "count",
label: "999+"
}, args))));
};
var CountsTag = CountTags.bind({});
exports.CountsTag = CountsTag;
CountsTag.storyName = 'Tag de contagem';
CountsTag.args = {
color: 'danger',
txtColor: 'white',
density: 'medium'
};
CountsTag.parameters = {
controls: {
exclude: ['Cor de Fundo', 'Label', 'Tipo', 'iconProps']
}
};
var IconTags = function IconTags(_ref4) {
var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '20px',
display: 'flex'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "icon",
iconProps: {
icon: _freeSolidSvgIcons.faCar,
ariaLabel: 'Ícone de Carro'
},
bgColor: "#db4800"
}, args))), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "icon",
iconProps: {
icon: _freeSolidSvgIcons.faSearch,
ariaLabel: 'Ícone de Busca'
},
bgColor: "#a26739"
}, args))), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "icon",
iconProps: {
icon: _freeSolidSvgIcons.faUser,
ariaLabel: 'Ícone de Carro'
},
bgColor: "#63007f"
}, args))));
};
var IconsTag = IconTags.bind({});
exports.IconsTag = IconsTag;
IconsTag.storyName = 'Tag de ícone';
IconsTag.args = {
density: 'medium'
};
IconsTag.parameters = {
controls: {
exclude: ['Cor', 'Label', 'Cor de Fundo', 'iconProps', 'Tipo', 'Cor do texto']
}
};
var RadioTags = function RadioTags(_ref5) {
var args = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '20px',
display: 'flex'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "radio",
label: "Label",
iconProps: {
icon: _freeSolidSvgIcons.faCar,
ariaLabel: 'Ícone de carro'
},
inputProps: {
id: 'radio1',
name: 'radio1',
value: 'radio1',
type: 'radio',
checked: false
}
}, args))), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "radio",
label: "Label",
iconProps: {
icon: _freeSolidSvgIcons.faShip,
ariaLabel: 'Ícone de carro'
},
inputProps: {
id: 'radio2',
name: 'radio1',
value: 'radio2',
type: 'radio',
checked: true
}
}, args))));
};
var RadiosTag = RadioTags.bind({});
exports.RadiosTag = RadiosTag;
RadiosTag.storyName = 'Tag com radio';
RadiosTag.args = {
density: 'medium'
};
var CheckBoxTags = function CheckBoxTags(_ref6) {
var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '20px',
display: 'flex'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "radio",
label: "Label",
iconProps: {
icon: _freeSolidSvgIcons.faCar,
ariaLabel: 'Ícone de carro'
},
inputProps: {
id: 'checkbox1',
name: 'checkbox1',
value: 'checkbox1',
type: 'checkbox',
checked: true
}
}, args))), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginRight: '12px'
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, _extends({
type: "radio",
label: "Label",
iconProps: {
icon: _freeSolidSvgIcons.faShip,
ariaLabel: 'Ícone de carro'
},
inputProps: {
id: 'checkbox2',
name: 'checkbox2',
value: 'checkbox2',
type: 'checkbox',
checked: true
}
}, args))));
};
var CheckBoxTag = CheckBoxTags.bind({});
exports.CheckBoxTag = CheckBoxTag;
CheckBoxTag.storyName = 'Tag com checkbox';
CheckBoxTag.args = {
density: 'medium'
};