@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
42 lines (41 loc) • 1.7 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
// const colorMap = {
// 0: 'u-bgNegative',
// 1: 'u-bgWarning',
// 2: 'u-bgSuccess',
// 3: 'u-bgPrimary',
// }
var colorMap = {
0: 'u-bgPrimary6',
1: 'u-bgNegative6',
2: 'u-bgSuccess6',
};
/**
* Skittles takes in a string of text and creates a simple "badge" style object with consistent colors
* @param text
*/
var Skittles = function (_a) {
var text = _a.text, style = _a.style, mods = _a.mods, testId = _a.testId;
var firstLetterCharCode = text.charCodeAt(0) || 1;
var colorHash = firstLetterCharCode % 3;
var lastLetterCharCode = text.charCodeAt(text.length - 1) || 1;
var intensityHash = lastLetterCharCode % 4;
return (react_1.default.createElement("span", { style: __assign({ width: '22px', height: '22px', display: 'inline-block' }, style), className: "u-colorPrimary1 u-textCenter u-borderRadiusMd u-fontSizeXs u-padXs " + colorMap[colorHash] + " " + (intensityHash >= 2 ? 'u-colorNeutral1' : '') + " " + (mods || ''), "data-testid": testId }, text.substr(0, 2)));
};
exports.default = Skittles;