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

…ks in new tab (patternfly#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]>
dlabaj · Jun 27, 2024 · 28378f3 · 28378f3
1 parent 01748f5
commit 28378f3
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 54 deletions.
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
@@ -30,11 +30,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);
 
@@ -72,15 +71,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
@@ -109,13 +114,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-v6-c-badge:not(:last-of-type) {
     margin-right: var(--pf-t--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
@@ -1553,6 +1553,11 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.23.tgz#ee3f5da222bf52b75d9c3f578be5885eff745ef6"
   integrity sha512-YaHFiY1vxDI8rpBHY5qt6FbZV2onnvWwbxQseCN2UxDeLx2pb54ZN/sutUnie6FUm3cyKFaTwYS2zDGHZYmeMg==
 
+"@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"
@@ -7012,6 +7017,13 @@ [email protected]:
   dependencies:
     tabbable "^6.2.0"
 
+[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"
@@ -14436,6 +14448,11 @@ tabbable@^6.2.0:
   resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
+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"