@indico-data/design-system 2.2.0 → 2.3.1

package/src/legacy/components/Navigation/Drawer/Drawer.scss

@@ -1,61 +0,0 @@
-
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
-.pf__drawer__wrapper {
-  color: #444444;
-  background-color: white;
-  box-sizing: border-box;
-  height: 100vh;
-  padding: 30px 4px 10px 4px;
-  transition: width 0.2s ease-in-out;
-  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-  width: 100%;
-
-  .pf__drawer__header__logo-text {
-    font-family: 'Poppins', sans-serif;
-    font-weight: 600;
-  }
-
-  a:link {
-    color: #444444;
-  }
-
-  a {
-    color: #444444;
-    text-decoration: none;
-  }
-
-
-  .pf__drawer__header {
-    margin-bottom: 30px;
-    color: black;
-    display: flex;
-    align-items: center;
-    padding-left: 10px;
-    white-space: nowrap;
-
-    .pf__drawer__header__text {
-      overflow: hidden;
-      transition: opacity 0.2s ease-in-out;
-    }
-
-    span {
-      display: flex;
-      align-items: center;
-    }
-
-    p {
-      font-size: 20px;
-      margin: 0 0 0 12px;
-    }
-  }
-
-  .pf__drawer__content {
-    height: calc(100% - 42px);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding-bottom: 10px;
-  }
-}

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

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Drawer } from '@/legacy/components/Navigation/Drawer';
-import React from 'react';
-import { footerItems, navigationItems } from './__mocks__/mocks';
-import { MemoryRouter } from 'react-router-dom';
-
-const meta: Meta<typeof Drawer> = {
-  component: Drawer,
-  tags: ['autodocs'],
-  title: 'legacy/Navigation/Drawer',
-  decorators: [
-    (Story) => (
-      <MemoryRouter initialEntries={['/']}>
-        <div style={{ width: '100%', display: 'flex', height: '800px' }}>
-          <div style={{ width: '50px', position: 'relative' }}>
-            <div style={{ position: 'absolute' }}>
-              <Story />
-            </div>
-          </div>
-          <div style={{ width: '100%', height: '60px' }}>
-            This text is to help illustrate the ability to expand the drawer over content without
-            shifting it in any way. Simply add a position relative div and place this in a position
-            absolute div.
-          </div>
-        </div>
-      </MemoryRouter>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Drawer>;
-
-export const Normal: Story = {
-  args: {
-    logoText: 'INDICO INSIGHTS',
-    logoIcon: 'indico-o',
-    navigationItems: navigationItems,
-    footerItems: footerItems,
-  },
-};

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

@@ -1,107 +0,0 @@
-/* 
-## TODO
--Documentation
--Split header block to its own component.
--Add support for horizontal lines between list items.
--Use variables for styles
--Add toggle options other than mouseover
--Add easy color support
--Add documentation
--Icons should ideally have a size enum
--Combine headerComponent, logoText and logoIcon props into one prop and functionality
-*/
-import React from 'react';
-import { IconName, PermafrostComponent } from '@/types';
-import { Icon } from '@/components/icons';
-import { DrawerLinkList } from './DrawerLinkList';
-import { ListItem } from './types';
-import './Drawer.scss';
-
-type Props = PermafrostComponent & {
-  style?: React.CSSProperties;
-  logoText?: string;
-  logoIcon?: IconName;
-  headerComponent?: React.ReactNode;
-  navigationItems?: ListItem[];
-  footerItems?: ListItem[];
-  expandedWidth?: string;
-  collapsedWidth?: string;
-};
-
-export const Drawer = (props: Props) => {
-  const {
-    id,
-    style = {},
-    logoText,
-    logoIcon,
-    navigationItems,
-    footerItems,
-    headerComponent,
-    expandedWidth = '245px',
-    collapsedWidth = '50px',
-    ...restOfProps
-  } = props;
-
-  const [isOpen, setIsOpen] = React.useState(false);
-  const handleMouseOver = () => {
-    setIsOpen(true);
-  };
-
-  const handleMouseOut = () => {
-    setIsOpen(false);
-  };
-
-  const currentWidth = isOpen ? expandedWidth : collapsedWidth;
-
-  return (
-    <div
-      id={id}
-      data-cy={props['data-cy']}
-      data-testid={props['data-testid']}
-      style={{
-        ...style,
-      }}
-      {...restOfProps}
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}
-      aria-expanded={isOpen}
-    >
-      <div
-        className={'pf__drawer__wrapper'}
-        style={{
-          width: currentWidth,
-        }}
-      >
-        <div className="pf__drawer__header">
-          {headerComponent ? (
-            headerComponent
-          ) : (
-            <span>
-              {logoIcon ? <Icon name={logoIcon} size="lg" data-testid="logo-icon" /> : null}
-              <p
-                data-testid="logo-text"
-                className="pf__drawer__header__logo-text"
-                aria-hidden={!isOpen}
-              >
-                {logoText}
-              </p>
-            </span>
-          )}
-        </div>
-        <div className="pf__drawer__content">
-          {navigationItems?.length ? (
-            <div className="pf__drawer__navigation" data-testid="drawer-navigation">
-              <DrawerLinkList isOpen={isOpen} listItems={navigationItems} />
-            </div>
-          ) : null}
-
-          {footerItems?.length ? (
-            <div className="pf__drawer__footer" data-testid="drawer-footer">
-              <DrawerLinkList isOpen={isOpen} listItems={footerItems} />
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/legacy/components/Navigation/Drawer/DrawerLinkList.styles.ts

@@ -1,65 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledDrawerLinkList = styled.div`
-  .drawer__list {
-    white-space: nowrap;
-
-    .drawer__list__item {
-      box-sizing: border-box;
-      margin-bottom: 10px;
-      font-weight: 500;
-      font-size: 16px;
-      display: flex;
-      align-items: center;
-      padding-top: 12px;
-      padding-bottom: 10px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &:hover {
-        color: #6833d0;
-        background-color: #efebf7;
-
-        a,
-        &:active {
-          color: #6833d0;
-        }
-      }
-
-      &--active {
-        color: white;
-        background-color: #6833d0;
-        border-radius: 4px;
-
-        a,
-        &:active {
-          color: white;
-        }
-      }
-
-      .drawer__list__item__link {
-        font-size: 16px;
-        display: flex;
-        align-items: center;
-
-        .drawer__list__item__icon {
-          width: 22px;
-          height: 22px;
-          margin-right: 12px;
-          margin-left: 10px;
-        }
-
-        .drawer__list__item__label {
-          opacity: 1;
-        }
-
-        .drawer__list__item__label--hidden {
-          opacity: 0;
-          transition: all 0.3s ease-out;
-        }
-      }
-    }
-  }
-`;

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';