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

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["role", "bleed", "direction", "background", "className", "children"];
import React from "react";
import classnames from "classnames";
import { STACKED_CARD_CONTROL_CLASS, STACKED_CARD_COVER_RATIO } from "./constants";
import { StackedCardExpandGlyph } from "./Glyphs";
import { StyledStackedCardCollapsedStrip, StyledStackedCardCoverButton, StyledStackedCardCoverCenter, StyledStackedCardCoverFill, StyledStackedCardCoverMedia, StyledStackedCardCoverTopRight, StyledStackedCardPlayBadge, StyledStackedCardRow, StyledStackedCardStack, StyledStackedCardStripExpand } from "./Styles";

/**
 * 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. */
export const StackedCardStack = 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.
 */
export const StackedCardRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let _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 = _objectWithoutPropertiesLoose(_ref, _excluded);
  return /*#__PURE__*/React.createElement(StyledStackedCardRow, _extends({
    ref: ref,
    $role: role,
    $bleed: bleed,
    $direction: direction,
    $background: background,
    className: classnames("c-stacked-card__row", "c-stacked-card__row--" + 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.
 */
export const StackedCardCover = _ref2 => {
  let _ref2$aspectRatio = _ref2.aspectRatio,
    aspectRatio = _ref2$aspectRatio === void 0 ? 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.createElement(StackedCardRow, {
    role: "cover",
    bleed: true,
    className: classnames("c-stacked-card__cover", className)
  }, collapsed ? /*#__PURE__*/React.createElement(StyledStackedCardCollapsedStrip, {
    type: "button",
    "aria-label": expandLabel,
    onClick: onExpand,
    className: "c-stacked-card__cover-strip"
  }, collapsedStrip, /*#__PURE__*/React.createElement(StyledStackedCardStripExpand, {
    className: STACKED_CARD_CONTROL_CLASS,
    "aria-hidden": "true"
  }, /*#__PURE__*/React.createElement(StackedCardExpandGlyph, null))) : /*#__PURE__*/React.createElement(StyledStackedCardCoverMedia, {
    $aspectRatio: aspectRatio,
    className: "c-stacked-card__cover-media"
  }, /*#__PURE__*/React.createElement(StyledStackedCardCoverFill, null, children), centerSlot ? /*#__PURE__*/React.createElement(StyledStackedCardCoverCenter, {
    className: STACKED_CARD_CONTROL_CLASS
  }, centerSlot) : null, topRightSlot ? /*#__PURE__*/React.createElement(StyledStackedCardCoverTopRight, {
    className: STACKED_CARD_CONTROL_CLASS
  }, topRightSlot) : null));
};
StackedCardCover.displayName = "StackedCardCover";

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

/** Centered media control (a play button). Drop the glyph inside. */
export const StackedCardPlayBadge = StyledStackedCardPlayBadge;

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