@indico-data/design-system 1.0.47 → 1.0.49

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

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+import { TYPOGRAPHY } from '@/tokens';
+
+export const StyledDrawerLinkList = styled.div`
+  .drawer__list {
+    white-space: nowrap;
+
+    .drawer__list__item {
+      box-sizing: border-box;
+      margin-bottom: 10px;
+      font-weight: ${TYPOGRAPHY.weight.semibold};
+      font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
+      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: ${TYPOGRAPHY.fontSize.subheadSmall};
+        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/components/Navigation/Drawer/DrawerLinkList.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import classNames from 'classnames';
+import { PermafrostComponent } from '@/types';
+import { StyledDrawerLinkList } from './DrawerLinkList.styles';
+import { Icon } from '../../Icon';
+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={[22]} 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/components/Navigation/Drawer/__mocks__/mocks.ts

@@ -0,0 +1,49 @@
+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/components/Navigation/Drawer/__tests__/Drawer.test.tsx

@@ -0,0 +1,175 @@
+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/Navigation/Drawer/__tests__/DrawerLinkList.test.tsx

@@ -0,0 +1,66 @@
+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/components/Navigation/Drawer/index.ts

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

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

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

package/src/components/Navigation/index.ts

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

package/src/components/Wizard/Wizard.stories.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Wizard } from './Wizard';
+import { WizardCard, WizardSection } from './Wizard.styles';
+
+const meta = {
+  component: Wizard,
+  title: 'wizards/Wizard',
+  args: {
+    steps: ['Task Details', 'Labels and Keywords', 'Labelers'],
+    onCancel: () => console.info('cancelling'),
+    onSubmit: () => console.info('submitting'),
+    wizardTitle: 'New Teach Task',
+    confirmCancel: {
+      title: 'Are you sure you want to stop creating this Task?',
+      message: 'Your Task will not be saved, nor available to be labeled.',
+      confirmText: 'Yes, go ahead',
+      rejectText: 'No, go back',
+    },
+    submitButtonLabel: 'Add Teach Task',
+    // Evidently, we need to add this prop or its corresponding logic within the component evaluates to false in storybook.
+    // Was not happening in earlier version, so was not necessary.
+    onNextPress: () => true,
+  },
+} satisfies Meta<typeof Wizard>;
+
+export default meta;
+type Story = StoryObj<typeof Wizard>;
+
+function StoryRender(props: any) {
+  const [currentStep, setCurrentStep] = useState('');
+
+  const currentStepContent = () => {
+    if (currentStep === 'Task Details') {
+      return (
+        <WizardCard>
+          <WizardSection>
+            <h2 className="section-heading">Task Name</h2>
+
+            <div className="section-content">hello yes this is dog</div>
+          </WizardSection>
+
+          <WizardSection>
+            <h2 className="section-heading">Dataset</h2>
+
+            <div className="section-content" />
+          </WizardSection>
+
+          <WizardSection>
+            <h2 className="section-heading">
+              Processors and Branches <span className="supporting-text">(Optional)</span>
+            </h2>
+
+            <div className="section-content" />
+          </WizardSection>
+        </WizardCard>
+      );
+    }
+
+    if (currentStep === 'Labels and Keywords') {
+      return (
+        <WizardCard>
+          <WizardSection>
+            <h2 className="section-heading">Labels</h2>
+
+            <div className="section-content" />
+          </WizardSection>
+
+          <WizardSection>
+            <h2 className="section-heading">Label Predictions</h2>
+
+            <div className="section-content" />
+          </WizardSection>
+
+          <WizardSection>
+            <h2 className="section-heading">
+              Keywords <span className="supporting-text">(Optional)</span>
+            </h2>
+
+            <div className="section-content" />
+          </WizardSection>
+        </WizardCard>
+      );
+    }
+
+    if (currentStep === 'Labelers') {
+      return (
+        <WizardCard>
+          <WizardSection>
+            <h2 className="section-heading">Labelers Required Per Example</h2>
+
+            <div className="section-content" />
+          </WizardSection>
+
+          <WizardSection>
+            <h2 className="section-heading">
+              Team{' '}
+              <span className="supporting-text" style={{ marginLeft: '0.25em' }}>
+                1
+              </span>
+            </h2>
+
+            <div className="section-content" />
+          </WizardSection>
+        </WizardCard>
+      );
+    }
+  };
+
+  return (
+    <Wizard {...props} onStepChange={(step) => setCurrentStep(step)}>
+      {currentStepContent()}
+    </Wizard>
+  );
+}
+
+export const Normal: Story = {
+  args: {
+    startingStep: 'Labels and Keywords',
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const FirstStep: Story = {
+  // args: {},
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const LastStep: Story = {
+  args: {
+    startingStep: 'Labelers',
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const DisabledNextStep: Story = {
+  args: {
+    disableNextStep: true,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const DisabledPreviousStep: Story = {
+  args: {
+    startingStep: 'Labels and Keywords',
+    disablePrevStep: true,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const SubmitProcessing: Story = {
+  args: {
+    submitProcessing: 'Adding Teach Task',
+    startingStep: 'Labelers',
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const LastStepOverride: Story = {
+  args: {
+    startingStep: 'Labelers',
+    isLastStep: false,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};

package/src/components/Wizard/Wizard.styles.ts

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+
+import { COLORS, TYPOGRAPHY } from '@/tokens';
+
+export const StyledWizard = styled.div`
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    margin-bottom: 24px;
+
+    // override for some styling in AppChrome IPA component
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  h1 {
+    margin-bottom: 0;
+  }
+
+  .wizard-buttons {
+    display: flex;
+    align-items: center;
+
+    font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
+
+    button.link-style {
+      font-size: inherit;
+      margin-right: 1em;
+    }
+  }
+`;
+
+const commonPadding = '20px';
+
+// todo: permafrost: move into css fragment at top level
+export const WizardCard = styled.div`
+  width: 100%;
+  padding: 14px ${commonPadding};
+
+  background-color: ${COLORS.clay};
+  border: 1px solid ${COLORS.oxfordBlue};
+  border-radius: 4px;
+  box-shadow: 1px 1px 1px 0 ${COLORS.ebony};
+`;
+
+export const WizardSection = styled.div`
+  .section-heading {
+    margin-bottom: 0;
+    // todo: store value elsewhere
+    font-size: 22px;
+    color: ${COLORS.lightFontColor};
+
+    .supporting-text {
+      font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
+      color: ${COLORS.defaultFontColor};
+    }
+  }
+
+  .section-content {
+    padding: ${commonPadding};
+  }
+
+  :not(:last-of-type) {
+    margin-bottom: ${commonPadding};
+
+    .section-content {
+      border-bottom: 1px solid ${COLORS.ebony};
+    }
+  }
+`;