@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
519 lines • 18.9 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/AspectRatioPage.tsx";
import { AspectRatio, FileImageIcon, Link } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function AspectRatioPage() {
return _jsxDEV(Library.Page, {
title: "AspectRatio",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "AspectRatio"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 11
}, this), " is a simple component that controls the aspect ratio of its first direct child, with a default ratio of 16:9."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "AspectRatio"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic AspectRatio",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(AspectRatio, {
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
title: "Working with AspectRatio",
children: [_jsxDEV(Library.SectionL3, {
title: "Placeholder content",
children: [_jsxDEV("p", {
children: ["Placeholder content can be put in a container that is the first direct child of the ", _jsxDEV("code", {
children: "AspectRatio"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 35
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Placeholder",
withSource: true,
children: _jsxDEV("div", {
className: "w-[250px] border rounded-md",
children: _jsxDEV(AspectRatio, {
children: _jsxDEV("div", {
children: _jsxDEV(FileImageIcon, {
className: "text-slate-5 w-2em h-2em"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Fitting and positioning content",
children: [_jsxDEV("p", {
children: ["The way the content is resized and fitted (", _jsxDEV(Link, {
underline: "always",
href: "https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit",
children: "object-fit"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 15
}, this), ") can be controlled with the ", _jsxDEV("code", {
children: "objectFit"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 44
}, this), " prop (documented below)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 13
}, this), _jsxDEV("p", {
children: [_jsxDEV(Link, {
href: "https://developer.mozilla.org/en-US/docs/Web/CSS/object-position",
underline: "always",
children: "Object positioning"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 15
}, this), ' ', "within the content ", "element's", " box can be handled by styling the content element itself. By default, the browser will position content ", _jsxDEV("code", {
children: '50% 50%'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 23
}, this), " within the ", "element's", " box. In this example, the image is styled to apply", ' ', _jsxDEV("code", {
children: 'object-position: top'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 15
}, this), " instead."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Changing the contained object's position",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(AspectRatio, {
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder",
className: "object-top"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
title: "Component API",
children: [_jsxDEV(Library.SectionL3, {
title: "children",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Either the", ' ', _jsxDEV(Link, {
href: "https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element",
children: "replaced element"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 17
}, this), ' ', "to be sized or placeholder content in a container."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "preact.ComponentChildren"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "ratio",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Set the aspect ratio for the content"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: [_jsxDEV("code", {
children: "string"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 17
}, this), " Any numeric string that can be used in a CSS", ' ', _jsxDEV("code", {
children: "calc()"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 17
}, this), " expression"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'16/9'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "objectFit",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Control the way the content is resized and fitted (", _jsxDEV(Link, {
underline: "always",
href: "https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit",
children: "object-fit"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 17
}, this), ")."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'cover' | 'contain' | 'fill' | 'none' | 'scale-down'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'cover'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "objectFit:'cover' (default)",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px] border rounded-md",
children: _jsxDEV(AspectRatio, {
objectFit: "cover",
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "objectFit:'contain'",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px] border rounded-md",
children: _jsxDEV(AspectRatio, {
objectFit: "contain",
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "objectFit:'fill'",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px] border rounded-md",
children: _jsxDEV(AspectRatio, {
objectFit: "fill",
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "objectFit:'scale-down'",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px] border rounded-md",
children: _jsxDEV(AspectRatio, {
objectFit: "scale-down",
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "objectFit:'none'",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px] border rounded-md",
children: _jsxDEV(AspectRatio, {
objectFit: "none",
children: _jsxDEV("img", {
src: "https://placehold.co/400x400",
alt: "placeholder"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=AspectRatioPage.js.map