@activecollab/components
Version:
ActiveCollab Components
68 lines (66 loc) • 3.37 kB
JavaScript
import React from "react";
import styled from "styled-components";
import { Caption1, Title2 } from "../../components/Typography";
/**
* 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.
*/
export const StyledSheet = styled.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;}"]);
const StyledSection = styled.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;}"]);
export const StyledGrid = styled.div.withConfig({
displayName: "storyScaffold__StyledGrid",
componentId: "sc-7oxew-2"
})(["display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;"]);
export const StyledColumn = styled.div.withConfig({
displayName: "storyScaffold__StyledColumn",
componentId: "sc-7oxew-3"
})(["display:flex;flex-direction:column;gap:12px;"]);
const StyledLabeled = styled.figure.withConfig({
displayName: "storyScaffold__StyledLabeled",
componentId: "sc-7oxew-4"
})(["margin:0;display:flex;flex-direction:column;gap:8px;> figcaption{order:-1;max-width:320px;}"]);
export const Labeled = _ref => {
let label = _ref.label,
children = _ref.children;
return /*#__PURE__*/React.createElement(StyledLabeled, null, /*#__PURE__*/React.createElement("figcaption", null, /*#__PURE__*/React.createElement(Caption1, {
color: "secondary"
}, label)), children);
};
export const Section = _ref2 => {
let caption = _ref2.caption,
note = _ref2.note,
children = _ref2.children;
return /*#__PURE__*/React.createElement(StyledSection, null, /*#__PURE__*/React.createElement(Caption1, {
weight: "bold",
color: "tertiary",
className: "section-caption"
}, caption), note ? /*#__PURE__*/React.createElement(Caption1, {
color: "tertiary",
className: "section-note"
}, note) : null, /*#__PURE__*/React.createElement(StyledGrid, null, children));
};
export const SheetHeading = _ref3 => {
let title = _ref3.title,
children = _ref3.children;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title2, {
className: "sheet-title"
}, title), /*#__PURE__*/React.createElement(Caption1, {
color: "tertiary",
className: "sheet-lede"
}, children));
};
//# sourceMappingURL=storyScaffold.js.map