diff --git a/src/components/AllServices/allServicesLinks.ts b/src/components/AllServices/allServicesLinks.ts index 488c1b594..76e87b770 100644 --- a/src/components/AllServices/allServicesLinks.ts +++ b/src/components/AllServices/allServicesLinks.ts @@ -1,7 +1,9 @@ import AllServicesIcons from './AllServicesIcons'; +import AllServicesDropdownIcons from './AllServicesDropdownIcons'; export type AllServicesLink = { href: string; + icon?: keyof typeof AllServicesDropdownIcons; title: string; subtitle?: string; description?: string; diff --git a/src/components/AllServicesDropdown/AllServicesDropdownIcons.ts b/src/components/AllServicesDropdown/AllServicesDropdownIcons.ts new file mode 100644 index 000000000..0e1eef2a8 --- /dev/null +++ b/src/components/AllServicesDropdown/AllServicesDropdownIcons.ts @@ -0,0 +1,29 @@ +import ACSIcon from './icon-acs'; +import AnsibleIcon from './icon-ansible'; +import AppServicesIcon from './icon-app-services'; +import DataScienceIcon from './icon-data-science'; +import EdgeIcon from './icon-edge'; +import InsightsIcon from './icon-insights'; +import OpenShiftIcon from './icon-openshift'; +import PlaceholderIcon from './icon-placeholder'; +import QuayIoIcon from './icon-quay-io'; +import RHIcon from './icon-rh'; +import ServicesIcon from './icon-services'; +import SubscriptionsIcon from './icon-subscriptions'; +import TrustedContentIcon from './icon-trusted-content'; + +export const AllServicesDropdownIcons = { + ACSIcon, + AnsibleIcon, + AppServicesIcon, + DataScienceIcon, + EdgeIcon, + InsightsIcon, + OpenShiftIcon, + PlaceholderIcon, + QuayIoIcon, + RHIcon, + ServicesIcon, + SubscriptionsIcon, + TrustedContentIcon, +}; diff --git a/src/components/AllServicesDropdown/AllServicesGalleryLink.tsx b/src/components/AllServicesDropdown/AllServicesGalleryLink.tsx index 09060a2a7..9d7fe429d 100644 --- a/src/components/AllServicesDropdown/AllServicesGalleryLink.tsx +++ b/src/components/AllServicesDropdown/AllServicesGalleryLink.tsx @@ -9,6 +9,7 @@ import StarIcon from '@patternfly/react-icons/dist/dynamic/icons/star-icon'; import ExternalLinkAltIcon from '@patternfly/react-icons/dist/dynamic/icons/external-link-alt-icon'; import { AllServicesLinkProps } from '../AllServices/AllServicesLink'; +import { AllServicesDropdownIcons } from './AllServicesDropdownIcons'; import ChromeLink from '../ChromeLink'; import classNames from 'classnames'; import useFavoritePagesWrapper from '../../hooks/useFavoritePagesWrapper'; @@ -16,9 +17,10 @@ import { AllServicesDropdownContext } from './common'; export type AllServicesGalleryLinkProps = AllServicesLinkProps; -const AllServicesGalleryLink = ({ href, title, description, isExternal }: AllServicesGalleryLinkProps) => { +const AllServicesGalleryLink = ({ href, title, icon, description, isExternal }: AllServicesGalleryLinkProps) => { const { favoritePage, unfavoritePage, favoritePages } = useFavoritePagesWrapper(); const { onLinkClick } = useContext(AllServicesDropdownContext); + const TitleIcon = icon ? AllServicesDropdownIcons[icon] : null; const handleFavoriteToggle = (pathname: string, favorite?: boolean) => { if (favorite) { @@ -42,6 +44,7 @@ const AllServicesGalleryLink = ({ href, title, description, isExternal }: AllSer > + {TitleIcon && }
{title}
 diff --git a/src/components/AllServicesDropdown/icon-acs.tsx b/src/components/AllServicesDropdown/icon-acs.tsx new file mode 100644 index 000000000..1704653c7 --- /dev/null +++ b/src/components/AllServicesDropdown/icon-acs.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +const ACSIcon = () => { + return ( + + + + + + + + + + ); +}; +export default ACSIcon; diff --git a/src/components/AllServicesDropdown/icon-ansible.tsx b/src/components/AllServicesDropdown/icon-ansible.tsx new file mode 100644 index 000000000..baf9f78cd --- /dev/null +++ b/src/components/AllServicesDropdown/icon-ansible.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +const AnsibleIcon = () => { + return ( + + + + + + + + + + ); +}; +export default AnsibleIcon; diff --git a/src/components/AllServicesDropdown/icon-app-services.tsx b/src/components/AllServicesDropdown/icon-app-services.tsx new file mode 100644 index 000000000..40b89163f --- /dev/null +++ b/src/components/AllServicesDropdown/icon-app-services.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +const AppServicesIcon = () => { + return ( + + + + + + + + + + + ); +}; +export default AppServicesIcon; diff --git a/src/components/AllServicesDropdown/icon-data-science.tsx b/src/components/AllServicesDropdown/icon-data-science.tsx new file mode 100644 index 000000000..9b5e1a2b9 --- /dev/null +++ b/src/components/AllServicesDropdown/icon-data-science.tsx @@ -0,0 +1,47 @@ +import React from 'react'; + +const DataScienceIcon = () => { + return ( + + + + + + + + + + + + + + + ); +}; +export default DataScienceIcon; diff --git a/src/components/AllServicesDropdown/icon-edge.tsx b/src/components/AllServicesDropdown/icon-edge.tsx new file mode 100644 index 000000000..56d049c10 --- /dev/null +++ b/src/components/AllServicesDropdown/icon-edge.tsx @@ -0,0 +1,73 @@ +import React from 'react'; + +const EdgeIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; +export default EdgeIcon; diff --git a/src/components/AllServicesDropdown/icon-insights.tsx b/src/components/AllServicesDropdown/icon-insights.tsx new file mode 100644 index 000000000..8cd4435d4 --- /dev/null +++ b/src/components/AllServicesDropdown/icon-insights.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +const InsightsIcon = () => { + return ( + + + + + + + + + + ); +}; +export default InsightsIcon; diff --git a/src/components/AllServicesDropdown/icon-openshift.tsx b/src/components/AllServicesDropdown/icon-openshift.tsx new file mode 100644 index 000000000..45ba09de7 --- /dev/null +++ b/src/components/AllServicesDropdown/icon-openshift.tsx @@ -0,0 +1,40 @@ +import React from 'react'; + +const OpenShiftIcon = () => { + return ( + + + + + + + + + + + + + ); +}; +export default OpenShiftIcon; diff --git a/src/components/AllServicesDropdown/icon-placeholder.tsx b/src/components/AllServicesDropdown/icon-placeholder.tsx new file mode 100644 index 000000000..fc2e4ae81 --- /dev/null +++ b/src/components/AllServicesDropdown/icon-placeholder.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +const PlaceholderIcon = () => { + return ( + + + + + + + + + + + + ); +}; +export default PlaceholderIcon; diff --git a/src/components/AllServicesDropdown/icon-quay-io.tsx b/src/components/AllServicesDropdown/icon-quay-io.tsx new file mode 100644 index 000000000..62336b0ce --- /dev/null +++ b/src/components/AllServicesDropdown/icon-quay-io.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +const QuayIoIcon = () => { + return ( + + + + + + + + + + + + + + + + + + ); +}; +export default QuayIoIcon; diff --git a/src/components/AllServicesDropdown/icon-rh.tsx b/src/components/AllServicesDropdown/icon-rh.tsx new file mode 100644 index 000000000..56f97f81f --- /dev/null +++ b/src/components/AllServicesDropdown/icon-rh.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +const RHIcon = () => { + return ( + + + + + + + + + + + ); +}; +export default RHIcon; diff --git a/src/components/AllServicesDropdown/icon-services.tsx b/src/components/AllServicesDropdown/icon-services.tsx new file mode 100644 index 000000000..7cd6d85c9 --- /dev/null +++ b/src/components/AllServicesDropdown/icon-services.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +const ServicesIcon = () => { + return ( + + + + + + + + + ); +}; +export default ServicesIcon; diff --git a/src/components/AllServicesDropdown/icon-subscriptions.tsx b/src/components/AllServicesDropdown/icon-subscriptions.tsx new file mode 100644 index 000000000..e646e97a5 --- /dev/null +++ b/src/components/AllServicesDropdown/icon-subscriptions.tsx @@ -0,0 +1,44 @@ +import React from 'react'; + +const SubscriptionsIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + ); +}; +export default SubscriptionsIcon; diff --git a/src/components/AllServicesDropdown/icon-trusted-content.tsx b/src/components/AllServicesDropdown/icon-trusted-content.tsx new file mode 100644 index 000000000..0e36a540b --- /dev/null +++ b/src/components/AllServicesDropdown/icon-trusted-content.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +const TrustedContentIcon = () => { + return ( + + + + + + + + + + + + ); +}; +export default TrustedContentIcon;