design-system-simplefi
Version:
Design System for SimpleFi Applications
59 lines • 4.19 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import styled from 'styled-components';
import React from 'react';
import { getColor } from '../../../utils';
import { Icon } from '../../Icon';
import { FlexContainer } from '../../layout';
import { Text } from '../../typography';
var CheckboxContainer = styled(FlexContainer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: pointer;\n width: max-content;\n padding: 0px 4px;\n"], ["\n cursor: pointer;\n width: max-content;\n padding: 0px 4px;\n"])));
var IconSt = styled(Icon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n fill: none;\n stroke: white;\n stroke-width: 2px;\n"], ["\n fill: none;\n stroke: white;\n stroke-width: 2px;\n"])));
var HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: 5px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n"], ["\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: 5px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n"])));
var StyledCheckbox = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n width: 16px;\n height: 16px;\n background: ", ";\n border-radius: 3px;\n transition: all 150ms;\n\n ", " + & {\n box-shadow: 0 0 0 3px ", ";\n padding: 1px;\n }\n\n ", " {\n visibility: ", ";\n }\n"], ["\n display: flex;\n width: 16px;\n height: 16px;\n background: ", ";\n border-radius: 3px;\n transition: all 150ms;\n\n ", " + & {\n box-shadow: 0 0 0 3px ", ";\n padding: 1px;\n }\n\n ", " {\n visibility: ", ";\n }\n"])), getColor('white'), HiddenCheckbox, getColor('midPurple'), IconSt, function (_a) {
var checked = _a.checked;
return (checked ? 'visible' : 'hidden');
});
var Checkbox = function (_a) {
var checked = _a.checked, label = _a.label, _b = _a.iconTypeName, iconTypeName = _b === void 0 ? 'check' : _b, _c = _a.direction, direction = _c === void 0 ? 'row' : _c, props = __rest(_a, ["checked", "label", "iconTypeName", "direction"]);
var content = (React.createElement(CheckboxContainer, { alignItems: "center", flexDirection: direction },
React.createElement(Text, { size: "md", style: {
padding: '4px',
margin: 'auto 15px',
textTransform: 'capitalize',
}, isBold: true }, label),
React.createElement(HiddenCheckbox, __assign({ checked: checked }, props)),
React.createElement(StyledCheckbox, { checked: checked },
React.createElement(IconSt, { checked: checked, name: iconTypeName, style: {
width: '100%',
height: '100%',
margin: 'auto',
} }))));
return React.createElement("label", null, content);
};
export default Checkbox;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=Checkbox.js.map