rc24

Author: jschuler

packages/dev/package.json

@@ -9,7 +9,7 @@
     "serve": "serve public"
   },
   "dependencies": {
-    "@patternfly/quickstarts": "1.0.0-rc.23",
+    "@patternfly/quickstarts": "1.0.0-rc.24",
     "@patternfly/react-core": "^4.101.3",
     "asciidoctor": "^2.2.1",
     "react": "^16.14.0",

packages/module/README.md

@@ -5,12 +5,10 @@ https://quickstarts.netlify.app/
 
 ## Install
 
-Note: These instructions can change over time as the module gets more refined
-
 ```bash
-`yarn add @patternfly/quickstarts @patternfly/patternfly`
+yarn add @patternfly/quickstarts @patternfly/patternfly
 or
-`npm install @patternfly/quickstarts @patternfly/patternfly`
+npm install @patternfly/quickstarts @patternfly/patternfly
 ```
 
 The package currently has these peer dependencies:
@@ -35,7 +33,7 @@ import '@patternfly/quickstarts/dist/quickstarts.css';
 
 ## Usage
 
-In your main app file wrap your application:
+In your main app file wrap your application with the QuickStartContext and the QuickStartDrawer:
 
 ```js
 import {
@@ -44,29 +42,24 @@ import {
   QuickStartCatalogPage,
   useValuesForQuickStartContext,
   useLocalStorage,
-  QuickStartContextValues,
-  QuickStartContext,
+  QuickStartContextValues
 } from '@patternfly/quickstarts';
 // for how these yaml files should look see below
 import quickstartOne from '.yamls/quickstart-one.yaml';
 import quickstartTwo from '.yamls/quickstart-two.yaml';
 
 const App = () => {
   const allQuickStarts = [quickstartOne, quickstartTwo];
+  // You can use the useLocalStorage hook if you want to store user progress in local storage
+  // Otherwise you can use React.useState here or another means (backend) to store the active quick start ID and state
   const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
   const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
-  const { pathname: currentPath } = window.location;
-  const quickStartPath = '/quickstarts';
   const valuesForQuickstartContext = useValuesForQuickStartContext({
     allQuickStarts,
     activeQuickStartID,
     setActiveQuickStartID,
     allQuickStartStates,
-    setAllQuickStartStates,
-    footer: {
-      showAllLink: currentPath !== quickStartPath,
-      onShowAllLinkClick: () => history.push(quickStartPath),
-    },
+    setAllQuickStartStates
   });
 
   return (
@@ -86,7 +79,7 @@ const App = () => {
 };
 
 const SomeNestedComponent = () => {
-  const qsContext = React.useContext < QuickStartContextValues > QuickStartContext;
+  const qsContext = React.useContext<QuickStartContextValues> QuickStartContext;
   return (
     <button onClick={() => qsContext.setActiveQuickStart('a quickstart id')}>
       Open a quickstart from a nested component

packages/module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "1.0.0-rc.23",
+  "version": "1.0.0-rc.24",
   "description": "PatternFly quick starts",
   "files": [
     "dist"

packages/module/src/ConsoleShared/src/components/status/icons.tsx

@@ -11,10 +11,10 @@ import * as React from 'react';
 //   ResourcesFullIcon,
 // } from '@patternfly/react-icons';
 import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 // import { global_default_color_200 as blueDefaultColor } from '@patternfly/react-tokens/dist/js/global_default_color_200';
 // import { global_disabled_color_100 as disabledColor } from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
 import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';

packages/module/src/QuickStartCatalogPage.tsx

@@ -15,7 +15,7 @@ import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-
 import { filterQuickStarts } from './utils/quick-start-utils';
 import QuickStartCatalog from './catalog/QuickStartCatalog';
 import QuickStartCatalogFilter from './catalog/Toolbar/QuickStartCatalogFilter';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 
 type QuickStartCatalogPageProps = {
   quickStarts?: QuickStart[];

packages/module/src/catalog/QuickStartTile.tsx

@@ -8,7 +8,7 @@ import QuickStartTileDescription from './QuickStartTileDescription';
 import QuickStartTileFooter from './QuickStartTileFooter';
 import QuickStartTileFooterExternal from './QuickStartTileFooterExternal';
 import QuickStartTileHeader from './QuickStartTileHeader';
-import RocketIcon from '@patternfly/react-icons/dist/esm/icons/rocket-icon';
+import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
 
 import './QuickStartTile.scss';
 

packages/module/src/catalog/QuickStartTileDescription.tsx

@@ -8,7 +8,7 @@ import {
   TextVariants
 } from '@patternfly/react-core';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
 
 import './QuickStartTileDescription.scss';
@@ -58,6 +58,7 @@ const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
                 e.preventDefault();
                 e.stopPropagation();
               }}
+              aria-label={getResource('Show prerequisites')}
             >
               <InfoCircleIcon />
             </Button>

packages/module/src/catalog/QuickStartTileFooterExternal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button, Flex, FlexItem } from '@patternfly/react-core';
 import { QuickStartExternal } from '../utils/quick-start-types';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 type QuickStartTileFooterProps = {
   link: QuickStartExternal;

packages/module/src/catalog/QuickStartTileHeader.tsx

@@ -4,7 +4,7 @@ import { Label, Title } from '@patternfly/react-core';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 import { QuickStartStatus, QuickStartType } from '../utils/quick-start-types';
 import { StatusIcon } from '@console/shared';
-import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
+import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
 
 type QuickStartTileHeaderProps = {
   status: string;

packages/module/src/controller/QuickStartConclusion.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button } from '@patternfly/react-core';
 import { QuickStart, QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
 import TaskHeader from './QuickStartTaskHeader';