UNPKG

@hypothesis/frontend-shared

Version:

Shared components, styles and utilities for Hypothesis projects

338 lines 11.8 kB
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