@indico-data/design-system 2.43.1 → 2.44.0

package/src/legacy/components/Pagination/Pagination.tsx

@@ -1,118 +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 { PermafrostComponent } from '@/types';
-
-import { StyledPagination } from './Pagination.styles';
-
-type Props = PermafrostComponent & {
-  currentPage: number;
-  limit: number;
-  pageInfo: {
-    aggregateCount: number;
-    endCursor: number;
-    hasNextPage: boolean;
-    startCursor: number;
-  };
-  quantity: number;
-  skip?: number;
-  getPage(startCursor: number, endCursor: number): void;
-  getNextPage(cursor: number): void;
-  getPreviousPage(cursor: number): void;
-};
-
-export function Pagination(props: Props) {
-  //   renderPreviousPages = (currentPage, lastPage) => {
-  //     if (currentPage === lastPage - 2) {
-  //       return null
-  //     }
-  //     // this.props.getPage(endCursor, 1)
-  //     if (currentPage === lastPage - 1) {
-  //       return <>{lastPage - 2 >= 1 && <button onClick={() => this.props.getBeforePage(startCursor, )}>{lastPage - 2}</button>}</>
-  //     }
-
-  //     if (currentPage === lastPage) {
-  //       return (
-  //         <>
-  //           {lastPage - 2 >= 1 && <button>{lastPage - 2}</button>}
-  //           {lastPage - 1 >= 1 && <button>{lastPage - 1}</button>}
-  //         </>
-  //       )
-  //     }
-  //   }
-
-  const { aggregateCount, hasNextPage, endCursor, startCursor } = props.pageInfo;
-  const { currentPage, limit, quantity } = props;
-  const lastPage = Math.ceil(aggregateCount / limit);
-  const currentItemNumber = (currentPage - 1) * limit + 1;
-
-  return (
-    <StyledPagination className={props.className} data-cy={props['data-cy']} id={props.id}>
-      <div className="Pagination--stats">
-        <p>
-          Showing{' '}
-          {aggregateCount === 0 ? (
-            <></>
-          ) : (
-            <>
-              {currentItemNumber} - {currentItemNumber + quantity - 1} of{' '}
-            </>
-          )}
-          {numberUtils.numberWithCommas(aggregateCount)} entries
-        </p>
-      </div>
-      {aggregateCount > limit && (
-        <div className="Pagination--button-group" data-cy="Pagination--button-group">
-          <p data-cy="pagination--label">Page:&nbsp;</p>
-          {currentPage > 1 && (
-            <button onClick={() => props.getPreviousPage(startCursor)}>Prev</button>
-          )}
-          {/* {currentPage >= lastPage - 2 && this.renderPreviousPages(currentPage, lastPage)} */}
-          <p data-cy="pagination--current-page">{currentPage}</p>
-          {lastPage > currentPage + 1 && (
-            <button
-              onClick={() => props.getPage(endCursor, 1)}
-              data-cy="pagination--second-page-number"
-            >
-              {currentPage + 1}
-            </button>
-          )}
-          {lastPage > currentPage + 2 && (
-            <button
-              onClick={() => props.getPage(endCursor, 2)}
-              data-cy="pagination--third-page-number"
-            >
-              {currentPage + 2}
-            </button>
-          )}
-          {lastPage > currentPage + 3 && (
-            <button onClick={() => props.getPage(endCursor, 3)}>{currentPage + 3}</button>
-          )}
-          {lastPage - (currentPage + 2) === 3 && (
-            <button onClick={() => props.getPage(endCursor, 4)}>{currentPage + 4}</button>
-          )}
-          {lastPage - (currentPage + 2) > 2 && lastPage - (currentPage + 2) !== 3 && <p>...</p>}
-          {lastPage !== currentPage && (
-            <button
-              onClick={() => props.getPage(endCursor, lastPage - currentPage)}
-              data-cy="pagination--last-page"
-            >
-              {lastPage}
-            </button>
-          )}
-          {hasNextPage && (
-            <button
-              onClick={() => props.getNextPage(endCursor)}
-              data-cy="pagination--next-page-number"
-            >
-              Next
-            </button>
-          )}
-        </div>
-      )}
-    </StyledPagination>
-  );
-}

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

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

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

@@ -1,56 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Toggle } from './Toggle';
-
-const meta = {
-  component: Toggle,
-  title: 'legacy/Toggle',
-  argTypes: {},
-  args: {},
-} satisfies Meta<typeof Toggle>;
-
-export default meta;
-type Story = StoryObj<typeof Toggle>;
-
-function StoryRender(props: any) {
-  const [isPressed, setIsPressed] = useState(false);
-
-  return (
-    <Toggle
-      {...props}
-      value={isPressed}
-      onChange={() => {
-        console.log(isPressed);
-        setIsPressed(!isPressed);
-      }}
-      disabled={props.disabled}
-    />
-  );
-}
-
-export const Normal: Story = {
-  args: {},
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Icons: Story = {
-  args: {
-    checkedIconName: 'fa-check',
-    notCheckedIconName: 'x-close',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};

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

@@ -1,86 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS } from '@/legacy/tokens';
-
-export const StyledToggle = styled.label`
-  position: relative;
-  display: inline-block;
-  width: 28px;
-  height: 18px;
-  border: 2px solid ${COLORS.defaultFontColor};
-  border-radius: 34px;
-  margin-bottom: 0;
-  cursor: pointer;
-
-  & input {
-    display: none;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .slider {
-    position: absolute;
-    top: 0;
-    left: -1px;
-    right: 0;
-    bottom: 0;
-    transition: 0.4s;
-    border-radius: 34px;
-  }
-
-  .slider:before {
-    position: absolute;
-    content: '';
-    height: 17px;
-    width: 17px;
-    left: -1px;
-    bottom: -1px;
-    background-color: ${COLORS.clay};
-    transition: 0.4s;
-    border: 2px solid ${COLORS.defaultFontColor};
-    border-radius: 50%;
-  }
-
-  input:checked + .slider {
-    background-color: ${COLORS.defaultFontColor};
-    width: 100%;
-  }
-
-  input:checked + .slider:before {
-    transform: translateX(12px);
-  }
-
-  p {
-    position: relative;
-    left: 35px;
-    bottom: 2px;
-  }
-
-  .checked-icon,
-  .not-checked-icon {
-    position: absolute;
-    pointer-events: none;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .checked-icon {
-    color: #fff;
-    display: none;
-    left: 3px;
-  }
-
-  .not-checked-icon {
-    right: 3px;
-  }
-
-  input:checked ~ .not-checked-icon {
-    display: none;
-  }
-  input:checked ~ .checked-icon {
-    display: block;
-  }
-`;

package/src/legacy/components/Toggle/Toggle.tsx

@@ -1,69 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-import classNames from 'classnames';
-
-import { Icon } from '@/components';
-import { PermafrostComponent, IconName, IconSizes } from '@/types';
-import { StyledToggle } from './Toggle.styles';
-
-type Props = {
-  disabled: boolean;
-  onChange: any;
-  value: boolean;
-  ['aria-label']?: string;
-  iconSize?: IconSizes;
-  checkedIconName?: IconName;
-  notCheckedIconName?: IconName;
-} & PermafrostComponent;
-
-export const Toggle = (props: Props) => {
-  const {
-    disabled,
-    onChange,
-    value,
-    className,
-    id,
-    checkedIconName,
-    notCheckedIconName,
-    iconSize,
-  } = props;
-
-  const defaultIconStyle = { width: '5px', height: '5px' };
-
-  return (
-    <StyledToggle
-      className={classNames(className, {
-        disabled,
-      })}
-      data-cy={props['data-cy']}
-      id={id}
-    >
-      <input
-        aria-label={props['aria-label']}
-        type="checkbox"
-        disabled={disabled}
-        checked={value}
-        onChange={onChange}
-      />
-      <span className="slider round" />
-
-      {checkedIconName && (
-        <Icon
-          size={iconSize}
-          name={checkedIconName}
-          className="checked-icon"
-          style={iconSize ? undefined : defaultIconStyle}
-        />
-      )}
-      {notCheckedIconName && (
-        <Icon
-          size={iconSize}
-          name={notCheckedIconName}
-          className="not-checked-icon"
-          style={iconSize ? undefined : defaultIconStyle}
-        />
-      )}
-    </StyledToggle>
-  );
-};

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

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

package/src/legacy/components/basic-section/Section/Section.stories.tsx

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Section } from './Section';
-
-const meta = {
-  component: Section,
-  title: 'legacy/Basic Section/Section',
-  argTypes: {},
-} satisfies Meta<typeof Section>;
-
-export default meta;
-type Story = StoryObj<typeof Section>;
-
-export const Normal: Story = {};

package/src/legacy/components/basic-section/Section/Section.styles.ts

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledSection = styled.article`
-  position: relative;
-  float: left;
-  margin-bottom: 20px;
-  width: 100%;
-`;

package/src/legacy/components/basic-section/Section/Section.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 classNames from 'classnames';
-
-import { PermafrostComponent } from '@/types';
-
-import { StyledSection } from './Section.styles';
-
-type Props = PermafrostComponent & {
-  style?: object;
-  children: React.ReactNode;
-};
-
-export const Section = (props: Props) => {
-  const { className, style = {}, children, id, ...restOfProps } = props;
-
-  return (
-    <StyledSection
-      className={classNames('Section', className)}
-      data-cy={props['data-cy']}
-      id={id}
-      style={style}
-      {...restOfProps}
-    >
-      {children}
-    </StyledSection>
-  );
-};

package/src/legacy/components/basic-section/Section/index.ts

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

package/src/legacy/components/basic-section/SectionBlock/SectionBlock.styles.ts

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS } from '@/legacy/tokens';
-
-export const StyledSectionBlock = styled.div`
-  h3 {
-    margin: 24px 0 31px;
-  }
-
-  hr {
-    width: 100%;
-    border-bottom: 1px solid ${COLORS.ebony};
-    margin: 27px 0 1px;
-  }
-`;

package/src/legacy/components/basic-section/SectionBlock/SectionBlock.tsx

@@ -1,37 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { PermafrostComponent } from '@/types';
-
-import { StyledSectionBlock } from './SectionBlock.styles';
-
-type Props = PermafrostComponent & {
-  title?: string;
-  style?: object;
-  children: React.ReactNode;
-};
-
-export const SectionBlock = (props: Props) => {
-  const { title, className, children, id, style = {}, ...restOfProps } = props;
-
-  return (
-    <StyledSectionBlock
-      className={classNames('SectionBlock', className)}
-      data-cy={props['data-cy']}
-      id={id}
-      style={style}
-      {...restOfProps}
-    >
-      {title ? (
-        <header>
-          <h3>{title}</h3>
-        </header>
-      ) : null}
-      {children}
-      <hr className="section-bottom-border" />
-    </StyledSectionBlock>
-  );
-};

package/src/legacy/components/basic-section/SectionBlock/index.ts

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

package/src/legacy/components/basic-section/SectionBody/SectionBody.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { SectionBody } from './SectionBody';
-
-const meta = {
-  component: SectionBody,
-  title: 'legacy/Basic Section/SectionBody',
-  argTypes: {},
-} satisfies Meta<typeof SectionBody>;
-
-export default meta;
-type Story = StoryObj<typeof SectionBody>;
-
-export const Normal: Story = {
-  args: {},
-};

package/src/legacy/components/basic-section/SectionBody/SectionBody.styles.ts

@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS } from '@/legacy/tokens';
-
-const sectionSidePadding = '19px';
-
-export const StyledSectionBody = styled.div`
-  background: ${COLORS.clay};
-  border-radius: 4px;
-  border: 1px solid #333d4c;
-  padding: 0 ${sectionSidePadding};
-
-  .SectionBody:last-of-type {
-    .section-bottom-border {
-      border-bottom: none;
-    }
-  }
-`;

package/src/legacy/components/basic-section/SectionBody/SectionBody.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 classNames from 'classnames';
-
-import { PermafrostComponent } from '@/types';
-
-import { StyledSectionBody } from './SectionBody.styles';
-
-export type SectionBodyProps = PermafrostComponent & {
-  style?: object;
-  children: React.ReactNode;
-};
-
-export const SectionBody = (props: SectionBodyProps) => {
-  const { className, style = {}, children, id, ...restOfProps } = props;
-
-  return (
-    <StyledSectionBody
-      className={classNames('SectionBody', className)}
-      data-cy={props['data-cy']}
-      id={id}
-      style={style}
-      {...restOfProps}
-    >
-      {children}
-    </StyledSectionBody>
-  );
-};

package/src/legacy/components/basic-section/SectionBody/index.ts

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

package/src/legacy/components/basic-section/SectionHeader/SectionHeader.stories.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { SectionHeader } from './SectionHeader';
-
-const meta = {
-  component: SectionHeader,
-  title: 'legacy/Basic Section/SectionHeader',
-  argTypes: {},
-} satisfies Meta<typeof SectionHeader>;
-
-export default meta;
-type Story = StoryObj<typeof SectionHeader>;
-
-export const Normal: Story = {
-  args: { children: <div>Section Header</div> },
-};

package/src/legacy/components/basic-section/SectionHeader/SectionHeader.styles.ts

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledSectionHeader = styled.header`
-  padding: 23px 0 18px;
-`;

package/src/legacy/components/basic-section/SectionHeader/SectionHeader.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 classNames from 'classnames';
-
-import { PermafrostComponent } from '@/types';
-
-import { StyledSectionHeader } from './SectionHeader.styles';
-
-type Props = PermafrostComponent & {
-  style?: object;
-  children?: React.ReactNode;
-};
-
-export const SectionHeader = (props: Props) => {
-  const { className = '', style = {}, children, id, ...restOfProps } = props;
-
-  return (
-    <StyledSectionHeader
-      className={classNames('SectionHeader', className)}
-      data-cy={props['data-cy']}
-      id={id}
-      style={style}
-      {...restOfProps}
-    >
-      {children}
-    </StyledSectionHeader>
-  );
-};

package/src/legacy/components/basic-section/SectionHeader/index.ts

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