@indico-data/design-system 2.43.0 → 2.44.0

package/src/legacy/components/ListTable/Header/Header.styles.ts

@@ -1,62 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS } from '@/legacy/tokens';
-
-export const StyledHeader = styled.header`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  min-height: 42px;
-  margin-bottom: 12px;
-
-  .title {
-    font-size: 22px;
-    margin: 0;
-  }
-
-  .count {
-    font-size: 18px;
-    margin: 4px 0 0 10px;
-  }
-
-  .title-container,
-  .controls-container,
-  .sort-by {
-    display: inherit;
-  }
-
-  .sort-by {
-    margin-left: 10px;
-
-    label,
-    .button-sort-direction,
-    .button-sort-direction:focus {
-      color: ${COLORS.lightFontColor};
-    }
-
-    label {
-      font-weight: normal;
-    }
-
-    .button-sort-direction {
-      margin-left: 10px;
-
-      svg {
-        position: relative;
-        bottom: 3px;
-        transition: 0.3s transform ease-in-out;
-      }
-    }
-  }
-
-  .select-container {
-    box-sizing: border-box;
-
-    .selectCaret {
-      color: ${COLORS.defaultFontColor};
-      height: 16px;
-      width: 16px;
-      margin: 0;
-    }
-  }
-`;

package/src/legacy/components/ListTable/Header/Header.tsx

@@ -1,66 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import { numberUtils } from '@/legacy/utils';
-import { BorderSelect, Button } from '@/legacy/components';
-import { Icon } from '@/components';
-
-import { StyledHeader } from './Header.styles';
-
-type Props = {
-  title: string;
-  headerComponent?: React.ReactNode;
-  sortBy?: {
-    value: string;
-    items: { name: string; value: string }[];
-    descending: boolean;
-    updateDescending: () => void;
-    onSort: (value: string) => void;
-  };
-  aggregateCount?: number;
-  selectProps?: { 'data-cy': string };
-};
-
-export const Header = (props: Props) => {
-  const { title, headerComponent, sortBy, aggregateCount } = props;
-  return (
-    <StyledHeader>
-      <div className="title-container">
-        <h2 className="title">{title}</h2>
-        <span className="count">
-          {aggregateCount ? numberUtils.numberWithCommas(aggregateCount) : null}
-        </span>
-      </div>
-      <div className="controls-container">
-        {headerComponent ? <div className="header-component">{headerComponent}</div> : null}
-        {sortBy ? (
-          <div className="sort-by">
-            <BorderSelect
-              label="Sort By"
-              value={sortBy.value}
-              options={sortBy.items}
-              onChange={(e) => {
-                sortBy.onSort(e.target.value);
-              }}
-              horizontal
-              {...props.selectProps}
-            />
-            <Button
-              data-cy="dataset--sort-by-btn"
-              onClick={() => sortBy.updateDescending()}
-              variant="no-style"
-              className="button-sort-direction"
-            >
-              <Icon
-                name="fa-arrow-down"
-                ariaLabel="descending"
-                style={{ transform: sortBy.descending ? '' : 'rotate(180deg)' }}
-              />
-            </Button>
-          </div>
-        ) : null}
-      </div>
-    </StyledHeader>
-  );
-};

package/src/legacy/components/ListTable/Header/index.ts

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

package/src/legacy/components/ListTable/ListTable.stories.tsx

@@ -1,302 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '@/legacy/components';
-
-import { ListTable } from './ListTable';
-import { mockUserHeaders, mockDocProcHeaders, mockAllUsers, mockDocProcReport } from './mock-data';
-import { Icon } from '@/components';
-
-const meta = {
-  component: ListTable,
-  title: 'legacy/ListTable',
-  argTypes: {},
-} satisfies Meta<typeof ListTable>;
-
-export default meta;
-type Story = StoryObj<typeof ListTable>;
-
-//Generate List Headers
-const createdUserHeader = (
-  <div style={{ display: 'grid', gridTemplateColumns: '1fr 3fr 3fr 2fr 250px' }}>
-    {mockUserHeaders.map((h, i) => (
-      <div className="label" key={`${h.name}-${i}`}>
-        {h.name}
-      </div>
-    ))}
-  </div>
-);
-const createdDocProcHeader = (
-  <div style={{ display: 'grid', gridTemplateColumns: '2fr 3fr 2fr 170px' }}>
-    {mockDocProcHeaders.map((h, i) => (
-      <div className="label" key={`${h.name}-${i}`}>
-        {h.name}
-      </div>
-    ))}
-  </div>
-);
-
-//Generate List Items
-const createdListItems = mockAllUsers.users.map((u) => (
-  <div
-    key={`${u.name}-${u.id}`}
-    style={{ display: 'grid', gridTemplateColumns: '1fr 3fr 3fr 2fr 250px', alignItems: 'center' }}
-  >
-    <div>{u.id}</div>
-    <div>{u.name}</div>
-    <div>{u.email}</div>
-    <div>{u.registeredAt}</div>
-    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-      <button style={{ display: 'flex', alignItems: 'center', marginLeft: '10px' }}>
-        <Icon name="key" style={{ marginRight: '5px' }} />
-        Reset Link
-      </button>
-      <button style={{ display: 'flex', alignItems: 'center', marginLeft: '10px' }}>
-        <Icon name="fa-cog" style={{ marginRight: '5px' }} />
-        Settings
-      </button>
-    </div>
-  </div>
-));
-const createdDocProcItems = mockDocProcReport.reports.map((u) => (
-  <div
-    key={`${u.name}-${u.createdOn}`}
-    style={{ display: 'grid', gridTemplateColumns: '2fr 3fr 2fr 170px', alignItems: 'center' }}
-  >
-    <div>{u.createdOn}</div>
-    <div>{u.name}</div>
-    <div>{u.status}</div>
-    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-      <button
-        style={{ display: 'flex', alignItems: 'center', marginLeft: '10px', maxHeight: '35px' }}
-      >
-        <Icon name="fa-file-download" style={{ marginRight: '5px' }} />
-        Secure Download
-      </button>
-    </div>
-  </div>
-));
-
-function StoryRender(props: any) {
-  const [sortValue, setSortValue] = useState<string>(props?.sortBy?.value);
-  const [arrowDesc, setArrowDesc] = useState<boolean>(props?.sortBy?.descending);
-
-  const setArgs: any = {
-    ...props,
-  };
-
-  props.sortBy
-    ? (setArgs.sortBy = {
-        value: sortValue,
-        items: props.sortBy.items,
-        descending: arrowDesc,
-        updateDescending: () => setArrowDesc(!arrowDesc),
-        onSort: (value: string) => setSortValue(value),
-      })
-    : null;
-
-  return <ListTable {...setArgs} />;
-}
-
-export const Base: Story = {
-  args: {
-    title: 'User Accounts',
-    listHeader: createdUserHeader,
-    listItems: createdListItems,
-    pagination: {
-      pageInfo: mockAllUsers.pageInfo,
-      limit: 20,
-      currentPage: 1,
-      getPage: () => console.info('Get Page'),
-      getPreviousPage: () => console.info('Get Previous Page'),
-      getNextPage: () => console.info('Get Next Page'),
-    },
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const WithSortBy: Story = {
-  args: {
-    title: 'Sort By',
-    sortBy: {
-      value: 'REGISTERED_AT',
-      items: mockUserHeaders,
-      descending: true,
-      updateDescending: () => '',
-      onSort: () => '',
-    },
-    listHeader: createdUserHeader,
-    listItems: createdListItems,
-    pagination: {
-      pageInfo: mockAllUsers.pageInfo,
-      limit: 20,
-      currentPage: 1,
-      getPage: () => console.info('Get Page'),
-      getPreviousPage: () => console.info('Get Previous Page'),
-      getNextPage: () => console.info('Get Next Page'),
-    },
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const WithSubTitle: Story = {
-  args: {
-    title: 'Sub-Title',
-    subTitle: (
-      <div style={{ display: 'flex' }}>
-        <p>
-          Create Document Processing Report to see which documents have been processed by Indico for
-          dates selected for a maximum of 60 days. The report also includes information for when the
-          processing occurred, which Workflows those documents were processed by, and how many pages
-          each document has in a downloadable CSV.
-        </p>
-        <Button
-          variant="primary"
-          style={{ marginLeft: '60px', height: '40px' }}
-          onClick={() => console.info('Clicked')}
-        >
-          <Icon name="plus" style={{ marginRight: '8px' }} />
-          Generate Export
-        </Button>
-      </div>
-    ),
-    sortBy: {
-      value: 'REGISTERED_AT',
-      items: mockDocProcHeaders,
-      descending: true,
-      updateDescending: () => '',
-      onSort: () => '',
-    },
-    listHeader: createdDocProcHeader,
-    listItems: createdDocProcItems,
-    pagination: {
-      pageInfo: mockDocProcReport.pageInfo,
-      limit: 5,
-      currentPage: 1,
-      getPage: () => console.info('Get Page'),
-      getPreviousPage: () => console.info('Get Previous Page'),
-      getNextPage: () => console.info('Get Next Page'),
-    },
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const WithAccordion: Story = {
-  args: {
-    title: 'Accordion',
-    accordion: true,
-    sortBy: {
-      value: 'REGISTERED_AT',
-      items: mockUserHeaders,
-      descending: true,
-      updateDescending: () => '',
-      onSort: () => '',
-    },
-    listHeader: createdUserHeader,
-    listItems: createdListItems,
-    pagination: {
-      pageInfo: mockDocProcReport.pageInfo,
-      limit: 20,
-      currentPage: 1,
-      getPage: () => console.info('Get Page'),
-      getPreviousPage: () => console.info('Get Previous Page'),
-      getNextPage: () => console.info('Get Next Page'),
-    },
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const WithHeaderComponent: Story = {
-  args: {
-    title: 'Header Component',
-    headerComponent: (
-      <div style={{ padding: '6px 0' }}>
-        <h2>CUSTOM HEADER HTML</h2>
-      </div>
-    ),
-    listHeader: createdDocProcHeader,
-    listItems: createdDocProcItems,
-    pagination: {
-      pageInfo: mockDocProcReport.pageInfo,
-      limit: 5,
-      currentPage: 1,
-      getPage: () => console.info('Get Page'),
-      getPreviousPage: () => console.info('Get Previous Page'),
-      getNextPage: () => console.info('Get Next Page'),
-    },
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const WithEverything: Story = {
-  args: {
-    title: 'All The Things',
-    accordion: true,
-    subTitle: (
-      <div style={{ display: 'flex' }}>
-        <p>
-          Create Document Processing Report to see which documents have been processed by Indico for
-          dates selected for a maximum of 60 days. The report also includes information for when the
-          processing occurred, which Workflows those documents were processed by, and how many pages
-          each document has in a downloadable CSV.
-        </p>
-        <Button
-          variant="primary"
-          style={{ marginLeft: '60px', maxHeight: '40px' }}
-          onClick={() => console.info('Clicked')}
-        >
-          <Icon name="plus" style={{ marginRight: '8px' }} />
-          Generate Export
-        </Button>
-      </div>
-    ),
-    sortBy: {
-      value: 'REGISTERED_AT',
-      items: mockDocProcHeaders,
-      descending: true,
-      updateDescending: () => '',
-      onSort: () => '',
-    },
-    listHeader: createdDocProcHeader,
-    listItems: createdDocProcItems,
-    pagination: {
-      pageInfo: mockDocProcReport.pageInfo,
-      limit: 5,
-      currentPage: 1,
-      getPage: () => console.info('Get Page'),
-      getPreviousPage: () => console.info('Get Previous Page'),
-      getNextPage: () => console.info('Get Next Page'),
-    },
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    title: 'User Accounts',
-    listHeader: createdUserHeader,
-    listItems: createdListItems,
-    loading: true,
-  },
-};
-
-export const Error: Story = {
-  args: {
-    title: 'User Accounts',
-    listHeader: createdUserHeader,
-    listItems: createdListItems,
-    error: true,
-  },
-};

package/src/legacy/components/ListTable/ListTable.styles.ts

@@ -1,76 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS } from '@/legacy/tokens';
-
-export const StyledListTable = styled.div`
-  .list {
-    .list-header-container,
-    .list-container .list-item {
-      border-bottom: solid ${COLORS.blueBayoux} 1px;
-      padding: 0 20px 10px 20px;
-      margin-bottom: 10px;
-    }
-
-    .list-header-container {
-      border-bottom-color: ${COLORS.baliHai};
-    }
-
-    .list-container .list-item {
-      font-size: 14px;
-
-      & > * div {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-  .sub-title {
-    margin-bottom: 20px;
-  }
-
-  summary,
-  summary h2 {
-    width: 100%;
-  }
-
-  summary .header-container {
-    svg {
-      margin-top: 2px;
-    }
-
-    .header-component div {
-      padding: 0;
-    }
-  }
-
-  summary .title-container {
-    margin-bottom: 2px;
-
-    .title {
-      align-items: flex-start;
-
-      h2 {
-        margin-left: 0;
-      }
-    }
-
-    .count {
-      color: ${COLORS.defaultFontColor};
-    }
-  }
-
-  summary .sort-by .button-sort-direction svg {
-    bottom: 5px;
-  }
-
-  .content {
-    margin-top: 0 !important;
-  }
-
-  .error-shrug {
-    margin: 0 20px;
-    background-color: ${COLORS.oxfordBlue};
-  }
-`;

package/src/legacy/components/ListTable/ListTable.tsx

@@ -1,140 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-import { v4 as uuid } from 'uuid';
-
-import { Pagination } from '@/legacy/components/Pagination';
-import { Accordion } from '@/legacy/components/Accordion';
-import { LoadingList } from '@/legacy/components/loading-indicators';
-import { Shrug } from '@/legacy/components/user-feedback';
-import { SectionBody } from '@/legacy/components/basic-section';
-
-import { PermafrostComponent } from '@/types';
-
-import { Header } from './Header';
-import { StyledListTable } from './ListTable.styles';
-
-type Props = PermafrostComponent & {
-  accordion?: boolean;
-  accordionDefaultOpen?: boolean;
-  emptyListMessage?: string;
-  error?: any;
-  errorMessage?: any;
-  headerComponent?: React.ReactNode;
-  listHeader: React.ReactNode;
-  listItems: React.ReactNode[];
-  loading?: any;
-  pagination?: {
-    currentPage: number;
-    limit: number;
-    pageInfo: {
-      startCursor: number;
-      endCursor: number;
-      hasNextPage: boolean;
-      aggregateCount: number;
-    };
-    getNextPage: (before: number) => void;
-    getPage: (after: number, pageOffset: number) => void;
-    getPreviousPage: (after: number) => void;
-  };
-  sortBy?: {
-    descending: boolean;
-    items: { name: string; value: string }[];
-    value: string;
-    onSort: (value: string) => void;
-    updateDescending: () => void;
-  };
-  subTitle?: string | React.ReactNode;
-  title: string;
-  totalCount?: number;
-};
-
-export const ListTable = (props: Props) => {
-  const header = (
-    <Header
-      selectProps={{ 'data-cy': 'dataset--sort-by-select' }}
-      title={props.title}
-      headerComponent={props.headerComponent}
-      sortBy={props.sortBy}
-      aggregateCount={props?.pagination?.pageInfo?.aggregateCount || props.totalCount}
-    />
-  );
-
-  const RenderList = () => {
-    if (props.loading) {
-      return <LoadingList />;
-    }
-    if (props.error) {
-      return (
-        <SectionBody className="error-shrug">
-          <Shrug message={props.errorMessage || 'Sorry, there was an error retrieving this data'} />
-        </SectionBody>
-      );
-    }
-
-    return (
-      <>
-        {props.listItems.length === 0 ? (
-          <SectionBody className="error-shrug">
-            <Shrug message={props.emptyListMessage || 'No results found'} />
-          </SectionBody>
-        ) : (
-          <ul className="list-container">
-            {props.listItems.map((li) => {
-              const key = uuid();
-              return (
-                <li className="list-item" key={key}>
-                  {li}
-                </li>
-              );
-            })}
-          </ul>
-        )}
-        {props.pagination ? (
-          <Pagination
-            limit={props.pagination.limit}
-            pageInfo={props.pagination.pageInfo}
-            currentPage={props.pagination.currentPage}
-            getPage={props.pagination.getPage}
-            getPreviousPage={props.pagination.getPreviousPage}
-            getNextPage={props.pagination.getNextPage}
-            quantity={props.listItems.length}
-          />
-        ) : null}
-      </>
-    );
-  };
-
-  const list = (
-    <StyledListTable>
-      {props.subTitle ? (
-        <div className="sub-title">
-          {typeof props.subTitle === 'string' ? (
-            <p style={{ maxWidth: '75%' }}>{props.subTitle}</p>
-          ) : (
-            props.subTitle
-          )}
-        </div>
-      ) : null}
-      <div className="list">
-        {!props.error ? <div className="list-header-container">{props.listHeader}</div> : null}
-        <RenderList />
-      </div>
-    </StyledListTable>
-  );
-
-  return (
-    <StyledListTable className={props.className} data-cy={props['data-cy']} id={props.id}>
-      {props.accordion ? (
-        <Accordion header={header} content={list} open={props.accordionDefaultOpen} />
-      ) : (
-        <>
-          {header}
-          {list}
-        </>
-      )}
-    </StyledListTable>
-  );
-};
-
-export default ListTable;

package/src/legacy/components/ListTable/index.ts

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

package/src/legacy/components/ListTable/mock-data/index.ts

@@ -1 +0,0 @@
-export { mockUserHeaders, mockDocProcHeaders, mockAllUsers, mockDocProcReport } from './mock-data';