Fix some deficiencies in pattern-library layout (as quickly as feasible)

plop-templates/pattern-library-page.hbs

@@ -9,7 +9,7 @@ export default function {{name}}Page() {
         intro={<p><code>{{name}}</code> is a {{category}} component</p>}
       >
 
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="{{name}}" />
           <Library.Example>
             <Library.Demo withSource>

src/components/icons/Code.tsx

@@ -0,0 +1,23 @@
+// This file was auto-generated using scripts/generate-icons.js
+import type { JSX } from 'preact';
+
+export type CodeIconProps = JSX.SVGAttributes<SVGSVGElement>;
+
+/**
+ * Icon generated from code.svg
+ */
+export default function CodeIcon(props: CodeIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      data-component="CodeIcon"
+      {...props}
+    >
+      <path d="M8.7 15.9 4.8 12l3.9-3.9a.984.984 0 0 0 0-1.4.984.984 0 0 0-1.4 0l-4.59 4.59a.996.996 0 0 0 0 1.41l4.59 4.6c.39.39 1.01.39 1.4 0a.984.984 0 0 0 0-1.4zm6.6 0 3.9-3.9-3.9-3.9a.984.984 0 0 1 0-1.4.984.984 0 0 1 1.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6a.984.984 0 0 1-1.4 0 .984.984 0 0 1 0-1.4z" />
+    </svg>
+  );
+}

src/components/icons/index.ts

@@ -21,6 +21,7 @@ export { default as CheckIcon } from './Check';
 export { default as CheckboxIcon } from './Checkbox';
 export { default as CheckboxCheckedIcon } from './CheckboxChecked';
 export { default as CheckboxOutlineIcon } from './CheckboxOutline';
+export { default as CodeIcon } from './Code';
 export { default as CollapseIcon } from './Collapse';
 export { default as ContrastIcon } from './Contrast';
 export { default as CopyIcon } from './Copy';

src/pattern-library/components/Library.tsx

@@ -4,7 +4,7 @@ import type { ComponentChildren, JSX } from 'preact';
 import { useMemo, useState } from 'preact/hooks';
 import { Link as RouteLink } from 'wouter-preact';
 
-import { Link as UILink, Scroll, ScrollContainer } from '../../';
+import { CodeIcon, Link as UILink, Scroll, ScrollContainer } from '../../';
 import { jsxToHTML } from '../util/jsx-to-string';
 
 /**
@@ -17,7 +17,7 @@ import { jsxToHTML } from '../util/jsx-to-string';
  *   <p>Any content you want on the page.</p>
  *
  *   <Library.Section title="ComponentName">
- *     <Library.Pattern title="Usage">
+ *     <Library.Pattern>
  *       <p>The `Elephant` component is used to render information about elephant
  *       personalities.</p>
  *       <Library.Example title="Colored elephants">
@@ -48,19 +48,22 @@ export type LibraryPageProps = {
  */
 function Page({ children, intro, title }: LibraryPageProps) {
   return (
-    <section className="max-w-6xl pb-16 space-y-8 text-slate-7">
+    <section className="max-w-6xl styled-text text-stone-600">
       <div
-        className="sticky top-0 z-4 h-16 flex items-center bg-slate-0 border-b"
+        className="sticky top-0 z-4 h-16 flex items-center bg-stone-100 border-b"
         id="page-header"
       >
-        <h1 className="px-4 text-4xl font-light">{title}</h1>
+        <h1 className="px-2 text-3xl text-slate-700 font-light">{title}</h1>
+      </div>
+
+      <div className="px-2 mt-8">
+        {intro && (
+          <div className="my-8 pb-8 border-b space-y-4 font-light text-xl leading-relaxed ">
+            {intro}
+          </div>
+        )}
+        {children}
       </div>
-      {intro && (
-        <div className="styled-text px-4 text-xl font-light space-y-4 leading-relaxed">
-          {intro}
-        </div>
-      )}
-      <div className="px-4 space-y-16 styled-text">{children}</div>
     </section>
   );
 }
@@ -78,36 +81,36 @@ export type LibrarySectionProps = {
  */
 function Section({ children, id, intro, title }: LibrarySectionProps) {
   return (
-    <section className="my-16 space-y-8">
-      <h2 className="text-3xl font-bold" id={id}>
+    <section className="mt-8 mb-16">
+      <h2 className="text-3xl text-slate-600 font-bold " id={id}>
         {title}
       </h2>
       {intro && (
-        <div className="styled-text text-base space-y-3 leading-relaxed">
-          {intro}
-        </div>
+        <div className="text-base space-y-3 leading-relaxed">{intro}</div>
       )}
-      <div className="space-y-16 styled-text">{children}</div>
+      <div className="leading-relaxed">{children}</div>
     </section>
   );
 }
 
 export type LibraryPatternProps = {
   children?: ComponentChildren;
   id?: string;
-  title: string;
+  title?: string;
 };
 
 /**
  * Render a second-level section. e.g. Usage, Props, Status
  */
 function Pattern({ children, id, title }: LibraryPatternProps) {
   return (
-    <section className="space-y-8">
-      <h3 className="text-2xl text-slate-7" id={id}>
-        {title}
-      </h3>
-      <div className="space-y-8 px-4">{children}</div>
+    <section className="mt-8 mb-12">
+      {title && (
+        <h3 className="text-2xl text-slate-600 font-medium" id={id}>
+          {title}
+        </h3>
+      )}
+      <div className="space-y-8">{children}</div>
     </section>
   );
 }
@@ -124,43 +127,20 @@ export type LibraryExampleProps = {
  */
 function Example({ children, id, title }: LibraryExampleProps) {
   return (
-    <div className="space-y-6">
+    <div className="mt-6">
       {title && (
-        <h4 className="text-xl text-slate-9 font-light" id={id}>
+        <h4
+          className="border-b border-stone-300 text-lg text-slate-600 font-normal"
+          id={id}
+        >
           {title}
         </h4>
       )}
-      <div className="space-y-6 px-4">{children}</div>
+      <div className="px-4">{children}</div>
     </div>
   );
 }
 
-type DemoButtonProps = {
-  children: ComponentChildren;
-  onClick: () => void;
-  pressed: boolean;
-};
-/**
- * Render a button to swap between demo and source views in a Demo
- */
-function DemoButton({ children, onClick, pressed }: DemoButtonProps) {
-  return (
-    <button
-      className={classnames(
-        'flex items-center gap-x-1.5 rounded-sm shadow py-1 px-2',
-        'text-sm text-color-text-light hover:bg-grey-0 hover:text-grey-7 hover:shadow-md',
-        {
-          'bg-grey-2': pressed,
-        }
-      )}
-      onClick={onClick}
-      aria-pressed={pressed}
-    >
-      {children}
-    </button>
-  );
-}
-
 export type LibraryDemoProps = {
   children: ComponentChildren;
   /** Extra CSS classes for the demo content's immediate parent container */
@@ -202,33 +182,45 @@ function Demo({
     );
   });
   return (
-    <div className="space-y-2">
-      <div className="flex items-center">
-        <div className="py-2 grow">
-          <h5 className="text-lg italic text-slate-7 font-light">{title}</h5>
+    <div className="my-8 p-2 space-y-1">
+      <div className="flex items-center px-2">
+        <div className="py-1 grow">
+          <h5 className="text-base text-base leading-none font-semibold text-slate-600">
+            {title}
+          </h5>
         </div>
         <div className="flex flex-row items-center justify-end gap-x-4">
           {withSource && (
-            <>
-              <DemoButton
-                onClick={() => setVisibleTab('demo')}
-                pressed={visibleTab === 'demo'}
-              >
-                Demo
-              </DemoButton>
-              <DemoButton
-                onClick={() => setVisibleTab('source')}
-                pressed={visibleTab === 'source'}
-              >
-                Source
-              </DemoButton>
-            </>
+            <button
+              className={classnames(
+                'flex items-center gap-x-1.5 py-1 px-2 rounded-md',
+                'text-sm text-slate-500',
+                'hover:bg-slate-50 border hover:border-slate-300',
+                {
+                  'bg-slate-100 border border-slate-400 shadow-inner':
+                    visibleTab === 'source',
+                  'border-slate-100 shadow': visibleTab !== 'source',
+                }
+              )}
+              aria-pressed={visibleTab === 'source'}
+              onClick={() =>
+                setVisibleTab(prevState =>
+                  prevState === 'source' ? 'demo' : 'source'
+                )
+              }
+              title="Toggle view-source panel"
+            >
+              <CodeIcon className="w-[18px] h-[18px]" />
+            </button>
           )}
         </div>
       </div>
-      <div className="bg-slate-0 p-2 rounded-md unstyled-text">
+      <div className="p-2 unstyled-text">
         {visibleTab === 'demo' && (
-          <div className="w-full bg-white p-8 rounded-md" style={style}>
+          <div
+            className="w-full p-8 rounded-md border border-stone-300 bg-slate-50 rounded-md"
+            style={style}
+          >
             <div
               className={classnames(
                 'h-full flex flex-row items-center justify-center gap-2',
@@ -310,7 +302,7 @@ export type LibraryCodeProps = {
   /** Controls relative code font size */
   size?: 'sm' | 'md' | 'lg';
   /** Caption (e.g. filename, description) of code block */
-  title?: string;
+  title?: ComponentChildren;
 };
 
 /**
@@ -323,7 +315,7 @@ function Code({ content, size, title }: LibraryCodeProps) {
   const codeMarkup = useMemo(() => jsxToHTML(content), [content]);
 
   return (
-    <figure className="space-y-2 min-h-0 h-full">
+    <figure className="space-y-2 min-h-0 h-full my-8">
       <ScrollContainer borderless>
         <div
           className={classnames(

src/pattern-library/components/PlaygroundApp.tsx

@@ -20,7 +20,11 @@ import Library from './Library';
  * Header for a primary section of nav
  */
 function NavHeader({ children }: { children: ComponentChildren }) {
-  return <h2 className="border-b px-2 py-1 font-light text-lg">{children}</h2>;
+  return (
+    <h2 className="text-slate-800 border-b border-stone-300 px-2 py-1 font-light text-lg">
+      {children}
+    </h2>
+  );
 }
 
 /**
@@ -35,7 +39,7 @@ function NavSection({
 }) {
   return (
     <div className="space-y-4">
-      <h3 className="mx-2 text-slate-7 font-semibold text-sm">{title}</h3>
+      <h3 className="mx-2 text-slate-700 font-semibold text-sm">{title}</h3>
       {children}
     </div>
   );
@@ -46,7 +50,7 @@ function NavSection({
  */
 function NavList({ children }: { children: ComponentChildren }) {
   return (
-    <ul className="ml-2 space-y-2 border-l-2 border-slate-0">{children}</ul>
+    <ul className="ml-2 space-y-2 border-l-2 border-stone-200">{children}</ul>
   );
 }
 
@@ -158,7 +162,7 @@ export default function PlaygroundApp({
   >;
   return (
     <Router base={baseURL}>
-      <main className="max-w-[1200px] mx-auto">
+      <main className="max-w-[1250px] mx-auto">
         <div className="md:grid md:grid-cols-[2fr_5fr]">
           <div className="md:h-screen md:sticky md:top-0 overflow-scroll">
             <div className="md:sticky md:top-0 h-16 px-6 flex items-center bg-slate-0 border-b">

src/pattern-library/components/patterns/ColorsPage.tsx

@@ -71,27 +71,35 @@ export default function ColorsPage() {
   return (
     <Library.Page title="Colors">
       <Library.Pattern title="Brand red">
-        <div className="flex flex-row flex-wrap gap-4">{brandExamples}</div>
+        <div className="my-4 flex flex-row flex-wrap gap-4">
+          {brandExamples}
+        </div>
       </Library.Pattern>
 
       <Library.Pattern title="Greys">
-        <div className="flex flex-row flex-wrap gap-4">{greyExamples}</div>
+        <div className="my-4 flex flex-row flex-wrap gap-4">{greyExamples}</div>
       </Library.Pattern>
 
       <Library.Pattern title="Slates">
         <p>
           These slightly blue greys may be used sparingly to help with
           differentiation and clarity within interfaces.
         </p>
-        <div className="flex flex-row flex-wrap gap-4">{slateExamples}</div>
+        <div className="my-4 flex flex-row flex-wrap gap-4">
+          {slateExamples}
+        </div>
       </Library.Pattern>
 
       <Library.Pattern title="State indicators">
-        <div className="flex flex-row flex-wrap gap-4">{stateExamples}</div>
+        <div className="my-4 flex flex-row flex-wrap gap-4">
+          {stateExamples}
+        </div>
       </Library.Pattern>
 
       <Library.Pattern title="Focus indicators">
-        <div className="flex flex-row flex-wrap gap-4">{focusExamples}</div>
+        <div className="my-4 flex flex-row flex-wrap gap-4">
+          {focusExamples}
+        </div>
       </Library.Pattern>
     </Library.Page>
   );

src/pattern-library/components/patterns/data/AspectRatioPage.tsx

@@ -13,7 +13,7 @@ export default function AspectRatioPage() {
       }
     >
       <Library.Section title="AspectRatio">
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="AspectRatio" />
           <Library.Example>
             <Library.Demo

src/pattern-library/components/patterns/data/DataTablePage.tsx

@@ -31,7 +31,7 @@ export default function DataTablePage() {
       }
     >
       <Library.Section title="DataTable">
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="DataTable" />
 
           <Library.Example title="Basic DataTable">

src/pattern-library/components/patterns/data/IconsPage.tsx

@@ -11,7 +11,7 @@ export default function IconsPage() {
       }
     >
       <Library.Section title="Icon components">
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="CancelIcon" />
           <Library.Example>
             <Library.Demo title="Usage example with CancelIcon" withSource>
@@ -21,7 +21,7 @@ export default function IconsPage() {
         </Library.Pattern>
 
         <Library.Pattern title="Available icon components">
-          <div className="grid grid-cols-4 gap-6">
+          <div className="my-4 grid grid-cols-4 gap-6">
             {(Object.keys(Icons) as Array<keyof typeof Icons>).map(iconName => {
               const IconComponent = Icons[iconName];
               return (