@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
263 lines (239 loc) • 9.81 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
var reactionHappyLarge = function reactionHappyLarge(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _extends2.default)({}, props, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-head",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z",
fill: "#FFDA6A"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-face",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M7.385 10.84a1.846 1.846 0 1 0 0-3.692 1.846 1.846 0 0 0 0 3.693zm10.07 3.939c.552.161.826.774.533 1.268-1.243 2.096-3.46 3.491-5.988 3.491-2.528 0-4.745-1.395-5.988-3.49-.293-.495-.019-1.108.532-1.27A19.403 19.403 0 0 1 12 14c1.89 0 3.72.271 5.456.779zM18.463 9a1.846 1.846 0 1 1-3.693 0 1.846 1.846 0 0 1 3.693 0z",
fill: "#2E2D2E"
})]
}));
};
reactionHappyLarge.defaultProps = {
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
var reactionHappyMedium = function reactionHappyMedium(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _extends2.default)({}, props, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-head",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10z",
fill: "#FFDA6A"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-face",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.154 9.034a1.538 1.538 0 1 0 0-3.077 1.538 1.538 0 0 0 0 3.077zm8.223 3.067c.553.155.828.77.518 1.253C13.843 14.99 12.043 16 10 16c-2.043 0-3.843-1.011-4.895-2.646-.31-.482-.035-1.098.518-1.253C7.019 11.709 8.486 11.5 10 11.5c1.514 0 2.981.209 4.377.6zM15.385 7.5a1.538 1.538 0 1 1-3.077 0 1.538 1.538 0 0 1 3.077 0z",
fill: "#2E2D2E"
})]
}));
};
reactionHappyMedium.defaultProps = {
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
var reactionHappySmall = function reactionHappySmall(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _extends2.default)({}, props, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-head",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16z",
fill: "#FFDA6A"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-face",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M4.8 7.4a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4zm6.788 2.093c.333.124.532.494.333.864C11.123 11.775 9.66 12.7 8 12.7s-3.123-.925-3.92-2.343c-.2-.309 0-.74.332-.864A13.571 13.571 0 0 1 8 9c1.263 0 2.459.185 3.588.493zM12.4 6.2a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z",
fill: "#262C38"
})]
}));
};
reactionHappySmall.defaultProps = {
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
var reactionOkayLarge = function reactionOkayLarge(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _extends2.default)({}, props, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-head",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z",
fill: "#D2D2D2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-face",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M7.383 10.692a1.846 1.846 0 1 0 0-3.69 1.846 1.846 0 0 0 0 3.69zm9.231 0a1.846 1.846 0 1 0 0-3.69 1.846 1.846 0 0 0 0 3.69zM8.2 14a1.2 1.2 0 0 0 0 2.4h7.6a1.2 1.2 0 0 0 0-2.4H8.2z",
fill: "#2E2D2E"
})]
}));
};
reactionOkayLarge.defaultProps = {
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
var reactionOkayMedium = function reactionOkayMedium(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _extends2.default)({}, props, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-head",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10z",
fill: "#D2D2D2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-face",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.155 9.077a1.54 1.54 0 1 0 .002-3.079 1.54 1.54 0 0 0-.002 3.079zm7.693 0a1.54 1.54 0 1 0 .001-3.078 1.54 1.54 0 0 0-.001 3.078zM7 12a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H7z",
fill: "#2E2D2E"
})]
}));
};
reactionOkayMedium.defaultProps = {
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
var reactionOkaySmall = function reactionOkaySmall(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _extends2.default)({}, props, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-head",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16z",
fill: "#CACACA"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-face",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M4.8 7.4a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4zm-.05 2.85a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75zM12.4 6.2a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z",
fill: "#262C38"
})]
}));
};
reactionOkaySmall.defaultProps = {
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
var reactionSadLarge = function reactionSadLarge(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _extends2.default)({}, props, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-head",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z",
fill: "#BDD6FF"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-face",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M7.383 12.092a1.846 1.846 0 1 0 0-3.69 1.846 1.846 0 0 0 0 3.69zm9.231 0a1.846 1.846 0 1 0 0-3.69 1.846 1.846 0 0 0 0 3.69zm-7.507 5.415c.334-.334 1.177-.843 2.276-.99 1.055-.143 2.325.05 3.592 1.064a1 1 0 0 0 1.25-1.562c-1.733-1.386-3.563-1.693-5.108-1.485-1.501.202-2.758.893-3.424 1.559a1 1 0 0 0 1.414 1.414z",
fill: "#2E2D2E"
})]
}));
};
reactionSadLarge.defaultProps = {
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
var reactionSadMedium = function reactionSadMedium(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _extends2.default)({}, props, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-head",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10z",
fill: "#BDD6FF"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-face",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.154 10.077a1.538 1.538 0 1 0 0-3.077 1.538 1.538 0 0 0 0 3.077zm7.692 0a1.538 1.538 0 1 0 0-3.077 1.538 1.538 0 0 0 0 3.077zM7.707 14.81c.25-.25.919-.66 1.801-.778.839-.113 1.85.038 2.867.852a1 1 0 0 0 1.25-1.562c-1.483-1.186-3.055-1.451-4.383-1.272-1.285.173-2.366.763-2.95 1.346a1 1 0 1 0 1.415 1.414z",
fill: "#2E2D2E"
})]
}));
};
reactionSadMedium.defaultProps = {
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
var reactionSadSmall = function reactionSadSmall(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", (0, _extends2.default)({}, props, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-head",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16z",
fill: "#B8D6FF"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
className: "reaction-face",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M4.8 8.1a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4zm5.25 3.5c-1.655-1.242-3.422-.61-4.047-.044a.75.75 0 0 1-1.006-1.112C6.039 9.5 8.605 8.641 10.95 10.4a.75.75 0 1 1-.9 1.2zm2.35-4.7a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z",
fill: "#262C38"
})]
}));
};
reactionSadSmall.defaultProps = {
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}; // Emoticon full name: [emoticon-name]-[size]
var EMOTICONS = {
'reaction-happy-xl': reactionHappyLarge,
'reaction-happy-lg': reactionHappyLarge,
'reaction-happy-md': reactionHappyMedium,
'reaction-happy-sm': reactionHappySmall,
'reaction-okay-xl': reactionOkayLarge,
'reaction-okay-lg': reactionOkayLarge,
'reaction-okay-md': reactionOkayMedium,
'reaction-okay-sm': reactionOkaySmall,
'reaction-sad-xl': reactionSadLarge,
'reaction-sad-lg': reactionSadLarge,
'reaction-sad-md': reactionSadMedium,
'reaction-sad-sm': reactionSadSmall
};
var _default = EMOTICONS;
exports.default = _default;