fix(content-styles): add support for basic styles

gatsby-theme-patternfly-org/components/autoLinkHeader.js

@@ -24,7 +24,7 @@ const AutoLinkHeader = ({
   const slug = slugger(children);
 
   return (
-    <Title id={slug} size={sizes[size]} headingLevel={headingLevel || size} {...props}>
+    <Title className="ws-title" id={slug} size={sizes[size]} headingLevel={headingLevel || size} {...props}>
       <a href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-label="Heading anchor icon">
         <LinkIcon style={{ verticalAlign: 'middle' }} />
       </a>

gatsby-theme-patternfly-org/gatsby-ssr.js

@@ -7,6 +7,6 @@ exports.onRenderBody = ({ setHtmlAttributes }) => {
   });
   // Always use new Red Hat font
   setHtmlAttributes({
-    className: 'pf-m-redhat-font'
+    className: 'pf-m-redhat-font ws'
   });
 }

gatsby-theme-patternfly-org/helpers/commonComponents.css

@@ -1,84 +1,52 @@
-h1.ws-title,
-h1.ws-title.ws-mdx-h1 {
-  margin-bottom: var(--pf-c-content--h1--MarginBottom);
-  font-size: 36px;
-  font-weight: var(--pf-c-content--h1--FontWeight);
-  line-height: var(--pf-c-content--h1--LineHeight);
-  font-family: RedHatDisplay;
+:root {
+  --ws-title--MarginTop: var(--pf-global--spacer--lg);
+  --ws-title--MarginBottom: var(--pf-global--spacer--sm);
+  --ws-title--LineHeight: var(--pf-global--LineHeight--sm);
+  --ws-ol--PaddingLeft: var(--pf-global--spacer--lg);
+  --ws-ol--MarginTop: var(--pf-global--spacer--md);
+  --ws-ol--MarginLeft: var(--pf-global--spacer--lg);
+  --ws-ol--nested--MarginTop: var(--pf-global--spacer--sm);
+  --ws-ol--nested--MarginLeft: var(--pf-global--spacer--sm);
+  --ws-ul--PaddingLeft: var(--pf-global--spacer--lg);
+  --ws-ul--MarginTop: var(--pf-global--spacer--md);
+  --ws-ul--MarginLeft: var(--pf-global--spacer--lg);
+  --ws-ul--nested--MarginTop: var(--pf-global--spacer--sm);
+  --ws-ul--nested--MarginLeft: var(--pf-global--spacer--sm);
+  --ws-ul--ListStyle: var(--pf-global--ListStyle);
+  --ws-li--MarginTop: var(--pf-global--spacer--sm);
+  --ws-dl--ColumnGap: var(--pf-global--spacer--2xl);
+  --ws-dl--RowGap: var(--pf-global--spacer--md);
+  --ws-dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --ws-dt--MarginTop: var(--pf-global--spacer--md);
+  --ws-dt--sm--MarginTop: 0;
 }
 
-h1.ws-title:not(:first-child) {
-  margin-top: var(--pf-c-content--h1--MarginTop);
-}
-
-h2.ws-title,
-h2.ws-title.ws-mdx-h2 {
-  margin-bottom: 8px;
-  font-size: 21px;
-  font-weight: var(--pf-c-content--h2--FontWeight);
-  line-height: var(--pf-c-content--h2--LineHeight); 
-}
-
-h2.ws-title:not(:first-child),
-h2.ws-title:not(:first-child).ws-mdx-h2 {
-  margin-top: 24px; 
-}
-
-h3.ws-title,
-h3.ws-title.ws-mdx-h3 {
-  margin-bottom: 8px;
-  font-size: 18px;
-  font-weight: var(--pf-c-content--h3--FontWeight);
-  line-height: var(--pf-c-content--h3--LineHeight); 
-  font-family: RedHatDisplay;
-}
-
-h3.ws-title:not(:first-child),
-h3.ws-title:not(:first-child).ws-mdx-h3 {
-  margin-top: 24px; 
+.ws-section {
+  background-color: #fafafa;
 }
 
-h4.ws-title,
-h4.ws-title.ws-mdx-h4 {
-  margin-bottom: var(--pf-c-content--h4--MarginBottom);
-  font-size: var(--pf-c-content--h4--FontSize);
-  font-weight: var(--pf-c-content--h4--FontWeight);
-  line-height: var(--pf-c-content--h4--LineHeight); 
-}
-
-h4.ws-title:not(:first-child),
-h4.ws-title:not(:first-child).ws-mdx-h4 {
-  margin-top: var(--pf-c-content--h4--MarginTop); 
+.ws-title {
+  margin: 0;
+  margin-bottom: var(--ws-title--MarginBottom);
 }
 
-h5.ws-title,
-h5.ws-title.ws-mdx-h5 {
-  margin-bottom: var(--pf-c-content--h5--MarginBottom);
-  font-size: var(--pf-c-content--h5--FontSize);
-  font-weight: var(--pf-c-content--h5--FontWeight);
-  line-height: var(--pf-c-content--h5--LineHeight); 
-}
-
-h5.ws-title:not(:first-child),
-h5.ws-title:not(:first-child).ws-mdx-h5 {
-  margin-top: var(--pf-c-content--h5--MarginTop); 
+.ws-title ~ .ws-title {
+  margin-top: var(--ws-title--MarginTop);
 }
 
-h6.ws-title,
-h6.ws-title.ws-mdx-h6 {
-  margin-bottom: var(--pf-c-content--h6--MarginBottom);
-  font-size: var(--pf-c-content--h6--FontSize);
-  font-weight: var(--pf-c-content--h6--FontWeight);
-  line-height: var(--pf-c-content--h6--LineHeight); 
-}
-
-h6.ws-title:not(:first-child),
-h6.ws-title:not(:first-child).ws-mdx-h6 {
-  margin-top: var(--pf-c-content--h6--MarginTop);
+.ws-ul {
+  padding-left: var(--ws-ul--PaddingLeft);
+  margin-top: var(--ws-ul--MarginTop);
+  margin-left: var(--ws-ul--MarginLeft);
+  list-style: var(--ws-ul--ListStyle);
 }
 
-.ws-section table {
-  border-collapse: collapse;
+.ws-code {
+  display: inline-block;
+  background-color: #fff;
+  padding: 1px 8px;
+  border: 1px solid #ededed;
+  white-space: normal;
 }
 
 #examples ~ table td,
@@ -114,18 +82,108 @@ h6.ws-title:not(:first-child).ws-mdx-h6 {
   }
 }
 
-.ws-mdx-p {
+.ws-p {
   font-size: 18px;
 }
 
-.ws-mdx-p:not(:last-child) {
+.ws-p:not(:last-child) {
   margin-bottom: 1rem;
 }
 
 .ws-section {
   padding: 32px 64px;
 }
 
-.ws-mdx-a {
+.ws-a {
   font-size: 18px;
 }
+
+/* small {
+  display: block;
+  font-size: var(--pf-c-content--small--FontSize);
+  line-height: var(--pf-c-content--small--LineHeight);
+  color: var(--pf-c-content--small--Color);
+
+  &:not(:last-child) {
+    margin-bottom: var(--pf-c-content--small--MarginBottom);
+  }
+}
+
+blockquote {
+  padding: var(--pf-c-content--blockquote--PaddingTop) var(--pf-c-content--blockquote--PaddingRight) var(--pf-c-content--blockquote--PaddingBottom) var(--pf-c-content--blockquote--PaddingLeft);
+  font-weight: var(--pf-c-content--blockquote--FontWeight);
+  color: var(--pf-c-content--blockquote--Color);
+  border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor);
+}
+
+hr {
+  height: var(--pf-c-content--hr--Height);
+  background-color: var(--pf-c-content--hr--BackgroundColor);
+  border: none;
+}
+
+ol {
+  padding-left: var(--pf-c-content--ol--PaddingLeft);
+  margin-top: var(--pf-c-content--ol--MarginTop);
+  margin-left: var(--pf-c-content--ol--MarginLeft);
+
+  ul {
+    --pf-c-content--ul--MarginTop: var(--pf-c-content--ul--nested--MarginTop);
+    --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
+  }
+
+  ol {
+    --pf-c-content--ol--MarginTop: var(--pf-c-content--ol--nested--MarginTop);
+    --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
+  }
+}
+
+ul {
+  padding-left: var(--pf-c-content--ul--PaddingLeft);
+  margin-top: var(--pf-c-content--ul--MarginTop);
+  margin-left: var(--pf-c-content--ul--MarginLeft);
+  list-style: var(--pf-c-content--ul--ListStyle);
+
+  ul {
+    --pf-c-content--ul--MarginTop: var(--pf-c-content--ul--nested--MarginTop);
+    --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
+  }
+
+  ol {
+    --pf-c-content--ol--MarginTop: var(--pf-c-content--ol--nested--MarginTop);
+    --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
+  }
+}
+
+dl {
+  display: grid;
+  grid-template-columns: 1fr;
+
+  @media screen and (min-width: $pf-global--breakpoint--sm) {
+    grid-template: auto / auto 1fr;
+    grid-column-gap: var(--pf-c-content--dl--ColumnGap);
+    grid-row-gap: var(--pf-c-content--dl--RowGap);
+  }
+}
+
+dt {
+  font-weight: var(--pf-c-content--dt--FontWeight);
+
+  &:not(:first-child) {
+    margin-top: var(--pf-c-content--dt--MarginTop);
+
+    @media screen and (min-width: $pf-global--breakpoint--sm) {
+      --pf-c-content--dt--MarginTop: var(--pf-c-content--dt--sm--MarginTop);
+    }
+  }
+
+  @media screen and (min-width: $pf-global--breakpoint--sm) {
+    grid-column: 1;
+  }
+}
+
+dd {
+  @media screen and (min-width: $pf-global--breakpoint--sm) {
+    grid-column: 2;
+  }
+} */

gatsby-theme-patternfly-org/helpers/commonComponents.js

@@ -9,16 +9,18 @@ import './commonComponents.css';
 export const commonComponents = {
   inlineCode: Example,
   pre: React.Fragment,
-  p: (props) => <p className="ws-mdx-p" {...props} />,
+  p: (props) => <p className="ws-p" {...props} />,
+  ul: (props) => <ul className="ws-ul" {...props} />,
+  ul: (props) => <ul className="ws-ul" {...props} />,
   a: (props) => {
-    // https://www.gatsbyjs.org/docs/gatsby-link/#reminder-use-link-only-for-internal-links
+   // https://www.gatsbyjs.org/docs/gatsby-link/#reminder-use-link-only-for-internal-links
     if (props.href.includes('//') || props.href.startsWith("#")) {
       return <a {...props} />;
-    } 
+    }
     return <Link to={props.href} {...props} />;
   }
-    
+
 };
 for (let i = 1; i <= 6; i++) {
-  commonComponents[`h${i}`] = props => <AutoLinkHeader size={`h${i}`} className={`ws-title ws-mdx-h${i}`} {...props} />;
+  commonComponents[`h${i}`] = props => <AutoLinkHeader size={`h${i}`} className={`ws-title ws-h${i}`} {...props} />;
 }

gatsby-theme-patternfly-org/pages/globalCSSVariables.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageSection, Title } from '@patternfly/react-core';
+import { PageSection, PageSectionVariants, Title } from '@patternfly/react-core';
 import SideNavLayout from '../layouts/sideNavLayout';
 import CSSVariables from '../components/cssVariables';
 import AutoLinkHeader from '../components/autoLinkHeader';
@@ -17,11 +17,11 @@ export default ({ location, pageContext }) => {
 
   return (
     <SideNavLayout location={location} context={context}>
-      <PageSection className="ws-section">
+      <PageSection className="ws-section" variant={PageSectionVariants.light}>
         <Title size="md" className="ws-framework-title">HTML/React</Title>
         <Title size="4xl">Global CSS variables</Title>
       </PageSection>
-      <PageSection className="ws-section">
+      <PageSection className="ws-section" variant={PageSectionVariants.light}>
         <AutoLinkHeader size="h2">About CSS variables</AutoLinkHeader>
         <p>The CSS variable system is a two-layer theming system where global variables inform component variables.</p>
         <AutoLinkHeader size="h2">Global variables</AutoLinkHeader>

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

@@ -2,7 +2,11 @@ import React from 'react';
 import { graphql } from 'gatsby';
 import { MDXProvider } from '@mdx-js/react';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
-import { Alert, PageSection, Title } from '@patternfly/react-core';
+import {
+  Alert,
+  PageSection,
+  Title
+} from '@patternfly/react-core';
 import SideNavLayout from '../layouts/sideNavLayout';
 import AutoLinkHeader from '../components/autoLinkHeader';
 import Example from '../components/example';
@@ -42,12 +46,12 @@ export default ({ data, location, pageContext }) => {
         if (!propTable) {
           console.warn(`PropComponent "${name}" specified in frontmatter, but not found at runtime.`);
         }
-        
+
         return propTable;
       })
       .filter(Boolean)
     : undefined;
-  
+
   let parityComponent = undefined;
   if (data.designDoc) {
     const { reactComponentName, coreComponentName } = data.designDoc.frontmatter;