@indico-data/design-system 2.43.1 → 2.44.0

package/lib/legacy/utils/string.d.ts

@@ -1,12 +0,0 @@
-export declare const camelCaseToUpperUnderscore: (string: string) => string;
-export declare const camelCaseToSpaceUpper: (string: string) => string;
-export declare const underscoreToCapitalize: (string: string) => string;
-export declare const snakeCaseToCamelCase: (string: string) => string;
-export declare function capitalize(string: string): string;
-export declare function capitalizeFirstOnly(string: string): string;
-/**
- * Generates a random string of English alphabet characters. Defaults to a length of 8.
- */
-export declare function createRandomString(length?: number): string;
-export declare const maxLengthWithEllipse: (string: string, maxLength: number) => string;
-export declare const maxLengthWithMiddleEllipsis: (string: string, maxLength: number) => string;

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '@/legacy/components';
-import { Accordion } from './Accordion';
-
-const content = (
-  <div>
-    <h2 style={{ marginBottom: '10px' }}>Lorem</h2>
-    <p style={{ marginBottom: '10px' }}>
-      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae, repudiandae ipsa
-      officiis dolores dolore iusto saepe harum maxime placeat ut culpa excepturi praesentium optio
-      minus velit odio voluptate veniam nulla.
-    </p>
-    <p style={{ marginBottom: '20px' }}>
-      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae, repudiandae ipsa
-      officiis dolores dolore iusto saepe harum maxime placeat ut culpa excepturi praesentium optio
-      minus velit odio voluptate veniam nulla. Lorem ipsum dolor sit, amet consectetur adipisicing
-      elit. Recusandae, repudiandae ipsa officiis dolores dolore iusto saepe harum maxime placeat ut
-      culpa excepturi praesentium optio minus velit odio voluptate veniam nulla. Lorem ipsum dolor
-      sit, amet consectetur adipisicing elit. Recusandae, repudiandae ipsa officiis dolores dolore
-      iusto saepe harum maxime placeat ut culpa excepturi praesentium optio minus velit odio
-      voluptate veniam nulla.
-    </p>
-    <Button onClick={() => {}}>Button</Button>
-  </div>
-);
-
-const meta = {
-  component: Accordion,
-  title: 'legacy/Accordion',
-  argTypes: {},
-  decorators: [
-    (Story) => (
-      <div style={{ display: 'flex' }}>
-        <Story content={content} />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-type Story = StoryObj<typeof Accordion>;
-
-export const Normal: Story = {};
-
-export const WithHeader: Story = { args: { header: 'Accordion Toggle' } };

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

@@ -1,35 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledAccordion = styled.details`
-  summary {
-    display: inherit;
-    padding: 0 12px;
-    cursor: pointer;
-  }
-
-  .header-container,
-  h2 {
-    display: flex;
-  }
-
-  .toggle-icon {
-    height: 24px;
-    margin: 6px 0;
-    border-radius: 50%;
-    transition: 0.3s transform ease-in-out;
-  }
-
-  h2 {
-    align-items: center;
-    margin: 0 0 0 8px;
-    font-size: 22px;
-  }
-
-  .content {
-    margin: 10px 0 10px 20px;
-  }
-
-  &[open] > summary .toggle-icon {
-    transform: rotate(180deg);
-  }
-`;

package/src/legacy/components/Accordion/Accordion.tsx

@@ -1,30 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import { Icon } from '@/components';
-import { PermafrostComponent } from '@/types';
-
-import { StyledAccordion } from './Accordion.styles';
-
-type Props = PermafrostComponent & {
-  content: React.ReactNode;
-  header?: React.ReactNode | string;
-  open?: boolean;
-};
-
-export const Accordion = (props: Props) => {
-  const { className, content, header, id, open } = props;
-
-  return (
-    <StyledAccordion className={className} id={id} open={open} data-cy={props['data-cy']}>
-      <summary>
-        <div className="header-container">
-          <Icon className="toggle-icon" name="chevron-up" />
-          {header ? <h2>{header}</h2> : null}
-        </div>
-      </summary>
-      <div className="content">{content}</div>
-    </StyledAccordion>
-  );
-};

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

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

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};
-  }
-`;