@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
338 lines • 11.8 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ThumbnailPatterns.js";
import { SvgIcon } from '../../..';
import Library from '../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function ThumbnailPatterns() {
return _jsxDEV(Library.Page, {
title: "Thumbnails",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "thumbnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 8,
columnNumber: 13
}, this), " pattern is for displaying thumbnail or other images in a frame of constrained size. It provides a variant for displaying a placeholder (when there is no image to render) or a loading state."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 7,
columnNumber: 7
}, this), _jsxDEV("p", {
children: "The thumbnail will fill the available space in the parent (100%), but will constrain the image dimensions within that space, retaining aspect ratio. It will retain its dimensions even when empty or in loading state."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Thumbnail",
children: [_jsxDEV("p", {
children: "These examples show a thumbnail that is contained within a parent container sized to 250x175px."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Thumbnail with content",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "height: 250px; width: 175px",
children: _jsxDEV("div", {
className: "hyp-thumbnail",
children: _jsxDEV("div", {
className: "hyp-thumbnail__content",
children: _jsxDEV("img", {
src: "http://placekitten.com/200/300",
alt: "kitty"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Thumbnail with placeholder",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "height: 250px; width: 175px",
children: _jsxDEV("div", {
className: "hyp-thumbnail",
children: _jsxDEV("div", {
className: "hyp-thumbnail__content",
children: _jsxDEV("div", {
className: "hyp-thumbnail__placeholder",
children: "..."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
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("div", {
className: "hyp-thumbnail",
children: _jsxDEV("div", {
className: "hyp-thumbnail__content",
children: _jsxDEV(SvgIcon, {
name: "hyp-spinner",
className: "hyp-spinner"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Thumbnail in smaller dimensions",
children: [_jsxDEV("p", {
children: "These examples show all three states of a thumnbail in a smaller space: 150x100px."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "All three states shown",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: [_jsxDEV("div", {
style: "width: 100px; height: 150px",
children: _jsxDEV("div", {
className: "hyp-thumbnail",
children: _jsxDEV("div", {
className: "hyp-thumbnail__content",
children: _jsxDEV("img", {
src: "http://placekitten.com/100/150",
alt: "kitty"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 13
}, this), _jsxDEV("div", {
style: "width: 100px; height: 150px",
children: _jsxDEV("div", {
className: "hyp-thumbnail",
children: _jsxDEV("div", {
className: "hyp-thumbnail__content",
children: _jsxDEV("span", {
className: "hyp-thumbnail__placeholder",
children: "..."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 13
}, this), _jsxDEV("div", {
style: "width: 100px; height: 150px",
children: _jsxDEV("div", {
className: "hyp-thumbnail",
children: _jsxDEV("div", {
className: "hyp-thumbnail__content",
children: _jsxDEV(SvgIcon, {
name: "hyp-spinner",
className: "hyp-spinner--small"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Thumbnails: aspect ratio",
children: [_jsxDEV("p", {
children: "An image in a thumnbail is constrained to the available space, and retains aspect ratio."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Thumbnail showing retention of image aspect ratio",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "width: 175px; height: 250px",
children: _jsxDEV("div", {
className: "hyp-thumbnail",
children: _jsxDEV("div", {
className: "hyp-thumbnail__content",
children: _jsxDEV("img", {
src: "http://placekitten.com/350/250",
alt: "kitty"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=ThumbnailPatterns.js.map