Skip to content

Commit

Permalink
Add Icon support for service dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
epwinchell committed Sep 18, 2023
1 parent 5cbc910 commit 38e99c2
Show file tree
Hide file tree
Showing 15 changed files with 530 additions and 1 deletion.
29 changes: 29 additions & 0 deletions src/components/AllServicesDropdown/AllServicesDropdownIcons.ts
Original file line number Diff line number Diff line change
@@ -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,
};
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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>
Expand Down
25 changes: 25 additions & 0 deletions src/components/AllServicesDropdown/icon-acs.tsx
Original file line number Diff line number Diff line change
@@ -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;
22 changes: 22 additions & 0 deletions src/components/AllServicesDropdown/icon-ansible.tsx
Original file line number Diff line number Diff line change
@@ -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;
34 changes: 34 additions & 0 deletions src/components/AllServicesDropdown/icon-app-services.tsx
Original file line number Diff line number Diff line change
@@ -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;
47 changes: 47 additions & 0 deletions src/components/AllServicesDropdown/icon-data-science.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 38e99c2

Please sign in to comment.