All files / Ribbon Ribbon.js

100% Statements 4/4
100% Branches 19/19
100% Functions 1/1
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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                21x 21x                                           1x   1x                              
import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
/* eslint css-modules/no-unused-class: [2, { markAsUsed: [default, flag, plain, ribbon, box, stamp, sticker, small, medium, large, xlarge, palette_default, palette_danger, palette_primary, palette_secondary, palette_info, palette_dark, plain_default, plain_danger, plain_primary, plain_secondary, plain_info, plain_dark, tag] }] */
import style from './Ribbon.module.css';
 
export default class Ribbon extends React.Component {
  render() {
    let { type, text, children, palette, size, dataId, customClass, dataSelectorId } = this.props;
    return (
      <span
        className={`${style.basic} ${customClass} ${
          type !== 'tag'
            ? type === 'plain' || type === 'box' || type === 'stamp'
              ? `${style[`plain_${palette}`]} 
                 ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}`
              : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}`
            : ''
        } ${style[size]} ${style[type]}`}
        data-id={dataId}
        data-test-id={dataId}
        data-selector-id={dataSelectorId}
      >
        {type === 'sticker' ? <span className={style.after} /> : null}
        {children ? <span className={style.children}>{children}</span> : null}
        <span className={style.childText}>{text}</span>
        {type === 'sticker' ? <span className={style.before} /> : null}
      </span>
    );
  }
}
Ribbon.propTypes = propTypes;
 
Ribbon.defaultProps = defaultProps;
// if (__DOCS__) {
//   Ribbon.docs = {
//     componentGroup: 'Atom',
//     folderName: 'Style Guide',
//     external: true,
//     description: ' ',
//     images: [
//       {
//         view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.png',
//         psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.psd'
//       }
//     ]
//   };
// }