Some post-PF5 fixes: Make cards clickable, fix card styling, open lin…

…ks in new tab (#289) * fix(quickstart tile): opening quickstarts on click event * some other fixes * better bookmarking example * small css fix --------- Co-authored-by: Martin Marosi <[email protected]>
patternfly · Mar 7, 2024 · fb94978 · fb94978
1 parent f1a59fb
commit fb94978
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 56 deletions.
diff --git 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
@@ -82,28 +82,65 @@ export const CustomCatalog: React.FC = () => {
     setFilteredQuickStarts(result);
   };
 
-  const [bookmarked, setBookmarked] = React.useState<string[]>([])
+  const [bookmarked, setBookmarked] = React.useState<string[]>([]);
 
   const CatalogWithSections = React.useMemo(
     () => (
       <>
+        {bookmarked.length > 0 && (
+          <QuickStartCatalogSection>
+            <TextContent>
+              <Text component="h2">Bookmarked</Text>
+              <Text component="p" className="catalog-sub">
+                Bookmarked examples
+              </Text>
+            </TextContent>
+            <Gallery className="pfext-quick-start-catalog__gallery" hasGutter>
+              {allQuickStarts
+                .filter((quickStart: QuickStart) => bookmarked.includes(quickStart.metadata.name))
+                .map((quickStart: QuickStart) => {
+                  const {
+                    metadata: { name: id },
+                  } = quickStart;
+
+                  return (
+                    <GalleryItem key={id} className="pfext-quick-start-catalog__gallery-item">
+                      <QuickStartTile
+                        action={{
+                          onClick: (e: React.SyntheticEvent) => {
+                            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)}
+                      />
+                    </GalleryItem>
+                  );
+                })}
+            </Gallery>
+          </QuickStartCatalogSection>
+        )}
         <QuickStartCatalogSection>
           <TextContent>
-            <Text component="h2">Bookmarkable</Text>
+            <Text component="h2">Instructional</Text>
             <Text component="p" className="catalog-sub">
-              Bookmarkable examples
+              Instructional examples
             </Text>
           </TextContent>
           <Gallery className="pfext-quick-start-catalog__gallery" hasGutter>
             {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 = () => {
               })}
           </Gallery>
         </QuickStartCatalogSection>
-        <QuickStartCatalogSection>
-          <TextContent>
-            <Text component="h2">Instructional</Text>
-            <Text component="p" className="catalog-sub">
-              Instructional examples
-            </Text>
-          </TextContent>
-          <Gallery className="pfext-quick-start-catalog__gallery" hasGutter>
-            {allQuickStarts
-              .filter((quickStart: QuickStart) => quickStart.metadata.instructional)
-              .map((quickStart: QuickStart) => {
-                const {
-                  metadata: { name: id },
-                } = quickStart;
-
-                return (
-                  <GalleryItem key={id} className="pfext-quick-start-catalog__gallery-item">
-                    <QuickStartTile
-                      quickStart={quickStart}
-                      isActive={id === activeQuickStartID}
-                      status={getQuickStartStatus(allQuickStartStates, id)}
-                    />
-                  </GalleryItem>
-                );
-              })}
-          </Gallery>
-        </QuickStartCatalogSection>
         <QuickStartCatalogSection>
           <TextContent>
             <Text component="h2">Real-world examples</Text>
@@ -181,6 +191,21 @@ export const CustomCatalog: React.FC = () => {
                 return (
                   <GalleryItem key={id} className="pfext-quick-start-catalog__gallery-item">
                     <QuickStartTile
+                      action={{
+                        onClick: (e: React.SyntheticEvent) => {
+                          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
@@ -29,11 +29,10 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
   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<QuickStartContextValues>(QuickStartContext);
 
@@ -69,15 +68,21 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
     e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, 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 (
     <div ref={ref} onClick={handleClick}>
       <CatalogTile
@@ -106,13 +111,16 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
           }
         }}
         // https://github.com/patternfly/patternfly-react/issues/7039
-        href={link?.href}
+        {...linkProps}
         data-test={`tile ${id}`}
         description={
           <QuickStartTileDescription description={description} prerequisites={prerequisites} />
         }
         footer={footerComponent}
         tabIndex={0}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore-next-line
+        isSelectableRaised
       />
     </div>
   );

diff --git 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
@@ -54,17 +54,19 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
 
   return (
     <div className="pfext-quick-start-tile-header">
-      <Flex justifyContent={{ default: 'justifyContentCenter' }} flexWrap={{ default: 'nowrap' }}>
-       <Title headingLevel="h3" data-test="title" id={quickStartId}>
+      <Flex flexWrap={{ default: 'nowrap' }}>
+        <Title headingLevel="h3" data-test="title" id={quickStartId}>
           <QuickStartMarkdownView content={name} />
         </Title>
-        {action && <Button
-          aria-label={action['aria-label']}
-          icon={<ActionIcon />}
-          variant='plain'
-          onClick={action.onClick}
-          {...action.buttonProps}
-        />}
+        {action && (
+          <Button
+            aria-label={action['aria-label']}
+            icon={<ActionIcon />}
+            variant="plain"
+            onClick={action.onClick}
+            {...action.buttonProps}
+          />
+        )}
       </Flex>
       <div className="pfext-quick-start-tile-header__status">
         {type && (

diff --git a/yarn.lock b/yarn.lock
@@ -1756,6 +1756,11 @@
   resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.0.2.tgz#f5daf2c98ccb85e6466d42fd61d39ba3c10ed532"
   integrity sha512-PB8+MLdYVgF1hIOxGmnVsZG+YHUX3RePe5W1oMS4gS00EmSgw1cobr1Qbpy/BqqS8/R9DRN4hZ2FKDT0d5tkFQ==
 
+"@patternfly/patternfly@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.2.1.tgz#7ca014a1fdb45c8ac88abf7b57fccb8731e27542"
+  integrity sha512-n5xFjyj1J4eIFZ7XeU6K44POKRAuDlO5yALPbn084y+jPy1j861AaQ+zIUbzCi4IzBlHrvoXVKij7p1zy7Ditg==
+
 "@patternfly/react-catalog-view-extension@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-5.0.0.tgz#a3892debd5987e15e9d7cabf9ed4ed3b25f48b0f"
@@ -1787,16 +1792,38 @@
     react-dropzone "^14.2.3"
     tslib "^2.5.0"
 
+"@patternfly/react-core@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-5.2.1.tgz#e2fb0a4ce3418674378f80d0c2416e94cf20fd86"
+  integrity sha512-SWQHALhcjxjmwcIJ6V3tG6V7a2M0WkkUbc6F8mSPk6l9q6j3f+WvZ9HqgzVA+h+Q12UbtIrlQvgUx7pAxZekkg==
+  dependencies:
+    "@patternfly/react-icons" "^5.2.1"
+    "@patternfly/react-styles" "^5.2.1"
+    "@patternfly/react-tokens" "^5.2.1"
+    focus-trap "7.5.2"
+    react-dropzone "^14.2.3"
+    tslib "^2.5.0"
+
 "@patternfly/react-icons@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-5.0.0.tgz#bb56ead97425f1b3ab886ee291ba6b6af4088e9d"
   integrity sha512-GG5Y/UYl0h346MyDU9U650Csaq4Mxk8S6U8XC7ERk/xIrRr2RF67O2uY7zKBDMTNLYdBvPzgc2s3OMV1+d2/mg==
 
+"@patternfly/react-icons@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-5.2.1.tgz#c29e9fbecd13c33e772abe6089e31bb86b1ab2a8"
+  integrity sha512-aeJ0X+U2NDe8UmI5eQiT0iuR/wmUq97UkDtx3HoZcpRb9T6eUBfysllxjRqHS8rOOspdU8OWq+CUhQ/E2ZDibg==
+
 "@patternfly/react-styles@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-5.0.0.tgz#63705ad498ff271fd056e92bd07b2c720ef3491a"
   integrity sha512-xbSCgjx+fPrXbIzUznwTFWtJEbzVS0Wn4zrejdKJYQTY+4YcuPlFkeq2tl3syzwGsaYMpHiFwQiTaKyTvlwtuw==
 
+"@patternfly/react-styles@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-5.2.1.tgz#a6f8c750bd65572702ea94c0a6b58f6c0d4361fb"
+  integrity sha512-GT96hzI1QenBhq6Pfc51kxnj9aVLjL1zSLukKZXcYVe0HPOy0BFm90bT1Fo4e/z7V9cDYw4SqSX1XLc3O4jsTw==
+
 "@patternfly/react-table@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-5.0.0.tgz#2808f22d01818c31e6ddc69cc3a07c9381dc6d84"
@@ -1814,6 +1841,11 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-5.0.0.tgz#8e2698d32d5353359e713312687a6b08ead0080b"
   integrity sha512-to2CXIZ6WTuzBcjLZ+nXi5LhnYkSIDu3RBMRZwrplmECOoUWv87CC+2T0EVxtASRtpQfikjD2PDKMsif5i0BxQ==
 
+"@patternfly/react-tokens@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-5.2.1.tgz#fca7decaa7039dcd93fd215f3f533eff9d070b22"
+  integrity sha512-8GYz/jnJTGAWUJt5eRAW5dtyiHPKETeFJBPGHaUQnvi/t1ZAkoy8i4Kd/RlHsDC7ktiu813SKCmlzwBwldAHKg==
+
 "@percy/agent@~0":
   version "0.28.6"
   resolved "https://registry.yarnpkg.com/@percy/agent/-/agent-0.28.6.tgz#b220fab6ddcf63ae4e6c343108ba6955a772ce1c"
@@ -7439,6 +7471,13 @@ [email protected]:
   dependencies:
     tabbable "^6.1.2"
 
+[email protected]:
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.5.2.tgz#e5ee678d10a18651f2591ffb66c949fb098d57cf"
+  integrity sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==
+  dependencies:
+    tabbable "^6.2.0"
+
 [email protected]:
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.12.1.tgz#de54a6205311b93d60398ebc01cf7015682312b6"
@@ -15210,6 +15249,11 @@ tabbable@^6.1.2:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.2.tgz#b0d3ca81d582d48a80f71b267d1434b1469a3703"
   integrity sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==
 
+tabbable@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 table-layout@^0.4.3, table-layout@~0.4.0:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/table-layout/-/table-layout-0.4.5.tgz#d906de6a25fa09c0c90d1d08ecd833ecedcb7378"