diff --git a/packages/dev/package.json b/packages/dev/package.json index b1d36f35..cc349756 100644 --- a/packages/dev/package.json +++ b/packages/dev/package.json @@ -9,10 +9,10 @@ "serve": "serve public" }, "dependencies": { - "@patternfly/patternfly": "^5.0.0", + "@patternfly/patternfly": "^5.2.1", "@patternfly/quickstarts": "*", "@patternfly/transform-adoc": "*", - "@patternfly/react-core": "^5.0.0", + "@patternfly/react-core": "^5.2.1", "asciidoctor": "^2.2.6", "i18next": "^19.8.3", "i18next-browser-languagedetector": "^6.0.1", diff --git a/packages/dev/src/CustomCatalog.tsx b/packages/dev/src/CustomCatalog.tsx index 520d2b18..792e2f83 100644 --- a/packages/dev/src/CustomCatalog.tsx +++ b/packages/dev/src/CustomCatalog.tsx @@ -82,28 +82,65 @@ export const CustomCatalog: React.FC = () => { setFilteredQuickStarts(result); }; - const [bookmarked, setBookmarked] = React.useState([]) + const [bookmarked, setBookmarked] = React.useState([]); const CatalogWithSections = React.useMemo( () => ( <> + {bookmarked.length > 0 && ( + + + Bookmarked + + Bookmarked examples + + + + {allQuickStarts + .filter((quickStart: QuickStart) => bookmarked.includes(quickStart.metadata.name)) + .map((quickStart: QuickStart) => { + const { + metadata: { name: id }, + } = quickStart; + + return ( + + { + e.preventDefault(); + e.stopPropagation(); + setBookmarked((prev) => { + if (prev.includes(id)) { + return prev.filter((bookmark) => bookmark !== id); + } + + return [...prev, id]; + }); + }, + icon: bookmarked.includes(id) ? BookmarkIcon : OutlinedBookmarkIcon, + 'aria-label': 'bookmark', + }} + quickStart={quickStart} + isActive={id === activeQuickStartID} + status={getQuickStartStatus(allQuickStartStates, id)} + /> + + ); + })} + + + )} - Bookmarkable + Instructional - Bookmarkable examples + Instructional examples {allQuickStarts .filter((quickStart: QuickStart) => quickStart.metadata.instructional) - .map((quickStart: QuickStart) => ({ - ...quickStart, - metadata: { - ...quickStart.metadata, - id: `${quickStart.metadata.name}-bookmar` - } - })) .map((quickStart: QuickStart) => { const { metadata: { name: id }, @@ -118,14 +155,14 @@ export const CustomCatalog: React.FC = () => { e.stopPropagation(); setBookmarked((prev) => { if (prev.includes(id)) { - return prev.filter((bookmark) => bookmark !== id) + return prev.filter((bookmark) => bookmark !== id); } return [...prev, id]; }); }, icon: bookmarked.includes(id) ? BookmarkIcon : OutlinedBookmarkIcon, - 'aria-label': 'bookmark' + 'aria-label': 'bookmark', }} quickStart={quickStart} isActive={id === activeQuickStartID} @@ -136,33 +173,6 @@ export const CustomCatalog: React.FC = () => { })} - - - Instructional - - Instructional examples - - - - {allQuickStarts - .filter((quickStart: QuickStart) => quickStart.metadata.instructional) - .map((quickStart: QuickStart) => { - const { - metadata: { name: id }, - } = quickStart; - - return ( - - - - ); - })} - - Real-world examples @@ -181,6 +191,21 @@ export const CustomCatalog: React.FC = () => { return ( { + e.preventDefault(); + e.stopPropagation(); + setBookmarked((prev) => { + if (prev.includes(id)) { + return prev.filter((bookmark) => bookmark !== id); + } + + return [...prev, id]; + }); + }, + icon: bookmarked.includes(id) ? BookmarkIcon : OutlinedBookmarkIcon, + 'aria-label': 'bookmark', + }} quickStart={quickStart} isActive={id === activeQuickStartID} status={getQuickStartStatus(allQuickStartStates, id)} diff --git a/packages/module/src/catalog/QuickStartTile.tsx b/packages/module/src/catalog/QuickStartTile.tsx index 24170660..2d56f9c5 100644 --- a/packages/module/src/catalog/QuickStartTile.tsx +++ b/packages/module/src/catalog/QuickStartTile.tsx @@ -29,11 +29,10 @@ const QuickStartTile: React.FC = ({ action, }) => { const { - metadata: { name, id: metaId }, + metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart; - const id = metaId || name; const { setActiveQuickStart, footer } = React.useContext(QuickStartContext); @@ -69,15 +68,21 @@ const QuickStartTile: React.FC = ({ e: React.FormEvent | React.MouseEvent, ) => { if (ref.current?.contains(e.target as Node)) { - if (link) { - window.open(link.href); - } else { + if (!link) { setActiveQuickStart(id, tasks?.length); } onClick(); } }; + const linkProps = link + ? { + href: link.href, + target: '_blank', + rel: 'noreferrer', + } + : {}; + return (
= ({ } }} // https://github.com/patternfly/patternfly-react/issues/7039 - href={link?.href} + {...linkProps} data-test={`tile ${id}`} description={ } footer={footerComponent} tabIndex={0} + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore-next-line + isSelectableRaised />
); diff --git a/packages/module/src/catalog/QuickStartTileHeader.scss b/packages/module/src/catalog/QuickStartTileHeader.scss index fb790d69..94784130 100644 --- a/packages/module/src/catalog/QuickStartTileHeader.scss +++ b/packages/module/src/catalog/QuickStartTileHeader.scss @@ -9,4 +9,8 @@ & .pf-v5-c-badge:not(:last-of-type) { margin-right: var(--pf-v5-global--spacer--sm); } + + h3 { + flex: 1; + } } diff --git a/packages/module/src/catalog/QuickStartTileHeader.tsx b/packages/module/src/catalog/QuickStartTileHeader.tsx index faf4e58b..bb8f9738 100644 --- a/packages/module/src/catalog/QuickStartTileHeader.tsx +++ b/packages/module/src/catalog/QuickStartTileHeader.tsx @@ -54,17 +54,19 @@ const QuickStartTileHeader: React.FC = ({ return (
- - + <Flex flexWrap={{ default: 'nowrap' }}> + <Title headingLevel="h3" data-test="title" id={quickStartId}> <QuickStartMarkdownView content={name} /> - {action &&