@patternfly/documentation-framework 5.1.12 → 5.1.13

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.1.13 (2023-09-06)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 ## 5.1.12 (2023-09-01)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/components/example/example.css

@@ -130,11 +130,3 @@
 .pf-v5-theme-dark .ws-theme-switch-full-page::before {
   background-color: var(--pf-v5-global--BackgroundColor--300);
 }
-
-.ws-dir-rtl {
-  direction: rtl;
-}
-
-.ws-dir-ltr {
-  direction: ltr;
-}

package/components/example/example.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useLocation } from '@reach/router';
 import { Button, CodeBlock, Flex, CodeBlockCode, debounce, Label, Switch, Tooltip } from '@patternfly/react-core';
 import * as reactCoreModule from '@patternfly/react-core';
@@ -20,6 +20,7 @@ import {
 } from '../../helpers';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
 import missingThumbnail from './missing-thumbnail.jpg';
+import { RtlContext } from '../../layouts';
 
 const errorComponent = err => <pre>{err.toString()}</pre>;
 
@@ -112,6 +113,7 @@ export const Example = ({
 
   const [editorCode, setEditorCode] = React.useState(code);
   const loc = useLocation();
+  const isRTL = useContext(RtlContext);
   const scope = {
     ...liveContext,
     // These 2 are in the bundle anyways for the site since we dogfood
@@ -161,14 +163,17 @@ export const Example = ({
       <div id={previewId} className={css(className, 'pf-v5-u-h-100')}>
         {livePreview}
         {(hasDarkThemeSwitcher || hasRTLSwitcher) && (
-          <Flex direction={{ default: 'column' }} gap={{ default: 'gapLg' }} className="ws-full-page-utils ws-dir-ltr">
+          <Flex direction={{ default: 'column' }} gap={{ default: 'gapLg' }} className="ws-full-page-utils pf-v5-m-dir-ltr ">
             {hasDarkThemeSwitcher && (
-              <Switch id="ws-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
+              <Switch id="ws-example-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
               document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
             )}
             {hasRTLSwitcher && (
-              <Switch id="ws-rtl-switch" label="RTL" defaultChecked={false} onChange={() =>
-              document.querySelector('html').classList.toggle('ws-dir-rtl')} />
+              <Switch id="ws-example-rtl-switch" label="RTL" defaultChecked={false} onChange={() => {
+                const html = document.querySelector('html');
+                const curDir = html.dir;
+                html.dir = (curDir !== 'rtl') ? 'rtl' : 'ltr';
+            }} />
             )}
           </Flex>
         )}
@@ -236,7 +241,11 @@ export const Example = ({
           </div>
         : <div
             id={previewId}
-            className={css(className, isFullscreen ? 'ws-preview-fullscreen' : 'ws-preview')}
+            className={css(
+              className,
+              isFullscreen ? 'ws-preview-fullscreen' : 'ws-preview',
+              isRTL && 'pf-v5-m-dir-rtl')
+            }
           >
             {livePreview}
           </div>

package/layouts/sideNavLayout/sideNavLayout.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, createContext } from 'react';
 import {
   Button,
   Page,
@@ -29,17 +29,19 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import { SideNav, TopNav, GdprBanner } from '../../components';
 import staticVersions from '../../versions.json';
-import logoMd from '../logo__pf--reverse-on-md.svg';
-import logo from '../logo__pf--reverse--base.svg';
-import logoBase from '../logo__pf--reverse--base.png';
 import v5Logo from '../PF-HorizontalLogo-Reverse.svg';
 
+export const RtlContext = createContext(false);
+
 const HeaderTools = ({
   versions,
   hasVersionSwitcher,
   algolia,
   hasDarkThemeSwitcher,
-  topNavItems
+  hasRTLSwitcher,
+  topNavItems,
+  isRTL,
+  setIsRTL
 }) => {
   const initialVersion = staticVersions.Releases.find(release => release.latest);
   const latestVersion = versions.Releases.find(version => version.latest);
@@ -87,6 +89,11 @@ const HeaderTools = ({
                 document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
             </ToolbarItem>
           )}
+          {hasRTLSwitcher && (
+            <ToolbarItem>
+              <Switch id="ws-rtl-switch" label={'RTL'} defaultChecked={isRTL} onChange={() => setIsRTL(isRTL => !isRTL)} />
+            </ToolbarItem>
+          )}
           {hasSearch && (
             <ToolbarItem>
               <SearchInput
@@ -194,12 +201,14 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   const hasGdprBanner = process.env.hasGdprBanner;
   const hasVersionSwitcher = process.env.hasVersionSwitcher;
   const hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher;
+  const hasRTLSwitcher = process.env.hasRTLSwitcher;
   const sideNavItems = process.env.sideNavItems;
   const topNavItems = process.env.topNavItems;
   const prnum = process.env.prnum;
   const prurl = process.env.prurl;
 
   const [versions, setVersions] = useState({ ...staticVersions });
+  const [isRTL, setIsRTL] = useState(false);
 
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -246,7 +255,10 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
             algolia={algolia}
             hasVersionSwitcher={hasVersionSwitcher}
             hasDarkThemeSwitcher={hasDarkThemeSwitcher}
+            hasRTLSwitcher={hasRTLSwitcher}
             topNavItems={topNavItems}
+            isRTL={isRTL}
+            setIsRTL={setIsRTL}
           />
         )}
       </MastheadContent>
@@ -255,20 +267,22 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
 
   return (
     <React.Fragment>
-      <div id="ws-page-banners">
-        {hasGdprBanner && <GdprBanner />}
-      </div>
-      <Page
-        id="ws-page"
-        mainContainerId="ws-page-main"
-        header={Header}
-        sidebar={SideBar}
-        skipToContent={<SkipToContent href="#ws-page-main">Skip to content</SkipToContent>}
-        isManagedSidebar
-        defaultManagedSidebarIsOpen={navOpenProp}
-      >
-        {children}
-      </Page>
+      <RtlContext.Provider value={ isRTL }>
+        <div id="ws-page-banners">
+          {hasGdprBanner && <GdprBanner />}
+        </div>
+        <Page
+          id="ws-page"
+          mainContainerId="ws-page-main"
+          header={Header}
+          sidebar={SideBar}
+          skipToContent={<SkipToContent href="#ws-page-main">Skip to content</SkipToContent>}
+          isManagedSidebar
+          defaultManagedSidebarIsOpen={navOpenProp}
+        >
+          {children}
+        </Page>
+      </RtlContext.Provider>
     </React.Fragment>
   );
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "5.1.12",
+  "version": "5.1.13",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -17,7 +17,7 @@
     "@babel/plugin-transform-react-jsx": "7.17.12",
     "@babel/preset-env": "7.18.2",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.1.12",
+    "@patternfly/ast-helpers": "^1.1.13",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
     "babel-loader": "9.1.2",
@@ -87,5 +87,5 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "0ffc0d352b91450d5318e606ebbc77072c5ba876"
+  "gitHead": "a988de64b34094502f779c33ac01d3c0d31f6eee"
 }

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

@@ -13,8 +13,8 @@ module.exports = (_env, argv) => {
     hasFooter = false,
     hasVersionSwitcher = false,
     hasDesignGuidelines = false,
-    hasRTLSwitcher = false,
     hasDarkThemeSwitcher = false,
+    hasRTLSwitcher = false,
     componentsData = {},
     sideNavItems = [],
     topNavItems = [],