@cbinsights/fds/lib/util/storybook-docs/CopyExample.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 = void 0;

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

var _styleConstants = _interopRequireDefault(require("../../dictionary/js/styleConstants"));

var _CheckIcon = _interopRequireDefault(require("../../icons/react/CheckIcon"));

var _DenyIcon = _interopRequireDefault(require("../../icons/react/DenyIcon"));

/**
 * For displaying a do/don't example of copy writing
 */
var CopyExample = function CopyExample(_ref) {
  var valid = _ref.valid,
      invalid = _ref.invalid;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "bgColor--haze rounded--all padding--y--s padding--x--l"
  }, /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, invalid && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_DenyIcon.default, {
    color: _styleConstants.default.COLOR_RED
  }), /*#__PURE__*/_react.default.createElement("strong", {
    className: "padding--x--s color--red"
  }, "Don't:")), /*#__PURE__*/_react.default.createElement("td", {
    className: "color--secondary"
  }, invalid)), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_CheckIcon.default, {
    color: _styleConstants.default.COLOR_GREEN
  }), /*#__PURE__*/_react.default.createElement("strong", {
    className: "padding--x--s color--green"
  }, "Do:")), /*#__PURE__*/_react.default.createElement("td", null, valid)))));
};

var _default = CopyExample;
exports.default = _default;