Merge pull request #2641 from epwinchell/Services_icons

Add Icon support for service dropdown

src/components/AllServices/allServicesLinks.ts

@@ -1,7 +1,9 @@
 import AllServicesIcons from './AllServicesIcons';
+import AllServicesDropdownIcons from '../AllServicesDropdown/AllServicesDropdownIcons';
 
 export type AllServicesLink = {
   href: string;
+  icon?: keyof typeof AllServicesDropdownIcons;
   title: string;
   subtitle?: string;
   description?: string;

src/components/AllServicesDropdown/AllServicesDropdownIcons.ts

@@ -0,0 +1,31 @@
+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';
+
+const AllServicesDropdownIcons = {
+  ACSIcon,
+  AnsibleIcon,
+  AppServicesIcon,
+  DataScienceIcon,
+  EdgeIcon,
+  InsightsIcon,
+  OpenShiftIcon,
+  PlaceholderIcon,
+  QuayIoIcon,
+  RHIcon,
+  ServicesIcon,
+  SubscriptionsIcon,
+  TrustedContentIcon,
+};
+
+export default AllServicesDropdownIcons;

src/components/AllServicesDropdown/AllServicesGalleryLink.tsx

@@ -9,16 +9,18 @@ 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';
 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
       >
         <CardBody className="pf-v5-u-p-md">
           <Split>
+            <SplitItem className="pf-v5-u-mr-sm">{TitleIcon && <TitleIcon />}</SplitItem>
             <SplitItem className="pf-v5-m-fill">
               <div className="pf-v5-u-mb-sm">{title}</div>
             </SplitItem>

src/components/AllServicesDropdown/icon-acs.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ACSIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>{`.uuid-2cc71784-83b2-4ce0-a27c-c558cca16f2a{fill:#e00;}.uuid-073bfd7c-dff4-432f-a7b0-f3a025d959a1{fill:#fff;}`}</style>
+      </defs>
+      <path d="m28,1H10C5.0294,1,1,5.0294,1,10v18c0,4.9706,4.0294,9,9,9h18c4.9706,0,9-4.0294,9-9V10c0-4.9706-4.0294-9-9-9h0Z" />
+      <path
+        className="uuid-073bfd7c-dff4-432f-a7b0-f3a025d959a1"
+        d="m27.1299,11.0889l-8-1.7002c-.0859-.0186-.1733-.019-.2598,0l-8,1.7002c-.2886.0615-.4951.3164-.4951.6113l.0005,9.356c.124,3.9253,2.2866,6.9487,5.7852,8.0874.9219.3003,1.874.4448,2.8169.4448,2.1254,0,4.1914-.7454,5.7529-2.083v.7148c0,.3452.2803.625.625.625s.625-.2798.625-.625v-2.251c0-.3452-.2803-.625-.625-.625h-2.1768c-.3447,0-.625.2798-.625.625s.2803.625.625.625h.692c-1.9273,1.6254-4.7543,2.196-7.3233,1.3608-3.02-.9834-4.8145-3.5122-4.9224-6.9185v-8.8301l7.375-1.5674,7.375,1.5674v8.8101c-.0244.7686-.1348,1.501-.3271,2.1763-.0947.332.0977.6777.4287.7725.332.0923.6777-.0977.7725-.4297.2207-.7734.3477-1.6074.376-2.499v-9.3364c0-.2949-.2061-.5498-.4951-.6113Z"
+      />
+      <path
+        className="uuid-2cc71784-83b2-4ce0-a27c-c558cca16f2a"
+        d="m19,24.6865c-.1079,0-.2158-.0278-.3125-.084l-2-1.1548c-.1934-.1113-.3125-.3179-.3125-.541v-2.3091c0-.2231.1191-.4297.3125-.541l2-1.1548c.1938-.1128.4316-.1118.625,0l2,1.1548c.1934.1113.3125.3179.3125.541v2.3091c0,.2231-.1191.4297-.3125.541l-2,1.1548c-.0967.0562-.2041.084-.3125.084Zm-1.375-2.1406l1.375.7939,1.375-.7939v-1.5874l-1.375-.7939-1.375.7939v1.5874Z"
+      />
+      <path
+        className="uuid-2cc71784-83b2-4ce0-a27c-c558cca16f2a"
+        d="m23,21.4707c-.2461,0-.4795-.1465-.5781-.3887-.1309-.3193.0225-.6846.3418-.8149.3711-.1519.6113-.5088.6113-.9102,0-.499-.3779-.9155-.8789-.9683-.333-.0352-.5781-.3257-.5586-.6592l.0088-.1582c0-1.3291-1.0811-2.4106-2.4102-2.4106-.96,0-1.8281.5698-2.2114,1.4512-.1162.2681-.4067.4194-.689.3652-.1021-.0195-.2065-.0308-.3145-.0308-.9355,0-1.6963.7612-1.6963,1.6968,0,.5557.2734,1.0776.731,1.3955.2837.1968.354.5859.1567.8696-.1958.2842-.5859.3545-.8696.1567-.7939-.5513-1.2681-1.4565-1.2681-2.4219,0-1.6484,1.3579-3.0005,3.0166-2.9458.6548-1.0986,1.8442-1.7866,3.1445-1.7866,1.9189,0,3.498,1.4849,3.6484,3.3667.8506.3198,1.4404,1.1348,1.4404,2.0796,0,.9111-.5449,1.7227-1.3887,2.0674-.0771.0317-.1572.0464-.2363.0464Z"
+      />
+    </svg>
+  );
+};
+export default ACSIcon;

src/components/AllServicesDropdown/icon-ansible.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const AnsibleIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>{`.a{fill:#fff;}.b{fill:#e00;}`}</style>
+      </defs>
+      <rect x="1.6251" y="1.6252" width="34.75" height="34.75" rx="8.375" />
+      <path d="M28,2.25A7.7587,7.7587,0,0,1,35.75,10V28A7.7587,7.7587,0,0,1,28,35.75H10A7.7587,7.7587,0,0,1,2.25,28V10A7.7587,7.7587,0,0,1,10,2.25H28M28,1H10a9,9,0,0,0-9,9V28a9,9,0,0,0,9,9H28a9,9,0,0,0,9-9V10a9,9,0,0,0-9-9Z" />
+      <path
+        className="a"
+        d="M15,23.6252a.6145.6145,0,0,1-.2563-.0557.6245.6245,0,0,1-.313-.8262l2.021-4.4814.0083-.0176L18.43,13.8752a.65.65,0,0,1,1.14,0l4,8.8681a.6251.6251,0,0,1-.9453.7569L17.274,19.4787,15.57,23.257A.6251.6251,0,0,1,15,23.6252Zm2.8013-5.3145,3.6284,2.7276L19,15.6525Z"
+      />
+      <path
+        className="b"
+        d="M19,30.1252A11.125,11.125,0,1,1,30.1251,19,11.1374,11.1374,0,0,1,19,30.1252Zm0-21A9.875,9.875,0,1,0,28.8751,19,9.8859,9.8859,0,0,0,19,9.1252Z"
+      />
+    </svg>
+  );
+};
+export default AnsibleIcon;

src/components/AllServicesDropdown/icon-app-services.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const AppServicesIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>{`.st0{fill:#EE0000;}.st1{fill:#FFFFFF;}`}</style>
+      </defs>
+      <g>
+        <path d="M27.5,0.5h-18c-4.97,0-9,4.03-9,9v18c0,4.97,4.03,9,9,9h18c4.97,0,9-4.03,9-9v-18C36.5,4.53,32.47,0.5,27.5,0.5L27.5,0.5z" />
+        <path
+          className="st1"
+          d="M25.51,22.17H12.64c-2.98,0-5.41-2.42-5.41-5.41c0-3.15,2.67-5.7,5.92-5.38c1.18-2.27,3.52-3.7,6.1-3.7
+            c3.75,0,6.81,3.02,6.88,6.76c1.71,0.44,2.94,1.98,2.94,3.79c0,1.96-1.45,3.6-3.33,3.89C25.68,22.15,25.6,22.17,25.51,22.17z
+             M12.64,12.61c-2.29,0-4.16,1.86-4.16,4.15s1.86,4.16,4.16,4.16h12.5c1.48,0,2.68-1.2,2.68-2.68c0-1.37-1.03-2.51-2.4-2.65
+            c-0.33-0.04-0.58-0.32-0.56-0.66l0.01-0.12c0.01-0.08,0.01-0.17,0.01-0.25c0-3.1-2.52-5.63-5.63-5.63c-2.24,0-4.27,1.33-5.16,3.39
+            c-0.12,0.27-0.4,0.42-0.69,0.37C13.15,12.63,12.89,12.61,12.64,12.61z"
+        />
+        <path
+          className="st0"
+          d="M25.5,23.87c-1.23,0-2.26,0.85-2.54,2h-1.92c-0.23-0.94-0.97-1.68-1.92-1.92v-7.95l0.93,0.93
+            c0.12,0.12,0.28,0.18,0.44,0.18s0.32-0.06,0.44-0.18c0.24-0.24,0.24-0.64,0-0.88l-2-2c-0.24-0.24-0.64-0.24-0.88,0l-2,2
+            c-0.24,0.24-0.24,0.64,0,0.88c0.24,0.24,0.64,0.24,0.88,0l0.93-0.93v7.95c-0.94,0.23-1.68,0.97-1.92,1.92h-1.92
+            c-0.28-1.15-1.31-2-2.54-2c-1.45,0-2.62,1.18-2.62,2.62s1.18,2.62,2.62,2.62c1.23,0,2.26-0.85,2.54-2h1.92c0.28,1.15,1.31,2,2.54,2
+            s2.26-0.85,2.54-2h1.92c0.28,1.15,1.31,2,2.54,2c1.45,0,2.62-1.18,2.62-2.62S26.95,23.87,25.5,23.87z M11.5,27.87
+            c-0.76,0-1.38-0.62-1.38-1.38s0.62-1.38,1.38-1.38s1.38,0.62,1.38,1.38S12.26,27.87,11.5,27.87z M18.5,27.87
+            c-0.76,0-1.38-0.62-1.38-1.38s0.62-1.38,1.38-1.38s1.38,0.62,1.38,1.38S19.26,27.87,18.5,27.87z M25.5,27.87
+            c-0.76,0-1.38-0.62-1.38-1.38s0.62-1.38,1.38-1.38s1.38,0.62,1.38,1.38S26.26,27.87,25.5,27.87z"
+        />
+      </g>
+    </svg>
+  );
+};
+export default AppServicesIcon;

src/components/AllServicesDropdown/icon-data-science.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+const DataScienceIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>
+          {`.uuid-00fb0b47-b01e-49bb-a511-91a567727439{fill:#e00;}.uuid-f46e1c4f-4336-4ea3-9a78-d01849a9fd26{fill:#fff;}.uuid-21bbc327-fd19-43c3-8c74-cd12b6253304{fill:#4d4d4d;}`}
+        </style>
+      </defs>
+      <rect x="1" y="1" width="36" height="36" rx="9" ry="9" />
+      <path
+        className="uuid-21bbc327-fd19-43c3-8c74-cd12b6253304"
+        d="m28,2.25c4.27338,0,7.75,3.47665,7.75,7.75v18c0,4.27335-3.47662,7.75-7.75,7.75H10c-4.27338,0-7.75-3.47665-7.75-7.75V10c0-4.27335,3.47662-7.75,7.75-7.75h18m0-1.25H10C5.02942,1,1,5.02945,1,10v18c0,4.97055,4.02942,9,9,9h18c4.97058,0,9-4.02945,9-9V10c0-4.97055-4.02942-9-9-9h0Z"
+      />
+      <path
+        className="uuid-f46e1c4f-4336-4ea3-9a78-d01849a9fd26"
+        d="m28.01367,26.16211l-4.31152-10.34033v-4.19678h.875c.34473,0,.625-.28027.625-.625s-.28027-.625-.625-.625h-1.5c-.34473,0-.625.28027-.625.625v4.94727c0,.01703.00836.03131.0097.04797.005.06445.0119.12939.03815.19226l2.16321,5.1875h-4.10754c-.34473,0-.625.28027-.625.625s.28027.625.625.625h4.62885l1.67291,4.01172c.0625.15625.09473.32031.09473.48828,0,.68945-.56055,1.25-1.25,1.25h-9.75c-.68945,0-1.25-.56055-1.25-1.25,0-.16992.03125-.33398.0918-.48242l1.01758-2.44043c.13281-.31836-.01758-.68457-.33691-.81738-.31641-.13184-.68457.01758-.81738.33691l-1.01953,2.44629c-.12305.30371-.18555.62598-.18555.95703,0,1.37891,1.12109,2.5,2.5,2.5h9.75c1.37891,0,2.5-1.12109,2.5-2.5,0-.3291-.0625-.65137-.18848-.96289Z"
+      />
+      <path
+        className="uuid-f46e1c4f-4336-4ea3-9a78-d01849a9fd26"
+        d="m17.07715,11.625h.875v4.32227c0,.34473.28027.625.625.625s.625-.28027.625-.625v-4.94727c0-.34473-.28027-.625-.625-.625h-1.5c-.34473,0-.625.28027-.625.625s.28027.625.625.625Z"
+      />
+      <path
+        className="uuid-00fb0b47-b01e-49bb-a511-91a567727439"
+        d="m14.76953,16.57227c-1.33496,0-2.42188-1.08691-2.42188-2.42188s1.08691-2.4209,2.42188-2.4209,2.4209,1.08594,2.4209,2.4209-1.08594,2.42188-2.4209,2.42188Zm0-3.59277c-.64648,0-1.17188.52539-1.17188,1.1709,0,.64648.52539,1.17188,1.17188,1.17188.64551,0,1.1709-.52539,1.1709-1.17188,0-.64551-.52539-1.1709-1.1709-1.1709Z"
+      />
+      <path
+        className="uuid-00fb0b47-b01e-49bb-a511-91a567727439"
+        d="m10.97266,16.57227c-.34473,0-.625-.28027-.625-.625v-3.59277c0-.34473.28027-.625.625-.625s.625.28027.625.625v3.59277c0,.34473-.28027.625-.625.625Z"
+      />
+      <path
+        className="uuid-00fb0b47-b01e-49bb-a511-91a567727439"
+        d="m12.21973,22.625c-1.33496,0-2.42188-1.08691-2.42188-2.42188s1.08691-2.4209,2.42188-2.4209,2.4209,1.08594,2.4209,2.4209-1.08594,2.42188-2.4209,2.42188Zm0-3.59277c-.64648,0-1.17188.52539-1.17188,1.1709,0,.64648.52539,1.17188,1.17188,1.17188.64551,0,1.1709-.52539,1.1709-1.17188,0-.64551-.52539-1.1709-1.1709-1.1709Z"
+      />
+      <path
+        className="uuid-00fb0b47-b01e-49bb-a511-91a567727439"
+        d="m18.56543,22.625c-.34473,0-.625-.28027-.625-.625v-3.59277c0-.34473.28027-.625.625-.625s.625.28027.625.625v3.59277c0,.34473-.28027.625-.625.625Z"
+      />
+      <path
+        className="uuid-00fb0b47-b01e-49bb-a511-91a567727439"
+        d="m16.29297,22.625c-.34473,0-.625-.28027-.625-.625v-3.59277c0-.34473.28027-.625.625-.625s.625.28027.625.625v3.59277c0,.34473-.28027.625-.625.625Z"
+      />
+    </svg>
+  );
+};
+export default DataScienceIcon;