From eea6ac2c8ae4d0d9300d5da5749a97262b6fc7ff Mon Sep 17 00:00:00 2001
From: Lyza Danger Gardner <lyza@lyza.com>
Date: Fri, 13 Aug 2021 13:33:30 -0400
Subject: [PATCH] Remove unused `PatternPage` component module and its styles

---
 src/pattern-library/components/PatternPage.js | 137 ------------------
 styles/pattern-library.scss                   | 104 -------------
 2 files changed, 241 deletions(-)
 delete mode 100644 src/pattern-library/components/PatternPage.js

diff --git a/src/pattern-library/components/PatternPage.js b/src/pattern-library/components/PatternPage.js
deleted file mode 100644
index 3a4f43702..000000000
--- a/src/pattern-library/components/PatternPage.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import { toChildArray } from 'preact';
-
-import { jsxToString } from '../util/jsx-to-string';
-
-/**
- * Components to render patterns and examples. Typical structure of a "Demo"
- * page might be:
- *
- * <PatternPage title="Zoo Animals">
- *   <Pattern title="Elephant">
- *     <p>Everyone loves an elephant.</p>
- *
- *     <PatternExamples title="Colored elephants">
- *       <PatternExample details="Pink elephant">
- *          <Elephant color="pink" />
- *       </PatternExample>
- *       <PatternExample details="Blue elephant">
- *          <Elephant color="blue" />
- *       </PatternExample>
- *     </PatternExamples>
- *
- *     <PatternExamples title="Patterned elephants">
- *       <PatternExample details="Spotted elephant">
- *          <Elephant variant="spotted" />
- *       </PatternExample>
- *     </PatternExamples>
- *   </Pattern>
- *
- *   <Pattern title="Monkeys">
- *     <PatternExamples>
- *       <PatternExample details="Your basic monkey">
- *         <Monkey />
- *       </PatternExample>
- *     </PatternExamples>
- *   </Pattern>
- * </PatternPage>
- */
-
-/**
- * @typedef PatternPageProps
- * @prop {import("preact").ComponentChildren} children
- * @prop {string} title
- */
-
-/**
- * Render a page of patterns
- * @param {PatternPageProps} props
- */
-export function PatternPage({ children, title }) {
-  return (
-    <section className="PatternPage">
-      <h1>{title}</h1>
-      <div className="PatternPage__content">{children}</div>
-    </section>
-  );
-}
-
-/**
- * @typedef PatternProps
- * @prop {import("preact").ComponentChildren} children
- * @prop {string} title
- */
-
-/**
- * A pattern and its examples
- * @param {PatternProps} props
- */
-export function Pattern({ children, title }) {
-  return (
-    <section className="Pattern">
-      <h2>{title}</h2>
-      {children}
-    </section>
-  );
-}
-
-/**
- * @typedef PatternExamplesProps
- * @prop {import("preact").ComponentChildren} children
- * @prop {string} [title]
- */
-
-/**
- * Tabular layout of one or more `PatternExample` components, with optional
- * title.
- *
- * @param {PatternExamplesProps} props
- */
-export function PatternExamples({ children }) {
-  return (
-    <table className="PatternExamples">
-      <tr>
-        <th>Example</th>
-        <th>Details</th>
-        <th>Source</th>
-      </tr>
-      {children}
-    </table>
-  );
-}
-
-/**
- * @typedef PatternExampleProps
- * @prop {import("preact").ComponentChildren} children - Example source
- * @prop {string} details - Details about the pattern example
- * @prop {Object} [style] - Optional additional inline styles to apply to the
- *   table cell with the rendered example
- */
-
-/**
- * Tabular layout of a single example. Will render its `children` as the
- * example, as well as the source JSX of its `children`
- *
- * @param {PatternExampleProps} props
- */
-export function PatternExample({ children, details, style = {} }) {
-  const source = toChildArray(children).map((child, idx) => {
-    return (
-      <li key={idx}>
-        <code>
-          <pre>{jsxToString(child)}</pre>
-        </code>
-      </li>
-    );
-  });
-  return (
-    <tr>
-      <td style={style}>
-        <div className="PatternExample__example">{children}</div>
-      </td>
-      <td>{details}</td>
-      <td>
-        <ul>{source}</ul>
-      </td>
-    </tr>
-  );
-}
diff --git a/styles/pattern-library.scss b/styles/pattern-library.scss
index d431988a0..c2108788f 100644
--- a/styles/pattern-library.scss
+++ b/styles/pattern-library.scss
@@ -90,68 +90,6 @@ pre {
   }
 }
 
-.PatternPage {
-  font-size: 14px;
-
-  &__content {
-    padding: 2em 0;
-  }
-}
-
-.Pattern {
-  margin: 0 0 4em 1em;
-  p {
-    margin: 1em;
-    margin-left: 0;
-  }
-
-  & > h2 {
-    margin-left: -1em;
-  }
-}
-
-.PatternExamples {
-  border: 1px solid var.$color-grey-3;
-  border-collapse: collapse;
-  width: 100%;
-  margin-top: 1em;
-  margin-bottom: 2em;
-
-  th,
-  td {
-    padding: 0.5em;
-  }
-
-  th {
-    background-color: var.$color-grey-1;
-    border-bottom: 1px solid var.$color-grey-3;
-    text-align: left;
-  }
-
-  td {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
-  tr:nth-child(even) {
-    background: var.$color-grey-0;
-  }
-
-  code {
-    color: var.$color-grey-7;
-  }
-}
-
-.PatternExample {
-  &__example {
-    display: flex;
-    align-items: center;
-    & > * + * {
-      margin-left: 1em;
-    }
-  }
-}
-
 // Element styles
 body {
   font-family: sans-serif;
@@ -170,48 +108,6 @@ body {
   }
 }
 
-// TODO This is prototype styling for a potential new component in the
-// pattern library.
-.Example {
-  margin: 1.5em 0;
-
-  p {
-    margin: 0 0 1em 0;
-  }
-
-  & > p {
-    margin: 0 0 0.5em;
-    font-size: 18px;
-  }
-
-  &__content {
-    margin-top: 2em;
-    display: flex;
-    flex-direction: column;
-
-    @media screen and (min-width: 48rem) {
-      flex-direction: row;
-    }
-  }
-
-  &__usage {
-    padding-right: 1em;
-    flex-basis: 0;
-    flex-grow: 2;
-    font-size: 15px;
-    line-height: 1.4;
-  }
-
-  &__demo {
-    flex-basis: 0;
-    flex-grow: 3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var.$color-grey-1;
-  }
-}
-
 $-library-vertical-spacing: 7;
 .LibraryPage {
   // Make sure the content width is not too terribly wide: it gets hard to read