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

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/UsingComponents.js";
import Library from '../Library';
import Next from '../LibraryNext';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function UsingComponentsPage() {
  return _jsxDEV(Library.Page, {
    title: "Using components",
    intro: _jsxDEV(_Fragment, {
      children: _jsxDEV("p", {
        children: ["This guide applies to updated (", '"next"', ") components only."]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 11,
        columnNumber: 11
      }, this)
    }, void 0, false),
    children: [_jsxDEV(Library.Pattern, {
      title: "Component categories",
      children: _jsxDEV("ul", {
        children: [_jsxDEV("li", {
          children: [_jsxDEV("strong", {
            children: "Simple components"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 18,
            columnNumber: 13
          }, this), ": Opinionated, simple components that apply design patterns. Example: ", _jsxDEV("code", {
            children: "Spinner"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 19,
            columnNumber: 50
          }, this), "."]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 17,
          columnNumber: 11
        }, this), _jsxDEV("li", {
          children: [_jsxDEV("strong", {
            children: "Presentational components"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 22,
            columnNumber: 13
          }, this), ": Composable components with customization flexibility. Example: ", _jsxDEV("code", {
            children: "Button"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 23,
            columnNumber: 54
          }, this), ",", ' ', _jsxDEV("code", {
            children: "Link"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 24,
            columnNumber: 13
          }, this), "."]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 21,
          columnNumber: 11
        }, this), _jsxDEV("li", {
          children: [_jsxDEV("strong", {
            children: "Composite components"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 27,
            columnNumber: 13
          }, this), ": These components are combinations of presentational components arranged and styled in a particular way to satisfy a use case. Example:", ' ', _jsxDEV("code", {
            children: "ScrollBox"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 30,
            columnNumber: 13
          }, this), "."]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 26,
          columnNumber: 11
        }, this)]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 16,
        columnNumber: 9
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 15,
      columnNumber: 7
    }, this), _jsxDEV(Library.Pattern, {
      title: "Component API",
      children: [_jsxDEV("p", {
        children: "The props accepted by a component combine:"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 35,
        columnNumber: 9
      }, this), _jsxDEV("ul", {
        children: [_jsxDEV("li", {
          children: [_jsxDEV("strong", {
            children: "Common props"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 38,
            columnNumber: 13
          }, this), " available to all components in its category"]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 37,
          columnNumber: 11
        }, this), _jsxDEV("li", {
          children: [_jsxDEV("strong", {
            children: "Specific props"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 42,
            columnNumber: 13
          }, this), " for the component"]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 41,
          columnNumber: 11
        }, this)]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 36,
        columnNumber: 9
      }, this), _jsxDEV("p", {
        children: ["Documentation pages for components cover the props specific to the component, and call out any deviation of the component from its", ' ', "category's", " common props."]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 46,
        columnNumber: 9
      }, this), _jsxDEV(Library.Example, {
        title: "Simple components"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 52,
        columnNumber: 9
      }, this), _jsxDEV("p", {
        children: [_jsxDEV("strong", {
          children: "Simple components"
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 54,
          columnNumber: 11
        }, this), " are opinionated and take only documented, component-specific props."]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 53,
        columnNumber: 9
      }, this), _jsxDEV(Library.Example, {
        title: "Presentational components"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 57,
        columnNumber: 9
      }, this), _jsxDEV("p", {
        children: [_jsxDEV("strong", {
          children: "Presentational components"
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 59,
          columnNumber: 11
        }, this), " have more customization flexibility and take these common props:"]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 58,
        columnNumber: 9
      }, this), _jsxDEV(Next.Code, {
        size: "sm",
        content: `/**
 * @typedef PresentationalProps
 * @prop {import('preact').ComponentChildren} [children]
 * @prop {string|string[]} [classes] - Optional extra CSS classes to append to the
 *   component's default classes
 * @prop {never} [className] - Use variants, props, unstyled component (when
 *   available) or classes instead
 * @prop {import('preact').Ref<HTMLElement>} [elementRef] - Ref for component's
 *   outermost element.
 */
`
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 62,
        columnNumber: 9
      }, this), _jsxDEV(Library.Example, {
        title: "Composite components",
        children: _jsxDEV("p", {
          children: ["Composite components accept the same common props as presentational components with the exception of", ' ', _jsxDEV("s", {
            children: _jsxDEV("code", {
              children: "classes"
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 81,
              columnNumber: 15
            }, this)
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 80,
            columnNumber: 13
          }, this), "."]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 77,
          columnNumber: 11
        }, this)
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 76,
        columnNumber: 9
      }, this)]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 34,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 7,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=UsingComponents.js.map