@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
72 lines • 2.67 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
import AlertCircle from "../icons/AlertCircle";
import InformationCircle from "../icons/InformationCircle";
import { rtlSpacing, left } from "../utils/rtl";
import mq from "../utils/mediaQuery";
const StyledAsterisk = styled.span.withConfig({
displayName: "FormLabel__StyledAsterisk",
componentId: "sc-14kkg44-0"
})(["", ""], ({
theme,
filled
}) => css(["font-weight:", ";color:", ";font-size:", ";vertical-align:top;"], theme.orbit.fontWeightBold, !filled ? theme.orbit.colorTextError : theme.orbit.colorFormLabelFilled, theme.orbit.fontSizeFormLabel));
StyledAsterisk.defaultProps = {
theme: defaultTheme
};
const StyledInputErrorIcWrapper = styled.span.withConfig({
displayName: "FormLabel__StyledInputErrorIcWrapper",
componentId: "sc-14kkg44-1"
})(["", ";"], ({
theme
}) => css(["margin:", ";display:inline-flex;align-items:center;"], rtlSpacing(`0 ${theme.orbit.spaceXXSmall} 0 0`)));
StyledInputErrorIcWrapper.defaultProps = {
theme: defaultTheme
};
const FormLabel = styled(({
className,
children,
required,
filled,
dataTest,
id,
error,
help,
onMouseEnter,
onMouseLeave,
iconRef,
inlineLabel,
labelRef
}) => /*#__PURE__*/React.createElement("span", {
className: className,
"data-test": dataTest,
id: id,
ref: labelRef,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave
}, !inlineLabel && (error || help) && /*#__PURE__*/React.createElement(StyledInputErrorIcWrapper, {
ref: iconRef
}, error && /*#__PURE__*/React.createElement(AlertCircle, {
ariaLabel: "error",
color: "critical",
size: "small"
}), !error && help && /*#__PURE__*/React.createElement(InformationCircle, {
ariaLabel: "help",
color: "info",
size: "small"
})), required && !error && /*#__PURE__*/React.createElement(StyledAsterisk, {
"aria-hidden": "true",
filled: filled
}, "*"), /*#__PURE__*/React.createElement("span", null, children))).withConfig({
displayName: "FormLabel",
componentId: "sc-14kkg44-2"
})(["", ""], ({
theme,
filled,
disabled
}) => css(["display:inline-flex;font-family:", ";font-size:", ";font-weight:", ";color:", ";line-height:", ";margin-bottom:", ";margin-", ":", ";", ""], theme.orbit.fontFamily, theme.orbit.fontSizeFormLabel, theme.orbit.fontWeightMedium, !filled || disabled ? theme.orbit.colorFormLabel : theme.orbit.colorFormLabelFilled, theme.orbit.lineHeightTextNormal, theme.orbit.spaceXXSmall, left, theme.orbit.spaceXXSmall, mq.desktop(css(["margin-", ":0;"], left))));
FormLabel.defaultProps = {
theme: defaultTheme
};
export default FormLabel;