@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
315 lines • 10.4 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ThumbnailComponents.js";
import { Thumbnail } from '../../..';
import Library from '../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function ThumbnailComponents() {
return _jsxDEV(Library.Page, {
title: "Thumbnail",
children: [_jsxDEV(Library.Pattern, {
title: "Thumbnail",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "Thumbnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 15
}, this), " component handles rendering a thumbnail or other image, and provides a loading state and an empty (placeholder) state. If ", _jsxDEV("code", {
children: "Thumbnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 21
}, this), " has no content, it will render a placeholder. If its ", _jsxDEV("code", {
children: "isLoading"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 31
}, this), " prop is set to", ' ', _jsxDEV("code", {
children: "true"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 11
}, this), ", it will render a loading state."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 8,
columnNumber: 9
}, this), _jsxDEV("p", {
children: "The following examples are rendered within a parent container sized to 250x175px. The Thumbnail will fill, but not exceed, the available space."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Empty thumbnail with default placeholder",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "height: 250px; width:175px",
children: _jsxDEV(Thumbnail, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Thumbnail with image content",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "height: 250px; width:175px",
children: _jsxDEV(Thumbnail, {
children: _jsxDEV("img", {
src: "http://placekitten.com/200/300",
alt: "kitty"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Empty thumbnail in loading state",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "height: 250px; width:175px",
children: _jsxDEV(Thumbnail, {
isLoading: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Thumbnail in loading state",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "height: 250px; width:175px",
children: _jsxDEV(Thumbnail, {
isLoading: true,
children: _jsxDEV("img", {
src: "http://placekitten.com/200/300",
alt: "kitty"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Empty thumbnail with custom placeholder",
children: [_jsxDEV("p", {
children: "Placeholder can be any JSX"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "height: 250px; width:175px",
children: _jsxDEV(Thumbnail, {
placeholder: "!"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 7,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Thumbnail (smaller)",
children: [_jsxDEV("p", {
children: "These examples are within a 100x150px parent."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Smaller loading spinner",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "width:150px; height:100px",
children: _jsxDEV(Thumbnail, {
isLoading: true,
size: "small"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Constrained image proportions",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "width:150px; height:100px",
children: _jsxDEV(Thumbnail, {
size: "small",
children: _jsxDEV("img", {
src: "http://placekitten.com/200/300",
alt: "kitty"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Constrained image proportions: placeholder",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "width:150px; height:100px",
children: _jsxDEV(Thumbnail, {
size: "small"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=ThumbnailComponents.js.map