[Snyk] Fix for 1 vulnerabilities (#3828)

* fix: packages/documentation-framework/package.json to reduce vulnerabilities

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-JS-INFLIGHT-6095116

* address breaking change in glob

* more version bumps

* update screenshot command

---------

Co-authored-by: snyk-bot <[email protected]>
Co-authored-by: nicolethoen <[email protected]>

package.json

@@ -18,7 +18,7 @@
     "clean": "lerna run clean && rm -rf build",
     "serve": "pf-docs-framework serve build/patternfly-org/site",
     "test:v5": "yarn workspace patternfly-org test:a11y:ci",
-    "screenshots": "yarn workspace patternfly-org screenshots",
+    "screenshots": "node node_modules/puppeteer/install.js && yarn workspace patternfly-org screenshots",
     "start": "yarn start:v5",
     "start:v5": "yarn develop:v5",
     "start:extensions": "yarn develop:extensions",

packages/documentation-framework/package.json

@@ -33,7 +33,7 @@
     "file-loader": "6.2.0",
     "file-saver": "1.3.8",
     "fs-extra": "9.0.1",
-    "glob": "8.0.3",
+    "glob": "9.0.0",
     "handlebars": "4.7.7",
     "hast-to-hyperscript": "9.0.0",
     "hast-util-to-text": "2.0.0",
@@ -48,10 +48,10 @@
     "null-loader": "4.0.1",
     "parse-entities": "2.0.0",
     "path-browserify": "1.0.1",
-    "postcss": "7.0.32",
+    "postcss": "8.4.31",
     "postcss-loader": "7.1.0",
     "process": "^0.11.10",
-    "puppeteer": "14.3.0",
+    "puppeteer": "18.2.0",
     "puppeteer-cluster": "0.23.0",
     "react-docgen": "5.3.1",
     "react-monaco-editor": "^0.51.0",
@@ -63,10 +63,10 @@
     "remark-parse": "8.0.3",
     "remark-squeeze-paragraphs": "4.0.0",
     "responsive-loader": "3.1.2",
-    "sharp": "0.30.6",
+    "sharp": "0.32.6",
     "style-to-object": "0.3.0",
     "to-vfile": "6.1.0",
-    "typedoc": "0.22.X",
+    "typedoc": "0.23.0",
     "typescript": "4.3.5",
     "unified": "9.1.0",
     "unist-util-remove": "2.0.0",

packages/documentation-framework/scripts/md/parseMD.js

@@ -7,7 +7,7 @@ const toVfile = require('to-vfile'); // https://github.com/vfile/vfile
 const vfileReport = require('vfile-reporter');
 const yaml = require('js-yaml'); // https://github.com/nodeca/js-yaml
 const chokidar = require('chokidar');
-const { sync } = require('glob');
+const { globSync } = require('glob');
 const { typecheck } = require('./typecheck');
 const { makeSlug } = require('../../helpers/slugger');
 const { liveCodeTypes } = require('../../helpers/liveCodeTypes');
@@ -338,11 +338,11 @@ function getTsDocNameVariant(source) {
 module.exports = {
   sourceProps(glob, ignore) {
     globs.props.push({ glob, ignore });
-    sync(glob, { ignore }).forEach(sourcePropsFile);
+    globSync(glob, { ignore }).forEach(sourcePropsFile);
   },
   sourceMD(glob, source, ignore, buildMode) {
     globs.md.push({ glob, source, ignore });
-    sync(glob, { ignore }).forEach(file => sourceMDFile(file, source, buildMode));
+    globSync(glob, { ignore }).forEach(file => sourceMDFile(file, source, buildMode));
   },
   sourceFunctionDocs,
   writeIndex,

packages/documentation-framework/scripts/md/typecheck.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const glob = require('glob');
+const { globSync } = require('glob');
 const ts = require('typescript');
 const versions = require('../../versions.json');
 
@@ -32,7 +32,7 @@ declare module '\\*.svg' {
 `;
 
 const reactStylesDir = path.join(require.resolve('@patternfly/react-styles/package.json'), '../');
-const reactStyles = glob.sync(path.join(reactStylesDir, 'css/**/*.d.ts'))
+const reactStyles = globSync(path.join(reactStylesDir, 'css/**/*.d.ts'))
   .map(f => f.replace(reactStylesDir, '@patternfly/react-styles/').replace(/\.d.ts$/, ''));
 const defaultImports = [
   'react',

packages/documentation-site/patternfly-docs/content/accessibility/about-modal/about-modal.md

@@ -22,10 +22,10 @@ At a minimum, an about modal should meet the following criteria:
 
 <List isPlain>
   <ListItem>
-    <Checkbox id="aboutModal-a11y-checkbox-1" label={<span>An <code class="ws-code">aria-label</code> is passed if the about modal does not have a product name heading.</span>} description="This gives the about modal an accessible name, providing context of its purpose or content to users." />
+    <Checkbox id="aboutModal-a11y-checkbox-1" label={<span>An <code className="ws-code">aria-label</code> is passed if the about modal does not have a product name heading.</span>} description="This gives the about modal an accessible name, providing context of its purpose or content to users." />
   </ListItem>
   <ListItem>
-    <Checkbox id="aboutModal-a11y-checkbox-2" label={<span>If there is a brand image, it has a valid <code class="ws-code">alt</code> attribute.</span>} description="If the image is purely decorative then an empty string should be passed as a value so that the image is not exposed to assistive technologies." />
+    <Checkbox id="aboutModal-a11y-checkbox-2" label={<span>If there is a brand image, it has a valid <code className="ws-code">alt</code> attribute.</span>} description="If the image is purely decorative then an empty string should be passed as a value so that the image is not exposed to assistive technologies." />
   </ListItem>
   <ListItem>
     <Checkbox id="aboutModal-a11y-checkbox-3" label="The first focusable element, or the about modal itself, receives focus when the about modal is opened." />