[www] Fix #6295 (#6312)

* First shot at fixing #6295 * basically `section.js` becomes `item.js`—we don't expect every top-level sidebar `yaml` item to be "just" a container for a "section" (or group) of subitems anymore * got rid of the "base directory" setting in `section-list.js` to allow linking to pages not living in the main directory associated with the current sidebar (e.g. `docs` for `doc-links.yaml`) * solving the need of being able to put a link to "Tutorial" in the sidebar of "Docs": https://github.com/gatsbyjs/gatsby/blob/ba55b66e169a16bfb3333658ad804b7ef0d3d197/www/src/data/sidebars/doc-links.yaml#L7-L8 * all links in the sidebar `yaml` files have to be explicit again, e.g. `/docs/` can't be ommitted anymore; that allows the code to be quite a bit simpler * fix false multiple active items on the "Features" page * adjust sidebar item layout a bit * restore `doc-links.yaml` to fit current docs, moved some things for testing * naming is confusing in a couple of places right now * Fix component name * Fix false multiple active items on the "Features" page * move getActiveItem from item.js to body.js and loop over all items in sidebar (as opposed to run getActiveItem on each item individually) * rename `subitems` key to `items` * Styles for miles * reduce letter spacing for sidebar „headlines“/accordion toggle buttons (for both showcase and doc sidebar) * darken sidebar horizontal rules a little * a healthy amount of whitespace fixes for the top-level-item/-section mix * quick bespoke spacing fixes for the tutorial via `ui:tutorial` in `yaml` (fixes #6193) * tutorial-style bullets for subitems everywhere * blockMarginBottom for vertical whitespace * Rename * No hover for section title when accordions are disabled * Rename * Rename * Fix "Features" scrollspy * Restore „Docs“ sidebar
gatsbyjs · Jul 6, 2018 · 2acc8b9 · 2acc8b9
1 parent a9bc9b8
commit 2acc8b9
Show file tree

Hide file tree

Showing 16 changed files with 422 additions and 291 deletions.
diff --git a/www/src/components/evaluation-table.js b/www/src/components/evaluation-table.js
@@ -124,13 +124,6 @@ class EvaluationTable extends Component {
                         display={row.node.Subcategory}
                         category={row.node.Subcategory}
                       />,
-                      <div
-                        dangerouslySetInnerHTML={{
-                          __html: `<span id="${row.node.Feature.toLowerCase()
-                            .split(` `)
-                            .join(`-`)}"></span>`,
-                        }}
-                      />,
                       <tr>
                         {headers.map((header, j) => (
                           <td
@@ -151,6 +144,13 @@ class EvaluationTable extends Component {
                               fontSize: `90%`,
                               lineHeight: `${rhythm(3 / 4)}`,
                             }}
+                            id={
+                              j === 0
+                                ? row.node.Feature.toLowerCase()
+                                    .split(` `)
+                                    .join(`-`)
+                                : false
+                            }
                             onClick={() => {
                               this.setState({
                                 [`${s},${i}`]: !showTooltip(s, i),

diff --git a/www/src/components/sidebar/section.js → www/src/components/sidebar/accordion.js b/www/src/components/sidebar/section.js → www/src/components/sidebar/accordion.js
@@ -1,8 +1,9 @@
 import React from "react"
+import hex2rgba from "hex2rgba"
 
-import getActiveItem from "../../utils/sidebar/get-active-item"
 import presets, { colors } from "../../utils/presets"
-import { scale, rhythm } from "../../utils/typography"
+import { rhythm, options, scale } from "../../utils/typography"
+import { css as glam } from "glamor"
 
 import SectionTitle from "./section-title"
 import ChevronSvg from "./chevron-svg"
@@ -57,17 +58,19 @@ const Title = ({ title }) => (
       },
     }}
   >
-    <SectionTitle>{title}</SectionTitle>
+    <SectionTitle disabled>{title}</SectionTitle>
   </div>
 )
 
-class Section extends React.Component {
+class Accordion extends React.Component {
   state = { uid: (`` + Math.random()).replace(/\D/g, ``) }
 
-  _isChildItemActive = (item, activeItemId) => {
-    if (item.subitems) {
-      const matches = item.subitems.filter(function(subitem) {
-        return subitem.link === activeItemId && item.link === subitem.parentLink
+  _isChildItemActive = (item, activeItemLink) => {
+    if (item.items) {
+      const matches = item.items.filter(function(subitem) {
+        return (
+          subitem.link === activeItemLink && item.link === subitem.parentLink
+        )
       })
 
       return matches.length >= 1
@@ -76,25 +79,40 @@ class Section extends React.Component {
 
   render() {
     const {
-      activeItemHash,
       createLink,
       location,
       onLinkClick,
       onSectionTitleClick,
-      section,
+      item: section,
       hideSectionTitle,
-      singleSection,
+      activeItemLink,
+      itemStyles,
+      isActive,
+      isFirstItem,
+      isLastItem,
     } = this.props
     const uid = `section_` + this.state.uid
-    const activeItemId = getActiveItem(section, location, activeItemHash)
     const SectionTitleComponent = section.disableAccordions
       ? Title
       : ToggleSectionButton
 
-    const isActive = this.props.isActive || section.disableAccordions
-
     return (
-      <div>
+      <div
+        className="accordion"
+        css={{
+          position: `relative`,
+          marginTop: isFirstItem ? 0 : rhythm(options.blockMarginBottom / 2),
+          marginBottom: rhythm(options.blockMarginBottom / 2),
+          "&:before": {
+            ...(!isFirstItem && { ...styles.ulHorizontalDivider }),
+          },
+          "&:after": {
+            ...(!isLastItem && { ...styles.ulHorizontalDivider }),
+            top: `auto`,
+            bottom: 0,
+          },
+        }}
+      >
         <SectionTitleComponent
           title={section.title}
           isActive={isActive}
@@ -108,93 +126,62 @@ class Section extends React.Component {
             ...styles.ul,
             position: `relative`,
             paddingBottom: rhythm(3 / 4),
-            "&:after": {
-              background: colors.ui.light,
-              bottom: 0,
-              content: ` `,
-              display: singleSection ? `none` : `block`,
-              height: 1,
-              position: `absolute`,
-              right: 0,
-              left: horizontalPadding,
-            },
             "& li": {
-              lineHeight: 1.3,
-              margin: 0,
-              paddingLeft: horizontalPadding,
-              paddingRight: horizontalPadding,
-              fontSize: scale(-1 / 10).fontSize,
-            },
-            [presets.Phablet]: {
-              "& li": {
-                fontSize: scale(-2 / 10).fontSize,
-              },
+              ...itemStyles.item,
             },
             [presets.Tablet]: {
               display: isActive ? `block` : `none`,
-              "& li": {
-                fontSize: scale(-4 / 10).fontSize,
-              },
-            },
-            [presets.Desktop]: {
-              "&:after": {
-                left: horizontalPaddingDesktop,
-              },
-              "& li": {
-                paddingLeft: horizontalPaddingDesktop,
-                paddingRight: horizontalPaddingDesktop,
-              },
             },
           }}
         >
           {section.items.map(item => (
             <li
               key={item.link}
               css={{
-                ...((item.subitems && item.link === activeItemId) ||
-                this._isChildItemActive(item, activeItemId)
-                  ? { ...styles.liActive }
+                ...((item.items && item.link === activeItemLink) ||
+                this._isChildItemActive(item, activeItemLink)
+                  ? {
+                      ...styles.liActive,
+                      paddingTop: rhythm(options.blockMarginBottom / 2),
+                    }
                   : {}),
+                ...(section.ui === `tutorial` && {
+                  ...styles.liTutorial,
+                }),
               }}
             >
               {createLink({
                 isActive:
-                  item.link === activeItemId ||
-                  this._isChildItemActive(item, activeItemId),
+                  item.link === activeItemLink ||
+                  this._isChildItemActive(item, activeItemLink),
                 item,
                 section,
                 location,
                 onLinkClick,
                 isParentOfActiveItem: this._isChildItemActive(
                   item,
-                  activeItemId
+                  activeItemLink
                 ),
               })}
-              {item.subitems && (
+              {item.items && (
                 <ul
                   css={{
                     ...styles.ul,
-                    paddingTop: rhythm(1 / 2),
-                    [presets.Desktop]: {
-                      "&& li": {
-                        paddingLeft: rhythm(3 / 4),
-                        paddingRight: rhythm(3 / 4),
-                      },
-                    },
-                    ...(section.directory === `tutorial`
-                      ? { ...styles.tutorialSubsection }
-                      : {}),
+                    ...styles.ulSubitems,
+                    ...(item.ui === `steps` && {
+                      ...styles.ulStepsUI,
+                    }),
                   }}
                 >
-                  {item.subitems.map(subitem => (
+                  {item.items.map(subitem => (
                     <li key={subitem.link}>
                       {createLink({
-                        isActive: subitem.link === activeItemId,
+                        isActive: subitem.link === activeItemLink,
                         item: subitem,
                         location,
                         onLinkClick,
                         section,
-                        isSubsectionLink: true,
+                        stepsUI: item.ui === `steps`,
                       })}
                     </li>
                   ))}
@@ -208,17 +195,34 @@ class Section extends React.Component {
   }
 }
 
-export default Section
+export default Accordion
+
+glam.insert(`
+  .accordion + .accordion {
+    margin: 0;
+  }
+
+  .item ~ .accordion {
+    margin-bottom: 0;
+  }
+
+  .accordion + .item {
+    margin-top: ${rhythm(options.blockMarginBottom / 2)};
+  }
+
+  .accordion + .accordion::before {
+    display: none;
+  }
+`)
 
 const styles = {
   ul: {
     listStyle: `none`,
     margin: 0,
-    marginBottom: rhythm(1 / 2),
     position: `relative`,
   },
-  tutorialSubsection: {
-    paddingBottom: 10,
+  ulStepsUI: {
+    paddingBottom: rhythm(options.blockMarginBottom / 2),
     "&:after": {
       background: colors.ui.bright,
       content: ` `,
@@ -256,9 +260,52 @@ const styles = {
   liActive: {
     background: colors.ui.light,
     "&&": {
-      marginTop: rhythm(1 / 2),
-      marginBottom: rhythm(1 / 2),
-      paddingTop: rhythm(1 / 2),
+      marginTop: rhythm(options.blockMarginBottom / 2),
+      marginBottom: rhythm(options.blockMarginBottom / 2),
+      paddingTop: rhythm(options.blockMarginBottom / 2),
+    },
+  },
+  ulSubitems: {
+    paddingTop: rhythm(options.blockMarginBottom / 2),
+    paddingBottom: rhythm(options.blockMarginBottom / 2),
+    [presets.Desktop]: {
+      "&& li": {
+        paddingLeft: rhythm(3 / 4),
+        paddingRight: rhythm(3 / 4),
+      },
+    },
+  },
+  ulHorizontalDivider: {
+    background: hex2rgba(colors.ui.bright, 0.3),
+    top: 0,
+    content: ` `,
+    height: 1,
+    position: `absolute`,
+    right: 0,
+    left: horizontalPadding,
+    [presets.Desktop]: {
+      left: horizontalPaddingDesktop,
+    },
+  },
+  liTutorial: {
+    "&&": {
+      marginBottom: `1rem`,
+      "& a": {
+        fontWeight: `bold`,
+        fontFamily: options.headerFontFamily.join(`,`),
+        fontSize: scale(-2 / 10).fontSize,
+      },
+      "& ul a": {
+        fontWeight: `normal`,
+        fontFamily: options.systemFontFamily.join(`,`),
+        fontSize: scale(-1 / 10).fontSize,
+        [presets.Phablet]: {
+          fontSize: scale(-2 / 10).fontSize,
+        },
+        [presets.Tablet]: {
+          fontSize: scale(-4 / 10).fontSize,
+        },
+      },
     },
   },
 }
diff --git a/www/src/components/sidebar/body.js b/www/src/components/sidebar/body.js
@@ -1,6 +1,7 @@
 import React from "react"
 
-import Section from "./section"
+import Item from "./item"
+import getActiveItem from "../../utils/sidebar/get-active-item"
 import presets, { colors } from "../../utils/presets"
 import { options, rhythm, scale } from "../../utils/typography"
 
@@ -80,26 +81,30 @@ class SidebarBody extends React.Component {
     } = this.props
     let { openSectionHash } = this.state
     const singleSection = sectionList.length === 1
+    const activeItemLink = getActiveItem(sectionList, location, activeItemHash)
 
     return (
       <div className="docSearch-sidebar">
         {sectionList.length > 1 && (
           <ExpandAllButton onClick={this._expandAll} />
         )}
-        {sectionList.map((section, index) => (
-          <Section
+        {sectionList.map((item, index) => (
+          <Item
             createLink={createLink}
-            isActive={openSectionHash[section.title] || singleSection}
+            isActive={openSectionHash[item.title] || singleSection}
             key={index}
-            name={section.title}
+            name={item.title}
             location={location}
             onLinkClick={closeParentMenu}
-            onSectionTitleClick={() => this._toggleSection(section)}
-            section={section}
+            onSectionTitleClick={() => this._toggleSection(item)}
+            item={item}
             hideSectionTitle={singleSection}
             activeItemHash={activeItemHash}
+            activeItemLink={activeItemLink}
             isScrollSync={enableScrollSync}
             singleSection={singleSection}
+            isFirstItem={index === 0}
+            isLastItem={index === sectionList.length - 1}
           />
         ))}
       </div>