@indico-data/design-system 1.0.57 → 2.0.0

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

@@ -1,175 +0,0 @@
-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/components/inputs/NoInputDatePicker/__tests__/NoInputDatePicker.test.tsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { NoInputDatePicker } from '../NoInputDatePicker';
-import { DateRange } from 'react-day-picker';
-import userEvent from '@testing-library/user-event';
-
-const today = new Date();
-const mockOnChange = jest.fn();
-let trigger: any;
-
-describe('NoInputDatePicker', () => {
-  describe('single', () => {
-    beforeEach(() => {
-      render(
-        <NoInputDatePicker
-          id={'date-picker'}
-          label={'Pick a date'}
-          value={today}
-          isRangePicker={false}
-          triggerIcon="calendar"
-          triggerIconSize={[20]}
-          onChange={(date: Date | DateRange | undefined) => {
-            mockOnChange(date);
-          }}
-        />,
-      );
-
-      trigger = screen.getByTestId('datepicker-trigger-for-date-picker');
-    });
-
-    it('shows single date picker', async () => {
-      await userEvent.click(trigger);
-      expect(screen.getByTestId('datepicker-dialog')).toBeVisible();
-      expect(screen.getByTestId('single-datepicker')).toBeVisible();
-    });
-
-    it('opens the date picker when clicking on the trigger', async () => {
-      await userEvent.click(trigger);
-      const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
-      expect(datePickerDialogContainer).toBeVisible();
-    });
-
-    it('emits the right date picked for single', async () => {
-      await userEvent.click(trigger);
-      const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
-      expect(datePickerDialogContainer).toBeVisible();
-
-      const day28 = screen.getByText('28');
-      await userEvent.click(day28);
-      expect(mockOnChange).toHaveBeenCalledWith(
-        new Date(today.getFullYear(), today.getMonth(), 28),
-      );
-    });
-
-    it('closes date picker on single selection', async () => {
-      await userEvent.click(trigger);
-      const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
-      expect(datePickerDialogContainer).toBeVisible();
-
-      const day28 = screen.getByText('28');
-      await userEvent.click(day28);
-      expect(mockOnChange).toHaveBeenCalledWith(
-        new Date(today.getFullYear(), today.getMonth(), 28),
-      );
-      expect(datePickerDialogContainer).not.toBeVisible();
-    });
-  });
-
-  describe('range', () => {
-    beforeEach(() => {
-      render(
-        <NoInputDatePicker
-          id={'date-picker'}
-          label={'Pick a date'}
-          value={today}
-          isRangePicker={true}
-          triggerIcon="calendar"
-          triggerIconSize={[20]}
-          onChange={(date: Date | DateRange | undefined) => {
-            mockOnChange(date);
-          }}
-        />,
-      );
-
-      trigger = screen.getByTestId('datepicker-trigger-for-date-picker');
-    });
-
-    it('shows ranged date picker', async () => {
-      await userEvent.click(trigger);
-      expect(screen.getByTestId('datepicker-dialog')).toBeVisible();
-      expect(screen.getByTestId('range-datepicker')).toBeVisible();
-    });
-
-    it('emits the right date picked for range', async () => {
-      await userEvent.click(trigger);
-      const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
-      expect(datePickerDialogContainer).toBeVisible();
-
-      const day27 = screen.getByText('27');
-      await userEvent.click(day27);
-      const day28 = screen.getByText('28');
-      await userEvent.click(day28);
-
-      expect(mockOnChange).toHaveBeenCalledWith({
-        from: new Date(today.getFullYear(), today.getMonth(), 27),
-        to: new Date(today.getFullYear(), today.getMonth(), 28),
-      });
-    });
-    it('closes date picker on both ranged selection', async () => {
-      await userEvent.click(trigger);
-      const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
-      expect(datePickerDialogContainer).toBeVisible();
-
-      const day27 = screen.getByText('27');
-      await userEvent.click(day27);
-      const day28 = screen.getByText('28');
-      await userEvent.click(day28);
-
-      expect(mockOnChange).toHaveBeenCalledWith({
-        from: new Date(today.getFullYear(), today.getMonth(), 27),
-        to: new Date(today.getFullYear(), today.getMonth(), 28),
-      });
-      expect(datePickerDialogContainer).not.toBeVisible();
-    });
-  });
-});

package/src/components/text-truncate/TextTruncate.stories.mdx

@@ -1,59 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import { TextTruncate } from './TextTruncate';
-
-<Meta
-  title="Text Utilities/TextTruncate"
-  component={TextTruncate}
-  argTypes={{
-    string: {
-      description: 'The string to truncate.',
-      control: {
-        type: 'text',
-      },
-    },
-    maxChars: {
-      control: {
-        type: 'number',
-      },
-    },
-  }}
-/>
-
-# Text Truncate
-
-This component truncates the provided text if the character limit exceeds the Max Character Length
-set on the component property. It will add `...` to the end of the truncated text. It will also
-add a `title` attribute to the component with the full text if the text is truncated.
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      string: 'This string is being truncated for length.',
-      maxChars: 30,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable of={TextTruncate} />
-
-## Non Truncated Text
-
-This is an example of a string that is shorter than the max character length and will not be
-truncated.
-
-<Canvas>
-  <Story
-    name="non truncated text"
-    args={{
-      string: 'This string meets the length required to not be truncated.',
-      maxChars: 100,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-export const Template = (args) => <TextTruncate {...args} />;