From 6bc40115da06f9f4b6ef080a784081e28bda5920 Mon Sep 17 00:00:00 2001 From: Joachim Schuler Date: Wed, 30 Jun 2021 10:08:40 -0400 Subject: [PATCH] rc24 --- packages/dev/package.json | 2 +- packages/module/README.md | 23 +++++++------------ packages/module/package.json | 2 +- .../src/components/status/icons.tsx | 8 +++---- packages/module/src/QuickStartCatalogPage.tsx | 2 +- .../module/src/catalog/QuickStartTile.tsx | 2 +- .../src/catalog/QuickStartTileDescription.tsx | 3 ++- .../catalog/QuickStartTileFooterExternal.tsx | 2 +- .../src/catalog/QuickStartTileHeader.tsx | 2 +- .../src/controller/QuickStartConclusion.tsx | 2 +- .../src/controller/QuickStartTaskHeader.tsx | 4 ++-- .../module/src/locales/en/quickstart.json | 1 + 12 files changed, 24 insertions(+), 29 deletions(-) diff --git a/packages/dev/package.json b/packages/dev/package.json index 5e4f3777..8d59acc5 100644 --- a/packages/dev/package.json +++ b/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", diff --git a/packages/module/README.md b/packages/module/README.md index a0a09922..f43f2fd8 100644 --- a/packages/module/README.md +++ b/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,8 +42,7 @@ 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'; @@ -53,20 +50,16 @@ 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 QuickStartContext; return ( diff --git a/packages/module/src/catalog/QuickStartTileFooterExternal.tsx b/packages/module/src/catalog/QuickStartTileFooterExternal.tsx index def0497c..56ad934b 100644 --- a/packages/module/src/catalog/QuickStartTileFooterExternal.tsx +++ b/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; diff --git a/packages/module/src/catalog/QuickStartTileHeader.tsx b/packages/module/src/catalog/QuickStartTileHeader.tsx index 0654ace1..b656ff9f 100644 --- a/packages/module/src/catalog/QuickStartTileHeader.tsx +++ b/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; diff --git a/packages/module/src/controller/QuickStartConclusion.tsx b/packages/module/src/controller/QuickStartConclusion.tsx index ae1bebcf..31266e19 100644 --- a/packages/module/src/controller/QuickStartConclusion.tsx +++ b/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'; diff --git a/packages/module/src/controller/QuickStartTaskHeader.tsx b/packages/module/src/controller/QuickStartTaskHeader.tsx index 9cccf719..12d21909 100644 --- a/packages/module/src/controller/QuickStartTaskHeader.tsx +++ b/packages/module/src/controller/QuickStartTaskHeader.tsx @@ -4,8 +4,8 @@ import { QuickStartTaskStatus } from '../utils/quick-start-types'; import { Title, WizardNavItem } from '@patternfly/react-core'; import { markdownConvert } from '../ConsoleInternal/components/markdown-view'; import { removeParagraphWrap } from '../QuickStartMarkdownView'; -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 CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; +import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon'; import cx from 'classnames'; import './QuickStartTaskHeader.scss'; diff --git a/packages/module/src/locales/en/quickstart.json b/packages/module/src/locales/en/quickstart.json index 7cbb3661..c2c91426 100644 --- a/packages/module/src/locales/en/quickstart.json +++ b/packages/module/src/locales/en/quickstart.json @@ -13,6 +13,7 @@ "{{count, number}} item_plural": "{{count, number}} items", "Prerequisites ({{totalPrereqs}})": "Prerequisites ({{totalPrereqs}})", "Prerequisites": "Prerequisites", + "Show prerequisites": "Show prerequisites", "Complete": "Complete", "In progress": "In progress", "Not started": "Not started",