@patternfly/quickstarts 6.5.0-prerelease.3 → 6.5.0

package/dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines.md

@@ -50,7 +50,7 @@ Quick starts are usually surfaced within a catalog as [clickable cards.](/compon
 1. **Icon:** An icon associated with the quick start topic. If no specific icon exists, use the rocket icon.
 1. **Title:** The title (or display name) that briefly identifies the function that the quick start accomplishes. Avoid using the phrase “how to,” and instead begin the title with a gerund (verbs that end in ‘ing’).
     - Example: “Creating a Jupyter notebook”
-1. **Labels:** [Filled labels](/components/label#filled-labels) communicate the estimated completion time and status of a quick start. If the quick start is presented in a mixed catalog of resources, a label can indicate the type of resource.
+1. **Labels:** [Filled labels](/components/label#filled-labels) should be placed in a card to identify quick start experiences and communicate a few high-level details, like estimated completion time and completion status. To signify that a card is linked to a quick start, use a "Quick start" [nonstatus green label](/components/label/design-guidelines#nonstatus-labels). 
 1. **Description:** A description that summarizes the quick start outcome in 4 lines or fewer, without truncating. Begin the description with an action verb. 
     - Example: “Connect to Red Hat OpenShift Streams for Apache Kafka from a Jupyter notebook.”
 1. **Prerequisites (optional):** A bulleted list of prerequisites, displayed in a popover, which outlines permissions needed to complete the tasks, and anything that must be pre-configured before starting the quick start. Avoid phrasing prerequisites as questions. The total number of prerequisites is listed in parentheses on the quick start card.

package/dist/quickstarts-full.es.js

@@ -30802,12 +30802,8 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, act
     }, [footer, id, link, status, tasks === null || tasks === void 0 ? void 0 : tasks.length]);
     const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon;
     const additionalAction = action ? (jsxRuntime.jsx(Button, Object.assign({ "aria-label": action['aria-label'], icon: jsxRuntime.jsx(ActionIcon, {}), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
-    return (jsxRuntime.jsxs(Card, Object.assign({ id: `${id}-catalog-tile`, style: { height: '100%' }, "data-testid": `qs-card-${camelize(displayName)}`, className: "pfext-catalog-item" }, (isActive && {
-        isClickable: true,
-        isSelectable: true,
-        isSelected: true,
-        isClicked: true,
-    }), { children: [jsxRuntime.jsx(CardHeader, Object.assign({}, (action && {
+    const cardClasses = `pfext-catalog-item${isActive ? ' pf-m-current' : ''}`;
+    return (jsxRuntime.jsxs(Card, Object.assign({ id: `${id}-catalog-tile`, style: { height: '100%' }, "data-testid": `qs-card-${camelize(displayName)}`, className: cardClasses }, { children: [jsxRuntime.jsx(CardHeader, Object.assign({}, (action && {
                 actions: { actions: additionalAction },
             }), { children: quickStartIcon })), jsxRuntime.jsx(CardTitle, { children: jsxRuntime.jsx(QuickStartTileHeader, { name: displayName, onSelect: onSelect, quickStartId: id }) }), jsxRuntime.jsx(CardBody, { children: jsxRuntime.jsxs(Stack, Object.assign({ hasGutter: true }, { children: [jsxRuntime.jsxs(Flex, Object.assign({ spaceItems: { default: 'spaceItemsSm' } }, { children: [type && jsxRuntime.jsx(Label, Object.assign({ color: type.color }, { children: type.text })), durationMinutes && (jsxRuntime.jsx(Label, Object.assign({ variant: "outline", "data-test": "duration", icon: jsxRuntime.jsx(OutlinedClockIcon, {}) }, { children: getResource('{{duration, number}} minutes', durationMinutes).replace('{{duration, number}}', durationMinutes) }))), status !== QuickStartStatus.NOT_STARTED && (jsxRuntime.jsx(Label, Object.assign({ variant: "outline", color: statusColorMap[status], icon: jsxRuntime.jsx(StatusIcon, { status: status }), "data-test": "status" }, { children: statusLocaleMap[status] })))] })), jsxRuntime.jsx(QuickStartTileDescription, { description: description, prerequisites: prerequisites })] })) }), jsxRuntime.jsx(CardFooter, { children: footerComponent })] })));
 };