@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
44 lines (41 loc) • 1.08 kB
JavaScript
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { typographyMixin } from '@equinor/eds-utils';
import { helperText } from './HelperText.token.js';
import { jsxs, jsx } from 'react/jsx-runtime';
const Container = styled.div.withConfig({
displayName: "HelperText__Container",
componentId: "sc-189ug61-0"
})(({
color
}) => css({
display: 'grid',
gap: '8px',
gridAutoFlow: 'column',
alignItems: 'start',
justifyContent: 'start',
color
}));
const Text = styled.p.withConfig({
displayName: "HelperText__Text",
componentId: "sc-189ug61-1"
})(["margin:0;", ";white-space:pre-line;"], typographyMixin(helperText.typography));
const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText({
text,
icon,
color = helperText.typography.color,
...rest
}, ref) {
if (!text) {
return null;
}
return /*#__PURE__*/jsxs(Container, {
...rest,
color,
ref,
children: [icon, /*#__PURE__*/jsx(Text, {
children: text
})]
});
});
export { TextfieldHelperText as HelperText };