Simplify "Usage" formatting

hypothesis · Apr 21, 2023 · 319934d · 319934d
1 parent 14cc125
commit 319934d
Show file tree

Hide file tree

Showing 23 changed files with 37 additions and 37 deletions.
diff --git a/plop-templates/pattern-library-page.hbs b/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>

diff --git a/src/pattern-library/components/Library.tsx b/src/pattern-library/components/Library.tsx
@@ -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">
@@ -302,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;
 };
 
 /**

diff --git a/src/pattern-library/components/patterns/data/AspectRatioPage.tsx b/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

diff --git a/src/pattern-library/components/patterns/data/DataTablePage.tsx b/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">

diff --git a/src/pattern-library/components/patterns/data/IconsPage.tsx b/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>

diff --git a/src/pattern-library/components/patterns/data/ScrollBoxPage.tsx b/src/pattern-library/components/patterns/data/ScrollBoxPage.tsx
@@ -28,7 +28,7 @@ export default function ScrollBoxPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="ScrollBox" />
           <Library.Example title="Basic ScrollBox">
             <Library.Demo withSource>
@@ -110,7 +110,7 @@ export default function ScrollBoxPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Scroll" />
           <Library.Example>
             <Library.Demo title="Using Scroll by itself" withSource>
@@ -166,7 +166,7 @@ export default function ScrollBoxPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="ScrollContent" />
           <Library.Example>
             <Library.Demo title="Scroll with ScrollContent" withSource>
@@ -201,7 +201,7 @@ export default function ScrollBoxPage() {
           </>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="ScrollContainer" />
 
           <Library.Example>

diff --git a/src/pattern-library/components/patterns/data/TablePage.tsx b/src/pattern-library/components/patterns/data/TablePage.tsx
@@ -21,7 +21,7 @@ export default function TablePage() {
       }
     >
       <Library.Section title="Table">
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage
             componentName="Table, TableHead, TableBody, TableRow, TableCell"
             size="sm"

diff --git a/src/pattern-library/components/patterns/data/ThumbnailPage.tsx b/src/pattern-library/components/patterns/data/ThumbnailPage.tsx
@@ -21,7 +21,7 @@ export default function ThumbnailPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Thumbnail" />
           <Library.Example>
             <p>

diff --git a/src/pattern-library/components/patterns/feedback/DialogPage.tsx b/src/pattern-library/components/patterns/feedback/DialogPage.tsx
@@ -181,7 +181,7 @@ export default function DialogPage() {
             </strong>
           </p>
         </Library.Pattern>
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Dialog" />
           <Library.Demo title="Basic Dialog" withSource>
             <Dialog_
@@ -442,7 +442,7 @@ export default function DialogPage() {
             </Library.Changelog>
           </Library.Example>
         </Library.Pattern>
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="ModalDialog" />
 
           <Library.Demo title="Basic ModalDialog" withSource>

diff --git a/src/pattern-library/components/patterns/feedback/ModalPage.tsx b/src/pattern-library/components/patterns/feedback/ModalPage.tsx
@@ -122,7 +122,7 @@ export default function ModalPage() {
             </Library.ChangelogItem>
           </Library.Changelog>
         </Library.Pattern>
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Modal" />
           <Library.Demo title="Basic modal" withSource>
             <Modal_

diff --git a/src/pattern-library/components/patterns/feedback/SpinnerPage.tsx b/src/pattern-library/components/patterns/feedback/SpinnerPage.tsx
@@ -30,7 +30,7 @@ export default function SpinnerPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Spinner" />
           <Library.Example>
             <Library.Demo withSource>
@@ -77,7 +77,7 @@ export default function SpinnerPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="SpinnerOverlay" />
           <Library.Example>
             <Library.Demo>

diff --git a/src/pattern-library/components/patterns/input/ButtonPage.tsx b/src/pattern-library/components/patterns/input/ButtonPage.tsx
@@ -29,7 +29,7 @@ export default function ButtonPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Button" />
           <Library.Example>
             <Library.Demo title="Basic Button" withSource>
@@ -135,7 +135,7 @@ export default function ButtonPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="IconButton" />
           <Library.Example>
             <Library.Demo title="Basic IconButton" withSource>
@@ -314,7 +314,7 @@ export default function ButtonPage() {
           </>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="ButtonBase" />
 
           <Library.Example>

diff --git a/src/pattern-library/components/patterns/input/CheckboxPage.tsx b/src/pattern-library/components/patterns/input/CheckboxPage.tsx
@@ -19,7 +19,7 @@ export default function CheckboxPage() {
         </p>
       }
     >
-      <Library.Pattern title="Usage">
+      <Library.Pattern>
         <Library.Usage componentName="Checkbox" />
         <Library.Example>
           <Library.Demo title="Basic Checkbox" withSource>

diff --git a/src/pattern-library/components/patterns/input/InputGroupPage.tsx b/src/pattern-library/components/patterns/input/InputGroupPage.tsx
@@ -21,7 +21,7 @@ export default function InputGroupPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="InputGroup" />
           <Library.Example>
             <Library.Demo

diff --git a/src/pattern-library/components/patterns/input/InputPage.tsx b/src/pattern-library/components/patterns/input/InputPage.tsx
@@ -20,7 +20,7 @@ export default function InputPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Input" />
 
           <Library.Example>

diff --git a/src/pattern-library/components/patterns/input/SelectPage.tsx b/src/pattern-library/components/patterns/input/SelectPage.tsx
@@ -42,7 +42,7 @@ export default function SelectPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Select" />
 
           <Library.Example>

diff --git a/src/pattern-library/components/patterns/layout/CardPage.tsx b/src/pattern-library/components/patterns/layout/CardPage.tsx
@@ -29,7 +29,7 @@ export default function CardPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Card, CardContent" />
           <Library.Example>
             <Library.Demo title="Basic Card with CardContent" withSource>
@@ -121,7 +121,7 @@ export default function CardPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Card, CardContent" />
 
           <Library.Example title="Laying out Card content">
@@ -207,7 +207,7 @@ export default function CardPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage
             componentName="Card, CardContent, CardHeader"
             size="sm"
@@ -285,7 +285,7 @@ export default function CardPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage
             componentName="Card, CardContent, CardHeader, CardTitle"
             size="sm"
@@ -317,7 +317,7 @@ export default function CardPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage
             componentName="Card, CardContent, CardHeader, CardActions"
             size="sm"

diff --git a/src/pattern-library/components/patterns/layout/OverlayPage.tsx b/src/pattern-library/components/patterns/layout/OverlayPage.tsx
@@ -32,7 +32,7 @@ export default function OverlayPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Overlay" />
           <Library.Example>
             <Library.Demo title="Basic Overlay" withSource>

diff --git a/src/pattern-library/components/patterns/layout/PanelPage.tsx b/src/pattern-library/components/patterns/layout/PanelPage.tsx
@@ -23,7 +23,7 @@ export default function PanelPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Panel" />
           <Library.Example>
             <p>

diff --git a/src/pattern-library/components/patterns/navigation/LinkButtonPage.tsx b/src/pattern-library/components/patterns/navigation/LinkButtonPage.tsx
@@ -20,7 +20,7 @@ export default function LinkButtonPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="LinkButton" />
           <Library.Example>
             <Library.Demo title="Basic LinkButton" withSource>

diff --git a/src/pattern-library/components/patterns/navigation/LinkPage.tsx b/src/pattern-library/components/patterns/navigation/LinkPage.tsx
@@ -21,7 +21,7 @@ export default function LinkPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Link" />
           <Library.Example>
             <Library.Demo title="Basic Link" withSource>
@@ -108,7 +108,7 @@ export default function LinkPage() {
           </>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="LinkBase" />
 
           <Library.Example>

diff --git a/src/pattern-library/components/patterns/navigation/PointerButtonPage.tsx b/src/pattern-library/components/patterns/navigation/PointerButtonPage.tsx
@@ -30,7 +30,7 @@ export default function PointerButtonPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="PointerButton" />
           <Library.Example>
             <Library.Demo

diff --git a/src/pattern-library/components/patterns/navigation/TabPage.tsx b/src/pattern-library/components/patterns/navigation/TabPage.tsx
@@ -36,7 +36,7 @@ export default function TabPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Tab" />
           <Library.Example>
             <Library.Demo title="Basic (non-interactive) example" withSource>
@@ -255,7 +255,7 @@ export default function TabPage() {
             <code>TabList</code> is a new component.
           </p>
         </Library.Pattern>
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="TabList" />
           <Library.Example>
             <p>