@indico-data/design-system 1.0.57 → 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;
@@ -10,12 +10,13 @@ export const StyledWizardWithSidebar = styled.div<{
   ['data-cy']?: string;
   id?: string;
 }>`
-  display: inline-flex;
+  height: 750px;
+  display: flex;
+  /* display: flex;
   /* min-height: 455px; */
   background-color: ${(props) => (props.backgroundcolor ? props.backgroundcolor : 'currentColor')};
   color: ${(props) => (props.color ? props.color : 'inherit')};
   border-radius: 4px;
-
   h2 {
     font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
     margin-bottom: ${SPACING.md};
@@ -63,18 +64,32 @@ export const StyledWizardWithSidebar = styled.div<{
     }
   }
 
+  .wizard-content__wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    flex-direction: column;
+    height: 100%;
+  }
   .wizard-content {
-    /* min-width: 660px; */
+    width: 100%;
     padding: 30px;
 
     .wizard-content__header {
-      /* min-height: 70px; */
+      flex: 0 0 100%;
     }
     .wizard-content__body {
-      /* min-height: 520px; */
+      flex: 0 0 100%;
     }
   }
 
+  .wizard-actions {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+  }
+
   nav {
     display: flex;
     align-items: center;
@@ -84,40 +99,9 @@ export const StyledWizardWithSidebar = styled.div<{
     padding-right: 0 !important;
     margin-top: ${SPACING.md};
   }
-
   .wizard-buttons {
     display: flex;
     align-items: center;
     font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-
-    button {
-      ${(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;
-      ${(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';
@@ -200,51 +201,66 @@ export function WizardWithSidebar(props: Props) {
           );
         })}
       </div>
-
       <div className="wizard-content">
-        <div className="wizard-content__header">
-          <h2>{currentStep}</h2>
-        </div>
-        <div className="wizard-content__body">{children}</div>
-
-        <nav>
-          <div className="wizard-buttons">
-            <Button onClick={() => setOpenCancelConfirm(true)} variant="link-style">
-              Cancel
-            </Button>
+        <div className="wizard-content__wrapper">
+          <div className="wizard-content__items">
+            <div className="wizard-content__header">
+              <h2>{currentStep}</h2>
+            </div>
+            <div className="wizard-content__body">{children}</div>
+          </div>
+          <nav className="wizard-actions">
+            <div className="wizard-buttons">
+              <Button
+                ariaLabel="cancel"
+                variant="text"
+                color="secondary"
+                onClick={() => setOpenCancelConfirm(true)}
+              >
+                Cancel
+              </Button>
 
-            {steps.indexOf(currentStep) !== 0 && (
-              <IconButton
-                variant="outline"
-                iconName="fa-arrow-left"
-                label="Previous Step"
-                onPress={prevStep}
-                isDisabled={disablePrevStep}
-              />
-            )}
+              {steps.indexOf(currentStep) !== 0 && (
+                <Button
+                  variant="outline"
+                  color="secondary"
+                  iconName="fa-arrow-left"
+                  ariaLabel="previous step"
+                  onClick={prevStep}
+                  isDisabled={disablePrevStep}
+                  className="mr-1"
+                >
+                  Previous Step
+                </Button>
+              )}
 
-            {onLastStep ? (
-              <IconButton
-                variant="primary"
-                iconName="check"
-                busy={isBusy}
-                label={isBusy ? submitProcessing : submitButtonLabel}
-                onPress={handleNextPress}
-                isDisabled={disableSubmit}
-              />
-            ) : (
-              <IconButton
-                variant="primary"
-                iconSide="end"
-                iconName="fa-arrow-right"
-                label="Next Step"
-                onPress={handleNextPress}
-                isDisabled={disableNextStep}
-                {...nextButtonProps}
-              />
-            )}
-          </div>
-        </nav>
+              {onLastStep ? (
+                <Button
+                  ariaLabel="submit"
+                  iconName="check"
+                  color="secondary"
+                  isLoading={isBusy}
+                  onClick={handleNextPress}
+                  isDisabled={disableSubmit}
+                >
+                  {isBusy ? submitProcessing : submitButtonLabel}
+                </Button>
+              ) : (
+                <Button
+                  ariaLabel="next step"
+                  iconPosition="right"
+                  color="secondary"
+                  iconName="fa-arrow-right"
+                  onClick={handleNextPress}
+                  isDisabled={disableNextStep}
+                  {...nextButtonProps}
+                >
+                  Next Step
+                </Button>
+              )}
+            </div>
+          </nav>
+        </div>
       </div>
 
       <ConfirmModal

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