better bookmarking example

patternfly · Mar 7, 2024 · ac14d08 · ac14d08
1 parent 1d1085c
commit ac14d08
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 41 deletions.
diff --git a/packages/dev/src/CustomCatalog.tsx b/packages/dev/src/CustomCatalog.tsx
@@ -82,16 +82,60 @@ 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>
@@ -111,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}
@@ -129,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>
@@ -174,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/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 && (