@indico-data/design-system 1.0.1

package/src/components/Icon/storyHelpers.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { COLORS, TYPOGRAPHY } from '@/tokens';
+
+import { Icon, IconName } from './Icon';
+
+interface IconGroupProps {
+  groupObject: any;
+}
+
+export function IconGroup(props: IconGroupProps): React.ReactElement {
+  const { groupObject } = props;
+
+  const swatch = (iconName: string): React.ReactChild => {
+    return (
+      <li key={iconName}>
+        <figure>
+          <Icon name={iconName as IconName} />
+
+          <figcaption>{iconName}</figcaption>
+        </figure>
+      </li>
+    );
+  };
+
+  return (
+    <IconGroupContainer>{Object.keys(groupObject).map((key) => swatch(key))}</IconGroupContainer>
+  );
+}
+
+const svgSize = '5ch';
+
+export const IconContainer = styled.span`
+  color: ${COLORS.defaultFontColor};
+`;
+
+export const IconGroupContainer = styled.ul`
+  color: ${process.env.STORYBOOK_THEME === 'light' ? 'currentColor' : COLORS.defaultFontColor};
+
+  list-style: none;
+  margin-top: 2em;
+  padding-left: 0;
+
+  font-family: ${TYPOGRAPHY.fontFamily.base};
+
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-column-gap: 1em;
+  grid-row-gap: 1em;
+
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    figure {
+      margin-left: 0;
+      margin-right: 0;
+      text-align: center;
+
+      svg {
+        height: ${svgSize};
+        width: ${svgSize};
+        margin-bottom: 1em;
+      }
+    }
+  }
+`;
+
+export const SpecifiedSizeContainer = styled.div`
+  color: ${COLORS.defaultFontColor};
+
+  width: 50vw;
+  font-size: 2em;
+
+  display: grid;
+  grid-template-columns: 1fr 5fr;
+  column-gap: 2em;
+  row-gap: 2em;
+  align-items: center;
+  justify-items: center;
+
+  code {
+    justify-self: start;
+  }
+`;

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

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+import { COLORS } from '@/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/components/ListTable/Header/Header.tsx

@@ -0,0 +1,67 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { numberUtils } from '@indico-data/utils';
+
+import { BorderSelect, Button, 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"
+                size={[16]}
+                style={{ transform: sortBy.descending ? '' : 'rotate(180deg)' }}
+              />
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </StyledHeader>
+  );
+};

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

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

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

@@ -0,0 +1,301 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button, Icon } from '@/components';
+
+import { ListTable } from './ListTable';
+import { mockUserHeaders, mockDocProcHeaders, mockAllUsers, mockDocProcReport } from './mock-data';
+
+const meta = {
+  component: ListTable,
+  title: '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) {
+  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/components/ListTable/ListTable.styles.ts

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+
+import { COLORS } from '@/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};
+  }
+`;