Merge pull request #91 from patternfly/quickstarts-standalone

Quickstarts standalone
patternfly · Jan 5, 2022 · 47fb962 · 47fb962
2 parents 62a816e + d5aca66
commit 47fb962
Show file tree

Hide file tree

Showing 28 changed files with 424 additions and 57 deletions.
diff --git a/packages/dev/package.json b/packages/dev/package.json
@@ -9,7 +9,7 @@
     "serve": "serve public"
   },
   "dependencies": {
-    "@patternfly/quickstarts": "1.3.0",
+    "@patternfly/quickstarts": "1.4.0",
     "@patternfly/transform-adoc": "*",
     "@patternfly/react-core": "^4.135.0",
     "asciidoctor": "^2.2.1",

diff --git a/packages/dev/src/common/Page.tsx b/packages/dev/src/common/Page.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {
   PageHeaderTools,
   Button,
-  Avatar,
   PageHeader,
   Brand,
   Nav,
@@ -13,7 +12,6 @@ import {
 import { Link } from 'react-router-dom';
 import Demos from '../Demos';
 import { SettingsModal } from '../SettingsModal';
-import imgAvatar from '../assets/images/imgAvatar.svg';
 import imgBrand from '../assets/images/imgBrand.svg';
 
 const AppToolbar = () => {
@@ -25,7 +23,6 @@ const AppToolbar = () => {
         Settings
       </Button>
       <SettingsModal isOpen={isModalOpen} onClose={onModalClose} />
-      <Avatar src={imgAvatar} alt="Avatar image" />
     </PageHeaderTools>
   );
 };

diff --git a/packages/dev/src/index.tsx b/packages/dev/src/index.tsx
@@ -1,7 +1,16 @@
+// fonts, variables
 import '@patternfly/react-core/dist/styles/base.css';
-import '@patternfly/quickstarts/dist/quickstarts.css';
 import '@patternfly/transform-adoc/dist/transform-adoc.css';
 
+import '@patternfly/quickstarts/dist/quickstarts.css';
+
+// the following stylesheets are here for testing quickstarts-standalone
+
+// global styles for Drawer, Popover, Modal (including Backdrop and Bullseye)
+// import '@patternfly/quickstarts/dist/patternfly-global.css';
+// PF and quickstarts styles nested within .pfext-quick-start__base
+// import '@patternfly/quickstarts/dist/quickstarts-standalone.min.css';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';

diff --git a/packages/dev/webpack.config.js b/packages/dev/webpack.config.js
@@ -45,6 +45,7 @@ module.exports = (_env, argv) => {
           test: /\.css$/,
           use: cssLoaders,
         },
+        // here for testing with quickstarts-standalone.css (see src/index.tsx)
         // {
         //   test: /\.css$/,
         //   include: (stylesheet) => stylesheet.includes('@patternfly/react-styles/css/'),
@@ -68,7 +69,7 @@ module.exports = (_env, argv) => {
             {
               loader: 'file-loader',
               options: {
-                name: '[name].[ext]',
+                name: '[name].[hash:8].[ext]',
                 outputPath: 'fonts/',
               },
             },

diff --git a/packages/module/README.md b/packages/module/README.md
@@ -27,6 +27,23 @@ import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/quickstarts/dist/quickstarts.min.css';
 ```
 
+### Stylesheets if you use an older version of PatternFly
+If you use an older version of @patternfly/react-core (older than "4.115.2"), and you can't upgrade yet, you can pull in the necessary PatternFly styles that @patternfly/quickstarts depends upon.
+
+Ideally @patternfly/quickstarts will use the consumer provided PatternFly styles, only use these stylesheets if really needed.
+
+`quickstarts-standalone.min.css` nests the css classes within a **.pfext-quick-start__base** parent, so that they have higher specificity. `patternfly-global.css` includes component styles that we cannot nest with more specificiy (for example Drawer since it can include consumer components that depend on an older PF version).
+
+> Note: Only use these stylesheets if necessary!
+```js
+// import base from PatternFly to get the font
+import '@patternfly/react-core/dist/styles/base.css';
+// some global styles and variables that quickstarts uses (Drawer, Popover, Modal, Backdrop, Bullseye)
+import '@patternfly/quickstarts/dist/patternfly-global.css';
+// PF and quickstarts styles nested within .pfext-quick-start__base
+import '@patternfly/quickstarts/dist/quickstarts-standalone.min.css';
+```
+
 ## Usage example
 
 Note: You can also view this example on [codesandbox](https://codesandbox.io/s/patternfly-quickstarts-finished-cnv53)!

diff --git a/packages/module/package.json b/packages/module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "PatternFly quick starts",
   "files": [
     "dist"
@@ -20,7 +20,7 @@
   "scripts": {
     "clean": "rm -rf dist",
     "prebuild": "yarn clean",
-    "build": "rollup -c && yarn purge-css && yarn combine && yarn min-css",
+    "build": "rollup -c && yarn purge-css && yarn combine && yarn min-css && yarn min-css-standalone",
     "watch": "rollup -w --config rollup-quick.config.js",
     "quick": "rollup --config rollup-quick.config.js",
     "combine": "node ./combineCss.js",
@@ -29,9 +29,10 @@
     "type-check": "tsc --noEmit",
     "ci-checks": "yarn type-check && yarn lint && yarn test",
     "build:ts": "yarn clean && tsc --p tsconfig.json",
-    "post-css": "yarn purge-css && yarn min-css",
+    "post-css": "yarn purge-css && yarn min-css && yarn min-css-standalone",
     "purge-css": "purgecss --config ./purgecss.config.js",
-    "min-css": "cleancss dist/quickstarts.css -o dist/quickstarts.min.css"
+    "min-css": "cleancss dist/quickstarts.css -o dist/quickstarts.min.css",
+    "min-css-standalone": "cleancss -o dist/quickstarts-standalone.min.css dist/patternfly-nested.css dist/quickstarts-standalone.css"
   },
   "peerDependencies": {
     "@patternfly/react-core": ">=4.115.2",
@@ -68,6 +69,7 @@
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
     "node-sass": "^6.0.1",
+    "node-sass-glob-importer": "^5.3.2",
     "prettier": "^2.1.2",
     "purgecss": "^4.0.0",
     "react": "^16.8.0",

diff --git a/packages/module/purgecss.config.js b/packages/module/purgecss.config.js
@@ -5,7 +5,12 @@
 
 module.exports = {
   content: ['dist/quickstarts-full.es.js'],
-  css: ['dist/quickstarts-vendor.css'],
+  css: [
+    'dist/quickstarts-vendor.css',
+    'dist/patternfly-global.css',
+    'dist/patternfly-nested.css',
+    'dist/quickstarts-standalone.css',
+  ],
   fontFace: false,
   keyframes: true,
   variables: false,

diff --git a/packages/module/rollup.config.js b/packages/module/rollup.config.js
@@ -8,6 +8,8 @@ import visualizer from 'rollup-plugin-visualizer';
 import packageJson from './package.json';
 import scss from 'rollup-plugin-scss';
 
+const globImporter = require('node-sass-glob-importer');
+
 const commonPlugins = [
   resolve({
     preferBuiltins: true,
@@ -20,12 +22,11 @@ const commonPlugins = [
   json(),
 ];
 
+const includePaths = ['node_modules/', '../../node_modules/'];
 const commonScssOptions = {
-  includePaths: ['node_modules/', '../../node_modules/'],
-  importer(path) {
-    return { file: path[0] !== '~' ? path : path.slice(1) };
-  },
+  includePaths,
   sass: require('node-sass'),
+  importer: globImporter(),
 };
 
 // CommonJS build
@@ -49,7 +50,8 @@ const cjsBuild = {
 
 // ES build
 // Outputs the compiled dist/index.es.js
-// as well as the main dist/quickstarts.css stylesheet
+// as well as the dist/quickstarts-base.css stylesheet
+// (which will be merged with quickstarts-vendor.css into quickstarts.css)
 export const esBuild = {
   input: 'src/index.ts',
   output: {
@@ -91,6 +93,7 @@ const esBuildWithDeps = {
 };
 
 // This is just for building out the quickstarts-vendor.css stylesheet
+// bundles in react-catalog-view-extension, CodeBlock, and ClipboardCopy styles
 export const cssVendor = {
   input: 'src/styles/vendor-entry.ts',
   output: {
@@ -106,4 +109,52 @@ export const cssVendor = {
   ],
 };
 
-export default [cjsBuild, esBuild, esBuildWithDeps, cssVendor];
+// wraps the quick starts styles within .pfext-quick-start__base
+// quickstarts-standalone.scss is used in conjunction with patternfly-nested.scss,
+// for consumers that have a different major version of PatternFly
+export const quickStartsStyles = {
+  input: 'src/styles/quickstarts-standalone-entry.ts',
+  output: false,
+  plugins: [
+    scss({
+      output: 'dist/quickstarts-standalone.css',
+      ...commonScssOptions,
+    }),
+  ],
+};
+
+// wraps PatternFly styles within .pfext-quick-start__base
+// useful for consumers that use a different major version of PatternFly
+// which might be incompatible with the PatternFly styles we depend upon
+export const pfStyles = {
+  input: 'src/styles/patternfly-nested-entry.ts',
+  output: false,
+  plugins: [
+    scss({
+      output: 'dist/patternfly-nested.css',
+      ...commonScssOptions,
+    }),
+  ],
+};
+
+// Drawer, Popover, and Modal (including Backdrop and Bullseye) styles
+export const pfGlobalStyles = {
+  input: 'src/styles/patternfly-global-entry.ts',
+  output: false,
+  plugins: [
+    scss({
+      output: 'dist/patternfly-global.css',
+      ...commonScssOptions,
+    }),
+  ],
+};
+
+export default [
+  cjsBuild,
+  esBuild,
+  esBuildWithDeps,
+  cssVendor,
+  pfStyles,
+  pfGlobalStyles,
+  quickStartsStyles,
+];
diff --git a/...ges/module/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx b/...ges/module/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx
@@ -51,12 +51,14 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
       isVisible
       reference={() => element as HTMLElement}
       content={getResource('Successfully copied to clipboard!')}
+      className="pfext-quick-start__base"
     />
   ) : (
     <Tooltip
       key="before-copy"
       reference={() => element as HTMLElement}
       content={getResource('Copy to clipboard')}
+      className="pfext-quick-start__base"
     />
   );
 };

diff --git a/packages/module/src/ConsoleShared/src/components/popper/SimplePopper.tsx b/packages/module/src/ConsoleShared/src/components/popper/SimplePopper.tsx
@@ -76,7 +76,11 @@ const SimplePopper: React.FC = ({ children }) => {
 
   return isOpen ? (
     <Portal>
-      <div ref={nodeRefCallback} style={{ zIndex: 9999, position: 'absolute', top: 0, left: 0 }}>
+      <div
+        ref={nodeRefCallback}
+        style={{ zIndex: 9999, position: 'absolute', top: 0, left: 0 }}
+        className="pfext-quick-start__base"
+      >
         {children}
       </div>
     </Portal>

diff --git a/packages/module/src/QuickStartCatalogPage.tsx b/packages/module/src/QuickStartCatalogPage.tsx
@@ -154,7 +154,7 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
   }
 
   return (
-    <>
+    <div className="pfext-quick-start__base">
       {showTitle && (
         <div className="pfext-page-layout__header">
           <Text component="h1" className="pfext-page-layout__title" data-test="page-title">
@@ -181,6 +181,6 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
           <QuickStartCatalog quickStarts={filteredQuickStarts} />
         )}
       </>
-    </>
+    </div>
   );
 };
diff --git a/packages/module/src/QuickStartCloseModal.tsx b/packages/module/src/QuickStartCloseModal.tsx
@@ -17,7 +17,7 @@ const QuickStartCloseModal: React.FC<QuickStartCloseModalProps> = ({
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
   return (
     <Modal
-      className="pfext-quick-start-drawer__modal"
+      className="pfext-quick-start-drawer__modal pfext-quick-start__base"
       isOpen={isOpen}
       variant={ModalVariant.small}
       showClose={false}

diff --git a/packages/module/src/QuickStartPanelContent.tsx b/packages/module/src/QuickStartPanelContent.tsx
@@ -86,7 +86,7 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
   const content = quickStart ? (
     <DrawerPanelContent
       isResizable={isResizable}
-      className="pfext-quick-start-panel-content"
+      className="pfext-quick-start__base"
       data-testid={`qs-drawer-${camelize(quickStart.spec.displayName)}`}
       data-qs={`qs-step-${getStep()}`}
       data-test="quickstart drawer"

diff --git a/packages/module/src/catalog/QuickStartTileDescription.tsx b/packages/module/src/catalog/QuickStartTileDescription.tsx
@@ -40,19 +40,21 @@ const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
           <Popover
             aria-label={getResource('Prerequisites')}
             headerContent={getResource('Prerequisites')}
-            className="pfext-page-layout__base"
+            className="pfext-quick-start__base"
             bodyContent={
-              <TextList
-                aria-label={getResource('Prerequisites')}
-                className="pfext-quick-start-tile-prerequisites-list"
-              >
-                {prereqs.map((prerequisite, index) => (
-                  // eslint-disable-next-line react/no-array-index-key
-                  <TextListItem key={index}>
-                    <QuickStartMarkdownView content={prerequisite} />
-                  </TextListItem>
-                ))}
-              </TextList>
+              <div className="pfext-popover__base">
+                <TextList
+                  aria-label={getResource('Prerequisites')}
+                  className="pfext-quick-start-tile-prerequisites-list"
+                >
+                  {prereqs.map((prerequisite, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <TextListItem key={index}>
+                      <QuickStartMarkdownView content={prerequisite} />
+                    </TextListItem>
+                  ))}
+                </TextList>
+              </div>
             }
           >
             <Button

diff --git a/packages/module/src/controller/QuickStartContent.scss b/packages/module/src/controller/QuickStartContent.scss
@@ -1,5 +1,3 @@
-@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
-
 .pfext-quick-start-content {
   flex: 1 1 0;
   overflow: auto;

diff --git a/packages/module/src/styles/_base.scss b/packages/module/src/styles/_base.scss
@@ -1,6 +1,6 @@
 // Base element styles.
 // Please DO NOT add rules of this type.
-.pfext-quick-start-panel-content {
+.pfext-quick-start-panel-content__body {
   dl {
     margin: 0px; }
 
@@ -30,11 +30,12 @@
 }
 
 // drawer
-.pfext-quick-start-panel-content,
+.pfext-quick-start-panel-content__header,
+.pfext-quick-start-panel-content__body,
 // catalog gallery wrapper
 .pfext-page-layout__content,
 // catalog item prereq popover
-.pfext-page-layout__base {
+.pfext-popover__base {
   --pf-global--FontSize--md: 14px;
   --pf-global--FontSize--sm: 13px;
 

diff --git a/packages/module/src/styles/legacy-bootstrap/README.md b/packages/module/src/styles/legacy-bootstrap/README.md
@@ -7,14 +7,14 @@ Before we had a dependency on bootstrap-sass and pulled in several of their styl
 ```
 .pfext-markdown-view {
   @import './ConsoleInternal/style/vars';
-  @import '~patternfly/dist/sass/patternfly/variables';
-  @import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
-  @import '~bootstrap-sass/assets/stylesheets/bootstrap/mixins';
-  @import '~patternfly/dist/sass/patternfly/bootstrap-mixin-overrides';
+  @import 'patternfly/dist/sass/patternfly/variables';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/variables';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/mixins';
+  @import 'patternfly/dist/sass/patternfly/bootstrap-mixin-overrides';
 
-  @import '~bootstrap-sass/assets/stylesheets/bootstrap/type';
-  @import '~bootstrap-sass/assets/stylesheets/bootstrap/code';
-  @import '~bootstrap-sass/assets/stylesheets/bootstrap/tables';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/type';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/code';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/tables';
 }
 ```
 

diff --git a/packages/module/src/styles/patternfly-global-entry.ts b/packages/module/src/styles/patternfly-global-entry.ts
@@ -0,0 +1 @@
+import './patternfly-global.scss';