nishant-design-system
Version:
Sense UI components library
409 lines (408 loc) • 17.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboMedium = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmall = exports.ButtonTextMedium = exports.ButtonTextExtraSmall = exports.BodySmall = exports.BodyMedium = exports.BodyLarge = void 0;
var React = _interopRequireWildcard(require("react"));
var _typography = require("../../types/typography");
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _string = require("../../utils/string");
var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
text,
highlight,
highlightClassName,
caseSensitiveHighlighting,
highlightWithBackground
} = _ref;
// Split text on highlight term, include term itself into parts, ignore case
let highlights = '';
if (Array.isArray(highlight)) {
highlights = highlight.map(_string.escapeRegExp).join('|');
} else {
highlights = (0, _string.escapeRegExp)(highlight);
}
const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi')).filter(part => part !== '');
return /*#__PURE__*/React.createElement("span", {
ref: ref
}, parts.map((part, idx) => highlights.toLowerCase().includes((0, _string.escapeRegExp)(part).toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
// eslint-disable-next-line react/no-array-index-key
key: idx,
className: (0, _classify.default)(_typographyModule.default.highlightText, {
[_typographyModule.default.bgHighlighting]: highlightWithBackground
}, highlightClassName)
}, part) : part));
});
const JumboMedium = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref2;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.JumboMedium = JumboMedium;
const TitleMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref3;
return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.TitleMedium = TitleMedium;
const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref4;
return /*#__PURE__*/React.createElement("h2", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.SubTitleLarge = SubTitleLarge;
const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref5;
return /*#__PURE__*/React.createElement("h3", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.SubTitleMedium = SubTitleMedium;
const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref6;
return /*#__PURE__*/React.createElement("h4", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.SubTitleSmall = SubTitleSmall;
const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref7;
return /*#__PURE__*/React.createElement("h5", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.SubTitleExtraSmall = SubTitleExtraSmall;
const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref8;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.ButtonTextMedium = ButtonTextMedium;
const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref9;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.ButtonTextSmall = ButtonTextSmall;
const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref10;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref11;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.FormInputMedium = FormInputMedium;
const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref12;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.FormInputSmall = FormInputSmall;
const BodyLarge = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref13;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.BodyLarge = BodyLarge;
const BodyMedium = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref14;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.BodyMedium = BodyMedium;
const BodySmall = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref15;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.BodySmall = BodySmall;
const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref16;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.FormLabelMedium = FormLabelMedium;
const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref17;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
exports.FormLabelSmall = FormLabelSmall;