@activecollab/components

Version:
ActiveCollab Components
63 lines (59 loc) • 2.25 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React from "react";
import { COVER_RATIO_SWATCH, StyledColorCover, Placeholder } from "./shared";
import { ImageIcon } from "../../../components/Icons";
import { SkeletonLoader } from "../../../components/Loaders";
import { StackedCardCover as Cover, StackedCardRow as StackRow } from "../../../components/StackedCard";
import { Body2, Caption1 } from "../../../components/Typography";

/**
 * SwatchCard — the cover IS the colour; a title row states its name and hex.
 * The swatch value is a literal data colour by design (not a theme token).
 */

export const SwatchCard = _ref => {
  let _ref$color = _ref.color,
    color = _ref$color === void 0 ? "#1D9E75" : _ref$color,
    _ref$name = _ref.name,
    name = _ref$name === void 0 ? "Teal" : _ref$name,
    _ref$hex = _ref.hex,
    hex = _ref$hex === void 0 ? "#1D9E75" : _ref$hex;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cover, {
    aspectRatio: COVER_RATIO_SWATCH
  }, /*#__PURE__*/React.createElement(StyledColorCover, {
    $color: color
  })), /*#__PURE__*/React.createElement(StackRow, {
    role: "title"
  }, /*#__PURE__*/React.createElement(Body2, null, name), /*#__PURE__*/React.createElement(Caption1, {
    color: "tertiary",
    "data-fixed": true,
    style: {
      fontFamily: "monospace"
    }
  }, hex)));
};

/* ---- placeholder + skeleton ---- */

export const SwatchPlaceholder = props => /*#__PURE__*/React.createElement(Placeholder, _extends({
  icon: /*#__PURE__*/React.createElement(ImageIcon, null),
  label: "Pick a colour"
}, props));
export const SwatchSkeleton = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cover, {
  aspectRatio: COVER_RATIO_SWATCH
}, /*#__PURE__*/React.createElement(SkeletonLoader, {
  style: {
    width: "100%",
    height: "100%"
  }
})), /*#__PURE__*/React.createElement(StackRow, {
  role: "title"
}, /*#__PURE__*/React.createElement(SkeletonLoader, {
  style: {
    height: 14,
    width: "40%"
  }
}), /*#__PURE__*/React.createElement(SkeletonLoader, {
  "data-fixed": true,
  style: {
    height: 12,
    width: 60
  }
})));
//# sourceMappingURL=SwatchCard.js.map