@activecollab/components

Version:
ActiveCollab Components
74 lines (72 loc) • 4.09 kB
JavaScript
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledSheet = exports.StyledGrid = exports.StyledColumn = exports.SheetHeading = exports.Section = exports.Labeled = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Typography = require("../../components/Typography");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * Shared spec-sheet scaffolding for the StackedCard concept stories (Sheet,
 * Section, Labeled, Grid, Column) plus the sheet's `--sc-*` values.
 * Presentation-only; keeps the StackedCard stories laying out the same way
 * instead of each re-declaring the sheet chrome.
 *
 * The `--sc-*` variables (a selection ring + a dark scrim family) are the
 * shipped component's theming hooks: `components/StackedCard` reads each one
 * through a `var()` with a built-in fallback, and declaring them here on the
 * sheet retints every card inside it. No rgba/hex is baked into a reusable
 * style.
 */

var StyledSheet = exports.StyledSheet = _styledComponents.default.div.withConfig({
  displayName: "storyScaffold__StyledSheet",
  componentId: "sc-7oxew-0"
})(["--sc-selection-ring:var(--color-primary-500,#2f6bff);--sc-scrim:rgba(0,0,0,0.55);--sc-scrim-strong:rgba(0,0,0,0.72);--sc-scrim-fg:#ffffff;--sc-completed-tint:rgba(72,201,176,0.16);min-height:100vh;padding:32px 40px 64px;background:var(--page-paper-dimmed,var(--color-theme-200));.sheet-title{margin-bottom:8px;}.sheet-lede{display:block;margin-bottom:24px;max-width:760px;}"]);
var StyledSection = _styledComponents.default.section.withConfig({
  displayName: "storyScaffold__StyledSection",
  componentId: "sc-7oxew-1"
})(["margin-top:40px;> .section-caption{display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em;}> .section-note{display:block;margin-bottom:16px;max-width:720px;}"]);
var StyledGrid = exports.StyledGrid = _styledComponents.default.div.withConfig({
  displayName: "storyScaffold__StyledGrid",
  componentId: "sc-7oxew-2"
})(["display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;"]);
var StyledColumn = exports.StyledColumn = _styledComponents.default.div.withConfig({
  displayName: "storyScaffold__StyledColumn",
  componentId: "sc-7oxew-3"
})(["display:flex;flex-direction:column;gap:12px;"]);
var StyledLabeled = _styledComponents.default.figure.withConfig({
  displayName: "storyScaffold__StyledLabeled",
  componentId: "sc-7oxew-4"
})(["margin:0;display:flex;flex-direction:column;gap:8px;> figcaption{order:-1;max-width:320px;}"]);
var Labeled = exports.Labeled = function Labeled(_ref) {
  var label = _ref.label,
    children = _ref.children;
  return /*#__PURE__*/_react.default.createElement(StyledLabeled, null, /*#__PURE__*/_react.default.createElement("figcaption", null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
    color: "secondary"
  }, label)), children);
};
var Section = exports.Section = function Section(_ref2) {
  var caption = _ref2.caption,
    note = _ref2.note,
    children = _ref2.children;
  return /*#__PURE__*/_react.default.createElement(StyledSection, null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
    weight: "bold",
    color: "tertiary",
    className: "section-caption"
  }, caption), note ? /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
    color: "tertiary",
    className: "section-note"
  }, note) : null, /*#__PURE__*/_react.default.createElement(StyledGrid, null, children));
};
var SheetHeading = exports.SheetHeading = function SheetHeading(_ref3) {
  var title = _ref3.title,
    children = _ref3.children;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.Title2, {
    className: "sheet-title"
  }, title), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
    color: "tertiary",
    className: "sheet-lede"
  }, children));
};
//# sourceMappingURL=storyScaffold.js.map