Merge pull request #167 from hypothesis/quick-library-intro-page

Add a very simple introductory page to the pattern library
hypothesis · Aug 6, 2021 · 445580d · 445580d
2 parents a57a50b + 1d0ce9d
commit 445580d
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 10 deletions.
diff --git a/src/pattern-library/components/LibraryHome.js b/src/pattern-library/components/LibraryHome.js
@@ -0,0 +1,38 @@
+import Library from './Library';
+
+export default function LibraryHome() {
+  return (
+    <Library.Page title="Pattern Library">
+      <p>
+        This pattern library demonstrates foundations, patterns and components
+        that can be used in Hypothesis front-end applications.
+      </p>
+
+      <h2 className="LibraryPage__subheading">Foundations</h2>
+
+      <p>
+        <strong>Foundations</strong> are the core design system elements—colors,
+        spacing systems, typography—that define the underlying design
+        fundamentals in Hypothesis UI.
+      </p>
+
+      <p>They exist independently of implementation.</p>
+
+      <h2 className="LibraryPage__subheading">Patterns</h2>
+
+      <p>
+        <strong>Patterns</strong> are modular implementations of the design
+        system <strong>foundations</strong>—from the atomic to the complex.
+        These implementations are in HTML and CSS.
+      </p>
+
+      <h2 className="LibraryPage__subheading">Components</h2>
+
+      <p>
+        <strong>Components</strong> are{' '}
+        <a href="https://preactjs.com/">Preact</a> components that are built
+        using underlying <strong>patterns</strong>.
+      </p>
+    </Library.Page>
+  );
+}
diff --git a/src/pattern-library/components/PlaygroundHome.js b/src/pattern-library/components/PlaygroundHome.js
diff --git a/src/pattern-library/routes.js b/src/pattern-library/routes.js
@@ -1,4 +1,4 @@
-import PlaygroundHome from './components/PlaygroundHome';
+import LibraryHome from './components/LibraryHome';
 
 import ColorFoundations from './components/patterns/ColorFoundations';
 import LayoutFoundations from './components/patterns/LayoutFoundations';
@@ -34,7 +34,7 @@ const routes = [
   {
     route: /^\/?$/,
     title: 'Home',
-    component: PlaygroundHome,
+    component: LibraryHome,
     group: 'home',
   },
   {

diff --git a/styles/pattern-library.scss b/styles/pattern-library.scss
@@ -227,6 +227,11 @@ $-library-vertical-spacing: 7;
     font-size: 1.75em;
     font-weight: bold;
   }
+
+  &__subheading {
+    font-size: 1.5em;
+    font-style: italic;
+  }
 }
 
 .LibraryPattern {