From a34eb8a93bc57b4e361ed181240891c8f6716001 Mon Sep 17 00:00:00 2001 From: Jonathan Kilzi Date: Sun, 16 Jun 2024 11:50:47 +0300 Subject: [PATCH] adds 2 variants for the plugin icon It now uses the 'outlined' variant by default Signed-off-by: Jonathan Kilzi --- .../packages/app/src/components/Root/Root.tsx | 4 +- .../resource-optimization/dev/index.tsx | 9 ++-- .../ResourceOptimizationIcon.test.tsx | 46 ++++++++++++++++++- .../ResourceOptimizationIcon.tsx | 14 +++++- .../ResourceOptimizationIconFilled.tsx | 12 +++++ .../ResourceOptimizationIconOutlined.tsx | 12 +++++ .../ResourceOptimizationIcon/index.ts | 2 + .../resource-optimization/src/index.ts | 6 ++- 8 files changed, 95 insertions(+), 10 deletions(-) create mode 100644 workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIconFilled.tsx create mode 100644 workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIconOutlined.tsx diff --git a/workspaces/resource-optimization/packages/app/src/components/Root/Root.tsx b/workspaces/resource-optimization/packages/app/src/components/Root/Root.tsx index 7250650ff5..91e98e6b0a 100644 --- a/workspaces/resource-optimization/packages/app/src/components/Root/Root.tsx +++ b/workspaces/resource-optimization/packages/app/src/components/Root/Root.tsx @@ -26,7 +26,7 @@ import { } from '@backstage/core-components'; import MenuIcon from '@material-ui/icons/Menu'; import SearchIcon from '@material-ui/icons/Search'; -import { ResourceOptimizationIcon } from '@backstage-community/plugin-resource-optimization'; +import { ResourceOptimizationIconOutlined } from '@backstage-community/plugin-resource-optimization'; const useSidebarLogoStyles = makeStyles({ root: { @@ -76,7 +76,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( diff --git a/workspaces/resource-optimization/plugins/resource-optimization/dev/index.tsx b/workspaces/resource-optimization/plugins/resource-optimization/dev/index.tsx index 01d0715df5..16bb589cb5 100644 --- a/workspaces/resource-optimization/plugins/resource-optimization/dev/index.tsx +++ b/workspaces/resource-optimization/plugins/resource-optimization/dev/index.tsx @@ -1,14 +1,17 @@ import React from 'react'; import { createDevApp } from '@backstage/dev-utils'; -import { resourceOptimizationPlugin, ResourceOptimizationPage } from '../src/plugin'; -import { ResourceOptimizationIcon } from '../src/components/ResourceOptimizationIcon'; +import { + resourceOptimizationPlugin, + ResourceOptimizationPage, +} from '../src/plugin'; +import { ResourceOptimizationIconOutlined } from '../src/components/ResourceOptimizationIcon'; createDevApp() .registerPlugin(resourceOptimizationPlugin) .addPage({ element: , title: 'Optimizations', - icon: ResourceOptimizationIcon, + icon: ResourceOptimizationIconOutlined, path: '/resource-optimization', }) .addPage({ diff --git a/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIcon.test.tsx b/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIcon.test.tsx index d229d71891..ddf3609da9 100644 --- a/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIcon.test.tsx +++ b/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIcon.test.tsx @@ -1,9 +1,11 @@ import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { ResourceOptimizationIcon } from './ResourceOptimizationIcon'; +import { ResourceOptimizationIconOutlined } from './ResourceOptimizationIconOutlined'; +import { ResourceOptimizationIconFilled } from './ResourceOptimizationIconFilled'; describe('ResourceOptimizationIcon', () => { - it('should render', async () => { + it('should render the outlined version by default', async () => { const view = await renderInTestApp(); expect(view.asFragment()).toMatchInlineSnapshot(` @@ -15,7 +17,47 @@ describe('ResourceOptimizationIcon', () => { viewBox="0 0 24 24" > + + + `); + }); + + it('should render the outlined version when passed the outlined variant', async () => { + const view = await renderInTestApp(); + + expect(view.asFragment()).toMatchInlineSnapshot(` + + + + `); + }); + + it('should render the filled version when passed the filled variant', async () => { + const view = await renderInTestApp(); + + expect(view.asFragment()).toMatchInlineSnapshot(` + + diff --git a/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIcon.tsx b/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIcon.tsx index 5d7d0b3ab0..e2631d8d40 100644 --- a/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIcon.tsx +++ b/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIcon.tsx @@ -6,10 +6,20 @@ import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; * * @public */ -export const ResourceOptimizationIcon = (props: SvgIconProps) => { +export const ResourceOptimizationIcon = ( + props: SvgIconProps & { variant?: 'outlined' | 'filled' }, +) => { + const variant = props.variant ?? 'outlined'; + const path = + variant === 'outlined' ? ( + + ) : ( + + ); + return ( - + {path} ); }; diff --git a/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIconFilled.tsx b/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIconFilled.tsx new file mode 100644 index 0000000000..1f0f030e23 --- /dev/null +++ b/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIconFilled.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import type { SvgIconProps } from '@material-ui/core/SvgIcon'; +import { ResourceOptimizationIcon } from './ResourceOptimizationIcon'; + +/** + * The filled variant of the Resource Optimization icon. + * + * @public + */ +export const ResourceOptimizationIconFilled = (props: SvgIconProps) => { + return ; +}; diff --git a/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIconOutlined.tsx b/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIconOutlined.tsx new file mode 100644 index 0000000000..efb3776e11 --- /dev/null +++ b/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIconOutlined.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import type { SvgIconProps } from '@material-ui/core/SvgIcon'; +import { ResourceOptimizationIcon } from './ResourceOptimizationIcon'; + +/** + * The outlined variant of the Resource Optimization icon. + * + * @public + */ +export const ResourceOptimizationIconOutlined = (props: SvgIconProps) => { + return ; +}; diff --git a/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/index.ts b/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/index.ts index 60b7bc3fd8..f892749520 100644 --- a/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/index.ts +++ b/workspaces/resource-optimization/plugins/resource-optimization/src/components/ResourceOptimizationIcon/index.ts @@ -1 +1,3 @@ export { ResourceOptimizationIcon } from './ResourceOptimizationIcon'; +export { ResourceOptimizationIconOutlined } from './ResourceOptimizationIconOutlined'; +export { ResourceOptimizationIconFilled } from './ResourceOptimizationIconFilled'; diff --git a/workspaces/resource-optimization/plugins/resource-optimization/src/index.ts b/workspaces/resource-optimization/plugins/resource-optimization/src/index.ts index f400807a2b..2723393401 100644 --- a/workspaces/resource-optimization/plugins/resource-optimization/src/index.ts +++ b/workspaces/resource-optimization/plugins/resource-optimization/src/index.ts @@ -1,2 +1,6 @@ export { resourceOptimizationPlugin, ResourceOptimizationPage } from './plugin'; -export { ResourceOptimizationIcon } from './components/ResourceOptimizationIcon'; +export { + ResourceOptimizationIcon, + ResourceOptimizationIconFilled, + ResourceOptimizationIconOutlined, +} from './components/ResourceOptimizationIcon';