@indico-data/design-system 2.2.0 → 2.3.0

package/src/legacy/components/Navigation/Drawer/DrawerLinkList.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { PermafrostComponent } from '@/types';
-import { StyledDrawerLinkList } from './DrawerLinkList.styles';
-import { Icon } from '@/components/icons';
-import { ListItem } from './types';
-import { NavLink } from 'react-router-dom';
-
-type Props = PermafrostComponent & {
-  style?: object;
-  listItems?: ListItem[];
-  isOpen: boolean;
-};
-
-export const DrawerLinkList = (props: Props) => {
-  const { className, style = {}, id, listItems, isOpen, ...restOfProps } = props;
-
-  return (
-    <StyledDrawerLinkList
-      id={id}
-      data-cy={props['data-cy']}
-      data-testid={props['data-testid']}
-      style={style}
-      {...restOfProps}
-      className={classNames('drawer__content__list', className)}
-    >
-      {listItems && (
-        <ul className="drawer__list">
-          {listItems.map((item) => (
-            <NavLink
-              key={item.id}
-              to={item.path}
-              className={({ isActive, isPending }) => {
-                return classNames(
-                  'drawer__list__item',
-                  { 'drawer__list__item--active': isActive },
-                  { 'drawer__list__item--pending': isPending },
-                );
-              }}
-              role="link"
-              aria-label={item.label}
-              data-testid={`link-list-item-${item.label}`}
-            >
-              <li className="drawer__list__item__link">
-                <span className={`drawer__list__item__icon`}>
-                  <Icon size="lg" name={item.icon} ariaLabel={`${item.label} icon`} />
-                </span>
-                <span
-                  className={`drawer__list__item__label ${
-                    !isOpen ? 'drawer__list__item__label--hidden' : ''
-                  }`}
-                  aria-hidden={!isOpen}
-                  data-testid="list-item-label"
-                >
-                  {item.label}
-                </span>
-              </li>
-            </NavLink>
-          ))}
-        </ul>
-      )}
-    </StyledDrawerLinkList>
-  );
-};

package/src/legacy/components/Navigation/Drawer/__mocks__/mocks.ts

@@ -1,49 +0,0 @@
-import { ListItem } from '../types';
-
-export const navigationItems: ListItem[] = [
-  {
-    id: '1',
-    icon: 'search-thin',
-    label: 'Search',
-    path: '/iframe.html',
-  },
-  {
-    id: '4',
-    icon: 'libraries',
-    label: 'Libraries',
-    path: '/',
-  },
-  {
-    id: '2',
-    icon: 'collection',
-    label: 'Collections',
-    path: '/profile',
-  },
-  {
-    id: '3',
-    icon: 'compare',
-    label: 'Compare',
-    path: '/settings',
-  },
-];
-
-export const footerItems: ListItem[] = [
-  {
-    id: 'foter-1',
-    icon: 'circle-help',
-    label: 'Help',
-    path: '/search',
-  },
-  {
-    id: '4f',
-    icon: 'cog',
-    label: 'Settings',
-    path: '/',
-  },
-  {
-    id: '42',
-    icon: 'logout',
-    label: 'Sign Out',
-    path: '/profile',
-  },
-];

package/src/legacy/components/Navigation/Drawer/__tests__/Drawer.test.tsx

@@ -1,180 +0,0 @@
-it('should render correctly', () => {
-  // Pending
-  expect(true).toBe(true);
-});
-
-// import React from 'react';
-// import { render, screen } from '@testing-library/react';
-// import userEvent from '@testing-library/user-event';
-// import { Drawer } from '../Drawer';
-// import { navigationItems, footerItems } from '../__mocks__/mocks';
-// import { MemoryRouter } from 'react-router-dom';
-
-// let navDrawer: HTMLElement;
-
-// describe('Drawer', () => {
-//   describe('expanded interactions', () => {
-//     beforeEach(() => {
-//       render(
-//         <MemoryRouter>
-//           <Drawer
-//             logoIcon={'indico-o'}
-//             logoText={'INDICO INSIGHTS'}
-//             navigationItems={navigationItems}
-//             footerItems={footerItems}
-//             $expandedWidth="300"
-//             $collapsedWidth="45"
-//             data-testid="navigation__drawer"
-//           />
-//           ,
-//         </MemoryRouter>,
-//       );
-//       navDrawer = screen.getByTestId('navigation__drawer');
-//     });
-
-//     it('opens the drawer when the mouse is over the drawer', async () => {
-//       expect(navDrawer).toHaveAttribute('aria-expanded', 'false');
-
-//       await userEvent.hover(navDrawer);
-//       expect(navDrawer).toHaveAttribute('aria-expanded', 'true');
-//     });
-
-//     it('closes the drawer when the mouse is over the drawer and then leaves the drawer', async () => {
-//       expect(navDrawer).toHaveAttribute('aria-expanded', 'false');
-//       await userEvent.hover(navDrawer);
-
-//       expect(navDrawer).toHaveAttribute('aria-expanded', 'true');
-//       await userEvent.unhover(navDrawer);
-//       expect(navDrawer).toHaveAttribute('aria-expanded', 'false');
-//     });
-//   });
-
-//   describe('styling', () => {
-//     beforeEach(() => {
-//       render(
-//         <MemoryRouter>
-//           <Drawer
-//             logoIcon={'indico-o'}
-//             logoText={'INDICO INSIGHTS'}
-//             navigationItems={navigationItems}
-//             footerItems={footerItems}
-//             $expandedWidth="400"
-//             $collapsedWidth="45"
-//             data-testid="navigation__drawer"
-//           />
-//           ,
-//         </MemoryRouter>,
-//       );
-//       navDrawer = screen.getByTestId('navigation__drawer');
-//     });
-
-//     it('applies the drawer--open class to the component when the drawer is open', async () => {
-//       expect(navDrawer).toHaveClass('drawer--closed');
-//       await userEvent.hover(navDrawer);
-
-//       expect(navDrawer).toHaveAttribute('aria-expanded', 'true');
-//       expect(navDrawer).toHaveClass('drawer--open');
-//     });
-
-//     it('applies the drawer--closed class to the component when the drawer is closed', async () => {
-//       expect(navDrawer).toHaveClass('drawer--closed');
-//       await userEvent.hover(navDrawer);
-
-//       expect(navDrawer).toHaveClass('drawer--open');
-//       await userEvent.unhover(navDrawer);
-//       expect(navDrawer).toHaveClass('drawer--closed');
-//     });
-
-//     it('sets the drawer width to the min width value passed in as a prop when drawer is closed', () => {
-//       expect(navDrawer).toHaveClass('drawer--closed');
-//       expect(navDrawer).toHaveStyle({ width: '45px' });
-//     });
-
-//     it('sets the drawer width to the max width value passed in as a prop when drawer is open', async () => {
-//       await userEvent.hover(navDrawer);
-
-//       expect(navDrawer).toHaveClass('drawer--open');
-//       expect(navDrawer).toHaveStyle({ width: '400px' });
-//     });
-//   });
-
-//   describe('Logo and Header Display', () => {
-//     it('displays the header component when one is provided', () => {
-//       render(
-//         <MemoryRouter>
-//           <Drawer
-//             navigationItems={navigationItems}
-//             footerItems={footerItems}
-//             data-testid="navigation__drawer"
-//             $expandedWidth="400"
-//             $collapsedWidth="45"
-//             headerComponent={<div>Header Component</div>}
-//           />
-//           ,
-//         </MemoryRouter>,
-//       );
-
-//       navDrawer = screen.getByTestId('navigation__drawer');
-
-//       expect(screen.getByText('Header Component')).toBeInTheDocument();
-//     });
-//     it('displays the logo icon and text when no header component is provided', async () => {
-//       render(
-//         <MemoryRouter>
-//           <Drawer
-//             logoIcon={'indico-o'}
-//             logoText={'INDICO INSIGHTS'}
-//             navigationItems={navigationItems}
-//             footerItems={footerItems}
-//             data-testid="navigation__drawer"
-//           />
-//           ,
-//         </MemoryRouter>,
-//       );
-//       navDrawer = screen.getByTestId('navigation__drawer');
-
-//       await userEvent.hover(navDrawer);
-//       const logoIcon = screen.getByTestId('logo-icon');
-//       const logoText = screen.getByText('INDICO INSIGHTS');
-
-//       expect(logoIcon).toBeInTheDocument();
-//       expect(logoText).toBeInTheDocument();
-//       expect(logoText).toHaveAttribute('aria-hidden', 'false');
-//       expect(logoText).toBeVisible();
-//       expect(logoIcon).toBeVisible();
-//     });
-//   });
-//   describe('Conditional Rendering Of Lists', () => {
-//     it('does not display nav or footer lists if props are empty', () => {
-//       render(
-//         <MemoryRouter>
-//           <Drawer navigationItems={[]} footerItems={[]} data-testid="navigation__drawer" />,
-//         </MemoryRouter>,
-//       );
-
-//       const nav = screen.queryByTestId('drawer-navigation');
-//       const footer = screen.queryByTestId('drawer-footer');
-
-//       expect(nav).not.toBeInTheDocument();
-//       expect(footer).not.toBeInTheDocument();
-//     });
-//     it('displays nav and footer lists if props are not empty', () => {
-//       render(
-//         <MemoryRouter>
-//           <Drawer
-//             navigationItems={navigationItems}
-//             footerItems={footerItems}
-//             data-testid="navigation__drawer"
-//           />
-//           ,
-//         </MemoryRouter>,
-//       );
-
-//       const nav = screen.getByTestId('drawer-navigation');
-//       const footer = screen.getByTestId('drawer-footer');
-
-//       expect(nav).toBeInTheDocument();
-//       expect(footer).toBeInTheDocument();
-//     });
-//   });
-// });

package/src/legacy/components/Navigation/Drawer/__tests__/DrawerLinkList.test.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { DrawerLinkList } from '../DrawerLinkList';
-import { navigationItems } from '../__mocks__/mocks';
-import { MemoryRouter } from 'react-router-dom';
-
-describe('DrawerLinkList', () => {
-  describe('expanded interactions', () => {
-    it('it renders the correct number of items in the list', () => {
-      render(
-        <MemoryRouter>
-          <DrawerLinkList isOpen={true} listItems={navigationItems} />
-        </MemoryRouter>,
-      );
-
-      const list = screen.getAllByRole('listitem');
-      expect(list).toHaveLength(navigationItems.length);
-    });
-
-    // NOTE, the default path for the purpose of this test is `/` which matches the prop value.
-    it('hides the label when isOpen is false', () => {
-      render(
-        <MemoryRouter>
-          <DrawerLinkList isOpen={false} listItems={navigationItems} />
-        </MemoryRouter>,
-      );
-
-      const items = screen.queryAllByTestId('list-item-label');
-      items.map((item) => {
-        expect(item).not.toBeVisible();
-      });
-    });
-    it('shows the label when isOpen is true', () => {
-      render(
-        <MemoryRouter>
-          <DrawerLinkList isOpen={true} listItems={navigationItems} />
-        </MemoryRouter>,
-      );
-
-      const items = screen.queryAllByTestId('list-item-label');
-      items.map((item) => {
-        expect(item).toBeVisible();
-      });
-    });
-    it('sets active class on handleActiveLink match', () => {
-      render(
-        <MemoryRouter>
-          <DrawerLinkList isOpen={true} listItems={navigationItems} />
-        </MemoryRouter>,
-      );
-
-      const lineItem = screen.getByTestId('link-list-item-Libraries');
-      expect(lineItem).toHaveClass('drawer__list__item--active');
-    });
-    it('does not render a list when no items are passed to the component', () => {
-      render(
-        <MemoryRouter>
-          <DrawerLinkList isOpen={true} listItems={[]} />
-        </MemoryRouter>,
-      );
-
-      const list = screen.queryAllByRole('listitem');
-      expect(list).toHaveLength(0);
-    });
-  });
-});

package/src/legacy/components/Navigation/Drawer/index.ts

@@ -1 +0,0 @@
-export { Drawer } from './Drawer';

package/src/legacy/components/Navigation/Drawer/types.ts

@@ -1,8 +0,0 @@
-import { IconName } from '@/types';
-
-export type ListItem = {
-  id: string;
-  icon: IconName;
-  label: string;
-  path: string;
-};

package/src/legacy/components/Navigation/index.ts

@@ -1 +0,0 @@
-export { Drawer } from './Drawer';