Split pattern library SASS and remove remaining resets and element styles

src/pattern-library/components/Library.js

@@ -49,7 +49,7 @@ import { jsxToString } from '../util/jsx-to-string';
 function Page({ children, title }) {
   return (
     <section className="LibraryPage">
-      <h1 className="LibraryPage__heading">{title}</h1>
+      <h1 className="Library__heading1">{title}</h1>
       {children}
     </section>
   );
@@ -63,7 +63,7 @@ function Page({ children, title }) {
 function Pattern({ children, title }) {
   return (
     <section className="LibraryPattern">
-      <h2 className="LibraryPattern__heading">{title}</h2>
+      <h2 className="Library__heading2">{title}</h2>
       {children}
     </section>
   );
@@ -100,7 +100,7 @@ function Example({ children, title, variant = 'split' }) {
   return (
     <div className={classnames('LibraryExample', `LibraryExample--${variant}`)}>
       <div className="LibraryExample__content">
-        {title && <h3 className="LibraryExample__heading">{title}</h3>}
+        {title && <h3 className="Library__heading3">{title}</h3>}
         {notDemos}
       </div>
       <div className="LibraryExample__demos">{demos}</div>
@@ -139,7 +139,7 @@ function Demo({ children, withSource = false, style = {}, title }) {
   });
   return (
     <div className="LibraryDemo">
-      {title && <h4 className="LibraryDemo__header">{title}</h4>}
+      {title && <h4 className="Library__heading4">{title}</h4>}
       <div className="LibraryDemo__tabs">
         <LabeledButton
           onClick={() => setVisibleTab('demo')}

src/pattern-library/components/LibraryHome.js

@@ -9,7 +9,7 @@ export default function LibraryHome() {
         that can be used in Hypothesis front-end applications.
       </p>
 
-      <h2 className="LibraryPage__subheading">Foundations</h2>
+      <h2 className="Library__heading2">Foundations</h2>
 
       <p>
         <strong>Foundations</strong> are the core design system elements—colors,
@@ -19,15 +19,15 @@ export default function LibraryHome() {
 
       <p>They exist independently of implementation.</p>
 
-      <h2 className="LibraryPage__subheading">Patterns</h2>
+      <h2 className="Library__heading2">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>
+      <h2 className="Library__heading2">Components</h2>
 
       <p>
         <strong>Components</strong> are{' '}

src/pattern-library/components/PlaygroundApp.js

@@ -34,7 +34,7 @@ export default function PlaygroundApp({
     <activeRoute.component />
   ) : (
     <>
-      <h1 className="heading">:(</h1>
+      <h1>:(</h1>
       <p>Page not found.</p>
     </>
   );
@@ -59,13 +59,13 @@ export default function PlaygroundApp({
         </div>
         {routeGroups.map(rGroup => (
           <div key={rGroup.title}>
-            <h2>{rGroup.title}</h2>
-            <ul>
+            <h2 className="Library__heading2">{rGroup.title}</h2>
+            <ul className="PlaygroundApp__nav">
               {rGroup.routes.map(({ route, title }) => (
                 <li key={title}>
                   <Link
                     classes={classnames('hyp-link PlaygroundApp__nav-item', {
-                      'is-active': activeRoute.route === route,
+                      'is-active': activeRoute?.route === route,
                     })}
                     href={`${route}`}
                     onClick={e => navigate(e, route)}

src/pattern-library/router.js

@@ -10,7 +10,9 @@ export function useRoute(baseURL, routes) {
     route,
     routes,
   ]);
-  const title = `${routeData.title}: Hypothesis UI playground`;
+  const title = `${
+    routeData?.title ?? 'Page not found'
+  }: Hypothesis UI playground`;
 
   useEffect(() => {
     document.title = title;

styles/base/index.scss

@@ -1,5 +1,4 @@
-@use 'reset';
-@use 'elements';
+@use 'normalize.css/normalize';
 
 * {
   box-sizing: border-box;

styles/library.scss

@@ -0,0 +1,174 @@
+/**
+ * This stylesheet contains styles for pattern-library components.
+ */
+@use 'variables' as var;
+@use './mixins/layout';
+@use './mixins/atoms';
+@use './mixins/patterns/containers';
+
+.Library {
+  &__heading2 {
+    border-left: 6px solid var.$color-brand;
+    padding-left: 0.5em;
+  }
+
+  &__heading3 {
+    font-weight: normal;
+    font-style: italic;
+  }
+
+  &__heading4 {
+    font-style: italic;
+  }
+}
+
+.PlaygroundApp {
+  display: grid;
+  grid-template-areas:
+    'navigation'
+    'content';
+
+  &__content {
+    padding: 1em;
+  }
+
+  &__sidebar {
+    grid-area: 'navigation';
+    max-height: 20em;
+    overflow: scroll;
+    background-color: var.$color-grey-2;
+  }
+
+  &__sidebar-home {
+    text-align: center;
+    padding: 1em;
+  }
+
+  &__nav {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__content {
+    grid-area: 'content';
+  }
+}
+
+.PlaygroundApp__nav-item {
+  width: 100%;
+  padding: 1em 2em;
+  font-size: 16px; // TODO: variable later
+  &:hover {
+    background-color: var.$color-grey-3;
+  }
+
+  &.is-active {
+    background-color: var.$color-grey-3;
+  }
+}
+
+// Element styles
+body {
+  font-family: sans-serif;
+}
+
+@media screen and (min-width: 60em) {
+  .PlaygroundApp {
+    height: 100vh;
+    grid-template-columns: 20em auto;
+    column-gap: 1em;
+    grid-template-areas: 'navigation content';
+
+    &__sidebar {
+      max-height: none;
+    }
+  }
+}
+
+$-library-vertical-spacing: 7;
+.LibraryPage {
+  // Make sure the content width is not too terribly wide: it gets hard to read
+  max-width: 75rem;
+  @include layout.vertical-spacing($size: $-library-vertical-spacing);
+  // A little breathing room at the bottom of the page, as we don't have
+  // a footer.
+  // TODO: Consolidate padding after removal in future of `PlaygroundApp` styling
+  @include layout.padding($side: top, $size: 5);
+  @include layout.padding($side: bottom, $size: 7);
+}
+
+.LibraryPattern {
+  @include layout.vertical-spacing($size: $-library-vertical-spacing);
+  @include atoms.border(top);
+  // The following balances out spacing above and below border
+  @include layout.padding($size: $-library-vertical-spacing, $side: top);
+}
+
+.LibraryExample {
+  // Narrower screen/default shows single column
+  @include layout.vertical-spacing($size: $-library-vertical-spacing);
+}
+
+@mixin library-row {
+  // Turn off any applied vertical spacing
+  @include layout.vertical-spacing($size: 0);
+  @include layout.row;
+  @include layout.horizontal-spacing($size: 5);
+}
+
+.LibraryExample--split {
+  // Wider screen shows description and demo side-by-side (where space allows)
+  @media screen and (min-width: 60em) {
+    @include library-row;
+
+    .LibraryExample__content,
+    .LibraryExample__demos {
+      width: 50%;
+      @include layout.vertical-spacing($size: $-library-vertical-spacing);
+    }
+  }
+}
+
+.LibraryExample--wide {
+  // Show example content full width, and then a row containing demos
+  // side-by-side (where space allows)
+  .LibraryExample__demos {
+    @include layout.vertical-spacing($size: $-library-vertical-spacing);
+
+    @media screen and (min-width: 60em) {
+      @include library-row;
+    }
+  }
+}
+
+.LibraryDemo {
+  // When laid out in a row, make demos share space evenly
+  flex: 1 1 0px;
+
+  &__tabs {
+    @include layout.row;
+    @include layout.horizontal-spacing;
+    // Pull the buttons down into the top of the `container` element below,
+    // so that they look like tabs
+    margin-bottom: -1px;
+  }
+
+  &__container {
+    @include layout.padding($size: 5, $side: top);
+    @include atoms.border(top);
+    @include layout.row($align: center, $justify: center);
+    // Make the demo take up at least a minimal amount of vertical space
+    min-height: 8rem;
+  }
+
+  &__source,
+  &__demo {
+    width: 100%;
+  }
+
+  &__demo-content {
+    @include layout.row($align: center, $justify: center);
+    @include layout.horizontal-spacing;
+  }
+}