From 4a1d1b9d5eb5107817a11a4501dd1cb129e3499c Mon Sep 17 00:00:00 2001 From: Karel Hala Date: Mon, 19 Feb 2024 09:18:14 +0100 Subject: [PATCH] Change action to predefined button and add an example --- packages/dev/src/CustomCatalog.tsx | 45 +++++++++++++++++++ .../module/src/catalog/QuickStartTile.tsx | 7 +-- .../src/catalog/QuickStartTileHeader.scss | 5 --- .../src/catalog/QuickStartTileHeader.tsx | 34 +++++++++++--- packages/module/src/catalog/index.ts | 2 +- 5 files changed, 77 insertions(+), 16 deletions(-) diff --git a/packages/dev/src/CustomCatalog.tsx b/packages/dev/src/CustomCatalog.tsx index 8c4a382d..746cef3f 100644 --- 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([]) + const CatalogWithSections = React.useMemo( () => ( <> + + + Bookmarkable + + Bookmarkable examples + + + + {allQuickStarts + .filter((quickStart: QuickStart) => quickStart.metadata.instructional) + .map((quickStart: QuickStart) => { + const { + metadata: { name: id }, + } = quickStart; + + return ( + + { + 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)} + /> + + ); + })} + + Instructional diff --git a/packages/module/src/catalog/QuickStartTile.tsx b/packages/module/src/catalog/QuickStartTile.tsx index 89405efc..bcc4de4a 100644 --- 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,7 +17,8 @@ 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 = ({ @@ -25,7 +26,7 @@ const QuickStartTile: React.FC = ({ 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 index 9f62e4e8..fb790d69 100644 --- 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 index 33cc925a..5c5a5326 100644 --- 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; + /** 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 = ({ name, type, quickStartId, - action + action, }) => { const { getResource } = React.useContext(QuickStartContext); @@ -38,14 +50,22 @@ const QuickStartTileHeader: React.FC = ({ [QuickStartStatus.NOT_STARTED]: getResource('Not started'), }; + const ActionIcon = action.icon || OutlinedBookmarkIcon; + return (
-
- + <Flex justifyContent={{ default: 'justifyContentCenter' }}> + <Title headingLevel="h3" data-test="title" id={quickStartId}> <QuickStartMarkdownView content={name} /> - {action} -
+