fix org content pagesection padding (#60)

gatsby-theme-patternfly-org/templates/mdx.css

@@ -1,6 +1,10 @@
 .ws-section {
   background-color: #fafafa;
-  padding: 32px 64px 64px;
+  padding: 16px 64px 64px;
+}
+
+.ws-section:first-child {
+  padding-top: 32px;
 }
 
 @media (max-width: 767px) {

gatsby-theme-patternfly-org/templates/mdx.js

@@ -35,7 +35,7 @@ const getWarning = state => {
 }
 
 export default ({ data, location, pageContext }) => {
-  const { cssPrefix, hideTOC, experimentalStage, optIn, hideDarkMode } = data.doc.frontmatter;
+  const { cssPrefix, hideTOC, experimentalStage, optIn, hideDarkMode, showTitle } = data.doc.frontmatter;
   const { componentName, navSection } = data.doc.fields;
   const { title, source, tableOfContents, htmlExamples, propComponents = [''] } = pageContext;
   const props = data.props && data.props.nodes && propComponents
@@ -65,6 +65,12 @@ export default ({ data, location, pageContext }) => {
 
   return (
     <SideNavLayout location={location} context={source} parityComponent={parityComponent}>
+      {/* TODO: Remove this hack for content components who we want to hide the TOC, but show the title */}
+      {showTitle && (
+        <PageSection className="ws-section" style={{ paddingBottom: 0 }}>
+          <Title size="4xl" className="ws-page-title">{title}</Title>
+        </PageSection>
+      )}
       {!hideTOC && (
         <PageSection className="ws-section" style={{ paddingBottom: 0 }}>
           <Title size="md" className="ws-framework-title">
@@ -168,6 +174,7 @@ export const pageQuery = graphql`
         optIn
         experimentalStage
         hideDarkMode
+        showTitle
       }
       fields {
         navSection

patternfly-org-demo/src/content/contribute/about.md

@@ -1,9 +1,10 @@
 ---
 title: About
 hideTOC: true
+showTitle: true
 ---
 
-# About
+
 The PatternFly open source community depends on contributions to help our design system grow and evolve. We encourage everyone, regardless of background, to make suggestions for enhancements, contribute new design patterns and ideas, help identify bugs in code, and more. With your help, we can stay on top of the latest and greatest implementation solutions. Continue reading to learn how you can start contributing today.
 
 ## Process

patternfly-org-demo/src/content/contribute/designers.md

@@ -1,6 +1,7 @@
 ---
 title: Design
 hideTOC: true
+showTitle: true
 ---
 
 ## Ways to contribute

patternfly-org-demo/src/content/contribute/developers.md

@@ -1,9 +1,10 @@
 ---
 title: Develop
 hideTOC: true
+showTitle: true
 ---
 
-# Develop
+
 ## Ways to contribute
 1. Pick an open issue in the [pf-next repo](https://github.com/patternfly/patternfly-next/issues) and make a comment that you would like to contribute
 2. Pick up open issue in [pf-react](https://github.com/patternfly/patternfly-react/issues) backlog

patternfly-org-demo/src/content/design-guidelines/content/grammar-and-terminology.md

@@ -2,8 +2,9 @@
 title: Style guide
 section: content
 hideTOC: true
+showTitle: true
 ---
-# Style guide
+
 ## Common terminology
 
 | Term | Usage | Opposite | Notes |

patternfly-org-demo/src/content/design-guidelines/content/voice-and-tone.md

@@ -2,8 +2,9 @@
 title: Voice
 section: content
 hideTOC: true
+showTitle: true
 ---
-# Voice
+
 To quote Red Hat’s brand standards, “The more you write, the less they’ll read.” Keep things clear, simple, and action-focused to make your content easy to understand, scan, and act on.
 
 **General principles**

patternfly-org-demo/src/content/design-guidelines/content/writing.md

@@ -2,8 +2,9 @@
 title: Writing
 section: content
 hideTOC: true
+showTitle: true
 ---
-# Writing
+
 The words we use in our products are just as important as the components or layouts. The right words can drive better design decisions and guide users to succeed.
 
 Our content standards help you use content design and strategy to build better experiences.

patternfly-org-demo/src/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md

@@ -2,14 +2,15 @@
 title: Colors for charts
 section: styles
 hideTOC: true
+showTitle: true
 ---
 
 import theSystem from './thesystem.gif';
 import oneFamily from './onefamily.gif';
 import { Alert, Gallery, GalleryItem, Grid, GridItem } from '@patternfly/react-core';
 import './colors-for-charts.css';
 
-# Colors for charts
+
 ## Chart colors
 
 Colors for charts includes a recommended set of colors proposed for bar charts, donut charts and pie charts. There are six base colors (blue to orange) that the system is built on. Each base color has its own color family, which includes lighter and darker hues of the base. These families use a monochromatic color order. They are organized in a way that increases contrast while still looking extremely visually appealing. The variation of colors will depend on the type and amount of data at hand.

patternfly-org-demo/src/content/design-guidelines/styles/colors/colors.md

@@ -2,12 +2,13 @@
 title: Colors
 section: styles
 hideTOC: true
+showTitle: true
 ---
 import { Alert, Gallery, GalleryItem, Grid, GridItem } from '@patternfly/react-core';
 import { Link } from 'gatsby';
 import './colors.css';
 
-# Colors
+
 ## Theme colors
 
 <Grid className="colors-theme--light grid-modifier" gutter="md">

patternfly-org-demo/src/content/design-guidelines/styles/icons/icons.md

@@ -2,12 +2,13 @@
 title: Icons
 section: styles
 hideTOC: true
+showTitle: true
 ---
 import { Button, Grid, GridItem } from '@patternfly/react-core';
 import { CheckCircleIcon, TimesCircleIcon } from '@patternfly/react-icons';
 import Icons from 'gatsby-theme-patternfly-org/components/icons';
 
-# Icons
+
 If you're a developer, [check out our getting started page](/get-started/developers#using-styles) to learn more about how to get and use our icon set.
 
 ## All icons

patternfly-org-demo/src/content/design-guidelines/styles/spacers/spacers.md

@@ -2,11 +2,12 @@
 title: Spacers
 section: styles
 hideTOC: true
+showTitle: true
 ---
 import { Link } from 'gatsby';
 import './spacers.css';
 
-# Spacers
+
 We use spacers to define fixed amounts of space between elements. Spacers make it easy for designers to maintain consistency across screens. Since the same spacer sizes and values are built into the PatternFly codebase, spacers also majorly simplify the design handoff between designers and developers.
 
 <div class="pf-u-display-flex pf-u-flex-direction-row pf-u-mb-lg">

patternfly-org-demo/src/content/design-guidelines/styles/typography/typography.md

@@ -2,6 +2,7 @@
 title: Typography
 section: styles
 hideTOC: true
+showTitle: true
 ---
 
 import { Button, Grid, GridItem, Alert } from '@patternfly/react-core';
@@ -12,7 +13,7 @@ import incorrect from './typography_incorrect_spacing.png';
 import { Link } from 'gatsby';
 import './typography.css';
 
-# Typograhpy
+
 <Alert
   variant="info"
   title="Opt-in feature"

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/about-modal/about-modal.md

@@ -2,8 +2,9 @@
 title: About modal
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# About modal
+
 The about modal stores the version number(s) of the application as well as any appropriate legal text.
 
 ## Primary elements

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/alerts-and-notifications/alerts-and-notifications.md

@@ -2,8 +2,9 @@
 title: Alerts and notifications
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Alerts and notifications
+
 Alerts are used when the system wants to notify the user about some status or other event. These guidelines talk about how to properly use different types of alerts in your designs.
 
 ## Elements

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/bulk-selection/bulk-selection.md

@@ -2,9 +2,10 @@
 title: Bulk selection
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
 
-# Bulk selection
+
 
 Use a bulk selection pattern when you want to select or deselect multiple items in a content view (list, table, or card grid). The bulk selector uses a Split button [link] component to control selection from the Toolbar [link]. Besides controlling selection, the bulk selector reflects the selection status of the related component (partially selected, all items selected, or no items selected).
 

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/buttons-and-links/buttons-and-links.md

@@ -2,8 +2,9 @@
 title: Buttons and links
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Buttons and links
+
 Buttons communicate and trigger actions a user can take in an application or website. Links are used to take users somewhere, like another page inside of a web application, or an external site such as help or documentation.  
 
 Technically, a button represents a box area that can be clicked or tapped, while a link represents text that can be clicked or tapped.

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/card-view/card-view.md

@@ -2,8 +2,9 @@
 title: Card view
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Card view
+
 Card view organizes content into a grid of cards. It is useful for displaying a small to moderate amount of content in a way that is not visually overwhelming.
 ![card-view--desktop](./img/card-view-desktop.png)
 

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/charts/charts.md

@@ -2,8 +2,9 @@
 title: Charts
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Charts
+
 _Charts are only available in React_
 
 Use charts to visualize data in an application. The type of chart you use will depend on your use case and the type of data you need to display.

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/data-input/data-input.md

@@ -2,8 +2,9 @@
 title: Data input
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Data input
+
 Data input controls allow the user to provide information by selecting from a known set of options or a constrained format/value range.  
 
 **Selection controls:** [Checkboxes](#checkbox), [Radio buttons](#radio-buttons), [Select lists](#select-lists), [Switch](#switch)

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/embedded-assistance/embedded-assistance.md

@@ -2,8 +2,9 @@
 title: Embedded assistance
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Embedded assistance
+
 Use embedded assistance to provide additional help for users in context. Embedded assistance should be provided in a way that enables the user to find the information they need at the moment they need it while completing a particular step or task.
 
 ## Principles

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/empty-state/empty-state.md

@@ -2,8 +2,9 @@
 title: Empty state
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Empty state
+
 Use an empty state to educate users and guide them with positive and proactive next steps in any situation where there is no data or information to display.
 
 ## Elements

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/filters/filters.md

@@ -2,8 +2,9 @@
 title: Filters
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Filters
+
 ## About
 PatternFly provides a number of common filters that can be used in a various combinations to create a custom filtering experience. These elements may be used in a toolbar or alone. You can use the decision tree below to help determine which filter best fits your use case.
 

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/forms/forms.md

@@ -2,8 +2,9 @@
 title: Forms
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Forms
+
 A form is a group of elements used to collect information from a user. Forms can be presented to the user in a variety of contexts depending on the use case and scenario.
 
 [View form demos](/documentation/core/demos/basicforms)

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/lists-and-tables/lists-and-tables.md

@@ -2,8 +2,9 @@
 title: Lists and tables
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Lists and tables
+
 PatternFly offers two components for displaying large data sets: [data list](/documentation/react/components/datalist/) and [table](/documentation/react/components/table/). While they satisfy similar use cases, choosing the correct component to use in your design will be dependent on the type of data you need to display.
 
 Use [data lists](#data-lists) when:

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/login/login.md

@@ -2,8 +2,9 @@
 title: Login page
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Login page
+
 The login page allows a user to gain access to an application by entering their username and password or by authenticating using a social media login.
 
 ## Elements

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/modal/modal.md

@@ -2,8 +2,9 @@
 title: Modal dialog
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Modal dialog
+
 Use modal dialogs load and display important information without navigating away from the current page.
 
 ## Primary elements

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/navigation-system/navigation-system.md

@@ -2,8 +2,9 @@
 title: Navigation system
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Navigation system
+
 Navigation is used to organize an application’s structure and content, making it easy to find information and accomplish tasks. Navigation communicates relationships, context, and actions a user can take within an application.
 
 ## Elements

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/progress-bar/progress-bar.md

@@ -2,8 +2,9 @@
 title: Progress bar
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Progress bar
+
 Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. Progress bars can also inform users about their progress through a tutorial or a series of steps to reach completion.
 
 ## Primary elements

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/template/index.md.template

@@ -2,6 +2,7 @@
 title:
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
 <!--
 Welcome and thanks for contributing to PatternFly's design guidelines! We created this template to help writers contribute content that's useful for our PatternFly users and consistent with our existing content and standards.
@@ -16,7 +17,7 @@ Our design guidelines should answer all of these questions and more.
 
 Thanks again for your contribution and be sure to reach out to us in GitHub or on Slack with any questions. -->
 
-# Design Guideline Name
+
 _Include a short (1-2 sentence) description of the component here and fill out the following sections as needed_
 
 ## Primary elements

patternfly-org-demo/src/content/design-guidelines/usage-and-behavior/text-input/text-input.md

@@ -2,8 +2,9 @@
 title: Text input
 section: usage and behavior
 hideTOC: true
+showTitle: true
 ---
-# Text input
+
 Use text input to gather free-form text from a user.
 
 ## Elements