@indico-data/design-system 1.0.58 → 2.0.0

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

@@ -0,0 +1,180 @@
+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/{components → legacy/components}/Pagination/Pagination.stories.tsx

@@ -4,7 +4,7 @@ import { Pagination } from './Pagination';
 
 const meta = {
   component: Pagination,
-  title: 'Pagination',
+  title: 'legacy/Pagination',
   argTypes: {},
   args: {
     skip: 0,

package/src/{components → legacy/components}/Pagination/Pagination.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { COLORS } from '@/tokens';
+import { COLORS } from '@/legacy/tokens';
 
 const paddingRight = '30px';
 

package/src/{components → legacy/components}/Pagination/Pagination.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { numberUtils } from '@/utils';
+import { numberUtils } from '@/legacy/utils';
 
 import { PermafrostComponent } from '@/types';
 

package/src/{components → legacy/components}/Toggle/Toggle.stories.tsx

@@ -5,7 +5,7 @@ import { Toggle } from './Toggle';
 
 const meta = {
   component: Toggle,
-  title: 'Toggle',
+  title: 'legacy/Toggle',
   argTypes: {},
   args: {},
 } satisfies Meta<typeof Toggle>;

package/src/{components → legacy/components}/Toggle/Toggle.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { COLORS } from '@/tokens';
+import { COLORS } from '@/legacy/tokens';
 
 export const StyledToggle = styled.label`
   position: relative;

package/src/{components → legacy/components}/Toggle/Toggle.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { Icon } from '@/components';
+import { Icon } from '@/legacy/components';
 import { PermafrostComponent, IconName } from '@/types';
 import { StyledToggle } from './Toggle.styles';
 

package/src/{components → legacy/components}/Tooltip/Tooltip.stories.tsx

@@ -6,7 +6,7 @@ import { Tooltip } from './Tooltip';
 const meta: Meta<typeof Tooltip> = {
   component: Tooltip,
   tags: ['autodocs'],
-  title: 'Tooltip',
+  title: 'legacy/Tooltip',
   args: {},
 };
 

package/src/{components → legacy/components}/Wizard/Wizard.stories.tsx

@@ -6,7 +6,7 @@ import { WizardCard, WizardSection } from './Wizard.styles';
 
 const meta = {
   component: Wizard,
-  title: 'wizards/Wizard',
+  title: 'legacy/wizards/Wizard',
   args: {
     steps: ['Task Details', 'Labels and Keywords', 'Labelers'],
     onCancel: () => console.info('cancelling'),

package/src/{components → legacy/components}/Wizard/Wizard.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { COLORS, TYPOGRAPHY } from '@/tokens';
+import { COLORS, TYPOGRAPHY } from '@/legacy/tokens';
 
 export const StyledWizard = styled.div`
   nav {

package/src/{components → legacy/components}/Wizard/Wizard.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { Button, ConfirmModal, IconButton } from '@/components';
+import { Button, ConfirmModal, IconButton } from '@/legacy/components';
 import { PermafrostComponent, ButtonSize } from '@/types';
 
 import { StyledWizard } from './Wizard.styles';

package/src/{components → legacy/components}/WizardWithSidebar/WizardWithSidebar.stories.tsx

@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { WizardWithSidebar } from './WizardWithSidebar';
-import { COLORS } from '@/tokens';
+import { COLORS } from '@/legacy/tokens';
 
 const meta = {
   component: WizardWithSidebar,
-  title: 'wizards/WizardWithSidebar',
+  title: 'legacy/wizards/WizardWithSidebar',
   args: {
     buttonColor: `${COLORS.blueDarknut}`,
     backgroundColor: '#ffffff',

package/src/{components → legacy/components}/WizardWithSidebar/WizardWithSidebar.styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import { TYPOGRAPHY, SPACING, COLORS } from '@/tokens';
+import { TYPOGRAPHY, SPACING, COLORS } from '@/legacy/tokens';
 
 export const StyledWizardWithSidebar = styled.div<{
   backgroundcolor?: string;
@@ -103,40 +103,5 @@ export const StyledWizardWithSidebar = styled.div<{
     display: flex;
     align-items: center;
     font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-
-    button {
-      width: 200px;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      ${(props) =>
-        props.buttoncolor &&
-        css`
-          background-color: ${props.buttoncolor};
-          color: ${props.backgroundcolor || 'inherit'};
-        `};
-    }
-
-    button.outline {
-      background-color: inherit;
-      ${(props) =>
-        props.buttoncolor &&
-        css`
-          color: ${props.buttoncolor};
-          border-color: ${props.buttoncolor};
-        `};
-    }
-
-    button.link-style {
-      font-size: inherit;
-      margin-right: 1em;
-      background-color: inherit;
-      width: auto;
-      ${(props) =>
-        props.buttoncolor &&
-        css`
-          color: ${props.buttoncolor};
-        `};
-    }
   }
 `;

package/src/{components → legacy/components}/WizardWithSidebar/WizardWithSidebar.tsx

@@ -3,7 +3,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
 
-import { Button, ConfirmModal, Icon, IconButton } from '@/components';
+import { ConfirmModal, Icon, IconButton } from '@/legacy/components';
+import { Button } from '@/components/button';
 import { PermafrostComponent } from '@/types';
 
 import { StyledWizardWithSidebar } from './WizardWithSidebar.styles';
@@ -210,39 +211,52 @@ export function WizardWithSidebar(props: Props) {
           </div>
           <nav className="wizard-actions">
             <div className="wizard-buttons">
-              <Button onClick={() => setOpenCancelConfirm(true)} variant="link-style">
+              <Button
+                ariaLabel="cancel"
+                variant="text"
+                color="secondary"
+                onClick={() => setOpenCancelConfirm(true)}
+              >
                 Cancel
               </Button>
 
               {steps.indexOf(currentStep) !== 0 && (
-                <IconButton
+                <Button
                   variant="outline"
+                  color="secondary"
                   iconName="fa-arrow-left"
-                  label="Previous Step"
-                  onPress={prevStep}
+                  ariaLabel="previous step"
+                  onClick={prevStep}
                   isDisabled={disablePrevStep}
-                />
+                  className="mr-1"
+                >
+                  Previous Step
+                </Button>
               )}
 
               {onLastStep ? (
-                <IconButton
-                  variant="primary"
+                <Button
+                  ariaLabel="submit"
                   iconName="check"
-                  busy={isBusy}
-                  label={isBusy ? submitProcessing : submitButtonLabel}
-                  onPress={handleNextPress}
+                  color="secondary"
+                  isLoading={isBusy}
+                  onClick={handleNextPress}
                   isDisabled={disableSubmit}
-                />
+                >
+                  {isBusy ? submitProcessing : submitButtonLabel}
+                </Button>
               ) : (
-                <IconButton
-                  variant="primary"
-                  iconSide="end"
+                <Button
+                  ariaLabel="next step"
+                  iconPosition="right"
+                  color="secondary"
                   iconName="fa-arrow-right"
-                  label="Next Step"
-                  onPress={handleNextPress}
+                  onClick={handleNextPress}
                   isDisabled={disableNextStep}
                   {...nextButtonProps}
-                />
+                >
+                  Next Step
+                </Button>
               )}
             </div>
           </nav>

package/src/{components → legacy/components}/basic-section/Section/Section.stories.tsx

@@ -4,7 +4,7 @@ import { Section } from './Section';
 
 const meta = {
   component: Section,
-  title: 'Basic Section/Section',
+  title: 'legacy/Basic Section/Section',
   argTypes: {},
 } satisfies Meta<typeof Section>;
 

package/src/{components → legacy/components}/basic-section/SectionBlock/SectionBlock.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { COLORS } from '@/tokens';
+import { COLORS } from '@/legacy/tokens';
 
 export const StyledSectionBlock = styled.div`
   h3 {

package/src/{components → legacy/components}/basic-section/SectionBody/SectionBody.stories.tsx

@@ -4,7 +4,7 @@ import { SectionBody } from './SectionBody';
 
 const meta = {
   component: SectionBody,
-  title: 'Basic Section/SectionBody',
+  title: 'legacy/Basic Section/SectionBody',
   argTypes: {},
 } satisfies Meta<typeof SectionBody>;
 

package/src/{components → legacy/components}/basic-section/SectionBody/SectionBody.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { COLORS } from '@/tokens';
+import { COLORS } from '@/legacy/tokens';
 
 const sectionSidePadding = '19px';
 

package/src/{components → legacy/components}/basic-section/SectionHeader/SectionHeader.stories.tsx

@@ -5,7 +5,7 @@ import { SectionHeader } from './SectionHeader';
 
 const meta = {
   component: SectionHeader,
-  title: 'Basic Section/SectionHeader',
+  title: 'legacy/Basic Section/SectionHeader',
   argTypes: {},
 } satisfies Meta<typeof SectionHeader>;
 

package/src/{components → legacy/components}/basic-section/SectionTable/SectionTable.styles.ts

@@ -1,8 +1,8 @@
 import styled, { keyframes } from 'styled-components';
 
-import { colorUtils } from '@/utils';
+import { colorUtils } from '@/legacy/utils';
 
-import { MEDIA_QUERIES, COLORS } from '@/tokens';
+import { MEDIA_QUERIES, COLORS } from '@/legacy/tokens';
 
 const cardTableLoading = keyframes`
   25% {

package/src/{components → legacy/components}/basic-section/SectionTable/SectionTable.tsx

@@ -4,8 +4,8 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 
 import { IconName } from '@/types';
-import { Icon } from '@/components/Icon';
-import { BorderSelect } from '@/components/dropdowns';
+import { Icon } from '@/legacy/components/Icon';
+import { BorderSelect } from '@/legacy/components/dropdowns';
 
 import { StyledSectionTable } from './SectionTable.styles';
 

package/src/{components → legacy/components}/buttons/Button/Button.stories.tsx

@@ -4,7 +4,7 @@ import { Button } from './Button';
 
 const meta = {
   component: Button,
-  title: 'buttons/Button',
+  title: 'legacy/buttons/Button',
   argTypes: {
     onClick: { action: 'clicked/pressed' },
     className: { control: { disable: true } },

package/src/{components → legacy/components}/buttons/Button/Button.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { ANIMATION, COLORS, TYPOGRAPHY } from '@/tokens';
+import { ANIMATION, COLORS, TYPOGRAPHY } from '@/legacy/tokens';
 
 export const StyledButton = styled.button`
   border: 0;

package/src/{components → legacy/components}/buttons/Button/Button.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { CircleSpinner } from '@/components/loading-indicators';
+import { CircleSpinner } from '@/legacy/components/loading-indicators';
 import { PermafrostComponent } from '@/types';
 import { StyledButton } from './Button.styles';
 

package/src/legacy/components/buttons/Button/index.ts

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

package/src/{components → legacy/components}/buttons/IconButton/IconButton.stories.tsx

@@ -6,7 +6,7 @@ import { IconButton } from './IconButton';
 
 const meta = {
   component: IconButton,
-  title: 'buttons/IconButton',
+  title: 'legacy/buttons/IconButton',
   args: {
     iconSide: 'start',
     size: 'normal',

package/src/{components → legacy/components}/buttons/IconButton/IconButton.styles.ts

@@ -9,7 +9,7 @@ import {
   variantPrimary,
   disabledOverrides,
 } from '../commonStyles';
-import { COLORS, ANIMATION } from '@/tokens';
+import { COLORS, ANIMATION } from '@/legacy/tokens';
 
 const iconMargin = '0.5em';
 

package/src/{components → legacy/components}/buttons/IconButton/IconButton.tsx

@@ -6,9 +6,9 @@ import { useButton } from '@react-aria/button';
 import { useFocusRing } from '@react-aria/focus';
 import { AriaButtonProps } from '@react-types/button';
 
-import { SPACING } from '@/tokens';
+import { SPACING } from '@/legacy/tokens';
 import { IconName, PermafrostComponent } from '@/types';
-import { Icon, CircleSpinner } from '@/components';
+import { Icon, CircleSpinner } from '@/legacy/components';
 import { ButtonSize, IconButtonVariant } from '../types';
 
 import { StyledIconButton, StyledIconButtonLink } from './IconButton.styles';

package/src/{components → legacy/components}/buttons/commonStyles.ts

@@ -2,7 +2,7 @@
 
 import { css } from 'styled-components';
 
-import { ANIMATION, COLORS, TYPOGRAPHY } from '@/tokens';
+import { ANIMATION, COLORS, TYPOGRAPHY } from '@/legacy/tokens';
 
 export const defaultHeight = '36px';
 export const largeHeight = '50px';

package/src/{components → legacy/components}/dropdowns/BorderSelect/BorderSelect.stories.tsx

@@ -4,7 +4,7 @@ import { BorderSelect } from './BorderSelect';
 
 const meta = {
   component: BorderSelect,
-  title: 'dropdowns/BorderSelect',
+  title: 'legacy/dropdowns/BorderSelect',
   argTypes: {},
   args: {
     onChange: () => {},

package/src/{components → legacy/components}/dropdowns/BorderSelect/BorderSelect.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { COLORS, FONT_SIZE } from '@/tokens';
+import { COLORS, FONT_SIZE } from '@/legacy/tokens';
 
 export const StyledSelect = styled.div`
   &.horizontal {

package/src/{components → legacy/components}/dropdowns/MultiCombobox/MultiCombobox.stories.tsx

@@ -3,7 +3,7 @@
 import React, { useRef } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Icon, IconButton } from '@/components';
+import { Icon, IconButton } from '@/legacy/components';
 import { ComboboxOption } from '../types';
 import { MultiCombobox } from './MultiCombobox';
 import { useCombobox } from '../useCombobox';
@@ -48,7 +48,7 @@ function StoryRender(props: any) {
 
 const meta = {
   component: MultiCombobox,
-  title: 'dropdowns/MultiCombobox',
+  title: 'legacy/dropdowns/MultiCombobox',
   argTypes: {
     options: { control: { disable: true } },
     defaultValue: { control: { disable: true } },

package/src/{components → legacy/components}/dropdowns/MultiCombobox/MultiCombobox.styles.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import ReactSelect from 'react-select';
 
-import { COLORS } from '@/tokens';
+import { COLORS } from '@/legacy/tokens';
 import { basicDefaults } from '../commonStyles';
 
 const spacingCommon = '10px';

package/src/{components → legacy/components}/dropdowns/Select/Select.stories.tsx

@@ -6,7 +6,7 @@ import { Select } from './Select';
 
 const meta = {
   component: Select,
-  title: 'dropdowns/Select',
+  title: 'legacy/dropdowns/Select',
   argTypes: {},
   args: {
     onChange: () => {},

package/src/{components → legacy/components}/dropdowns/Select/Select.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { COLORS, FONT_SIZE } from '@/tokens';
+import { COLORS, FONT_SIZE } from '@/legacy/tokens';
 
 export const StyledSelect = styled.div`
   display: inline-block;

package/src/{components → legacy/components}/dropdowns/Select/Select.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { v4 as uuid } from 'uuid';
 
-import { Icon } from '@/components/Icon';
+import { Icon } from '@/legacy/components/Icon';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSelect } from './Select.styles';