adds 2 variants for the plugin icon

It now uses the 'outlined' variant by default Signed-off-by: Jonathan Kilzi <jkilzi@redhat.com>
jkilzi · Jun 16, 2024 · d0bc736 · d0bc736
1 parent c8bea93
commit d0bc736
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 9 deletions.
diff --git 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<{}>) => (
           <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
         </SidebarScrollWrapper>
         <SidebarItem
-          icon={ResourceOptimizationIcon}
+          icon={ResourceOptimizationIconOutlined}
           to="/resource-optimization"
           text="Optimizations"
         />

diff --git 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: <ResourceOptimizationPage />,
     title: 'Optimizations',
-    icon: ResourceOptimizationIcon,
+    icon: ResourceOptimizationIconOutlined,
     path: '/resource-optimization',
   })
   .addPage({

diff --git a/...ce-optimization/src/components/ResourceOptimizationIcon/ResourceOptimizationIcon.test.tsx b/...ce-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(<ResourceOptimizationIcon />);
 
     expect(view.asFragment()).toMatchInlineSnapshot(`
@@ -13,6 +15,46 @@ describe('ResourceOptimizationIcon', () => {
           class="MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
+        >
+          <path
+            d="M11.9999944,18.3370786 C15.3474224,18.3370786 18.0705797,15.7363092 18.0705797,12.5393259 C18.0705797,11.8746499 17.9547698,11.2247191 17.7253639,10.6074392 C17.5952218,10.2566617 17.7871314,9.87112996 18.1544046,9.74683693 C18.5227847,9.6225439 18.9242565,9.80582839 19.0555053,10.1565951 C19.338965,10.9192341 19.4823438,11.7208558 19.4823438,12.539315 C19.4823438,16.4799749 16.1260951,19.6853825 11.9999944,19.6853825 C7.8738937,19.6853825 4.51764492,16.4799749 4.51764492,12.539315 C4.51764492,9.995423 5.95146638,7.62323058 8.25881964,6.34970967 C8.5963216,6.16326473 9.0264691,6.27386968 9.22279472,6.59620316 C9.41801339,6.91853664 9.30220356,7.33039821 8.9647016,7.51685394 C7.09300748,8.55125934 5.92940898,10.4757682 5.92940898,12.5393259 C5.92940898,15.7363092 8.65256633,18.3370786 11.9999944,18.3370786 Z M12,24 C5.38345158,24 0,18.8584989 0,12.5393259 C0,7.50526922 3.37610382,3.11060496 8.39999604,1.60323237 C8.7749944,1.49157034 9.16874104,1.68961078 9.2856578,2.04459506 C9.4025744,2.39957933 9.19521449,2.77879012 8.82352526,2.89045214 C4.38970522,4.21980405 1.41176404,8.09726564 1.41176404,12.5393259 C1.41176404,18.1148226 6.16212415,22.6516854 12,22.6516854 C17.8378646,22.6516854 22.5882247,18.1148226 22.5882247,12.5393259 C22.5882247,10.7622903 22.0985232,9.0136989 21.1720446,7.48314608 C20.9768259,7.1608126 21.0926358,6.74895103 21.4301377,6.5624953 C21.7654373,6.37605035 22.1988827,6.48559822 22.3941128,6.80898877 C23.4452106,8.54389215 24,10.5252783 24,12.5393259 C24,18.8584989 18.6165485,24 12,24 L12,24 Z M11.9999944,14.1573034 C12.9356293,14.1573034 13.6941112,13.4329102 13.6941112,12.5393259 C13.6941112,11.6457416 12.9356293,10.9213483 11.9999944,10.9213483 C11.0643594,10.9213483 10.3058775,11.6457416 10.3058775,12.5393259 C10.3058775,13.4329102 11.0643594,14.1573034 11.9999944,14.1573034 Z M12.7058764,1.3683236 L12.7058764,9.79792182 C13.0002912,9.86724682 13.2754724,9.97903822 13.5281216,10.1255191 L19.7635333,4.17034788 C17.7932527,2.50010967 15.3340388,1.51626067 12.7058764,1.3683236 Z M11.2941123,9.79793266 L11.2941123,0.67415731 C11.2941123,0.302313714 11.6106524,0 11.9999944,0 C15.5048624,0 18.8001794,1.30315146 21.2804117,3.66942204 C21.281654,3.67054383 21.2833029,3.67086742 21.2845453,3.67205394 C21.3792576,3.76290878 21.4292341,3.8752935 21.4585989,3.99175552 C21.4934072,4.12843147 21.4949997,4.27142832 21.4390939,4.40289439 C21.4047599,4.48426788 21.3532699,4.56050698 21.2845453,4.6264018 L14.5273795,11.0798778 C14.7991836,11.5075416 14.9646988,12.0036135 14.9646988,12.5393259 C14.9646988,14.1004262 13.6345574,15.3707866 11.9999944,15.3707866 C10.3654313,15.3707866 9.03528986,14.1004262 9.03528986,12.5393259 C9.03528986,11.2116891 10.0009139,10.1024144 11.2941123,9.79793266 Z"
+          />
+        </svg>
+      </DocumentFragment>
+    `);
+  });
+
+  it('should render the outlined version when passed the outlined variant', async () => {
+    const view = await renderInTestApp(<ResourceOptimizationIconOutlined />);
+
+    expect(view.asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root"
+          focusable="false"
+          variant="outlined"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M11.9999944,18.3370786 C15.3474224,18.3370786 18.0705797,15.7363092 18.0705797,12.5393259 C18.0705797,11.8746499 17.9547698,11.2247191 17.7253639,10.6074392 C17.5952218,10.2566617 17.7871314,9.87112996 18.1544046,9.74683693 C18.5227847,9.6225439 18.9242565,9.80582839 19.0555053,10.1565951 C19.338965,10.9192341 19.4823438,11.7208558 19.4823438,12.539315 C19.4823438,16.4799749 16.1260951,19.6853825 11.9999944,19.6853825 C7.8738937,19.6853825 4.51764492,16.4799749 4.51764492,12.539315 C4.51764492,9.995423 5.95146638,7.62323058 8.25881964,6.34970967 C8.5963216,6.16326473 9.0264691,6.27386968 9.22279472,6.59620316 C9.41801339,6.91853664 9.30220356,7.33039821 8.9647016,7.51685394 C7.09300748,8.55125934 5.92940898,10.4757682 5.92940898,12.5393259 C5.92940898,15.7363092 8.65256633,18.3370786 11.9999944,18.3370786 Z M12,24 C5.38345158,24 0,18.8584989 0,12.5393259 C0,7.50526922 3.37610382,3.11060496 8.39999604,1.60323237 C8.7749944,1.49157034 9.16874104,1.68961078 9.2856578,2.04459506 C9.4025744,2.39957933 9.19521449,2.77879012 8.82352526,2.89045214 C4.38970522,4.21980405 1.41176404,8.09726564 1.41176404,12.5393259 C1.41176404,18.1148226 6.16212415,22.6516854 12,22.6516854 C17.8378646,22.6516854 22.5882247,18.1148226 22.5882247,12.5393259 C22.5882247,10.7622903 22.0985232,9.0136989 21.1720446,7.48314608 C20.9768259,7.1608126 21.0926358,6.74895103 21.4301377,6.5624953 C21.7654373,6.37605035 22.1988827,6.48559822 22.3941128,6.80898877 C23.4452106,8.54389215 24,10.5252783 24,12.5393259 C24,18.8584989 18.6165485,24 12,24 L12,24 Z M11.9999944,14.1573034 C12.9356293,14.1573034 13.6941112,13.4329102 13.6941112,12.5393259 C13.6941112,11.6457416 12.9356293,10.9213483 11.9999944,10.9213483 C11.0643594,10.9213483 10.3058775,11.6457416 10.3058775,12.5393259 C10.3058775,13.4329102 11.0643594,14.1573034 11.9999944,14.1573034 Z M12.7058764,1.3683236 L12.7058764,9.79792182 C13.0002912,9.86724682 13.2754724,9.97903822 13.5281216,10.1255191 L19.7635333,4.17034788 C17.7932527,2.50010967 15.3340388,1.51626067 12.7058764,1.3683236 Z M11.2941123,9.79793266 L11.2941123,0.67415731 C11.2941123,0.302313714 11.6106524,0 11.9999944,0 C15.5048624,0 18.8001794,1.30315146 21.2804117,3.66942204 C21.281654,3.67054383 21.2833029,3.67086742 21.2845453,3.67205394 C21.3792576,3.76290878 21.4292341,3.8752935 21.4585989,3.99175552 C21.4934072,4.12843147 21.4949997,4.27142832 21.4390939,4.40289439 C21.4047599,4.48426788 21.3532699,4.56050698 21.2845453,4.6264018 L14.5273795,11.0798778 C14.7991836,11.5075416 14.9646988,12.0036135 14.9646988,12.5393259 C14.9646988,14.1004262 13.6345574,15.3707866 11.9999944,15.3707866 C10.3654313,15.3707866 9.03528986,14.1004262 9.03528986,12.5393259 C9.03528986,11.2116891 10.0009139,10.1024144 11.2941123,9.79793266 Z"
+          />
+        </svg>
+      </DocumentFragment>
+    `);
+  });
+
+  it('should render the filled version when passed the filled variant', async () => {
+    const view = await renderInTestApp(<ResourceOptimizationIconFilled />);
+
+    expect(view.asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root"
+          focusable="false"
+          variant="filled"
+          viewBox="0 0 24 24"
         >
           <path
             d="M18,0 C21.31372,0 24,2.68628 24,6 L24,18 C24,21.31368 21.31372,24 18,24 L6,24 C2.68628,24 0,21.31368 0,18 L0,6 C0,2.68628 2.68628,0 6,0 Z M9.96424335,4.53344629 C9.87655578,4.26720809 9.5812458,4.11867775 9.29999703,4.20242428 C5.53207787,5.33295372 3,8.62895192 3,12.4044944 C3,17.1438742 7.03758868,21 12,21 C16.9624114,21 21,17.1438742 21,12.4044944 C21,10.8939587 20.583908,9.40791912 19.7955846,8.10674158 C19.649162,7.86419866 19.324078,7.78203776 19.0726033,7.92187148 C18.8194768,8.06171327 18.7326195,8.37060945 18.8790335,8.61235956 C19.5738924,9.76027418 19.9411685,11.0717177 19.9411685,12.4044944 C19.9411685,16.5861169 16.3783985,19.9887641 12,19.9887641 C7.62159311,19.9887641 4.05882303,16.5861169 4.05882303,12.4044944 C4.05882303,9.07294923 6.29227891,6.16485304 9.61764394,5.16783911 C9.89641087,5.08409259 10.0519308,4.79968449 9.96424335,4.53344629 Z M9.91709604,7.94715237 C9.76985183,7.70540226 9.4472412,7.62244855 9.19411473,7.76228225 C7.46359978,8.71742293 6.38823369,10.4965672 6.38823369,12.4044863 C6.38823369,15.3599812 8.90542027,17.7640369 11.9999958,17.7640369 C15.0945713,17.7640369 17.6117579,15.3599812 17.6117579,12.4044863 C17.6117579,11.7906418 17.5042237,11.1894256 17.291629,10.6174463 C17.1931924,10.3543713 16.8920885,10.2169079 16.6158034,10.3101277 C16.3403485,10.4033475 16.1964164,10.6924962 16.2940229,10.9555794 C16.4660774,11.4185393 16.5529348,11.9059874 16.5529348,12.4044944 C16.5529348,14.8022319 14.5105668,16.752809 11.9999958,16.752809 C9.48942475,16.752809 7.44705673,14.8022319 7.44705673,12.4044944 C7.44705673,10.8568261 8.31975561,9.4134445 9.7235262,8.63764046 C9.97665267,8.49779866 10.06351,8.18890248 9.91709604,7.94715237 Z M11.9999958,3 C11.7079893,3 11.4705842,3.22673529 11.4705842,3.50561798 L11.4705842,10.3484495 C10.5006855,10.5768108 9.7764674,11.4087668 9.7764674,12.4044944 C9.7764674,13.5753196 10.7740735,14.5280899 11.9999958,14.5280899 C13.2259181,14.5280899 14.2235241,13.5753196 14.2235241,12.4044944 C14.2235241,12.0027101 14.0993877,11.6306562 13.8955346,11.3099083 L18.963409,6.46980135 C19.0149524,6.42038024 19.0535699,6.36320091 19.0793204,6.30217079 C19.1212498,6.20357124 19.1200554,6.0963236 19.0939492,5.99381664 C19.0719256,5.90647012 19.0344432,5.82218158 18.963409,5.75404045 C17.1001345,3.9773636 14.6286468,3 11.9999958,3 Z M11.9999958,11.1910113 C12.7017219,11.1910113 13.2705834,11.7343062 13.2705834,12.4044944 C13.2705834,13.0746826 12.7017219,13.6179776 11.9999958,13.6179776 C11.2982696,13.6179776 10.7294081,13.0746826 10.7294081,12.4044944 C10.7294081,11.7343062 11.2982696,11.1910113 11.9999958,11.1910113 Z M12.5294073,4.0262427 C14.5005291,4.1371955 16.3449396,4.87508226 17.82265,6.12776899 L13.1460912,10.5941393 C12.9566043,10.4842787 12.7502184,10.4004351 12.5294073,10.3484414 Z"