### Install Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/START-HERE.md Install the @patternfly/react-catalog-view-extension package using npm. ```bash npm install @patternfly/react-catalog-view-extension ``` -------------------------------- ### Text Wrapping Styles Examples Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Examples demonstrating different 'wrapStyle' options for VerticalTabsTab titles. ```typescript // Default - wraps to multiple lines // Truncates with ellipsis // No wrapping ``` -------------------------------- ### Selectable Tiles (Multi-select) Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example demonstrating how to implement multi-select functionality with CatalogTiles. ```typescript const [selected, setSelected] = useState(new Set()); function toggleTile(id) { const newSelected = new Set(selected); if (newSelected.has(id)) { newSelected.delete(id); } else { newSelected.add(id); } setSelected(newSelected); } // In render: toggleTile(item.id)} /> ``` -------------------------------- ### Simple Browse Catalog Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of a basic CatalogTile for browsing services. ```typescript ``` -------------------------------- ### With Rich Metadata Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of a CatalogTile with various metadata including badges and footer. ```typescript , item.popular && , item.newItem && , ]} footer={item.releaseDate} /> ``` -------------------------------- ### Basic Vertical Navigation Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Basic implementation of VerticalTabs and VerticalTabsTab for creating collapsible navigation trees. ```typescript ``` -------------------------------- ### Nested Hierarchies Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example demonstrating how VerticalTabsTab can contain nested VerticalTabs to create hierarchical navigation. ```typescript ``` -------------------------------- ### Show More Logic Calculation Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example calculation for determining when to show the 'Show More' button in FilterSidePanelCategory. ```text Total items: 8 maxShowCount: 5 leeway: 2 Calculation: - hiddenCount = 8 - 5 = 3 - leeway check: 3 > 2 = true → Show "Show 3 more" button - When toggled: Show all 8 items + "Show less" button ``` -------------------------------- ### Icon Integration Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of integrating icons before filter labels using the 'icon' prop on FilterSidePanelCategoryItem. ```typescript import { DatabaseIcon, CacheIcon } from '@patternfly/react-icons'; }> Database }> Cache ``` -------------------------------- ### Accessible Catalog Implementation Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/examples.md Complete example with accessibility best practices. ```typescript import { useState } from 'react'; import { CatalogTile, CatalogTileBadge, FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension'; import { CheckCircleIcon, DatabaseIcon } from '@patternfly/react-icons'; import { Page, PageSection, PageSectionVariants } from '@patternfly/react-core'; export function AccessibleCatalog() { const [filters, setFilters] = useState(new Set()); const items = [ { id: 'postgres', name: 'PostgreSQL', type: 'Database', certified: true }, { id: 'mysql', name: 'MySQL', type: 'Database', certified: false }, { id: 'redis', name: 'Redis', type: 'Cache', certified: true }, ]; const filtered = items.filter(item => filters.size === 0 || filters.has(item.type) ); return (

Service Catalog

Browse and select from available services
{/* Filters with ARIA labels */} {/* Catalog grid with proper ARIA */}
{filtered.map(item => ( ) ]} /> ))}
); } ``` -------------------------------- ### Show Item Details Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/START-HERE.md Example of displaying item details using PropertiesSidePanel and PropertyItem. ```typescript import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension'; Active} /> ``` -------------------------------- ### Installing with Yarn Source: https://github.com/patternfly/react-catalog-view/blob/main/README.md Installs the react-catalog-view-extension package using Yarn. ```bash yarn add react-catalog-view-extension ``` -------------------------------- ### Featured/Hero Item Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of a CatalogTile styled as a featured or hero item. ```typescript ``` -------------------------------- ### Installing with NPM Source: https://github.com/patternfly/react-catalog-view/blob/main/README.md Installs the react-catalog-view-extension package using NPM. ```bash npm install react-catalog-view-extension --save ``` -------------------------------- ### Count Display Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of using the 'count' prop on FilterSidePanelCategoryItem to display match counts. ```typescript Database // Renders: Database (12) ``` -------------------------------- ### Custom Navigation Components Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of replacing the default `` tag with a router link component (e.g., from react-router-dom) for VerticalTabsTab. ```typescript import { NavLink } from 'react-router-dom'; } /> ``` -------------------------------- ### Installation Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/index.md Install the react-catalog-view-extension package using npm or yarn. ```bash npm install @patternfly/react-catalog-view-extension # or yarn add @patternfly/react-catalog-view-extension ``` -------------------------------- ### Display Catalog Tiles Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/START-HERE.md Example of how to display Catalog Tiles using the CatalogTile component. ```typescript import { CatalogTile } from '@patternfly/react-catalog-view-extension';
``` -------------------------------- ### Navigation Documentation Structure Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/examples.md Create a collapsible documentation navigation. ```typescript import { VerticalTabs, VerticalTabsTab } from '@patternfly/react-catalog-view-extension'; export function DocumentationNav() { return ( ); } ``` -------------------------------- ### Common Badge Use Cases - Usage Metrics Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of using CatalogTileBadge to display usage metrics like download counts and ratings. ```typescript badges={[ {item.downloadCount} , {item.rating} , ]} ``` -------------------------------- ### Common Badge Use Cases - Certification/Status Indicators Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of using CatalogTileBadge for certification and status indicators. ```typescript badges={[ item.certified && , item.deprecated && , item.enterprise && , ]} ``` -------------------------------- ### Responsive Catalog Layout Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/examples.md Responsive grid that adapts to screen size. ```typescript import { CatalogTile } from '@patternfly/react-catalog-view-extension'; import { useEffect, useState } from 'react'; export function ResponsiveCatalog({ items }) { const [columns, setColumns] = useState(3); useEffect(() => { const handleResize = () => { if (window.innerWidth < 768) { setColumns(1); } else if (window.innerWidth < 1200) { setColumns(2); } else { setColumns(3); } }; window.addEventListener('resize', handleResize); handleResize(); return () => window.removeEventListener('resize', handleResize); }, []); return (
{items.map(item => ( ))}
); } ``` -------------------------------- ### Installation Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/README.md Install the react-catalog-view-extension library using npm or yarn. ```bash npm install @patternfly/react-catalog-view-extension ``` ```bash yarn add @patternfly/react-catalog-view-extension ``` -------------------------------- ### Page Header Usage Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of using CatalogItemHeader as a page header above a list of CatalogTiles. ```typescript <>
{/* CatalogTile components */}
``` -------------------------------- ### Add Filtering Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/START-HERE.md Example of how to implement filtering using FilterSidePanel, FilterSidePanelCategory, and FilterSidePanelCategoryItem. ```typescript import { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension'; import { useState } from 'react'; function CatalogWithFilter() { const [selectedType, setSelectedType] = useState(null); return (
setSelectedType('database')} count={5} > Database setSelectedType('cache')} count={3} > Cache {/* Catalog grid here */}
); } ``` -------------------------------- ### CatalogItemHeader Usage Examples Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/api-reference/CatalogItemHeader.md Examples demonstrating how to use the CatalogItemHeader component with different configurations. ```typescript import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension'; // With image icon // With CSS class icon // Minimal ``` -------------------------------- ### Usage Example: Basic Tile Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/api-reference/CatalogTile.md A basic example of how to use the CatalogTile component with essential props. ```typescript import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import { CheckCircleIcon } from '@patternfly/react-icons'; // Basic tile ``` -------------------------------- ### Usage Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/api-reference/PropertiesSidePanel.md An example demonstrating how to use the PropertiesSidePanel component with PropertyItem components. ```typescript import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension'; Available} /> GitHub} /> ``` -------------------------------- ### Catalog View Example Source: https://github.com/patternfly/react-catalog-view/blob/main/packages/module/patternfly-docs/content/examples/CatalogView.md This code snippet demonstrates the structure and components used in the Catalog View example, including drawer, tabs, and filter panels. ```jsx }>

{selectedItem?.description || 'Select a catalog item to view details'}

 {selectedItem && ( Enabled } /> )} handleTabActivate('all')} /> handleTabActivate('platform')} /> handleTabActivate('applications')} /> handleTabActivate('operators')} /> handleTabActivate('automation')} /> handleTabActivate('security')} /> {filterCategories.map((category) => ( {category.items.map((item) => ( handleFilterChange( `${category.id}:${item.id}`, !selectedFilters.includes(`${category.id}:${item.id}`) ) } title={item.label} > {item.label} ))} ))} {showEmptyState ? ( ) : ( )} ``` -------------------------------- ### Basic Properties Display Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Demonstrates the basic usage of PropertiesSidePanel with simple label-value pairs. ```typescript ``` -------------------------------- ### Catalog View Component Example Source: https://github.com/patternfly/react-catalog-view/blob/main/packages/module/patternfly-docs/content/examples/CatalogView.md This code snippet shows a comprehensive example of how to implement a Catalog View component, including rendering badges, catalog tiles, filtering logic, and integrating with toolbar and pagination components. ```typescript const renderBadge = (badge: string, color: string) => { const badgeColors = { blue: 'blue', grey: 'grey' }; return {badge}; }; const renderCatalogTile = (item: any) => ( handleTileClick(item)} isSelected={selectedItem?.id === item.id} footer={ <> {' '} Enabled } /> ); // Filter items based on search and selected filters const getFilteredItems = () => { const currentItems = getItemsForTab(activeTab); return currentItems.filter((item) => { // Search filter if (searchValue && typeof searchValue === 'string') { const searchLower = searchValue.toLowerCase(); const matchesSearch = item.title.toLowerCase().includes(searchLower) || item.vendor.toLowerCase().includes(searchLower) || item.description.toLowerCase().includes(searchLower); if (!matchesSearch) return false; } // Filter by selected filters if (selectedFilters.length > 0) { // Group filters by category const filtersByCategory = selectedFilters.reduce((acc, filterId) => { const [category, value] = filterId.split(':'); if (!acc[category]) acc[category] = []; acc[category].push(value); return acc; }, {} as Record); // Check if item matches any filter in each category (OR logic within categories) const matchesFilters = Object.entries(filtersByCategory).every(([category, values]) => { switch (category) { case 'vendor': return values.some((value) => { if (value === 'red-hat') return item.vendor.includes('Red Hat'); if (value === 'community') return item.vendor.includes('Community'); return item.vendor === value; }); case 'badge': return values.some((value) => item.badge.toLowerCase() === value); case 'featured': return values.some((value) => { if (value === 'featured') return item.featured === true; if (value === 'not-featured') return item.featured === false; return false; }); default: return false; } }); if (!matchesFilters) return false; } return true; }); }; const filteredItems = getFilteredItems(); const paginatedItems = filteredItems.slice((currentPage - 1) * perPage, currentPage * perPage); // Check if we should show empty state const showEmptyState = filteredItems.length === 0; return ( }> setSearchValue('')} /> setCurrentPage(page)} onPerPageSelect={(_, perPage) => setPerPage(perPage)} isCompact /> {selectedItem?.title || 'Catalog Item Details'} ``` -------------------------------- ### Usage Example: With Selection State Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/api-reference/CatalogTile.md An example showing how to manage the selection state of a CatalogTile. ```typescript import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import { CheckCircleIcon } from '@patternfly/react-icons'; // With selection state ``` -------------------------------- ### TypeScript Support Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/imports.md Demonstrates how TypeScript types are automatically available when importing components. ```typescript import { CatalogTile } from '@patternfly/react-catalog-view-extension'; const tile: CatalogTile = null; // TypeScript knows the component type const props: CatalogTileProps = { title: 'Test', href: '/test', featured: false }; ``` -------------------------------- ### Usage Example: With Badges and Custom Click Handling Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/api-reference/CatalogTile.md An example demonstrating the use of badges and a custom onClick handler for the CatalogTile. ```typescript import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import { CheckCircleIcon } from '@patternfly/react-icons'; // With badges and custom click handling ]} onClick={(e) => console.log('Tile clicked')} /> ``` -------------------------------- ### Filter state management example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/best-practices.md A complete example demonstrating how to manage filter state for a catalog view, including handling multiple filter types and displaying filtered results. ```typescript function FilteredCatalog() { const [filters, setFilters] = useState({ types: new Set(), vendors: new Set(), }); const [showAllTypes, setShowAllTypes] = useState(false); const [showAllVendors, setShowAllVendors] = useState(false); const handleTypeFilter = (type) => { setFilters(prev => { const newTypes = new Set(prev.types); if (newTypes.has(type)) { newTypes.delete(type); } else { newTypes.add(type); } return { ...prev, types: newTypes }; }); }; const filteredItems = items.filter(item => { if (filters.types.size > 0 && !filters.types.has(item.type)) { return false; } if (filters.vendors.size > 0 && !filters.vendors.has(item.vendor)) { return false; } return true; }); return (
setShowAllTypes(!showAllTypes)} > {uniqueTypes.map(type => ( handleTypeFilter(type)} count={getTypeCount(type)} > {type} ))}
{filteredItems.length > 0 ? ( {filteredItems.map(item => ( ))} ) : (
No items match the selected filters
)}
); } ``` -------------------------------- ### CatalogTileBadge Usage Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/api-reference/CatalogTileBadge.md Example demonstrating how to use the CatalogTileBadge component with and without a tooltip, integrated within a CatalogTile. ```typescript import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import { CheckCircleIcon, LockIcon, WarningTriangleIcon } from '@patternfly/react-icons'; // Badge with tooltip , , ]} /> // Simple badge without tooltip ``` -------------------------------- ### Default Exports Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/imports.md Demonstrates default exports, noting that named imports are recommended. ```typescript // These work but are less idiomatic import FilterSidePanel from '@patternfly/react-catalog-view-extension'; import FilterSidePanelCategory from '@patternfly/react-catalog-view-extension'; import FilterSidePanelCategoryItem from '@patternfly/react-catalog-view-extension'; ``` -------------------------------- ### PropertyItem Usage Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/api-reference/PropertyItem.md An example demonstrating how to use the PropertyItem component within a PropertiesSidePanel, showcasing various prop usages including simple strings, rich content, and elements as labels/values. ```typescript import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension'; import { CheckIcon, ExclamationIcon } from '@patternfly/react-icons'; {/* Simple string values */} {/* Rich content as values */} Ready} /> {/* Element as label */} Critical} value={ Update Required} /> {/* Complex value component */}

MongoDB Inc.

support@mongodb.com } /> {/* Property without value */} ``` -------------------------------- ### Custom Router Integration Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/examples.md Use with React Router for navigation. ```typescript import { useNavigate } from 'react-router-dom'; import { CatalogTile } from '@patternfly/react-catalog-view-extension'; import { VerticalTabs, VerticalTabsTab } from '@patternfly/react-catalog-view-extension'; export function RouterIntegratedCatalog() { const navigate = useNavigate(); const handleTileClick = (itemId) => { navigate(`/catalog/${itemId}`); }; return ( { // Only handle non-link clicks if (e.metaKey || e.ctrlKey || e.shiftKey) { // Let browser handle it return; } handleTileClick(1); }} /> ); } export function RouterIntegratedTabs() { const navigate = useNavigate(); return ( navigate('/docs/overview')} active={false} /> navigate('/docs/install')} active={false} /> ); } ``` -------------------------------- ### Conditional Properties Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Illustrates how to conditionally render PropertyItems based on data availability. ```typescript {item.vendor && } {item.version && } {item.supportedPlatforms && ( )} ``` -------------------------------- ### Restrict Tabs Mode Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of using the 'restrictTabs' prop in VerticalTabs to create a collapsible tree where only the active branch is shown. ```typescript ``` -------------------------------- ### Checkbox State Management Example Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of managing the checked state for FilterSidePanelCategoryItem components using React's useState hook. ```typescript const [filters, setFilters] = useState({ typeDatabase: false, typeCache: false, vendorRedHat: false, }); function handleFilterChange(key) { setFilters(prev => ({ ...prev, [key]: !prev[key] })); } // Render: handleFilterChange('typeDatabase')} > Database handleFilterChange('typeCache')} > Cache ``` -------------------------------- ### Package Information Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/START-HERE.md Package.json information for the @patternfly/react-catalog-view-extension. ```json { "name": "@patternfly/react-catalog-view-extension", "version": "6.1.0-prerelease.0", "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", "dependencies": { "@patternfly/react-core": "^6.1.0", "@patternfly/react-styles": "^6.1.0" }, "peerDependencies": { "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" } } ``` -------------------------------- ### Modal Header Usage Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/component-guide.md Example of using CatalogItemHeader within a modal's title. ```typescript } > {/* Modal content */} ``` -------------------------------- ### Multi-Select Catalog with Bulk Actions Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/examples.md Select multiple items and perform batch operations. ```typescript import { useState, useCallback } from 'react'; import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import { CheckCircleIcon, TrashIcon } from '@patternfly/react-icons'; import { Button, Toolbar, ToolbarContent } from '@patternfly/react-core'; const ITEMS = [ { id: 1, name: 'PostgreSQL' }, { id: 2, name: 'MongoDB' }, { id: 3, name: 'Redis' }, ]; export function SelectableCatalog() { const [selected, setSelected] = useState(new Set()); const handleToggle = useCallback((id) => { setSelected(prev => { const next = new Set(prev); if (next.has(id)) { next.delete(id); } else { next.add(id); } return next; }); }, []); const handleSelectAll = useCallback(() => { if (selected.size === ITEMS.length) { setSelected(new Set()); } else { setSelected(new Set(ITEMS.map(item => item.id))); } }, [selected.size]); const handleDelete = useCallback(() => { console.log('Delete items:', Array.from(selected)); // Handle deletion... setSelected(new Set()); }, [selected]); return ( <> {selected.size > 0 && ( {selected.size} selected )}
{ITEMS.map(item => ( handleToggle(item.id)} badges={[ selected.has(item.id) && ( ), ]} /> ))}
); } ``` -------------------------------- ### Featured Items with Badges Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/examples.md Showcase featured items with certification and rating badges. ```typescript import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import { CheckCircleIcon, StarIcon, WarningTriangleIcon } from '@patternfly/react-icons'; const FEATURED_ITEMS = [ { id: 1, name: 'PostgreSQL', certified: true, rating: 5, promoted: true }, { id: 2, name: 'MongoDB', certified: false, rating: 4, promoted: true } ]; export function FeaturedSection() { return (

Featured Services

{FEATURED_ITEMS.map(item => ( ), ]} /> ))}
); } ``` -------------------------------- ### Building Source: https://github.com/patternfly/react-catalog-view/blob/main/README.md Builds the project using Yarn. ```bash yarn build ``` -------------------------------- ### Basic Tile Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/index.md A basic example of how to use the CatalogTile component. ```typescript import { CatalogTile } from '@patternfly/react-catalog-view-extension'; ``` -------------------------------- ### Detailed Item View with Properties Panel Source: https://github.com/patternfly/react-catalog-view/blob/main/_autodocs/examples.md Display item details in a properties panel. ```typescript import { PropertiesSidePanel, PropertyItem, CatalogItemHeader } from '@patternfly/react-catalog-view-extension'; const ITEM = { id: 1, name: 'PostgreSQL', vendor: 'PostgreSQL Global Development Group', version: '14.0', license: 'PostgreSQL License', description: 'A powerful, open source object-relational database system', url: 'https://www.postgresql.org', icon: '/images/postgres-icon.png' }; export function ItemDetailsView() { return (
{/* Main Content */}

{ITEM.description}

{/* Properties Panel */} Official Site} /> Active} />
); } ``` -------------------------------- ### FilterSidePanel example Source: https://github.com/patternfly/react-catalog-view/blob/main/packages/module/patternfly-docs/content/examples/FilterSidePanel.md This is an example of how to use the FilterSidePanel component with various categories and items. ```javascript import { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension'; import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon'; import CcPaypalIcon from '@patternfly/react-icons/dist/esm/icons/cc-paypal-icon'; import CcAmexIcon from '@patternfly/react-icons/dist/esm/icons/cc-amex-icon'; import CcDiscoverIcon from '@patternfly/react-icons/dist/esm/icons/cc-discover-icon'; import CcVisaIcon from '@patternfly/react-icons/dist/esm/icons/cc-visa-icon'; import CcMastercardIcon from '@patternfly/react-icons/dist/esm/icons/cc-mastercard-icon'; import CcDinersClubIcon from '@patternfly/react-icons/dist/esm/icons/cc-diners-club-icon'; Item 1 Item 2 } isChecked> Item 3 } isChecked> Item 4 }> Item 5 }> Item 6 }> Item 7 }> Item 8 }> Item 9 ```