@helpscout/hsds-react/components/Emoticon/Emoticon.css.js

React component library for Help Scout's Design System

"use strict";

exports.__esModule = true;
exports.default = exports.EmoticonUI = exports.IconUI = exports.EmoticonAnimationUI = exports.emoticonAnimationCSS = exports.reactionEmoticonsColours = void 0;

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _color = require("../../styles/utilities/color");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }

// Note: some colours here are not from the Help Scout palette
var reactionEmoticonsColours = {
  off: {
    head: '#E5E9EC',
    face: (0, _color.getColor)('charcoal.300')
  },
  on: {
    face: '#2E2D2E',
    head: {
      happy: '#FFDA6A',
      okay: '#D2D2D2',
      sad: '#BDD6FF'
    }
  }
};
exports.reactionEmoticonsColours = reactionEmoticonsColours;
var emoticonAnimationCSS = (0, _styledComponents.css)(["&:hover,&:focus{.is-reaction-happy{.reaction-head{fill:", ";}.reaction-face{fill:", ";animation:HSDSEmoticonYep 1s;}}.is-reaction-okay{.reaction-head{fill:", ";}.reaction-face{fill:", ";animation:HSDSEmoticonMeh 0.5s forwards,HSDSEmoticonMehBack 0.5s forwards 1s;}}.is-reaction-sad{.reaction-head{fill:", ";}.reaction-face{fill:", ";animation:HSDSEmoticonNotReally 1s;}}}@keyframes HSDSEmoticonYep{15%,45%,75%{transform:translate3d(0,-2px,0);}30%,60%{transform:translate3d(0,2px,0);}}@keyframes HSDSEmoticonMeh{0%{transform:rotate(0);}100%{transform:rotate(-12deg);}}@keyframes HSDSEmoticonMehBack{0%{transform:rotate(-12deg);}100%{transform:rotate(0);}}@keyframes HSDSEmoticonNotReally{15%,45%,75%{transform:translate3d(-2px,0,0);}30%,60%{transform:translate3d(2px,0,0);}}"], reactionEmoticonsColours.on.head.happy, reactionEmoticonsColours.on.face, reactionEmoticonsColours.on.head.okay, reactionEmoticonsColours.on.face, reactionEmoticonsColours.on.head.sad, reactionEmoticonsColours.on.face);
exports.emoticonAnimationCSS = emoticonAnimationCSS;
var sizes = {
  xl: '38px',
  lg: '24px',
  md: '20px',
  sm: '16px'
};

var EmoticonAnimationUI = _styledComponents.default.span.withConfig({
  displayName: "Emoticoncss__EmoticonAnimationUI",
  componentId: "sc-1595h2r-0"
})(["", ";"], emoticonAnimationCSS);

exports.EmoticonAnimationUI = EmoticonAnimationUI;
var IconUI = (0, _styledComponents.default)('span').withConfig({
  displayName: "Emoticoncss__IconUI",
  componentId: "sc-1595h2r-1"
})(["display:block;height:100%;pointer-events:none;position:relative;svg{display:block;}"]);
exports.IconUI = IconUI;
var EmoticonUI = (0, _styledComponents.default)('span').withConfig({
  displayName: "Emoticoncss__EmoticonUI",
  componentId: "sc-1595h2r-2"
})(["display:block;height:", ";width:", ";opacity:1;position:relative;user-select:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate3d(0,0,0);&.is-center{margin-left:auto;margin-right:auto;}&.is-inline{display:inline-block;}&.is-noInteract{cursor:initial;pointer-events:none;}&.is-disabled{opacity:0.5;cursor:initial;pointer-events:none;}&.is-xl{svg{height:", ";width:", ";}}&.is-reaction-happy.is-inactive,&.is-reaction-okay.is-inactive,&.is-reaction-sad.is-inactive{.reaction-head{fill:", ";}.reaction-face{fill:", ";}}"], function (_ref) {
  var size = _ref.size;
  return sizes[size];
}, function (_ref2) {
  var size = _ref2.size;
  return sizes[size];
}, sizes.xl, sizes.xl, reactionEmoticonsColours.off.head, reactionEmoticonsColours.off.face);
exports.EmoticonUI = EmoticonUI;
var _default = EmoticonUI;
exports.default = _default;