@hypothesis/frontend-shared/lib/pattern-library/components/LibraryHome.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/LibraryHome.js";
import { Link } from '../..';
import Library from './Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function LibraryHome() {
  return _jsxDEV(Library.Page, {
    title: "Pattern Library",
    children: [_jsxDEV("p", {
      children: "This pattern library demonstrates UI toolkit components and how to use them."
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 7,
      columnNumber: 7
    }, this), _jsxDEV(Library.Pattern, {
      title: "Foundations",
      children: _jsxDEV("p", {
        children: [_jsxDEV("strong", {
          children: "Foundations"
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 14,
          columnNumber: 11
        }, this), " are the core design system elements\u2014colors, spacing systems, typography\u2014that define the underlying design fundamentals in Hypothesis UI."]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 13,
        columnNumber: 9
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 12,
      columnNumber: 7
    }, this), _jsxDEV(Library.Pattern, {
      title: "Components",
      children: _jsxDEV("ul", {
        children: [_jsxDEV("li", {
          children: [_jsxDEV("strong", {
            children: "Components"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 23,
            columnNumber: 13
          }, this), " are", ' ', _jsxDEV(Link, {
            href: "https://preactjs.com/",
            children: "Preact"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 24,
            columnNumber: 13
          }, this), " components that use", ' ', _jsxDEV(Link, {
            href: "https://tailwindcss.com/",
            children: "Tailwind CSS"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 25,
            columnNumber: 13
          }, this), " for styling. Usage of these, or migration to them, is preferred over legacy components."]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 22,
          columnNumber: 11
        }, this), _jsxDEV("li", {
          children: [_jsxDEV("strong", {
            children: "Legacy components"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 30,
            columnNumber: 13
          }, this), " are", ' ', _jsxDEV(Link, {
            href: "https://preactjs.com/",
            children: "Preact"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 31,
            columnNumber: 13
          }, this), " components that use", ' ', _jsxDEV(Link, {
            href: "https://sass-lang.com/",
            children: "SASS"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 32,
            columnNumber: 13
          }, this), " for styling."]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 29,
          columnNumber: 11
        }, this)]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 21,
        columnNumber: 9
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 20,
      columnNumber: 7
    }, this), _jsxDEV(Library.Pattern, {
      title: "Patterns (deprecated)",
      children: _jsxDEV("p", {
        children: [_jsxDEV("strong", {
          children: "Patterns"
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 39,
          columnNumber: 11
        }, this), " are modular implementations of the design system ", _jsxDEV("strong", {
          children: "foundations"
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 40,
          columnNumber: 18
        }, this), "\u2014from the atomic to the complex. These implementations are in HTML and CSS."]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 38,
        columnNumber: 9
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 37,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 6,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=LibraryHome.js.map