Change action to predefined button and add an example

patternfly · Feb 19, 2024 · ec214d9 · ec214d9
1 parent baa2529
commit ec214d9
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 16 deletions.
diff --git a/packages/dev/src/CustomCatalog.tsx b/packages/dev/src/CustomCatalog.tsx
@@ -17,6 +17,8 @@ import {
   getQuickStartStatus,
   LoadingBox,
 } from '@patternfly/quickstarts';
+import { BookmarkIcon } from '@patternfly/react-icons/dist/esm/icons/bookmark-icon';
+import { OutlinedBookmarkIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-bookmark-icon';
 import {
   Divider,
   Gallery,
@@ -80,9 +82,52 @@ export const CustomCatalog: React.FC = () => {
     setFilteredQuickStarts(result);
   };
 
+  const [bookmarked, setBookmarked] = React.useState<string[]>([])
+
   const CatalogWithSections = React.useMemo(
     () => (
       <>
+        <QuickStartCatalogSection>
+          <TextContent>
+            <Text component="h2">Bookmarkable</Text>
+            <Text component="p" className="catalog-sub">
+              Bookmarkable 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
+                      action={{
+                        onClick: (e: React.SyntheticEvent) => {
+                          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">Instructional</Text>

diff --git a/packages/module/src/catalog/QuickStartTile.tsx b/packages/module/src/catalog/QuickStartTile.tsx
@@ -8,7 +8,7 @@ import { camelize } from '../utils/quick-start-utils';
 import QuickStartTileDescription from './QuickStartTileDescription';
 import QuickStartTileFooter from './QuickStartTileFooter';
 import QuickStartTileFooterExternal from './QuickStartTileFooterExternal';
-import QuickStartTileHeader from './QuickStartTileHeader';
+import QuickStartTileHeader, { QuickstartAction } from './QuickStartTileHeader';
 
 import './QuickStartTile.scss';
 
@@ -17,15 +17,16 @@ interface QuickStartTileProps {
   status: QuickStartStatus;
   isActive: boolean;
   onClick?: () => void;
-  action?: React.ReactNode;
+  /** Action config for button rendered next to title */
+  action?: QuickstartAction;
 }
 
 const QuickStartTile: React.FC<QuickStartTileProps> = ({
   quickStart,
   status,
   isActive,
   onClick = () => {},
-  action
+  action,
 }) => {
   const {
     metadata: { name: id },

diff --git a/packages/module/src/catalog/QuickStartTileHeader.scss b/packages/module/src/catalog/QuickStartTileHeader.scss
@@ -9,9 +9,4 @@
   & .pf-v5-c-badge:not(:last-of-type) {
     margin-right: var(--pf-v5-global--spacer--sm);
   }
-
-  .pfext-quick-start-title-header__display-name {
-    display: flex;
-    justify-content: center;
-  }
 }
diff --git a/packages/module/src/catalog/QuickStartTileHeader.tsx b/packages/module/src/catalog/QuickStartTileHeader.tsx
@@ -1,19 +1,31 @@
 import './QuickStartTileHeader.scss';
 import * as React from 'react';
-import { Label, Title } from '@patternfly/react-core';
+import { Button, ButtonProps, Flex, Label, Title } from '@patternfly/react-core';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
+import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
 import { StatusIcon } from '@console/shared';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 import { QuickStartStatus, QuickStartType } from '../utils/quick-start-types';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
 
+export interface QuickstartAction {
+  /** Screen reader aria label. */
+  'aria-label': string;
+  /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
+  icon?: React.ComponentType<unknown>;
+  /** Callback with synthetic event parameter. */
+  onClick?: (e: React.SyntheticEvent) => void;
+  /** Additional button props to be rendered as extra props. */
+  buttonProps?: ButtonProps;
+}
+
 interface QuickStartTileHeaderProps {
   status: string;
   duration: number;
   name: string;
   type?: QuickStartType;
   quickStartId?: string;
-  action?: React.ReactNode;
+  action?: QuickstartAction;
 }
 
 const statusColorMap = {
@@ -28,7 +40,7 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
   name,
   type,
   quickStartId,
-  action
+  action,
 }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
 
@@ -38,14 +50,22 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
     [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
   };
 
+  const ActionIcon = action.icon || OutlinedBookmarkIcon;
+
   return (
     <div className="pfext-quick-start-tile-header">
-      <div className="pfext-quick-start-title-header__display-name">
-        <Title headingLevel="h3" data-test="title" id={quickStartId}>
+      <Flex justifyContent={{ default: 'justifyContentCenter' }}>
+       <Title headingLevel="h3" data-test="title" id={quickStartId}>
           <QuickStartMarkdownView content={name} />
         </Title>
-        {action}
-      </div>
+        <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 && (
           <Label className="pfext-quick-start-tile-header--margin" color={type.color}>

diff --git a/packages/module/src/catalog/index.ts b/packages/module/src/catalog/index.ts
@@ -4,6 +4,6 @@ export { default as QuickStartTile } from './QuickStartTile';
 export { default as QuickStartTileDescription } from './QuickStartTileDescription';
 export { default as QuickStartTileFooter } from './QuickStartTileFooter';
 export { default as QuickStartTileFooterExternal } from './QuickStartTileFooterExternal';
-export { default as QuickStartTileHeader } from './QuickStartTileHeader';
+export { default as QuickStartTileHeader, QuickstartAction } from './QuickStartTileHeader';
 export * from './Toolbar/QuickStartCatalogFilterItems';
 export * from './Catalog';