Skip to content

Commit

Permalink
Change action to predefined button and add an example
Browse files Browse the repository at this point in the history
  • Loading branch information
karelhala committed Feb 19, 2024
1 parent baa2529 commit 4a1d1b9
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 16 deletions.
45 changes: 45 additions & 0 deletions packages/dev/src/CustomCatalog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand Down
7 changes: 4 additions & 3 deletions packages/module/src/catalog/QuickStartTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 },
Expand Down
5 changes: 0 additions & 5 deletions packages/module/src/catalog/QuickStartTileHeader.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
34 changes: 27 additions & 7 deletions packages/module/src/catalog/QuickStartTileHeader.tsx
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -28,7 +40,7 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
name,
type,
quickStartId,
action
action,
}) => {
const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);

Expand All @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion packages/module/src/catalog/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

0 comments on commit 4a1d1b9

Please sign in to comment.