All files / lib/Link index.js

100% Statements 5/5
90.91% Branches 10/11
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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88                  89x 10x                                   89x                             89x                 89x                                                                      
import React from 'react';
import PropTypes from 'prop-types';
 
/**
 * @category controls
 * @component link
 * @variations collab-ui-react
 */
 
const Link = ({ className, children, color, disabled, tag, theme, ...props }) => {
  return (
    React.createElement(
      tag,
      {
        className:
          'cui-link' +
          `${(color && ` cui-link--${color}`) || ''}` +
          `${(theme && ` cui-link--${theme}`) || ''}` +
          `${(className && ` ${className}`) || ''}`,
        disabled: disabled,
        ...!disabled && { tabIndex: 0 },
        ...props
      },
      children
    )
  );
};
 
Link.propTypes = {
  /** @prop Children nodes to render inside Link Component | null */
  children: PropTypes.node.isRequired,
  /** @prop Optional css class string | '' */
  className: PropTypes.string,
  /** @prop Optional color css styling | 'blue' */
  color: PropTypes.string,
  /** @prop Sets the attribute disabled to the Link | false */
  disabled: PropTypes.bool,
  /** @prop Set HTML tag type | 'a' */
  tag: PropTypes.oneOf(['a', 'div', 'span']),
  /** @prop Set Link theme | ''  */
  theme: PropTypes.string,
};
 
Link.defaultProps = {
  children: null,
  className: '',
  color: 'blue',
  disabled: false,
  tag: 'a',
  theme: ''
};
 
Link.displayName = 'Link';
 
export default Link;
 
 
/**
* @component link
* @section default
* @react
import { Link } from '@collab-ui/react';
 
export default function LinkDefault() {
  return(
    <div className='columns small-3'>
      <Link>Default</Link>
      <Link tag='div'>Tag Prop(div)</Link>
      <Link tag='span'>Tag Prop(span)</Link>
    </div>
  );
}
 
**/
 
/**
* @component link
* @section colored
* @react
import { Link } from '@collab-ui/react';
 
export default function LinkColored() {
  return(
    <Link tag='div' color='red'>Color Prop(red)</Link>
  );
}
**/