@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
1,382 lines • 72.8 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/layout/CardPage.tsx";
import { Card, CardContent, CardHeader, CardTitle, CardActions } from '../../../../';
import { Button, EditIcon } from '../../../../';
import Library from '../../Library';
import { LoremIpsum } from '../samples';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function CardPage() {
return _jsxDEV(Library.Page, {
title: "Card",
intro: _jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 15
}, this), " family of presentational components provide support for laying out content in a card-like interface."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 9
}, this),
children: [_jsxDEV(Library.Section, {
title: "Card",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 13
}, this), " lays out content in a frame, with dimensional shadows by default."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Card, CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic Card",
withSource: true,
children: _jsxDEV(Card, {
children: _jsxDEV(CardContent, {
children: _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with Cards",
children: _jsxDEV(Library.SectionL3, {
title: "Full-width content",
children: [_jsxDEV("p", {
children: ["You can add full-bleed content by placing it outside of the", ' ', _jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 15
}, this), " component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Card with full-width image",
withSource: true,
children: _jsxDEV(Card, {
children: [_jsxDEV("img", {
className: "rounded-t-[inherit]",
src: "https://placehold.co/1000/250",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 17
}, this), _jsxDEV(CardContent, {
children: _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 11
}, this), ".", _jsxDEV(Library.SectionL3, {
title: "active",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Style the card as if it is hovered or otherwise active."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `false`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "active Card",
withSource: true,
children: _jsxDEV(Card, {
active: true,
children: _jsxDEV(CardContent, {
children: _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "variant",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set the ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 25
}, this), " theming."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'raised' | 'flat'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `raised`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "raised",
withSource: true,
children: _jsxDEV(Card, {
variant: "raised",
children: _jsxDEV(CardContent, {
children: _jsxDEV("p", {
children: ["The default ", `"raised"`, " variant has dimensional effects on hover."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "flat",
withSource: true,
children: _jsxDEV(Card, {
variant: "flat",
children: _jsxDEV(CardContent, {
children: _jsxDEV("p", {
children: ["The ", `"flat"`, " variant does not have dimensional effects."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "width",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Define how the ", `card's`, " width is set. Provide width", ' ', _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 17
}, this), " when setting ", _jsxDEV("code", {
children: "width"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 51
}, this), " to", ' ', _jsxDEV("code", {
children: `'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'full' | 'auto' | 'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'full'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "full width",
withSource: true,
children: _jsxDEV(Card, {
width: "full",
children: _jsxDEV(CardContent, {
children: "By default, a card will use the full width of its container."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "auto width",
withSource: true,
children: _jsxDEV(Card, {
width: "auto",
children: _jsxDEV(CardContent, {
children: ["Setting width to ", _jsxDEV("em", {
children: "auto"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 36
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "custom width with extra classes",
withSource: true,
children: _jsxDEV(Card, {
classes: "w-[400px]",
width: "custom",
children: _jsxDEV(CardContent, {
children: _jsxDEV("p", {
children: "Sized to 400 px."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 17
}, this), " accepts HTML attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "CardContent",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 13
}, this), " puts consistent padding and spacing around content in a ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 26
}, this), " component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 180,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: _jsxDEV(Library.Usage, {
componentName: "Card, CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 186,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 11
}, this), ".", _jsxDEV(Library.SectionL3, {
title: "size",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Set relative spacing and padding."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'sm' | 'md' | 'lg'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'md'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 204,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "space-y-3",
children: [_jsxDEV(Card, {
children: _jsxDEV(CardContent, {
size: "sm",
children: [_jsxDEV("div", {
children: [_jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 23
}, this), " component with", ' ', _jsxDEV("strong", {
children: _jsxDEV("code", {
children: ["size=", "'sm'"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 25
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 215,
columnNumber: 23
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 213,
columnNumber: 21
}, this), _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 220,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 17
}, this), _jsxDEV(Card, {
children: _jsxDEV(CardContent, {
size: "md",
children: [_jsxDEV("div", {
children: [_jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 23
}, this), " component with", ' ', _jsxDEV("strong", {
children: _jsxDEV("code", {
children: ["size=", "'md'"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 229,
columnNumber: 25
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 23
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 21
}, this), _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 233,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 224,
columnNumber: 17
}, this), _jsxDEV(Card, {
children: _jsxDEV(CardContent, {
size: "lg",
children: [_jsxDEV("div", {
children: [_jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 240,
columnNumber: 23
}, this), " component with", ' ', _jsxDEV("strong", {
children: _jsxDEV("code", {
children: ["size=", "'lg'"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 25
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 23
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 21
}, this), _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 246,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 237,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 196,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 255,
columnNumber: 17
}, this), " accepts HTML attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 258,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 253,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 252,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "CardHeader",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 269,
columnNumber: 13
}, this), " renders a styled title and an optional close button on a ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 270,
columnNumber: 25
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 268,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Card, CardContent, CardHeader",
size: "sm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 275,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
withSource: true,
title: "Basic CardHeader",
children: _jsxDEV(Card, {
children: [_jsxDEV(CardHeader, {
title: "Card title"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 283,
columnNumber: 17
}, this), _jsxDEV(CardContent, {
children: _jsxDEV("div", {
children: ["A ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 286,
columnNumber: 23
}, this), " with ", _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 286,
columnNumber: 46
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 285,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 282,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 274,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 295,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 296,
columnNumber: 11
}, this), ".", _jsxDEV(Library.SectionL3, {
title: "title",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Render a ", _jsxDEV("code", {
children: "CardTitle"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 303,
columnNumber: 26
}, this), " with this title string in the", ' ', _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 304,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 302,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `string`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 307,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 306,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 301,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
title: "With a `title`",
children: _jsxDEV(Card, {
children: [_jsxDEV(CardHeader, {
title: "Card title",
onClose: () => {}
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 313,
columnNumber: 17
}, this), _jsxDEV(CardContent, {
children: _jsxDEV("div", {
children: ["A ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 316,
columnNumber: 23
}, this), " with ", _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 316,
columnNumber: 46
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 315,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 314,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 312,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 311,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
title: "Composed with `CardTitle`",
children: _jsxDEV(Card, {
children: [_jsxDEV(CardHeader, {
onClose: () => {},
children: _jsxDEV(CardTitle, {
children: "Title here"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 325,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 324,
columnNumber: 17
}, this), _jsxDEV(CardContent, {
children: _jsxDEV("div", {
children: ["A ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 329,
columnNumber: 23
}, this), " with ", _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 329,
columnNumber: 46
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 328,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 327,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 323,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 322,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 300,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "onClose",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Callback to request that the card close. When provided, a close button will be rendered."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 337,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `() => void`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 342,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 341,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 336,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Card, {
children: [_jsxDEV(CardHeader, {
title: "This card can be closed",
onClose: () => alert('you clicked it')
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 348,
columnNumber: 17
}, this), _jsxDEV(CardContent, {
children: _jsxDEV("div", {
children: ["Passing an ", _jsxDEV("code", {
children: "onClose"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 354,
columnNumber: 32
}, this), " function to", ' ', _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 355,
columnNumber: 21
}, this), " will add a close button."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 353,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 352,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 347,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 346,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Close button sizing",
withSource: true,
children: _jsxDEV("div", {
className: "text-[13px] w-full",
children: _jsxDEV(Card, {
children: [_jsxDEV(CardHeader, {
onClose: () => alert('you clicked it'),
children: _jsxDEV("h3", {
className: "text-brand font-semibold",
children: "Custom title styling"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 365,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 364,
columnNumber: 19
}, this), _jsxDEV(CardContent, {
children: _jsxDEV("div", {
children: ["The close button will always have the same size, regardless of local font size. Here, font size is", ' ', _jsxDEV("code", {
children: "13px"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 373,
columnNumber: 23
}, this), ", echoing the client application base font size, but the close button remains the same size."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 370,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 369,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 363,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 362,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 361,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 335,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "fullWidth",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Ensure that the header divider (border) spans the full width of the card. This can be helpful when the card content scrolls."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 383,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 388,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 387,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `false`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 391,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 390,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 382,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Making a CardHeader span the full width",
withSource: true,
children: _jsxDEV(Card, {
children: [_jsxDEV(CardHeader, {
title: "Full-width header",
onClose: () => alert('you clicked it'),
fullWidth: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 400,
columnNumber: 17
}, this), _jsxDEV(CardContent, {
children: _jsxDEV("div", {
children: ["A ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 407,
columnNumber: 23
}, this), " with ", _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 407,
columnNumber: 46
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 406,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 405,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 399,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 395,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 381,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "variant",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Define which theme to use for ", _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 416,
columnNumber: 47
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 415,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `{'primary' | 'secondary'}`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 419,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 418,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'primary'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 422,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 421,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 414,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "primary",
withSource: true,
children: _jsxDEV(Card, {
children: [_jsxDEV(CardHeader, {
variant: "primary",
title: "Primary variant",
onClose: () => {}
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 427,
columnNumber: 17
}, this), _jsxDEV(CardContent, {
children: _jsxDEV("p", {
children: ["This ", "Card's", " ", _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 434,
columnNumber: 37
}, this), " is styled with the", ' ', _jsxDEV("code", {
children: "primary"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 435,
columnNumber: 21
}, this), " (default) variant."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 433,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 432,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 426,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 425,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "secondary",
withSource: true,
children: _jsxDEV(Card, {
children: [_jsxDEV(CardHeader, {
variant: "secondary",
onClose: () => {},
title: "Secondary variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 442,
columnNumber: 17
}, this), _jsxDEV(CardContent, {
children: _jsxDEV("p", {
children: ["This ", "Card's", " ", _jsxDEV("code", {
children: "CardHeader"
}, void 0,