vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
78 lines • 2.31 kB
JavaScript
import { bool, func, node, string } from 'prop-types';
import React, { createContext } from 'react';
import { Block } from '../block';
import { Message } from '../message';
import { View } from '../view';
const labelStyle = _ref => {
let {
isValid
} = _ref;
return _ref2 => {
let {
theme
} = _ref2;
return {
color: isValid ? theme.color.foreground.secondary : theme.color.foreground.alert,
fontSize: 16,
letterSpacing: '0.02em',
fontFamily: theme.fontTypes.NOVUM,
fontWeight: 300
};
};
};
export const RadioContext = /*#__PURE__*/createContext({});
/**
* @deprecated Use `import { RadioGroup } from '@volvo-cars/react-forms'` instead. See [Radio](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-radio--docs)
*/
export const RadioGroup = _ref3 => {
let {
name,
legend,
isValid = true,
value,
onChange,
errorMessage,
description,
children
} = _ref3;
const styleProps = {
isValid
};
const context = {
name,
isValid,
value,
onChange
};
const messages = /*#__PURE__*/React.createElement(React.Fragment, null, !errorMessage ? null : /*#__PURE__*/React.createElement(Message, {
type: "error"
}, errorMessage), !description ? null : /*#__PURE__*/React.createElement(Message, null, description));
return /*#__PURE__*/React.createElement(View, {
spacing: 0.5
}, /*#__PURE__*/React.createElement(Block, {
as: "legend",
extend: labelStyle(styleProps)
}, legend), /*#__PURE__*/React.createElement(RadioContext.Provider, {
value: context
}, children), messages);
};
RadioGroup.propTypes = {
name: string,
/** Renders a legend. */
legend: string,
/** Renders a description text underneath the input. */
description: string,
/** Renders a red error message for validation underneath the input. */
errorMessage: string,
/** onChange handler. Triggers on every keyboard and generally
* is here where you change the value of the `value` property */
onChange: func.isRequired,
/** Value of the textInput. This should be stored in the
* state of the parent component */
value: string,
/** Renders the input as valid or invalid */
isValid: bool,
/** A JSX node */
// @ts-ignore
children: node
};