@activecollab/components/dist/cjs/components/StackedCard/Primitives.js

ActiveCollab Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StackedCardStack = exports.StackedCardRow = exports.StackedCardPlayBadge = exports.StackedCardCoverButton = exports.StackedCardCover = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("./constants");
var _Glyphs = require("./Glyphs");
var _Styles = require("./Styles");
var _excluded = ["role", "bleed", "direction", "background", "className", "children"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/**
 * StackedCard layout primitives.
 *
 * A stacked card is a portrait presentation of data: content stacks top to
 * bottom in rows. There are three primitives and nothing else —
 *
 *  - StackedCardStack — the vertical column. A card IS a stack of rows; the
 *    primitive is exported for nested stacks (a row that stacks internally).
 *  - StackedCardRow   — the one layout primitive. Cover, title, meta, footer
 *    are all rows; a `role` sets the default padding so the anatomy stays
 *    predictable across every card type.
 *  - StackedCardCover — sugar for a bleed row that holds media, reserves its
 *    height with `aspect-ratio` so a late image never reflows the card, and
 *    carries two control slots (center + top-right).
 */

/* ------------------------------------------------------------------ */
/* Stack                                                               */
/* ------------------------------------------------------------------ */

/** A vertical flex column with no padding of its own. */
var StackedCardStack = exports.StackedCardStack = _Styles.StyledStackedCardStack;

/* ------------------------------------------------------------------ */
/* Row                                                                 */
/* ------------------------------------------------------------------ */

/**
 * One row of a card's stack.
 *
 * In `row` direction the first level of children is distributed evenly along
 * the X axis; a child carrying the `data-fixed` attribute keeps its own width
 * and the rest share what remains.
 */
var StackedCardRow = exports.StackedCardRow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var _ref$role = _ref.role,
    role = _ref$role === void 0 ? "custom" : _ref$role,
    bleed = _ref.bleed,
    _ref$direction = _ref.direction,
    direction = _ref$direction === void 0 ? "row" : _ref$direction,
    background = _ref.background,
    className = _ref.className,
    children = _ref.children,
    rest = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardRow, _extends({
    ref: ref,
    $role: role,
    $bleed: bleed,
    $direction: direction,
    $background: background,
    className: (0, _classnames.default)("c-stacked-card__row", "c-stacked-card__row--".concat(role), {
      "c-stacked-card__row--bleed": bleed
    }, className)
  }, rest), children);
});
StackedCardRow.displayName = "StackedCardRow";

/* ------------------------------------------------------------------ */
/* Cover                                                               */
/* ------------------------------------------------------------------ */

/**
 * A bleed row that holds media.
 *
 * Controls in either slot are revealed on hover OR focus-within, so they stay
 * reachable by keyboard. Collapsed, the media box gives way to a strip that is
 * itself the expand button.
 */
var StackedCardCover = exports.StackedCardCover = function StackedCardCover(_ref2) {
  var _ref2$aspectRatio = _ref2.aspectRatio,
    aspectRatio = _ref2$aspectRatio === void 0 ? _constants.STACKED_CARD_COVER_RATIO : _ref2$aspectRatio,
    centerSlot = _ref2.centerSlot,
    topRightSlot = _ref2.topRightSlot,
    collapsed = _ref2.collapsed,
    collapsedStrip = _ref2.collapsedStrip,
    onExpand = _ref2.onExpand,
    _ref2$expandLabel = _ref2.expandLabel,
    expandLabel = _ref2$expandLabel === void 0 ? "Expand cover" : _ref2$expandLabel,
    className = _ref2.className,
    children = _ref2.children;
  return /*#__PURE__*/_react.default.createElement(StackedCardRow, {
    role: "cover",
    bleed: true,
    className: (0, _classnames.default)("c-stacked-card__cover", className)
  }, collapsed ? /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardCollapsedStrip, {
    type: "button",
    "aria-label": expandLabel,
    onClick: onExpand,
    className: "c-stacked-card__cover-strip"
  }, collapsedStrip, /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardStripExpand, {
    className: _constants.STACKED_CARD_CONTROL_CLASS,
    "aria-hidden": "true"
  }, /*#__PURE__*/_react.default.createElement(_Glyphs.StackedCardExpandGlyph, null))) : /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardCoverMedia, {
    $aspectRatio: aspectRatio,
    className: "c-stacked-card__cover-media"
  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardCoverFill, null, children), centerSlot ? /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardCoverCenter, {
    className: _constants.STACKED_CARD_CONTROL_CLASS
  }, centerSlot) : null, topRightSlot ? /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardCoverTopRight, {
    className: _constants.STACKED_CARD_CONTROL_CLASS
  }, topRightSlot) : null));
};
StackedCardCover.displayName = "StackedCardCover";

/* ------------------------------------------------------------------ */
/* Cover chrome                                                        */
/* ------------------------------------------------------------------ */

/** Centered media control (a play button). Drop the glyph inside. */
var StackedCardPlayBadge = exports.StackedCardPlayBadge = _Styles.StyledStackedCardPlayBadge;

/** Top-right cover-management button (collapse, remove …). */
var StackedCardCoverButton = exports.StackedCardCoverButton = _Styles.StyledStackedCardCoverButton;
//# sourceMappingURL=Primitives.js.map