@patternfly/documentation-framework 5.1.6 → 5.1.7

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.1.7 (2023-08-24)
+
+
+### Bug Fixes
+
+* added rtl switch to fullpage examples ([#3719](https://github.com/patternfly/patternfly-org/issues/3719)) ([fc1f9ba](https://github.com/patternfly/patternfly-org/commit/fc1f9bacab352cf2db7418ae98b2f3c98cd47302))
+
+
+
+
+
 ## 5.1.6 (2023-08-24)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/components/example/example.css

@@ -110,21 +110,18 @@
   color: var(--pf-v5-global--danger-color--100);
 }
 
-.ws-theme-switch-full-page {
+.ws-full-page-utils {
   position: fixed;
   right: 0;
   bottom: 0;
-  padding: var(--pf-v5-global--spacer--md);
+  padding: var(--pf-v5-global--spacer--lg);
   z-index: var(--pf-v5-global--ZIndex--2xl);
 }
 
-.ws-theme-switch-full-page::before {
+.ws-full-page-utils::before {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   content: "";
-  width: 100%;
-  height: 100%;
   background-color: var(--pf-v5-global--BackgroundColor--100);
   opacity: 0.8;
   box-shadow: var(--pf-v5-global--BoxShadow--sm);
@@ -133,3 +130,11 @@
 .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,6 +1,6 @@
 import React from 'react';
 import { useLocation } from '@reach/router';
-import { Button, CodeBlock, CodeBlockCode, debounce, Label, Switch, Tooltip } from '@patternfly/react-core';
+import { Button, CodeBlock, Flex, CodeBlockCode, debounce, Label, Switch, Tooltip } from '@patternfly/react-core';
 import * as reactCoreModule from '@patternfly/react-core';
 import * as reactCoreNextModule from '@patternfly/react-core/next';
 import * as reactCoreDeprecatedModule from '@patternfly/react-core/deprecated';
@@ -86,6 +86,8 @@ export const Example = ({
   children,
   // Show dark theme switcher on full page examples
   hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher,
+  // Show dark theme switcher on full page examples
+  hasRTLSwitcher = process.env.hasRTLSwitcher,
   // Map of relative imports matched to their npm package import path (passed to Codesandbox)
   relativeImports,
   // md file location in node_modules, used to resolve relative import paths in examples
@@ -158,11 +160,17 @@ export const Example = ({
     return (
       <div id={previewId} className={css(className, 'pf-v5-u-h-100')}>
         {livePreview}
-        {hasDarkThemeSwitcher && (
-          <div className="ws-theme-switch-full-page">
-            <Switch id="ws-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
-            document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
-          </div>
+        {(hasDarkThemeSwitcher || hasRTLSwitcher) && (
+          <Flex direction={{ default: 'column' }} gap={{ default: 'gapLg' }} className="ws-full-page-utils ws-dir-ltr">
+            {hasDarkThemeSwitcher && (
+              <Switch id="ws-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')} />
+            )}
+          </Flex>
         )}
       </div>
     );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "5.1.6",
+  "version": "5.1.7",
   "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.6",
+    "@patternfly/ast-helpers": "^1.1.7",
     "@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": "4aad9ee28cb00c779a8d750651e9e2750a51e197"
+  "gitHead": "e1f763cf9d9eb51d77f9fb6c9a0dec46f411cdf1"
 }

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

@@ -13,6 +13,7 @@ module.exports = (_env, argv) => {
     hasFooter = false,
     hasVersionSwitcher = false,
     hasDesignGuidelines = false,
+    hasRTLSwitcher = false,
     hasDarkThemeSwitcher = false,
     componentsData = {},
     sideNavItems = [],
@@ -143,6 +144,7 @@ module.exports = (_env, argv) => {
         'process.env.hasVersionSwitcher': JSON.stringify(hasVersionSwitcher),
         'process.env.hasDesignGuidelines': JSON.stringify(hasDesignGuidelines),
         'process.env.hasDarkThemeSwitcher': JSON.stringify(hasDarkThemeSwitcher),
+        'process.env.hasRTLSwitcher': JSON.stringify(hasRTLSwitcher),
         'process.env.componentsData': JSON.stringify(componentsData),
         'process.env.sideNavItems': JSON.stringify(sideNavItems),
         'process.env.topNavItems': JSON.stringify(topNavItems),

package/templates/mdx.js

@@ -125,8 +125,8 @@ const MDXChildTemplate = ({
               <AutoLinkHeader size="h2" className="ws-h2" id="css-variables">
                 {cssVarsTitle}
               </AutoLinkHeader>
-              {cssPrefix.map(prefix => (
-                <CSSVariables autoLinkHeader={cssPrefix.length > 1} prefix={prefix} />
+              {cssPrefix.map((prefix, index) => (
+                <CSSVariables key={index} autoLinkHeader={cssPrefix.length > 1} prefix={prefix} />
               ))}
             </React.Fragment>
           )}