@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
38 lines (36 loc) • 1.77 kB
JavaScript
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 /*#__PURE__*/React.createElement("span", {
className: `${style.basic} ${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]} ${customClass} `,
"data-id": dataId,
"data-test-id": dataId,
"data-selector-id": dataSelectorId
}, type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
className: style.after
}) : null, children ? /*#__PURE__*/React.createElement("span", {
className: style.children
}, children) : null, /*#__PURE__*/React.createElement("span", {
className: style.childText
}, text), type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
className: style.before
}) : null);
}
}
Ribbon.propTypes = propTypes;
Ribbon.defaultProps = defaultProps;