From 1c2ae47dce798bfe56d5a8641864ce3ca30814ac Mon Sep 17 00:00:00 2001
From: Scott Weber <scott.weber@adhocteam.us>
Date: Thu, 4 Aug 2022 19:41:36 -0400
Subject: [PATCH] [NO-TICKET] Doc site design updates (#2019)

* Update table of contents spacing

* Update doc site header and left nav header

* Update style and prop tables

* Set the font size for h4s too

* Fix a problem with a markdown header that I fixed before but probably got clobbered

Co-authored-by: Patrick Wolfert <patrick.wolfert@adhocteam.us>
---
 .../src/components/ComponentThemeOptions.tsx  |  2 +-
 .../docs/src/components/DocSiteNavigation.tsx |  9 ++++--
 packages/docs/src/components/PageHeader.tsx   |  6 ++--
 packages/docs/src/components/PropTable.tsx    |  2 +-
 .../docs/src/components/TableOfContents.tsx   |  2 +-
 .../styles/components/tableOfContents.scss    |  4 ++-
 packages/docs/src/styles/pages/layout.scss    | 29 +++++++++++++++++++
 7 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/packages/docs/src/components/ComponentThemeOptions.tsx b/packages/docs/src/components/ComponentThemeOptions.tsx
index 659a15f164..d16b574000 100644
--- a/packages/docs/src/components/ComponentThemeOptions.tsx
+++ b/packages/docs/src/components/ComponentThemeOptions.tsx
@@ -66,7 +66,7 @@ const ComponentThemeOptions = ({ theme, componentname }: ComponentThemeOptionsPr
   componentname = componentname.toLowerCase();
   const currentTheme = componentThemes[theme];
   const componentOptions = (
-    <Table scrollable stackable>
+    <Table scrollable stackable borderless>
       <TableCaption className="ds-u-visibility--screen-reader">
         Sass variables for {componentname}{' '}
       </TableCaption>
diff --git a/packages/docs/src/components/DocSiteNavigation.tsx b/packages/docs/src/components/DocSiteNavigation.tsx
index ef98bd3cd4..97638fde00 100644
--- a/packages/docs/src/components/DocSiteNavigation.tsx
+++ b/packages/docs/src/components/DocSiteNavigation.tsx
@@ -95,9 +95,12 @@ const DocSiteNavigation = ({ location }: DocSiteNavProps) => {
 
   return (
     <div
-      className={classnames('ds-u-padding--0 ds-u-md-padding--2 c-navigation', {
-        'c-navigation--open': isMobile && isMobileNavOpen,
-      })}
+      className={classnames(
+        'ds-u-padding--0 ds-u-md-padding--2 ds-u-md-padding-top--4 c-navigation',
+        {
+          'c-navigation--open': isMobile && isMobileNavOpen,
+        }
+      )}
     >
       <header className="c-navigation__header">
         <Button
diff --git a/packages/docs/src/components/PageHeader.tsx b/packages/docs/src/components/PageHeader.tsx
index f8475dc46a..e4d585c354 100644
--- a/packages/docs/src/components/PageHeader.tsx
+++ b/packages/docs/src/components/PageHeader.tsx
@@ -23,9 +23,9 @@ const PageHeader = ({ frontmatter = { title: '' }, theme }: PageHeaderProps) =>
   const storyId = themeLinks?.storybookLink || core?.storybookLink || null;
 
   return (
-    <header className="ds-u-padding--3 ds-u-sm-padding--6 ds-u-display--block">
-      <h1 className="ds-display">{title}</h1>
-      {intro && <p className="ds-u-font-size--lg ds-u-measure--base">{intro}</p>}
+    <header className="ds-u-padding--3 ds-u-sm-padding-x--6 ds-u-sm-padding-bottom--7 ds-u-sm-padding-top--2">
+      <h1 className="ds-text-heading--4xl">{title}</h1>
+      {intro && <p className="ds-u-font-size--lg ds-u-measure--base ds-u-margin-top--1">{intro}</p>}
       <div>
         {status && (
           <Badge variation="warn" className="ds-u-margin-right--2 ds-u-text-transform--capitalize">
diff --git a/packages/docs/src/components/PropTable.tsx b/packages/docs/src/components/PropTable.tsx
index 12a8d884ed..f9a0736f5e 100644
--- a/packages/docs/src/components/PropTable.tsx
+++ b/packages/docs/src/components/PropTable.tsx
@@ -86,7 +86,7 @@ const PropTable = ({ componentName }: PropTableProps, theme: string) => {
   );
 
   return (
-    <Table className="c-prop-table" stackable scrollable compact>
+    <Table className="c-prop-table" stackable scrollable borderless>
       <TableCaption>
         <span className="ds-u-visibility--screen-reader">React Properties Documentation</span>
       </TableCaption>
diff --git a/packages/docs/src/components/TableOfContents.tsx b/packages/docs/src/components/TableOfContents.tsx
index ab52b7730a..aa440ea7d0 100644
--- a/packages/docs/src/components/TableOfContents.tsx
+++ b/packages/docs/src/components/TableOfContents.tsx
@@ -23,7 +23,7 @@ export const TableOfContentsList = ({ items, level, className = '' }: TableOfCon
       : 'c-table-of-contents__list-item';
 
   return (
-    <ul className={`c-table-of-contents__list ds-u-padding-right--0 ${className}`}>
+    <ul className={`c-table-of-contents__list ${className}`}>
       {items.map((item) => (
         <li key={item.title} className={itemClasses}>
           <a href={item.url}>{item.title}</a>
diff --git a/packages/docs/src/styles/components/tableOfContents.scss b/packages/docs/src/styles/components/tableOfContents.scss
index 48fec8a3e5..5cdc6df7c9 100644
--- a/packages/docs/src/styles/components/tableOfContents.scss
+++ b/packages/docs/src/styles/components/tableOfContents.scss
@@ -11,12 +11,14 @@
 .c-table-of-contents__list,
 .c-table-of-contents-mobile__list {
   list-style-type: none;
+  padding-left: $spacer-1;
+  margin-top: 0;
 }
 
 .c-table-of-contents__list .c-table-of-contents__list,
 .c-table-of-contents-mobile__list .c-table-of-contents-mobile__list {
   list-style-type: '- ';
-  padding-left: $spacer-2;
+  padding-left: $spacer-3;
 }
 
 .c-table-of-contents-mobile {
diff --git a/packages/docs/src/styles/pages/layout.scss b/packages/docs/src/styles/pages/layout.scss
index 43e9c5eade..f64fd754bb 100644
--- a/packages/docs/src/styles/pages/layout.scss
+++ b/packages/docs/src/styles/pages/layout.scss
@@ -27,6 +27,16 @@ body {
     & > :nth-child(2) {
       margin-top: 0;
     }
+    > h2 {
+      font-size: $font-size-3xl;
+      font-weight: normal;
+    }
+    > h3 {
+      font-size: $font-size-2xl;
+    }
+    > h4 {
+      font-size: $font-size-xl;
+    }
   }
 }
 
@@ -37,6 +47,25 @@ body {
   }
 }
 
+.page-content__content {
+  > .ds-c-table,
+  .c-configuration-options .ds-c-table {
+    width: 100%;
+  }
+  & .c-configuration-options th,
+  .c-prop-table th {
+    background-color: $color-gray-lightest;
+  }
+  & .c-configuration-options td,
+  .c-prop-table td {
+    border-color: $color-gray-lighter;
+  }
+  & .c-configuration-options p,
+  .c-prop-table p {
+    font-size: $font-size-sm;
+  }
+}
+
 blockquote {
   background-color: $color-gray-lightest;
   border-left: 4px solid $color-gray-light;