diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json index 6d8840527d..b8193c5b20 100644 --- a/packages/documentation-site/package.json +++ b/packages/documentation-site/package.json @@ -17,7 +17,7 @@ "screenshots": "pf-docs-framework screenshots" }, "dependencies": { - "@patternfly/documentation-framework": "6.0.0-alpha.61", + "@patternfly/documentation-framework": "6.0.0-alpha.62", "@patternfly/react-catalog-view-extension": "6.0.0-alpha.4", "@patternfly/react-console": "6.0.0-alpha.3", "@patternfly/react-docs": "7.0.0-alpha.84", diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/IconRecommendations.js b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/IconRecommendations.js deleted file mode 100644 index ed9c3ca996..0000000000 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/IconRecommendations.js +++ /dev/null @@ -1,203 +0,0 @@ -import React from 'react'; -import { - Divider, - SearchInput, - Toolbar, - ToolbarContent, - ToolbarItem, - EmptyState, - EmptyStateBody, - Spinner -} from '@patternfly/react-core'; -import * as icons from '@patternfly/react-icons'; -import './icons.css'; -import { - Table, - Thead, - Th, - Tr, - Td, - Tbody -} from '@patternfly/react-table'; -import { recommendationsArray } from './icon-migrations'; -import faArrowCircleODown from './fa-arrow-circle-o-down.svg'; -import faArrowCircleOUp from './fa-arrow-circle-o-up.svg'; -import faClockO from './fa-clock-o.svg'; -import faColumns from './fa-columns.svg'; -import faTable from './fa-table.svg'; -import faTachometer from './fa-tachometer.svg'; -import faThLarge from './fa-th-large.svg'; -import faTh from './fa-th.svg'; -import pfIconHistory from './pf-icon-history.svg'; -import pficonKey from './pficon-key.svg'; -import pficonSearch from './pficon-search.svg'; -import pficonSettings from './pficon-settings.svg'; -import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon"; - -const iconSvgs = { - 'fa-arrow-circle-o-down': faArrowCircleODown, - 'fa-arrow-circle-o-up': faArrowCircleOUp, - 'fa-clock-o': faClockO, - 'fa-columns': faColumns, - 'fa-table': faTable, - 'fa-tachometer': faTachometer, - 'fa-th-large': faThLarge, - 'fa-th': faTh, - 'pf-icon-history': pfIconHistory, - 'pficon-key': pficonKey, - 'pficon-search': pficonSearch, - 'pficon-settings': pficonSettings -}; - -const concatChildText = (children, text = '') => { - React.Children.forEach(children, (child) => { - if (typeof child === 'string') { - text += child; - } else if (React.isValidElement(child)) { - text = concatChildText(child.props.children, text); - } - }); - return text; -} - -export const IconRecommendations = () => { - const [searchValue, setSearchValue] = React.useState(''); - const [sortByIndex, setSortByIndex] = React.useState(); - const [sortDirection, setSortDirection] = React.useState(); - - const getSortParams = columnIndex => ({ - sortBy: { - index: sortByIndex, - direction: sortDirection, - defaultDirection: 'asc' // starting sort direction when first sorting a column. Defaults to 'asc' - }, - onSort: (_event, index, direction) => { - setSortByIndex(index); - setSortDirection(direction); - }, - columnIndex - }); - - const filteredRows = React.useMemo(() => { - return recommendationsArray.filter(recommendation => ( - recommendation.some(iconObj => { - // match if any text value for an icon contains searchValue - return Object.values(iconObj).some(val => { - // extract & search text in nested JSX - const cellText = concatChildText(val); - return cellText.toLowerCase().includes(searchValue.toLowerCase()); - }); - }) - )) - }, [searchValue]); - - const sortedRows = React.useMemo(() => { - let rows = filteredRows; - if (sortByIndex !== null) { - rows.sort((a, b) => { - const cellA = sortByIndex === 0 ? a[0].iconName.toLowerCase() : a[a.length - 1].iconName.toLowerCase(); - const cellB = sortByIndex === 0 ? b[0].iconName.toLowerCase() : b[b.length - 1].iconName.toLowerCase(); - return cellA < cellB - ? -1 - : cellA > cellB - ? 1 : 0 - }); - } - return sortDirection === 'asc' ? rows : rows.reverse(); - }, [sortByIndex, sortDirection, filteredRows]); - - return ( -
- - - - setSearchValue(value)} - onClear={() => setSearchValue('')} - /> - - - {filteredRows.length} items - - - - - - - - - - - - - - {sortedRows.map(recommendation => ( - - - - - - ))} - -
Old iconUpdated iconContextual usage
- {recommendation.map(oldRec => { - if (oldRec.iconType === "old") { - const oldIconSvg = oldRec.reactIcon === 'svg' && - {`${oldRec.iconName}; - const OldIcon = oldRec.reactIcon !== 'svg' && icons[oldRec.reactIcon]; - return ( -
- - {OldIcon && } - {oldIconSvg} - - {oldRec.iconName} -
- ); - } else return ''; - })} - 		- {recommendation.map(newRec => { - if (newRec.iconType === "new") { - const newIconSvg = newRec.reactIcon === 'svg' && - {`${newRec.iconName}; - const NewIcon = newRec.reactIcon !== 'svg' && icons[newRec.reactIcon]; - return ( -
- - {NewIcon && } - {newIconSvg} - {newRec.reactIcon === 'PF-Spinner-Component' && } - - {newRec.iconName} -
- ); - } else return ''; - })} - 		- {recommendation.map(rec => { - // Only display iconUsage for recommended icons - if (rec.iconType === 'new') { - return
{rec.iconUsage}
- } - })} -
- {filteredRows.length === 0 && ( - - - We couldn't find any icons that matched your search. Try entering a new search term to find what you're looking for. - - - )} -
- ); -} diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/IconsTable.js b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/IconsTable.js index b87e032161..b5f2dcf174 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/IconsTable.js +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/IconsTable.js @@ -136,7 +136,7 @@ export const IconsTable = () => { return ( - +