refactor(Icons): Replace legacy Graph, House and Tools icons

Royal-Navy · Jan 24, 2022 · d4bffdc · d4bffdc
1 parent ef0b66a
commit d4bffdc
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 64 deletions.
diff --git a/packages/css-framework/src/components/_sidebar.scss b/packages/css-framework/src/components/_sidebar.scss
@@ -49,6 +49,7 @@ body.has-sidebar {
   align-items: center;
   justify-content: center;
   width: $bar-width - $border;
+  color: f.color('neutral', '200');
 }
 
 .rn-iconfill {

diff --git a/...ges/react-component-library/src/components/TopLevelNavigation/Sidebar/Sidebar.stories.tsx b/...ges/react-component-library/src/components/TopLevelNavigation/Sidebar/Sidebar.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { IconHome, IconBarChart, IconTune } from '@defencedigital/icon-library'
 
-import { Graph, House, Tools } from '../../../icons'
 import { Link } from '../../Link'
 import { Notification, Notifications } from '../NotificationPanel'
 import { Sidebar, SidebarNav, SidebarNavItem, SidebarUser } from './index'
@@ -31,13 +31,13 @@ export default {
 export const Default: ComponentStory<typeof Sidebar> = (props) => {
   const nav = (
     <SidebarNav>
-      <SidebarNavItem Image={House} link={<Link href="#">Home</Link>} />
+      <SidebarNavItem Image={IconHome} link={<Link href="#">Home</Link>} />
       <SidebarNavItem
-        Image={Graph}
+        Image={IconBarChart}
         link={<Link href="#">Stats</Link>}
         isActive
       />
-      <SidebarNavItem Image={Tools} link={<Link href="#">Tools</Link>} />
+      <SidebarNavItem Image={IconTune} link={<Link href="#">Settings</Link>} />
     </SidebarNav>
   )
 
@@ -51,13 +51,13 @@ export const WithUser: ComponentStory<typeof Sidebar> = (props) => {
 
   const nav = (
     <SidebarNav>
-      <SidebarNavItem Image={House} link={<Link href="#">Home</Link>} />
+      <SidebarNavItem Image={IconHome} link={<Link href="#">Home</Link>} />
       <SidebarNavItem
-        Image={Graph}
+        Image={IconBarChart}
         link={<Link href="#">Stats</Link>}
         isActive
       />
-      <SidebarNavItem Image={Tools} link={<Link href="#">Tools</Link>} />
+      <SidebarNavItem Image={IconTune} link={<Link href="#">Settings</Link>} />
     </SidebarNav>
   )
 
@@ -105,13 +105,13 @@ export const WithNotifications: ComponentStory<typeof Sidebar> = (props) => {
 
   const nav = (
     <SidebarNav>
-      <SidebarNavItem Image={House} link={<Link href="#">Home</Link>} />
+      <SidebarNavItem Image={IconHome} link={<Link href="#">Home</Link>} />
       <SidebarNavItem
-        Image={Graph}
+        Image={IconBarChart}
         link={<Link href="#">Stats</Link>}
         isActive
       />
-      <SidebarNavItem Image={Tools} link={<Link href="#">Tools</Link>} />
+      <SidebarNavItem Image={IconTune} link={<Link href="#">Settings</Link>} />
     </SidebarNav>
   )
 

diff --git a/packages/react-component-library/src/components/TopLevelNavigation/Sidebar/Sidebar.test.tsx b/packages/react-component-library/src/components/TopLevelNavigation/Sidebar/Sidebar.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import { fireEvent, render, RenderResult } from '@testing-library/react'
+import { IconHome, IconBarChart, IconTune } from '@defencedigital/icon-library'
 
 import { Link } from '../../Link'
 import { Sidebar, SidebarNav, SidebarNavItem, SidebarUser } from './index'
-import { Graph, House, Tools } from '../../../icons'
 import { Notification, Notifications } from '../NotificationPanel'
 
 describe('Sidebar', () => {
@@ -42,16 +42,16 @@ describe('Sidebar', () => {
             <SidebarNav data-arbitrary="arbitrary-nav">
               <SidebarNavItem
                 data-arbitrary="arbitrary-nav-item"
-                Image={House}
+                Image={IconHome}
                 link={<Link href="/">Home</Link>}
               />
               <SidebarNavItem
-                Image={Graph}
+                Image={IconBarChart}
                 link={<Link href="/stats">Stats</Link>}
                 isActive
               />
               <SidebarNavItem
-                Image={Tools}
+                Image={IconTune}
                 link={<Link href="/tools">Tools</Link>}
               />
             </SidebarNav>

diff --git a/packages/react-component-library/src/icons/Graph.tsx b/packages/react-component-library/src/icons/Graph.tsx
diff --git a/packages/react-component-library/src/icons/House.tsx b/packages/react-component-library/src/icons/House.tsx
diff --git a/packages/react-component-library/src/icons/Tools.tsx b/packages/react-component-library/src/icons/Tools.tsx
diff --git a/packages/react-component-library/src/icons/index.ts b/packages/react-component-library/src/icons/index.ts
@@ -1,8 +1,5 @@
-export * from './Graph'
-export * from './House'
 export * from './Logo'
 export * from './Right-Arrow'
 export * from './Search'
-export * from './Tools'
 export * from './Visibility'
 export * from './VisibilityOff'