@simpozio/contact-form
Version:
Package for Contact Form component
121 lines • 15.1 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var styled_components_1 = __importStar(require("styled-components"));
var color_1 = __importDefault(require("color"));
var dist_1 = require("@simpozio/aha-button/dist");
var Form_1 = __importDefault(require("../../components/Form"));
var Field_1 = __importDefault(require("../../components/Field"));
var Caption_1 = __importDefault(require("../../components/Caption"));
exports.FONT = {
SIZE: {
BASE: 'calc(10px + (32 - 10) * ((100vw - 320px) / (2550 - 300)))',
XXXS: '0.6rem',
XXS: '0.8rem',
XS: '1rem',
S: '1.2rem',
MS: '1.4rem',
M: '1.6rem',
ML: '1.8rem',
MXL: '2rem',
L: '2.4rem',
XL: '2.8rem',
XXL: '3rem',
XXXL: '3.5rem'
},
LINE_HEIGHT: {
BASE: '1',
S: '1.3',
M: '1.5'
},
WEIGHT: {
BASE: '400'
},
SPACING: {
L: '1.6'
},
FAMILY: {
BASE: '"Roboto", sans-serif'
}
};
exports.COLOR = {
PRIMARY: '#000',
INVERT: '#fff',
ERROR: 'rgb(244, 67, 54)',
WARNING: 'rgb(218, 179, 123)'
};
exports.DEFAULT_THEME = {
FONT: exports.FONT,
COLOR: {
PRIMARY: exports.COLOR.INVERT,
INVERT: exports.COLOR.PRIMARY,
ERROR: exports.COLOR.ERROR,
WARNING: exports.COLOR.WARNING,
LIGHT: color_1.default(exports.COLOR.INVERT)
.alpha(0.45)
.string()
},
BACKGROUND: {
PRIMARY: exports.COLOR.PRIMARY,
INVERT: exports.COLOR.INVERT
}
};
exports.Error = styled_components_1.default(Caption_1.default)(function (_a) {
var theme = _a.theme;
return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), theme.COLOR.ERROR);
});
exports.FormText = styled_components_1.default(Caption_1.default)(function (_a) {
var theme = _a.theme;
return styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 0 auto;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-align: center;\n\n a {\n border-bottom: 0.05em solid currentColor;\n transition: color ease-in-out 0.2s;\n\n &:hover {\n color: ", ";\n }\n }\n "], ["\n margin: 0 auto;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-align: center;\n\n a {\n border-bottom: 0.05em solid currentColor;\n transition: color ease-in-out 0.2s;\n\n &:hover {\n color: ", ";\n }\n }\n "])), theme.FONT.SIZE.XS, theme.FONT.LINE_HEIGHT.M, theme.COLOR.PRIMARY, theme.COLOR.PRIMARY);
});
exports.BottomText = styled_components_1.default(Caption_1.default)(function (_a) {
var theme = _a.theme;
return styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 0 auto;\n position: absolute;\n bottom: 2rem;\n left: 0;\n right: 0;\n font-size: ", ";\n font-weight: 300;\n letter-spacing: ", ";\n line-height: ", ";\n text-align: center;\n color: ", ";\n\n a {\n border-bottom: 0.05em solid currentColor;\n transition: color ease-in-out 0.2s;\n\n &:hover,\n &:focus,\n &:active {\n color: ", ";\n }\n }\n\n @media (min-width: 768px) {\n white-space: pre-line;\n font-size: ", ";\n }\n "], ["\n margin: 0 auto;\n position: absolute;\n bottom: 2rem;\n left: 0;\n right: 0;\n font-size: ", ";\n font-weight: 300;\n letter-spacing: ", ";\n line-height: ", ";\n text-align: center;\n color: ", ";\n\n a {\n border-bottom: 0.05em solid currentColor;\n transition: color ease-in-out 0.2s;\n\n &:hover,\n &:focus,\n &:active {\n color: ", ";\n }\n }\n\n @media (min-width: 768px) {\n white-space: pre-line;\n font-size: ", ";\n }\n "])), theme.FONT.SIZE.M, function (props) { return props.theme.FONT.SPACING.L; }, theme.FONT.LINE_HEIGHT.M, theme.COLOR.LIGHT, theme.COLOR.PRIMARY, theme.FONT.SIZE.XS);
});
exports.FormGroup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-align: center;\n margin-bottom: 1.5em;\n"], ["\n text-align: center;\n margin-bottom: 1.5em;\n"])));
exports.StyledField = styled_components_1.default(Field_1.default)(function (_a) {
var theme = _a.theme, type = _a.type;
return styled_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n .smpz-form-mui-control-input-root {\n font-size: 1em;\n height: 2.5em;\n padding: 0.5em 0;\n color: ", ";\n font-family: ", ";\n\n &:after {\n border-bottom-color: ", ";\n }\n\n &:before {\n border-bottom-color: ", ";\n }\n\n &:hover:not(.Mui-disabled):before {\n border-bottom-color: ", ";\n }\n\n &.Mui-error:after {\n border-bottom-color: ", ";\n }\n }\n & .smpz-form-mui-control-label {\n font-family: ", ";\n font-size: 1em;\n z-index: 2;\n top: 0.5em;\n left: ", ";\n transition: all 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n color: ", ";\n pointer-events: none;\n\n &--focused.Mui-focused {\n top: 0;\n left: 0;\n color: ", ";\n }\n\n &.MuiFormLabel-filled {\n top: 0;\n left: 0;\n }\n\n &.Mui-error {\n color: ", ";\n }\n }\n & .react-phone-number-input {\n padding: 0;\n height: 2.5em;\n font-weight: 300;\n }\n .smpz-form-mui-control-input--focused {\n color: ", ";\n\n &:before,\n &:after {\n border-bottom-color: ", ";\n }\n }\n & .react-phone-number-input__icon--international {\n width: 1em;\n }\n & .react-phone-number-input__input {\n padding: 0.5em 0;\n height: auto;\n font-size: 1em;\n font-family: ", ";\n font-weight: inherit;\n border-bottom: 0;\n background: none;\n color: inherit;\n }\n & .react-phone-number-input__row {\n height: 100%;\n }\n & .react-phone-number-input__icon svg {\n fill: ", ";\n }\n & .react-phone-number-input__country-select-arrow {\n font-size: 0.5em;\n }\n input:-webkit-autofill,\n input:-webkit-autofill:hover,\n input:-webkit-autofill:focus,\n textarea:-webkit-autofill,\n textarea:-webkit-autofill:hover,\n textarea:-webkit-autofill:focus,\n select:-webkit-autofill,\n select:-webkit-autofill:hover,\n select:-webkit-autofill:focus {\n font-size: 1em;\n -webkit-text-fill-color: ", ";\n -webkit-box-shadow: 0 0 0 1000px ", " inset;\n transition: background-color 5000s ease-in-out 0s;\n }\n\n input::-webkit-input-placeholder {\n color: ", ";\n opacity: 1;\n }\n input::-moz-placeholder {\n color: ", ";\n opacity: 1;\n }\n input:-ms-input-placeholder {\n color: ", ";\n opacity: 1;\n }\n input:-moz-placeholder {\n color: ", ";\n opacity: 1;\n }\n\n @media (min-width: 768px) {\n .smpz-form-mui-control-input-root {\n padding: 0.5em ", ";\n height: 2.9em;\n }\n\n & .react-phone-number-input {\n height: 2.9em;\n }\n\n & .react-phone-number-input__input {\n padding: 0.5em 0;\n }\n\n & .smpz-form-mui-control-label {\n left: ", ";\n\n &--focused.Mui-focused {\n left: 1.5em;\n }\n\n &.MuiFormLabel-filled {\n left: 1.5em;\n }\n }\n }\n "], ["\n .smpz-form-mui-control-input-root {\n font-size: 1em;\n height: 2.5em;\n padding: 0.5em 0;\n color: ", ";\n font-family: ", ";\n\n &:after {\n border-bottom-color: ", ";\n }\n\n &:before {\n border-bottom-color: ",
";\n }\n\n &:hover:not(.Mui-disabled):before {\n border-bottom-color: ",
";\n }\n\n &.Mui-error:after {\n border-bottom-color: ", ";\n }\n }\n & .smpz-form-mui-control-label {\n font-family: ", ";\n font-size: 1em;\n z-index: 2;\n top: 0.5em;\n left: ", ";\n transition: all 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n color: ", ";\n pointer-events: none;\n\n &--focused.Mui-focused {\n top: 0;\n left: 0;\n color: ", ";\n }\n\n &.MuiFormLabel-filled {\n top: 0;\n left: 0;\n }\n\n &.Mui-error {\n color: ", ";\n }\n }\n & .react-phone-number-input {\n padding: 0;\n height: 2.5em;\n font-weight: 300;\n }\n .smpz-form-mui-control-input--focused {\n color: ", ";\n\n &:before,\n &:after {\n border-bottom-color: ", ";\n }\n }\n & .react-phone-number-input__icon--international {\n width: 1em;\n }\n & .react-phone-number-input__input {\n padding: 0.5em 0;\n height: auto;\n font-size: 1em;\n font-family: ", ";\n font-weight: inherit;\n border-bottom: 0;\n background: none;\n color: inherit;\n }\n & .react-phone-number-input__row {\n height: 100%;\n }\n & .react-phone-number-input__icon svg {\n fill: ", ";\n }\n & .react-phone-number-input__country-select-arrow {\n font-size: 0.5em;\n }\n input:-webkit-autofill,\n input:-webkit-autofill:hover,\n input:-webkit-autofill:focus,\n textarea:-webkit-autofill,\n textarea:-webkit-autofill:hover,\n textarea:-webkit-autofill:focus,\n select:-webkit-autofill,\n select:-webkit-autofill:hover,\n select:-webkit-autofill:focus {\n font-size: 1em;\n -webkit-text-fill-color: ", ";\n -webkit-box-shadow: 0 0 0 1000px ", " inset;\n transition: background-color 5000s ease-in-out 0s;\n }\n\n input::-webkit-input-placeholder {\n color: ", ";\n opacity: 1;\n }\n input::-moz-placeholder {\n color: ", ";\n opacity: 1;\n }\n input:-ms-input-placeholder {\n color: ", ";\n opacity: 1;\n }\n input:-moz-placeholder {\n color: ", ";\n opacity: 1;\n }\n\n @media (min-width: 768px) {\n .smpz-form-mui-control-input-root {\n padding: 0.5em ", ";\n height: 2.9em;\n }\n\n & .react-phone-number-input {\n height: 2.9em;\n }\n\n & .react-phone-number-input__input {\n padding: 0.5em 0;\n }\n\n & .smpz-form-mui-control-label {\n left: ", ";\n\n &--focused.Mui-focused {\n left: 1.5em;\n }\n\n &.MuiFormLabel-filled {\n left: 1.5em;\n }\n }\n }\n "])), theme.COLOR.PRIMARY, theme.FONT.FAMILY.BASE, theme.COLOR.PRIMARY, color_1.default(theme.COLOR.PRIMARY)
.alpha(0.42)
.string(), color_1.default(theme.COLOR.PRIMARY)
.alpha(0.6)
.string(), theme.COLOR.WARNING, theme.FONT.FAMILY.BASE, type === 'tel' ? '3em' : '0', theme.COLOR.LIGHT, theme.COLOR.PRIMARY, theme.COLOR.WARNING, theme.COLOR.PRIMARY, theme.COLOR.PRIMARY, theme.FONT.FAMILY.BASE, theme.COLOR.PRIMARY, theme.COLOR.PRIMARY, theme.BACKGROUND.PRIMARY, theme.COLOR.LIGHT, theme.COLOR.LIGHT, theme.COLOR.LIGHT, theme.COLOR.LIGHT, type === 'tel' ? '0' : '1.5em', type === 'tel' ? '3em' : '1.5em');
});
exports.StyledButton = styled_components_1.default(dist_1.AhaButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-top: 5rem;\n align-self: center;\n\n @media (min-width: 768px) {\n margin-top: 3rem;\n }\n\n @media (min-width: 1024px) {\n margin-top: 3rem;\n }\n"], ["\n margin-top: 5rem;\n align-self: center;\n\n @media (min-width: 768px) {\n margin-top: 3rem;\n }\n\n @media (min-width: 1024px) {\n margin-top: 3rem;\n }\n"])));
exports.buttonStyles = styled_components_1.css(function (_a) {
var theme = _a.theme;
return styled_components_1.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: ", ";\n\n @media (min-width: 768px) {\n font-size: ", ";\n }\n "], ["\n font-size: ", ";\n\n @media (min-width: 768px) {\n font-size: ", ";\n }\n "])), theme.FONT.SIZE.XXL, theme.FONT.SIZE.MXL);
});
exports.StyledForm = styled_components_1.default(Form_1.default)(function (_a) {
var theme = _a.theme;
return styled_components_1.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin: auto;\n width: 100%;\n max-width: 28em;\n height: auto;\n box-sizing: border-box;\n font-size: ", ";\n font-weight: 300;\n padding-bottom: 5rem;\n\n @media (min-width: 768px) {\n padding: 3rem;\n font-size: ", ";\n }\n "], ["\n margin: auto;\n width: 100%;\n max-width: 28em;\n height: auto;\n box-sizing: border-box;\n font-size: ", ";\n font-weight: 300;\n padding-bottom: 5rem;\n\n @media (min-width: 768px) {\n padding: 3rem;\n font-size: ", ";\n }\n "])), theme.FONT.SIZE.ML, theme.FONT.SIZE.S);
});
exports.Container = styled_components_1.default.div.attrs(function () { return ({
Form: exports.StyledForm,
FormGroup: exports.FormGroup,
FormText: exports.FormText,
BottomText: exports.BottomText,
Field: exports.StyledField,
Button: exports.StyledButton,
Error: exports.Error
}); })(function (_a) {
var styles = _a.styles;
return styled_components_1.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n width: 100%;\n min-height: 100%;\n box-sizing: border-box;\n\n @media (min-width: 768px) {\n justify-content: center;\n }\n\n ", "\n "], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n width: 100%;\n min-height: 100%;\n box-sizing: border-box;\n\n @media (min-width: 768px) {\n justify-content: center;\n }\n\n ", "\n "])), styles);
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
//# sourceMappingURL=styles.js.map