Pattern library: Adjust margins, add Info, InfoItem components

src/pattern-library/components/Library.tsx

@@ -63,20 +63,26 @@ function Heading({
 }: LibraryHeadingProps) {
   if (level <= 2) {
     return (
-      <h2 className="text-3xl text-slate-600 font-bold" {...htmlAttributes}>
+      <h2
+        className="text-3xl text-slate-600 font-bold mb-4"
+        {...htmlAttributes}
+      >
         {children}
       </h2>
     );
   } else if (level === 3) {
     return (
-      <h3 className="text-2xl text-slate-600 font-medium" {...htmlAttributes}>
+      <h3
+        className="text-2xl text-slate-600 font-medium mb-4"
+        {...htmlAttributes}
+      >
         {children}
       </h3>
     );
   } else {
     return (
       <h4
-        className="text-lg border-b border-stone-300 text-slate-600 font-normal"
+        className="text-lg border-b border-stone-300 text-slate-600 font-normal mb-4"
         {...htmlAttributes}
       >
         {children}
@@ -113,7 +119,7 @@ function Section({
     <SectionDepthContext.Provider value={depth}>
       <section
         data-depth={depth}
-        className={classnames({
+        className={classnames('leading-relaxed', {
           'mt-8 mb-16': depth <= 2,
           'mt-8 mb-8': depth === 3,
           'mt-6 mb-8': depth >= 4,
@@ -124,7 +130,7 @@ function Section({
         {intro && (
           <div className="text-base space-y-3 leading-relaxed">{intro}</div>
         )}
-        <div className="leading-relaxed">{children}</div>
+        {children}
       </section>
     </SectionDepthContext.Provider>
   );
@@ -270,21 +276,23 @@ type LibraryStatusChipProps = {
 };
 
 /**
- * Render a little label or pill next to changelog items
+ * Render a pill to highlight a change
  */
 function StatusChip({ status }: LibraryStatusChipProps) {
   return (
     <span
-      className={classnames('rounded-md py-1', {
-        'px-2 bg-red-error text-color-text-inverted': status === 'breaking',
-        'px-2 bg-yellow-notice':
-          status === 'deprecated' || status === 'changed',
-        'font-semibold': status === 'added',
-      })}
+      className={classnames(
+        'rounded-md py-1 px-2 mr-1.5 text-sm font-semibold',
+        {
+          'bg-red-error text-color-text-inverted': status === 'breaking',
+          'bg-yellow-notice': status === 'deprecated' || status === 'changed',
+          'bg-green-success text-color-text-inverted': status === 'added',
+        }
+      )}
     >
       {status === 'breaking' && <span>Breaking</span>}
       {status === 'deprecated' && <span>Deprecated</span>}
-      {status === 'added' && <span>Added:</span>}
+      {status === 'added' && <span>Added</span>}
       {status === 'changed' && <span>Changed</span>}
     </span>
   );
@@ -311,9 +319,19 @@ export type LibraryChangelogItemProps = {
  */
 function ChangelogItem({ status, children }: LibraryChangelogItemProps) {
   return (
-    <li className="space-x-2">
-      <StatusChip status={status} />
-      <span>{children}</span>
+    <li
+      className={classnames(
+        'flex gap-x-2',
+        // "Outdent": <ul>s are indented (for readability) by 2rem. In the
+        // case of this particular <ul>, we want to regain left-hand space
+        // because the status chips are aligned to the right.
+        '-ml-8 '
+      )}
+    >
+      <div className="mt-2 min-w-[7rem] text-right">
+        <StatusChip status={status} />
+      </div>
+      <div className="grow">{children}</div>
     </li>
   );
 }
@@ -322,7 +340,7 @@ export type LibraryCodeProps = {
   /** Code content (to be rendered with syntax highlighting) */
   content: ComponentChildren;
   /** Controls relative code font size */
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md';
   /** Caption (e.g. filename, description) of code block */
   title?: ComponentChildren;
 };
@@ -337,7 +355,7 @@ function Code({ content, size, title }: LibraryCodeProps) {
   const codeMarkup = useMemo(() => jsxToHTML(content), [content]);
 
   return (
-    <figure className="space-y-2 min-h-0 h-full my-8">
+    <figure className="space-y-2 min-h-0 h-full">
       <ScrollContainer borderless>
         <div
           className={classnames(
@@ -366,7 +384,7 @@ function Code({ content, size, title }: LibraryCodeProps) {
 
 export type LibraryUsageProps = {
   componentName: string;
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md';
 };
 
 /**
@@ -411,16 +429,50 @@ function Callout({ children }: { children: ComponentChildren }) {
   );
 }
 
+/**
+ * Render a two-column grid for label-description pairs
+ */
+function Info({ children }: { children: ComponentChildren }) {
+  return (
+    <div className="grid grid-cols-[6rem_1fr] gap-x-4 gap-y-2 m-4">
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Render a "row" in an Info layout with a label and description (children)
+ */
+function InfoItem({
+  children,
+  label,
+}: {
+  children: ComponentChildren;
+  label: string;
+}) {
+  return (
+    <>
+      <div className="pt-1 text-right font-medium text-stone-600 text-sm">
+        {label}
+      </div>
+      <div>{children}</div>
+    </>
+  );
+}
+
 export default {
   Callout,
   Changelog,
   ChangelogItem,
   Code,
   Demo,
   Example,
+  Info,
+  InfoItem,
   Link,
   Page,
   Pattern,
   Section,
+  StatusChip,
   Usage,
 };