@cbinsights/fds/lib/util/storybook-docs/ColorSwatch.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ColorSwatchWrapper = exports.ColorSwatch = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireDefault(require("react"));

var _tinycolor = require("tinycolor2");

var _useClipboard3 = _interopRequireDefault(require("./useClipboard"));

var _classcat = _interopRequireDefault(require("classcat"));

var _ = require("./..");

var CopyButton = function CopyButton(_ref) {
  var value = _ref.value,
      _ref$copyToClipboard = _ref.copyToClipboard,
      copyToClipboard = _ref$copyToClipboard === void 0 ? _.noop : _ref$copyToClipboard;
  return /*#__PURE__*/_react.default.createElement("button", {
    onClick: function onClick() {
      return copyToClipboard(value || '');
    },
    className: "swatchContainer-copyButton"
  }, value);
};

var mostReadableConfig = function mostReadableConfig(hexName) {
  return (0, _tinycolor.mostReadable)(hexName, ['#333'], {
    includeFallbackColors: true,
    level: 'AAA'
  });
};

var ColorSwatch = function ColorSwatch(props) {
  var _useClipboard = (0, _useClipboard3.default)(),
      _useClipboard2 = (0, _slicedToArray2.default)(_useClipboard, 2),
      copiedText = _useClipboard2[0],
      copyToClipboard = _useClipboard2[1];

  var colorName = props.name;
  var hexName = props.hex ? "#".concat(props.hex.toUpperCase()) : '';
  var cssVar = props.cssVar,
      jsVar = props.jsVar;
  var layouts = [{
    value: hexName,
    position: 'bottomRight'
  }, {
    value: jsVar,
    position: 'topRight'
  }, {
    value: cssVar,
    position: 'topLeft'
  }];
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classcat.default)([{
      'swatchContainer-dark': mostReadableConfig(hexName).toHexString() === '#000000',
      'swatchContainer-light': mostReadableConfig(hexName).toHexString() === '#ffffff'
    }, 'rounded--all', 'swatchContainer', 'padding--all--xs']),
    style: {
      backgroundColor: hexName,
      color: mostReadableConfig(hexName).toHexString(),
      borderWidth: '1px',
      borderStyle: 'solid',
      borderColor: hexName === '#FFFFFF' ? '#F2F2F2' : 'transparent'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "alignChild--center--center span--100 swatchContainer-swatch"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "align--center"
  }, !copiedText ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("b", {
    className: "swatchContainer-name"
  }, colorName)) : /*#__PURE__*/_react.default.createElement("b", null, "COPIED"))), /*#__PURE__*/_react.default.createElement("div", {
    className: "content"
  }, layouts.map(function (layout) {
    return /*#__PURE__*/_react.default.createElement(CopyButton, {
      key: layout.value,
      value: layout.value,
      copyToClipboard: copyToClipboard
    });
  })));
};

exports.ColorSwatch = ColorSwatch;

var ColorSwatchWrapper = function ColorSwatchWrapper(props) {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "swatchWrapper"
  }, props.children);
};

exports.ColorSwatchWrapper = ColorSwatchWrapper;
var _default = ColorSwatch;
exports.default = _default;