All files / lib/Label index.js

100% Statements 5/5
100% Branches 4/4
100% Functions 1/1
100% Lines 5/5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68                  89x 50x                           89x                     89x             89x                                                  
import React from 'react';
import PropTypes from 'prop-types';
 
/**
 * @category controls
 * @component label
 * @variations collab-ui-react
 */
 
const Label = ({ className, htmlFor, label, theme, ...props }) => {
  return (
    <label
      className={
        `${className ? ` ${className}` : ''}`+
        `${theme ? ` cui-label--${theme}` : ''}`
      }
      htmlFor={htmlFor}
      {...props}
    >
      <span>{label}</span>
    </label>
  );
};
 
Label.propTypes = {
  /** @prop HTML class name for associated Input | '' */
  className: PropTypes.string,
  /** @prop HTML ID for associated Input | null */
  htmlFor: PropTypes.string.isRequired,
  /** @prop Required Label text | null */
  label: PropTypes.string.isRequired,
  /** @prop Set Label's color theme | '' */
  theme: PropTypes.string,
};
 
Label.defaultProps = {
  className: '',
  htmlFor: null,
  label: null,
  theme: '',
};
 
Label.displayName = 'Label';
 
export default Label;
 
/**
* @name Default Label
* @description Labels are useful.
*
* @category controls
* @component label
* @section default
*
* @js
import { Label } from '@collab-ui/react';
 
export default function LabelDefault() {
  return (
    <Label
      htmlFor='label1'
      label='Default Label'
    />
  );
}
 
**/