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' // } // ] // }; // } |