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
342 lines (341 loc) • 11.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Wrapper = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var getSVGURI = function getSVGURI(_ref, color, size) {
var prefix = _ref.prefix,
iconName = _ref.iconName,
icon = _ref.icon;
return "data:image/svg+xml;base64,".concat(btoa("<svg data-prefix=\"".concat(prefix, "\" data-icon=\"").concat(iconName, "\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ").concat(icon[0], " ").concat(icon[1], "\" width=\"").concat(size, "\" height=\"").concat(size, "\">\n <path fill=\"").concat(color || "currentColor", "\" d=\"").concat(icon[4], "\"></path>\n </svg>")));
};
var Wrapper = (0, _styledComponents.default)("div")(function (props) {
var _props$icon, _props$icon2, _props$icon3, _props$icon4, _props$icon5, _props$icon6;
return {
display: "inline-flex",
minHeight: "30px",
label: {
fontWeight: "var(--font-weight-semi-bold)",
lineHeight: "var(--font-line-height-medium)"
},
input: {
appearance: "none",
height: "0",
opacity: "0",
overflow: "hidden",
position: "absolute",
width: "0",
"+ label": {
alignItems: "center",
color: "var(--color-secondary-08)",
cursor: "pointer",
display: "inline-flex",
fontSize: "var(--font-size-scale-base)",
marginBottom: "0",
position: "relative",
paddingRight: "calc(16px + 52px)",
"&::before": {
background: "var(--color-secondary-01)",
border: "1px solid var(--rgb-secondary-04)",
borderRadius: "100em",
content: '""',
height: "30px",
position: "absolute",
width: "52px",
right: 0
},
"&::after": {
background: "var(--color-secondary-04)",
borderRadius: "50%",
content: '""',
height: "22px",
position: "absolute",
transition: "all 0.3s ease-in-out",
width: "22px",
right: "calc(4px + 22px)"
},
"&:empty": {
paddingRight: "52px"
}
},
"&:checked + label::after": {
background: "var(--blue-warm-vivid-40)",
right: "4px"
},
"~ .switch-data": {
alignSelf: "center",
color: "var(--color-secondary-08)",
fontSize: "var(--font-size-scale-base)",
fontWeight: "var(--font-weight-regular)",
marginLeft: "8px",
"&::before": {
content: "attr(data-disabled)"
}
},
"&:checked ~ .switch-data": {
color: "var(--color-secondary-08)",
"&::before": {
content: "attr(data-enabled)"
}
},
"&:disabled + label": {
cursor: "not-allowed",
opacity: "var(--surface-opacity-md)",
"*": {
pointerEvents: "none"
}
},
"&:hover:not([disabled]):checked + label::before": {
backgroundImage: "linear-gradient(rgba(var(--rgb-primary-lighten-02), var(--surface-opacity-xs)), rgba(var(--rgb-primary-lighten-02), var(--surface-opacity-xs)))"
},
"&:hover:not([disabled]):not(:checked) + label::before": {
backgroundImage: "linear-gradient(rgba(var(--rgb-secondary-04), var(--surface-opacity-xs)), rgba(var(--rgb-secondary-04), var(--surface-opacity-xs)))"
},
"&:active:not([disabled]):checked + label::before": {
backgroundImage: "linear-gradient(rgba(var(--rgb-primary-lighten-02),var(--surface-opacity-md)), rgba(var(--rgb-primary-lighten-02),var(--surface-opacity-md)))"
},
"&:active:not([disabled]):not(:checked) + label::before": {
backgroundImage: "linear-gradient(rgba(var(--rgb-secondary-04), var(--surface-opacity-md)), rgba(var(--rgb-secondary-04), var(--surface-opacity-md)))"
},
"&:focus-visible + label::before": {
borderColor: "var(--gold-vivid-40) !important",
boxShadow: "0 0 0 var(--surface-width-md) var(--gold-vivid-40)",
outline: "none"
}
},
"&.small": {
minHeight: "24px",
input: {
"+ label": {
paddingRight: "calc(16px + 40px)",
"&::before": {
height: "24px",
width: "40px"
},
"&::after": {
height: "16px",
width: "16px",
right: "calc(4px + 16px)"
},
"&:empty": {
paddingRight: "40px"
}
},
"&:checked + label::after": {
background: "var(--blue-warm-vivid-40)",
right: "4px"
}
},
"&.right": {
input: {
"+ label": {
paddingLeft: "calc(40px + 16px)",
paddingRight: "0",
"&::before": {
left: "0"
},
"&::after": {
left: "4px"
}
},
"&:checked + label::after": {
left: "calc(40px - 16px - 4px)"
}
}
},
"&.top": {
minHeight: "calc(24px * 2)",
input: {
"+ label": {
alignItems: "flex-start",
paddingRight: "0",
"&::before": {
bottom: "0",
left: "0"
},
"&::after": {
bottom: "5px",
left: "4px"
}
},
"&:checked + label::after": {
left: "calc(40px - 16px - 4px)"
}
}
},
"&.icon input + label::after": props.icon && {
alignItems: "center",
display: "inline-flex",
backgroundImage: "url(".concat(getSVGURI((_props$icon = props.icon) === null || _props$icon === void 0 ? void 0 : _props$icon.disabled, "var(--pure-0)", "var(--icon-size-xs)"), ")"),
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
justifyContent: "center"
},
"&.icon input:checked + label::after": props.icon && {
alignItems: "center",
display: "inline-flex",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
justifyContent: "center",
backgroundImage: "url(".concat(getSVGURI((_props$icon2 = props.icon) === null || _props$icon2 === void 0 ? void 0 : _props$icon2.enabled, "var(--pure-0)", "var(--icon-size-xs)"), ")")
}
},
"&.medium": {
minHeight: "30px",
input: {
"+ label": {
paddingRight: "calc(16px + 52px)",
"&::before": {
height: "30px",
width: "52px"
},
"&::after": {
height: "22px",
width: "22px",
right: "calc(4px + 22px)"
},
"&:empty": {
paddingRight: "52px"
}
},
"&:checked + label::after": {
background: "var(--blue-warm-vivid-40)",
right: "4px"
}
},
"&.right": {
input: {
"+ label": {
paddingLeft: "calc(52px + 16px)",
paddingRight: "0",
"&::before": {
left: "0"
},
"&::after": {
left: "4px"
}
},
"&:checked + label::after": {
left: "calc(52px - 22px - 4px)"
}
}
},
"&.top": {
minHeight: "calc(30px * 2)",
input: {
"+ label": {
alignItems: "flex-start",
paddingRight: "0",
"&::before": {
bottom: "0",
left: "0"
},
"&::after": {
bottom: "5px",
left: "4px"
}
},
"&:checked + label::after": {
left: "calc(52px - 22px - 4px)"
}
}
}
},
"&.large": {
minHeight: "36px",
input: {
"+ label": {
paddingRight: "calc(16px + 64px)",
"&::before": {
height: "36px",
width: "64px"
},
"&::after": {
height: "28px",
width: "28px",
right: "calc(4px + 28px)"
},
"&:empty": {
paddingRight: "64px"
}
},
"&:checked + label::after": {
background: "var(--blue-warm-vivid-40)",
right: "4px"
}
},
"&.right": {
input: {
"+ label": {
paddingLeft: "calc(64px + 16px)",
paddingRight: "0",
"&::before": {
left: "0"
},
"&::after": {
left: "4px"
}
},
"&:checked + label::after": {
left: "calc(64px - 28px - 4px)"
}
}
},
"&.top": {
minHeight: "calc(36px * 2)",
input: {
"+ label": {
alignItems: "flex-start",
paddingRight: "0",
"&::before": {
bottom: "0",
left: "0"
},
"&::after": {
bottom: "5px",
left: "4px"
}
},
"&:checked + label::after": {
left: "calc(64px - 28px - 4px)"
}
}
},
"&.icon input + label::after": props.icon && {
alignItems: "center",
display: "inline-flex",
backgroundImage: "url(".concat(getSVGURI((_props$icon3 = props.icon) === null || _props$icon3 === void 0 ? void 0 : _props$icon3.disabled, "var(--pure-0)", "var(--icon-size-base)"), ")"),
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
justifyContent: "center"
},
"&.icon input:checked + label::after": props.icon && {
alignItems: "center",
display: "inline-flex",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
justifyContent: "center",
backgroundImage: "url(".concat(getSVGURI((_props$icon4 = props.icon) === null || _props$icon4 === void 0 ? void 0 : _props$icon4.enabled, "var(--pure-0)", "var(--icon-size-base)"), ")")
}
},
"&.icon input + label::after": props.icon && {
alignItems: "center",
display: "inline-flex",
backgroundImage: "url(".concat(getSVGURI((_props$icon5 = props.icon) === null || _props$icon5 === void 0 ? void 0 : _props$icon5.disabled, "var(--pure-0)", "var(--icon-size-sm)"), ")"),
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
justifyContent: "center"
},
"&.icon input:checked + label::after": props.icon && {
alignItems: "center",
display: "inline-flex",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
justifyContent: "center",
backgroundImage: "url(".concat(getSVGURI((_props$icon6 = props.icon) === null || _props$icon6 === void 0 ? void 0 : _props$icon6.enabled, "var(--pure-0)", "var(--icon-size-sm)"), ")")
}
};
});
exports.Wrapper = Wrapper;