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
76 lines (75 loc) • 3.85 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Indicators = exports.Container = exports.CarouselItem = exports.CarouselComponent = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _styledSystem = require("styled-system");
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var templates = (0, _styledSystem.variant)({
prop: "type",
variants: {
Inner: {
height: "100%",
borderRadius: 0,
position: "relative",
zIndex: 1,
marginRight: "-var(--spacing-scale-7xh)",
marginLeft: "-var(--spacing-scale-7xh)"
},
HorizontalHybrid: {
height: "100%",
borderRadius: 0,
position: "relative",
zIndex: 1,
marginRight: "-var(--spacing-scale-7xh)",
marginLeft: "-var(--spacing-scale-7xh)"
}
}
});
var templatesContainer = function templatesContainer(height) {
return (0, _styledSystem.variant)({
prop: "type",
variants: {
Inner: {
alignItems: "flex-start !important",
height: height
},
HorizontalHybrid: {
alignItems: "flex-start !important",
height: height
}
}
});
};
var templatesIndicators = (0, _styledSystem.variant)({
prop: "type",
variants: {
Inner: {
marginTop: "-5%",
position: "relative"
},
VerticalHybrid: {
marginTop: "-5%",
position: "relative"
}
}
});
var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n ", "\n align-items: center;\n\n & > button {\n ", "\n ", "\n }\n\n & > button:first-child {\n margin-left: 0 !important;\n }\n\n & > button:last-child {\n margin-right: 0 !important;\n }\n\n & .boxCarousel {\n width: ", ";\n margin: 0 var(--spacing-scale-2xh);\n }\n"])), function (props) {
return templatesContainer(props.height);
}, function (props) {
return (props === null || props === void 0 ? void 0 : props.styleButton) && props.styleButton;
}, templates, function (props) {
return props.width && props.width;
});
exports.Container = Container;
var CarouselComponent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n\n & .inner {\n white-space: nowrap;\n transition: transform 0.5s;\n }\n"])));
exports.CarouselComponent = CarouselComponent;
var CarouselItem = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: var(--blue-warm-vivid-10);\n color: var(--blue-warm-vivid-90);\n font-size: var(--font-size-scale-up-05);\n\n & img {\n width: 100%;\n height: ", ";\n }\n"])), function (props) {
return props.height && props.height;
});
exports.CarouselItem = CarouselItem;
var Indicators = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n\n & button {\n margin: var(--spacing-scale-2x) var(--spacing-scale-base);\n padding: 0;\n width: var(--spacing-scale-base);\n height: var(--spacing-scale-base);\n background-color: var(--gray-20);\n border-radius: 100em;\n border: none;\n cursor: pointer;\n ", "\n }\n\n & > button.active {\n background-color: var(--blue-warm-vivid-80);\n color: var(--pure-0);\n }\n"])), templatesIndicators);
exports.Indicators = Indicators;