@patternfly/documentation-framework 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.12.0 (2022-07-05)
+
+
+### Features
+
+* **docs:** add dark theme switcher ([#3014](https://github.com/patternfly/patternfly-org/issues/3014)) ([7d17d13](https://github.com/patternfly/patternfly-org/commit/7d17d13c5518d85123d12bd37c254123789b1d75))
+
+
+
+
+
+## 0.11.79 (2022-07-01)
+
+**Note:** Version bump only for package theme-patternfly-org
+
+
+
+
+
+## 0.11.78 (2022-07-01)
+
+**Note:** Version bump only for package theme-patternfly-org
+
+
+
+
+
+## 0.11.77 (2022-06-30)
+
+
+### Bug Fixes
+
+* **docs:** narrowed scope of rule hiding overflow on page examples ([#3037](https://github.com/patternfly/patternfly-org/issues/3037)) ([3c0db2e](https://github.com/patternfly/patternfly-org/commit/3c0db2eff5f933c76a4be02ceaa1c1c2f5212b33))
+
+
+
+
+
+## 0.11.76 (2022-06-30)
+
+**Note:** Version bump only for package theme-patternfly-org
+
+
+
+
+
 ## 0.11.75 (2022-06-29)
 
 **Note:** Version bump only for package theme-patternfly-org

package/components/example/example.css

@@ -33,7 +33,8 @@
   transition: width .2s ease-in-out;
 }
 
-.ws-preview-html {
+.ws-core-c-page.ws-preview > .ws-preview-html,
+.ws-react-c-page.ws-preview > .pf-c-page {
   overflow: hidden;
 }
 

package/components/propsTable/propsTable.js

@@ -1,82 +1,91 @@
-import React from 'react';
-import { Badge } from '@patternfly/react-core';
+import React from "react";
+import { Badge } from "@patternfly/react-core";
 import {
   Table,
   TableHeader,
   TableBody,
-  cellWidth
-} from '@patternfly/react-table';
-import { AutoLinkHeader } from '../autoLinkHeader/autoLinkHeader';
-import { PropTypeWithLinks } from './propTypeWithLinks';
-import { css } from '@patternfly/react-styles';
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+  cellWidth,
+} from "@patternfly/react-table";
+import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
+import { PropTypeWithLinks } from "./propTypeWithLinks";
+import { css } from "@patternfly/react-styles";
+import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibility/accessibility";
 
-export const PropsTable = ({
-  title,
-  rows,
-  allPropComponents
-}) => {
+export const PropsTable = ({ title, description, rows, allPropComponents }) => {
   const columns = [
-    { title: 'Name', transforms: [cellWidth(20)] },
-    { title: 'Type', transforms: [cellWidth(20)] },
-    { title: 'Default', transforms: [] },
-    { title: 'Description', transforms: [] }
+    { title: "Name", transforms: [cellWidth(20)] },
+    { title: "Type", transforms: [cellWidth(20)] },
+    { title: "Default", transforms: [] },
+    { title: "Description", transforms: [] },
   ];
 
   return (
     <React.Fragment>
-      <AutoLinkHeader size="h3">
-        {title}
-      </AutoLinkHeader>
+      <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
       <Table
         className="pf-u-mt-md pf-u-mb-lg"
         variant="compact"
         aria-label={title}
-        caption={<div><span className="ws-prop-required">*</span>required</div>}
+        caption={
+          <div>
+            {description && <div className="pf-u-mb-md">{description}</div>}
+            <div>
+              <span className="ws-prop-required">*</span>required
+            </div>
+          </div>
+        }
         cells={columns}
         gridBreakPoint="grid-lg"
         rows={rows
           // Sort required rows first
-          .sort((a,b) => a.required === b.required
-            ? 0
-            : a.required ? -1 : 1)
+          .sort((a, b) => (a.required === b.required ? 0 : a.required ? -1 : 1))
           .map((row, idx) => ({
             cells: [
               <div className="pf-m-break-word">
-                {row.deprecated && 'Deprecated: '}
+                {row.deprecated && "Deprecated: "}
                 {row.name}
                 {row.required ? (
                   <React.Fragment key={`${row.name}-required-prop`}>
-                    <span aria-hidden="true" key={`${row.name}-asterisk`} className="ws-prop-required">
+                    <span
+                      aria-hidden="true"
+                      key={`${row.name}-asterisk`}
+                      className="ws-prop-required"
+                    >
                       *
                     </span>
-                    <span key={`${row.name}-required`} className={css(accessibleStyles.screenReader)}>
+                    <span
+                      key={`${row.name}-required`}
+                      className={css(accessibleStyles.screenReader)}
+                    >
                       required
                     </span>
                   </React.Fragment>
-                ) : ''}
+                ) : (
+                  ""
+                )}
                 {row.beta && (
-                  <Badge key={`${row.name}-${idx}`} className="ws-beta-badge pf-u-ml-sm">
+                  <Badge
+                    key={`${row.name}-${idx}`}
+                    className="ws-beta-badge pf-u-ml-sm"
+                  >
                     Beta
                   </Badge>
                 )}
               </div>,
               <div className="pf-m-break-word">
-                <PropTypeWithLinks type={row.type} allPropComponents={allPropComponents} />
-              </div>,
-              <div className="pf-m-break-word">
-                {row.defaultValue}
+                <PropTypeWithLinks
+                  type={row.type}
+                  allPropComponents={allPropComponents}
+                />
               </div>,
-              <div className="pf-m-break-word">
-                {row.description}
-              </div>
-            ]
-          }))
-        }
+              <div className="pf-m-break-word">{row.defaultValue}</div>,
+              <div className="pf-m-break-word">{row.description}</div>,
+            ],
+          }))}
       >
         <TableHeader />
         <TableBody />
       </Table>
     </React.Fragment>
   );
-}
+};

package/layouts/sideNavLayout/sideNavLayout.js

@@ -13,9 +13,8 @@ import {
   DropdownItem,
   DropdownGroup,
   Divider,
-  Text,
-  TextVariants,
-  SkipToContent
+  SkipToContent,
+  Switch
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
@@ -29,6 +28,7 @@ const HeaderTools = ({
   versions,
   hasVersionSwitcher,
   hasSearch,
+  hasDarkThemeSwitcher,
   pathPrefix
 }) => {
   const initialVersion = staticVersions.Releases.find(release => release.latest);
@@ -69,6 +69,12 @@ const HeaderTools = ({
 
   return (
     <PageHeaderTools>
+      {hasDarkThemeSwitcher && (
+        <PageHeaderToolsItem>
+          <Switch id="ws-theme-switch" label="Dark theme" defaultChecked={false} onChange={() => 
+          document.querySelector('html').classList.toggle('pf-theme-dark')} />
+        </PageHeaderToolsItem>
+      )}
       {hasSearch && (
         <PageHeaderToolsItem id="ws-global-search-wrapper" className={isSearchExpanded ? '' : 'ws-hide-search-input'}>
           <TextInput id="ws-global-search" ref={searchRef} placeholder="Search" />
@@ -170,6 +176,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   const algolia = process.env.algolia;
   const hasGdprBanner = process.env.hasGdprBanner;
   const hasVersionSwitcher = process.env.hasVersionSwitcher;
+  const hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher;
   const sideNavItems = process.env.sideNavItems;
   const topNavItems = process.env.topNavItems;
   const prnum = process.env.prnum;
@@ -208,6 +215,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
         versions={versions}
         hasSearch={algolia}
         hasVersionSwitcher={hasVersionSwitcher}
+        hasDarkThemeSwitcher={hasDarkThemeSwitcher}
         pathPrefix={pathPrefix} />}
       logo={prnum ? `PR #${prnum}` : <Brand src={logo} alt="Patternfly Logo" />}
       logoProps={{ href: prurl || pathPrefix || '/' }}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -82,10 +82,6 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
-    "@patternfly/patternfly": ">=4.185.1",
-    "@patternfly/react-core": ">=4.202.16",
-    "@patternfly/react-code-editor": ">=4.43.16",
-    "@patternfly/react-table": ">=4.71.16"
+    "react-dom": "^16.8.0 || ^17.0.0"
   }
 }

package/scripts/tsDocgen.js

@@ -95,6 +95,9 @@ function getInterfaceMetadata(filename, sourceText) {
 
       interfaces.push({
         displayName: statement.name.escapedText,
+        description: statement.jsDoc
+            ? statement.jsDoc.map(doc => doc.comment).join('\n')
+            : null,
         props
       });
     });
@@ -131,10 +134,30 @@ function normalizeProp([
   return res;
 }
 
+function getDescription(parsed, ) {
+
+}
+
 function tsDocgen(file) {
   const sourceText = fs.readFileSync(file, 'utf8');
   const componentMeta = getComponentMetadata(file, sourceText); // Array of components with props
   const interfaceMeta = getInterfaceMetadata(file, sourceText); // Array of interfaces with props
+  const interfaceMetaMap = interfaceMeta.reduce(function(target, interface) {
+    target[interface.displayName] = interface;
+    return target;
+  }, {})
+
+  // Go through each component and check if they have an interface with a jsDoc description
+  // If so copy it over (fix for https://github.com/patternfly/patternfly-react/issues/7612)
+  componentMeta.forEach(c => {
+    if (c.description) {
+      return c;
+    }
+    const interface = `${c.displayName}Props`;
+    if (interfaceMetaMap[interface] && interfaceMetaMap[interface].description) {
+      c.description = interfaceMetaMap[interface].description;
+    }
+  })
 
   return componentMeta
     .concat(interfaceMeta)

package/scripts/webpack/webpack.base.config.js

@@ -13,6 +13,7 @@ module.exports = (_env, argv) => {
     hasFooter = false,
     hasVersionSwitcher = false,
     hasDesignGuidelines = false,
+    hasDarkThemeSwitcher = false,
     sideNavItems = [],
     topNavItems = [],
     includePaths = []
@@ -136,6 +137,7 @@ module.exports = (_env, argv) => {
         'process.env.hasFooter': JSON.stringify(hasFooter),
         'process.env.hasVersionSwitcher': JSON.stringify(hasVersionSwitcher),
         'process.env.hasDesignGuidelines': JSON.stringify(hasDesignGuidelines),
+        'process.env.hasDarkThemeSwitcher': JSON.stringify(hasDarkThemeSwitcher),
         'process.env.sideNavItems': JSON.stringify(sideNavItems),
         'process.env.topNavItems': JSON.stringify(topNavItems),
         'process.env.prnum': JSON.stringify(process.env.CIRCLE_PR_NUMBER || process.env.PR_NUMBER || ''),

package/templates/mdx.js

@@ -84,6 +84,7 @@ const MDXChildTemplate = ({
                 <PropsTable
                   key={component.name}
                   title={component.name}
+                  description={component.description}
                   rows={component.props}
                   allPropComponents={propComponents}
                 />

package/versions.json

@@ -1,9 +1,28 @@
 {
   "Releases": [
+    {
+      "name": "2022.08",
+      "date": "2022-6-30",
+      "latest": true,
+      "versions": {
+        "@patternfly/patternfly": "4.202.1",
+        "@patternfly/react-catalog-view-extension": "4.75.1",
+        "@patternfly/react-charts": "6.77.1",
+        "@patternfly/react-code-editor": "4.65.1",
+        "@patternfly/react-core": "4.224.1",
+        "@patternfly/react-icons": "4.75.1",
+        "@patternfly/react-inline-edit-extension": "4.69.1",
+        "@patternfly/react-log-viewer": "4.69.1",
+        "@patternfly/react-styles": "4.74.1",
+        "@patternfly/react-table": "4.93.1",
+        "@patternfly/react-tokens": "4.76.1",
+        "@patternfly/react-topology": "4.71.1",
+        "@patternfly/react-virtualized-extension": "4.71.1"
+      }
+    },
     {
       "name": "2022.07",
       "date": "2022-6-3",
-      "latest": true,
       "versions": {
         "@patternfly/patternfly": "4.196.7",
         "@patternfly/react-catalog-view-extension": "4.72.3",