1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/component-library/label/label.js
George Marshall cda3e3e4c0
Adding Label component (#16203)
* Adding Label component

* doc fixes

* Adding label wrapping input
2022-11-03 10:09:54 -07:00

74 lines
1.4 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {
COLORS,
FONT_WEIGHT,
TEXT,
DISPLAY,
ALIGN_ITEMS,
} from '../../../helpers/constants/design-system';
import { Text } from '../text';
export const Label = ({
htmlFor,
required,
disabled,
className,
children,
...props
}) => (
<Text
as="label"
disabled={disabled}
htmlFor={htmlFor}
className={classnames(
'mm-label',
{ 'mm-label--disabled': disabled },
{ 'mm-label--html-for': htmlFor && !disabled },
className,
)}
variant={TEXT.BODY_MD}
fontWeight={FONT_WEIGHT.BOLD}
display={DISPLAY.INLINE_FLEX}
alignItems={ALIGN_ITEMS.CENTER}
{...props}
>
{children}
{required && (
<Text
as="span"
className="mm-label__required-asterisk"
aria-hidden="true"
color={COLORS.ERROR_DEFAULT}
>
*
</Text>
)}
</Text>
);
Label.propTypes = {
/**
* The content of the label
*/
children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/**
* The id of the input associated with the label
*/
htmlFor: PropTypes.string,
/**
* If true the label will display as required
*/
required: PropTypes.bool,
/**
* Whether the label is disabled or not
*/
disabled: PropTypes.bool,
/**
* Additional classNames to be added to the label component
*/
className: PropTypes.string,
};