@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
1,126 lines • 40.5 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/layout/CardPage.js";
import { Card, CardContent, CardHeader, CardTitle, CardActions } from '../../../../next';
import { Button, EditIcon } from '../../../../next';
import Library from '../../Library';
import Next from '../../LibraryNext';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function CardPage() {
return _jsxDEV(Library.Page, {
title: "Card",
intro: _jsxDEV(_Fragment, {
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 17
}, this), " family of presentational components provide support for laying out content in a card-like interface:"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 11
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: [_jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 15
}, this), " lays out content in a frame, with dimensional shadows by default"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 13
}, this), _jsxDEV("li", {
children: [_jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 15
}, this), " provides consistent spacing and padding for content inside of a ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 39
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 13
}, this), _jsxDEV("li", {
children: [_jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 15
}, this), " and ", _jsxDEV("code", {
children: "CardTitle"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 43
}, this), " style card headers and titles"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 13
}, this), _jsxDEV("li", {
children: [_jsxDEV("code", {
children: "CardActions"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 15
}, this), " lay out actions (buttons) in a", ' ', _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 11
}, this)]
}, void 0, true),
children: [_jsxDEV(Library.Pattern, {
title: "Status",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 11
}, this), " is a re-implementation of a legacy component of the same name. ", _jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 22
}, this), ", ", _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 48
}, this), ",", ' ', _jsxDEV("code", {
children: "CardTitle"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 11
}, this), " and ", _jsxDEV("code", {
children: "CardActions"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 38
}, this), " are new components."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Migrating to this component (Card)",
children: _jsxDEV(Next.Changelog, {
children: [_jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: [_jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 15
}, this), " no longer provides padding or spacing around content. Use ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 28
}, this), " in combination with", ' ', _jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 15
}, this), " for spacing."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 13
}, this), _jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: [_jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 15
}, this), " no longer provides styling for the", ' ', _jsxDEV("code", {
children: "clean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 15
}, this), " theme. Use ", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 45
}, this), " to apply theme styles."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 13
}, this), _jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: [_jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 15
}, this), " no longer provides styling for the", ' ', _jsxDEV("code", {
children: ".is-focused"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 15
}, this), " class. Use the ", _jsxDEV("code", {
children: "active"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 55
}, this), " prop instead."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 13
}, this), _jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: ["Prop name:", ' ', _jsxDEV("s", {
children: _jsxDEV("code", {
children: "containerRef"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 15
}, this), ' ', "\u279C ", _jsxDEV("code", {
children: "elementRef"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 13
}, this), _jsxDEV(Next.ChangelogItem, {
status: "added",
children: [_jsxDEV("code", {
children: "variant:"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 15
}, this), " ", _jsxDEV("code", {
children: "raised"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 37
}, this), " (default) or", ' ', _jsxDEV("code", {
children: "flat"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 15
}, this), ". The ", _jsxDEV("code", {
children: "flat"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 38
}, this), " variant disables any dimensionality or shadows."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 13
}, this), _jsxDEV(Next.ChangelogItem, {
status: "added",
children: [_jsxDEV("code", {
children: "active"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 15
}, this), " (boolean): Sets hover-style shadows on", ' ', _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 15
}, this), ". Must be combined with ", _jsxDEV("code", {
children: "raised"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 56
}, this), ' ', "variant."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Usage",
children: [_jsxDEV(Next.Usage, {
componentName: "Card, CardContent, CardHeader, CardTitle, CardActions",
size: "sm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
title: "Basic Card with CardContent",
withSource: true,
children: _jsxDEV(Card, {
children: _jsxDEV(CardContent, {
children: [_jsxDEV("p", {
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 17
}, this), _jsxDEV("p", {
children: "Adipiscing bibendum est ultricies integer quis auctor elit. Id eu nisl nunc mi ipsum."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Card",
children: [_jsxDEV("p", {
children: ["By default, ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 23
}, this), " has some dimensional effects that intensify on hover. These can be disabled by using the", ' ', _jsxDEV("code", {
children: "flat"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 11
}, this), " variant."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Variant",
children: [_jsxDEV(Library.Demo, {
title: "variant: 'raised' (default)",
withSource: true,
children: _jsxDEV(Card, {
variant: "raised",
children: _jsxDEV(CardContent, {
children: [_jsxDEV("p", {
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 17
}, this), _jsxDEV("p", {
children: "Adipiscing bibendum est ultricies integer quis auctor elit. Id eu nisl nunc mi ipsum."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "variant: 'flat'",
withSource: true,
children: _jsxDEV(Card, {
variant: "flat",
children: _jsxDEV(CardContent, {
children: [_jsxDEV("p", {
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 17
}, this), _jsxDEV("p", {
children: "Adipiscing bibendum est ultricies integer quis auctor elit. Id eu nisl nunc mi ipsum."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "active",
children: [_jsxDEV("p", {
children: ["Setting the ", _jsxDEV("code", {
children: "active"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 25
}, this), " boolean prop will apply styles as if the ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 17
}, this), " is hovered."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "active: true",
withSource: true,
children: _jsxDEV(Card, {
active: true,
children: _jsxDEV(CardContent, {
children: [_jsxDEV("p", {
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 17
}, this), _jsxDEV("p", {
children: "Adipiscing bibendum est ultricies integer quis auctor elit. Id eu nisl nunc mi ipsum."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "CardContent",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 11
}, this), " puts consistent padding and spacing around content in a ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 24
}, this), " component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Laying out Card content",
children: [_jsxDEV(Library.Demo, {
title: "Card with CardContent",
withSource: true,
children: _jsxDEV(Card, {
children: _jsxDEV(CardContent, {
children: [_jsxDEV("div", {
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 180,
columnNumber: 17
}, this), _jsxDEV("div", {
children: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 184,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Full-width Card content",
withSource: true,
children: _jsxDEV(Card, {
children: [_jsxDEV("img", {
src: "https://placekitten.com/1000/250",
alt: "kitty"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 15
}, this), _jsxDEV(CardContent, {
children: ["You can add full-bleed content by placing it outside of the", ' ', _jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 17
}, this), " component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 195,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Size",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 17
}, this), " prop (", _jsxDEV("em", {
children: "default"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 41
}, this), " ", _jsxDEV("code", {
children: "md"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 58
}, this), ") adjusts relative padding and spacing in ", _jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 53
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 204,
columnNumber: 11
}, 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: 21
}, this), " component with", ' ', _jsxDEV("strong", {
children: _jsxDEV("code", {
children: ["size=", "'sm'"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 215,
columnNumber: 21
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 213,
columnNumber: 19
}, this), _jsxDEV("p", {
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 220,
columnNumber: 19
}, this), _jsxDEV("p", {
children: "Adipiscing bibendum est ultricies integer quis auctor elit. Id eu nisl nunc mi ipsum."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 15
}, this), _jsxDEV(Card, {
children: _jsxDEV(CardContent, {
size: "md",
children: [_jsxDEV("div", {
children: [_jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 21
}, this), " component with", ' ', _jsxDEV("strong", {
children: _jsxDEV("code", {
children: ["size=", "'md'"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 237,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 21
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 19
}, this), _jsxDEV("p", {
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 19
}, this), _jsxDEV("p", {
children: "Adipiscing bibendum est ultricies integer quis auctor elit. Id eu nisl nunc mi ipsum."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 246,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 233,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 232,
columnNumber: 15
}, this), _jsxDEV(Card, {
children: _jsxDEV(CardContent, {
size: "lg",
children: [_jsxDEV("div", {
children: [_jsxDEV("code", {
children: "CardContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 256,
columnNumber: 21
}, this), " component with", ' ', _jsxDEV("strong", {
children: _jsxDEV("code", {
children: ["size=", "'lg'"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 258,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 21
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 255,
columnNumber: 19
}, this), _jsxDEV("p", {
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 19
}, this), _jsxDEV("p", {
children: "Adipiscing bibendum est ultricies integer quis auctor elit. Id eu nisl nunc mi ipsum."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 267,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 253,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "CardHeader",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 11
}, this), " renders a styled title and an optional close button on a ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 23
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 279,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "title",
children: _jsxDEV(Library.Demo, {
title: "Setting a title",
withSource: true,
children: _jsxDEV(Card, {
children: [_jsxDEV(CardHeader, {
title: "Card title"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 286,
columnNumber: 15
}, this), _jsxDEV(CardContent, {
children: _jsxDEV("div", {
children: ["A ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 289,
columnNumber: 21
}, this), " with ", _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 289,
columnNumber: 44
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 288,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 287,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 285,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 283,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "onClose",
children: [_jsxDEV("p", {
children: ["Passing a function to the ", _jsxDEV("code", {
children: "onClose"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 298,
columnNumber: 39
}, this), " prop will render a close button."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 297,
columnNumber: 11
}, 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: 303,
columnNumber: 15
}, this), _jsxDEV(CardContent, {
children: _jsxDEV("div", {
children: ["Passing an ", _jsxDEV("code", {
children: "onClose"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 309,
columnNumber: 30
}, this), " function to", ' ', _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 310,
columnNumber: 19
}, this), " will add a close button."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 308,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 307,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 302,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 301,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 296,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "CardTitle",
children: [_jsxDEV("p", {
children: ["Using ", _jsxDEV("code", {
children: "CardTitle"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 319,
columnNumber: 19
}, this), " allows for more layout flexibility in", ' ', _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 320,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 318,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Setting title with CardTitle",
withSource: true,
children: _jsxDEV(Card, {
children: [_jsxDEV(CardHeader, {
children: [_jsxDEV(EditIcon, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 325,
columnNumber: 17
}, this), _jsxDEV(CardTitle, {
children: "Card title"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 326,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 324,
columnNumber: 15
}, this), _jsxDEV(CardContent, {
children: _jsxDEV("div", {
children: ["Using ", _jsxDEV("code", {
children: "CardTitle"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 330,
columnNumber: 25
}, this), " in a ", _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 330,
columnNumber: 53
}, this), ". This allows for other custom content in the", ' ', _jsxDEV("code", {
children: "CardHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 332,
columnNumber: 19
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 329,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 328,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 323,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 322,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 317,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 278,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "CardActions",
children: [_jsxDEV("p", {
children: ["Use ", _jsxDEV("code", {
children: "CardActions"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 342,
columnNumber: 15
}, this), " to render a group of buttons in a", ' ', _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 343,
columnNumber: 11
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 341,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
title: "Card with actions",
withSource: true,
children: _jsxDEV(Card, {
children: [_jsxDEV(CardHeader, {
title: "This card has some actions"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 348,
columnNumber: 15
}, this), _jsxDEV(CardContent, {
children: [_jsxDEV("p", {
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 350,
columnNumber: 17
}, this), _jsxDEV(CardActions, {
children: [_jsxDEV(Button, {
children: "Cancel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 355,
columnNumber: 19
}, this), _jsxDEV(Button, {
variant: "primary",
children: "Do it"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 356,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 354,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 349,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 347,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 346,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 345,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 340,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 5
}, this);
}
//# sourceMappingURL=CardPage.js.map