@patternfly/quickstarts 1.4.0 → 1.4.1-rc.0

package/README.md

@@ -110,7 +110,10 @@ const App = () => {
     allQuickStartStates,
     setActiveQuickStartID,
     setAllQuickStartStates,
+    // Set to true to opt-out of default hidden card footers
     showCardFooters: false,
+    // Set to true to opt-out of default drawer header colors of blue with white text
+    useLegacyHeaderColors: false,
     loading,
     useQueryParams: withQueryParams,
   };
@@ -157,6 +160,10 @@ const SomeNestedComponent = () => {
 export default App;
 ```
 
+## Design update, option to opt-out of new drawer header coloring
+
+See above usage of `useLegacyHeaderColors` boolean to opt-out of update. Should only be used if new color scheme clashes with the usage context.
+
 ## Quick starts format
 
 Quick starts are parsed as markdown. To write your own quick start, if you use Typescript you can [check out the type definition here](https://github.com/patternfly/patternfly-quickstarts/blob/d52b194119f1ff16e69bf589d49a14931a19ac4b/packages/module/src/utils/quick-start-types.ts#L6).
@@ -243,4 +250,4 @@ return (
 Use this [file](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/locales/en/quickstart.json) as a base for your translations.
 Each language is different, especially when it comes to plurals. Try [this utility](https://jsfiddle.net/6bpxsgd4) sourced from [i18next](https://www.i18next.com/translation-function/plurals#how-to-find-the-correct-plural-suffix) to determine the suffixes for the right plural format.
 
-#### 
+#### 

package/dist/QuickStartDrawer.d.ts

@@ -14,6 +14,7 @@ export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement
     onCloseInProgress?: any;
     onCloseNotInProgress?: any;
     showCardFooters?: boolean;
+    useLegacyHeaderColors?: boolean;
     resourceBundle?: any;
     language?: string;
     loading?: boolean;

package/dist/QuickStartPanelContent.d.ts

@@ -9,6 +9,7 @@ declare type QuickStartPanelContentProps = {
     appendTo?: HTMLElement | (() => HTMLElement);
     isResizable?: boolean;
     showClose?: boolean;
+    headerVariant?: '' | 'blue-white';
 };
 declare const QuickStartPanelContent: React.FC<QuickStartPanelContentProps>;
 export default QuickStartPanelContent;

package/dist/index.es.js

@@ -167,7 +167,8 @@ var en = {
 	"Your progress will be saved.": "Your progress will be saved.",
 	"Not available": "Not available",
 	"Copy to clipboard": "Copy to clipboard",
-	"Successfully copied to clipboard!": "Successfully copied to clipboard!"
+	"Successfully copied to clipboard!": "Successfully copied to clipboard!",
+	"Quick start • {{duration, number}} minutes": "Quick start • {{duration, number}} minutes"
 };
 
 /* eslint-disable */
@@ -577,6 +578,7 @@ const QuickStartContextDefaults = {
     },
     setFilter: () => { },
     footer: null,
+    useLegacyHeaderColors: false,
     markdown: null,
     loading: false,
     alwaysShowTaskReview: false,
@@ -595,7 +597,7 @@ const getResource = (resource, options, resourceBundle, lng) => {
 const useValuesForQuickStartContext = (value = {}) => {
     var _a, _b;
     const combinedValue = Object.assign(Object.assign({}, QuickStartContextDefaults), value);
-    const { activeQuickStartID, setActiveQuickStartID, setAllQuickStartStates, useQueryParams, allQuickStartStates, allQuickStarts = [], footer, markdown, } = combinedValue;
+    const { activeQuickStartID, setActiveQuickStartID, setAllQuickStartStates, useQueryParams, allQuickStartStates, allQuickStarts = [], footer, useLegacyHeaderColors, markdown, } = combinedValue;
     const [quickStarts, setQuickStarts] = React__default.useState(combinedValue.allQuickStarts || []);
     const [resourceBundle, setResourceBundle] = React__default.useState(Object.assign(Object.assign({}, en), combinedValue.resourceBundle));
     const [language, setLanguage] = React__default.useState(combinedValue.language);
@@ -778,6 +780,7 @@ const useValuesForQuickStartContext = (value = {}) => {
         setQuickStartTaskStatus,
         getQuickStartForId,
         footer,
+        useLegacyHeaderColors,
         useQueryParams,
         markdown,
         resourceBundle,
@@ -1872,16 +1875,16 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
     });
     const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
     const skippedReviewOrFailed = taskStatus === QuickStartTaskStatus.REVIEW || taskStatus === QuickStartTaskStatus.FAILED;
-    const tryAgain = !isActiveTask && (skippedReviewOrFailed || notCompleted) && (React.createElement(FlexItem, null,
-        React.createElement(Title, { headingLevel: "h4", className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
-    const content = (React.createElement(Flex, { className: "pfext-quick-start-task-header", direction: { default: 'column' }, spaceItems: { default: 'spaceItemsXs' } },
-        React.createElement(FlexItem, null,
-            React.createElement(Title, { headingLevel: "h3", size: size, className: classNames },
-                React.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
-                React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
-                isActiveTask && subtitle && (React.createElement(React.Fragment, null,
-                    ' ',
-                    React.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" }, subtitle))))),
+    const tryAgain = !isActiveTask && (skippedReviewOrFailed || notCompleted) && (React.createElement(React.Fragment, null,
+        React.createElement("div", null),
+        React.createElement("div", { className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
+    const content = (React.createElement("div", { className: "pfext-quick-start-task-header" },
+        React.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
+        React.createElement(Title, { headingLevel: "h3", size: size, className: classNames },
+            React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
+            isActiveTask && subtitle && (React.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" },
+                ' ',
+                subtitle))),
         tryAgain));
     return (React.createElement(WizardNavItem, { content: content, step: taskIndex, onNavItemClick: () => onTaskSelect(taskIndex - 1), navItemComponent: "button", isCurrent: isActiveTask }));
 };
@@ -1968,7 +1971,7 @@ const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onT
             React.createElement(QuickStartTaskHeader, { taskIndex: index + 1, title: title, size: "md", subtitle: getResource('{{index, number}} of {{tasks, number}}')
                     .replace('{{index, number}}', index + 1)
                     .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }),
-            isActiveTask && (React.createElement("div", { style: { marginBottom: 'var(--pf-global--spacer--md)' } },
+            isActiveTask && (React.createElement("div", { className: "pfext-quick-start-task__content" },
                 React.createElement(QuickStartMarkdownView, { content: description }),
                 shouldShowTaskReview && (React.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview }))))));
     })));
@@ -2080,7 +2083,7 @@ const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
     }, [taskNumber, node]);
 };
 const QuickStartPanelContent = (_a) => {
-    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true } = _a, props = __rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose"]);
+    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = __rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
     const { getResource } = React.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React.useState();
     const shadows = useScrollShadows(contentRef);
@@ -2091,6 +2094,7 @@ const QuickStartPanelContent = (_a) => {
     const nextQuickStarts = quickStarts.filter((qs) => { var _a; return (_a = quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.nextQuickStart) === null || _a === void 0 ? void 0 : _a.includes(qs.metadata.name); });
     const headerClasses = css('pfext-quick-start-panel-content__header', {
         'pfext-quick-start-panel-content__header__shadow': shadows === Shadows.top || shadows === Shadows.both,
+        'pfext-quick-start-panel-content__header--blue-white': headerVariant === 'blue-white',
     });
     const footerClass = css({
         'pfext-quick-start-panel-content__footer__shadow': shadows === Shadows.bottom || shadows === Shadows.both,
@@ -2109,12 +2113,12 @@ const QuickStartPanelContent = (_a) => {
         React.createElement("div", { className: headerClasses },
             React.createElement(DrawerHead, null,
                 React.createElement("div", { className: "pfext-quick-start-panel-content__title" },
-                    React.createElement(Title, { headingLevel: "h1", size: "xl", style: { marginRight: 'var(--pf-global--spacer--md)' } }, quickStart === null || quickStart === void 0 ? void 0 :
+                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, quickStart === null || quickStart === void 0 ? void 0 :
                         quickStart.spec.displayName,
                         ' ',
-                        React.createElement("small", { className: "pfext-quick-start-panel-content__duration text-secondary" }, getResource('{{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes).replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)))),
+                        React.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, getResource('Quick start • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes).replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)))),
                 showClose && (React.createElement(DrawerActions, null,
-                    React.createElement(DrawerCloseButton, { onClick: handleClose, "data-testid": "qs-drawer-close" }))))),
+                    React.createElement(DrawerCloseButton, { onClick: handleClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))))),
         React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
             React.createElement(QuickStartController, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, footerClass: footerClass, contentRef: setContentRef })))) : null;
     if (appendTo) {
@@ -2124,13 +2128,14 @@ const QuickStartPanelContent = (_a) => {
 };
 
 const QuickStartContainer = (_a) => {
-    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = false } = _a, props = __rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
+    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = false } = _a, props = __rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "useLegacyHeaderColors", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
     const valuesForQuickstartContext = useValuesForQuickStartContext(Object.assign({ allQuickStarts: quickStarts, activeQuickStartID,
         setActiveQuickStartID,
         allQuickStartStates,
         setAllQuickStartStates, footer: {
             show: showCardFooters,
-        }, language, resourceBundle: Object.assign({}, resourceBundle), loading,
+        }, useLegacyHeaderColors,
+        language, resourceBundle: Object.assign({}, resourceBundle), loading,
         useQueryParams,
         markdown,
         alwaysShowTaskReview }, contextProps));
@@ -2154,7 +2159,7 @@ const QuickStartContainer = (_a) => {
 };
 const QuickStartDrawer = (_a) => {
     var { quickStarts = [], children, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress } = _a, props = __rest(_a, ["quickStarts", "children", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress"]);
-    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, } = React.useContext(QuickStartContext);
+    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, useLegacyHeaderColors, } = React.useContext(QuickStartContext);
     const combinedQuickStarts = allQuickStarts.concat(quickStarts);
     React.useEffect(() => {
         const params = new URLSearchParams(window.location.search);
@@ -2213,7 +2218,7 @@ const QuickStartDrawer = (_a) => {
             },
         }
         : {};
-    const panelContent = (React.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth }, fullWidthPanelStyle)));
+    const panelContent = (React.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth, headerVariant: useLegacyHeaderColors ? '' : 'blue-white' }, fullWidthPanelStyle)));
     return (React.createElement(React.Fragment, null,
         React.createElement(Drawer, Object.assign({ isExpanded: !!activeQuickStartID, isInline: true }, props), children ? (React.createElement(DrawerContent, Object.assign({ panelContent: panelContent }, fullWidthBodyStyle),
             React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-c-drawer__main" }, panelContent))),