@indico-data/design-system 2.43.0 → 2.44.0

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

@@ -1,233 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React, { useState } from 'react';
-import classNames from 'classnames';
-
-import { IconName } from '@/types';
-import { Icon } from '@/components';
-import { BorderSelect } from '@/legacy/components/dropdowns';
-
-import { StyledSectionTable } from './SectionTable.styles';
-
-const createTitle = (item: any) => {
-  return typeof item === 'string' || typeof item === 'number' ? item : null;
-};
-
-export const SectionTable = (props: any) => {
-  const [openRowOptions, changeOpenRowOptions] = useState([]);
-
-  const handleRowClick = (link: any) => {
-    if (!link) {
-      return null;
-    }
-    return (e: any) => {
-      e.stopPropagation();
-      props.history.push(link);
-    };
-  };
-
-  const handleRowOptionToggleClick = (id: any) => {
-    if (openRowOptions.indexOf(id as never) === -1) {
-      changeOpenRowOptions([].concat(openRowOptions, id));
-    } else {
-      changeOpenRowOptions(openRowOptions.filter((option) => option !== id));
-    }
-    if (props.openRowOptionHandler) {
-      props.openRowOptionHandler(id);
-    }
-  };
-
-  const headers = Object.keys(props.tableObjects[0].content);
-  return (
-    <StyledSectionTable
-      className={classNames('SectionTable', props.className, { loading: props.loading })}
-      data-cy={props['data-cy']}
-      id={props.id}
-    >
-      {props.sortColumnHandler && props.sortedColumn && (
-        <div className="mobile-sort">
-          <BorderSelect
-            onChange={(e) => props.sortColumnHandler(e.target.value)}
-            value={props.sortedColumn}
-            options={([] as { name: string; value: string }[]).concat(
-              { name: 'Choose Sorting Option', value: '' },
-              headers.map((item) => {
-                return { name: item, value: item };
-              }),
-            )}
-          />
-        </div>
-      )}
-      <table {...props.tableProps}>
-        <thead>
-          <tr>
-            {props.tableObjects[0].rowAccordionContent ? <th className="action-column" /> : null}
-            {headers.map((header, i) => {
-              return (
-                <th
-                  className={classNames({
-                    'not-sortable':
-                      props.sortableHeaders && props.sortableHeaders.indexOf(header) === -1,
-                  })}
-                  onClick={() => {
-                    if (props.sortColumnHandler) {
-                      if (props.sortableHeaders) {
-                        if (props.sortableHeaders.indexOf(header) !== -1) {
-                          props.sortColumnHandler(header);
-                        }
-                      } else {
-                        props.sortColumnHandler(header);
-                      }
-                    }
-                  }}
-                  key={i}
-                >
-                  {props.headersContent ? props.headersContent[header] : header}{' '}
-                  {props.sortedColumn === header && (
-                    <Icon name={`fa-caret-${props.sortDirection}` as IconName} />
-                  )}
-                </th>
-              );
-            })}
-          </tr>
-        </thead>
-        <tbody className={classNames({ 'SectionTable--tbody-loading': props.loading })}>
-          {props.loading
-            ? Array.from({ length: 5 }, (x, i) => (
-                <tr key={i}>
-                  {props.tableObjects[0].rowAccordionContent ? (
-                    <td colSpan={headers.length + 1} />
-                  ) : (
-                    <td colSpan={headers.length} />
-                  )}
-                </tr>
-              ))
-            : props.tableObjects.map((obj: any, i: any) => {
-                let rowStyle = obj.rowStyleCondition;
-
-                if (rowStyle) {
-                  rowStyle = { [rowStyle.className]: rowStyle.condition };
-                }
-
-                if (obj.rowAccordionContent) {
-                  return (
-                    <tr key={i} className={classNames(rowStyle)} {...props.rowProps}>
-                      <td
-                        colSpan={headers.length + 1}
-                        style={{ padding: '0' }}
-                        className="outer-hover"
-                      >
-                        <table>
-                          <thead>
-                            <tr>
-                              <th
-                                className="action-column"
-                                style={{
-                                  padding: '0',
-                                  height: '1px',
-                                  border: 'none',
-                                }}
-                              />
-                              {headers.map((e, i) => {
-                                return (
-                                  <th
-                                    key={i}
-                                    style={{
-                                      padding: '0',
-                                      height: '1px',
-                                      border: 'none',
-                                    }}
-                                  />
-                                );
-                              })}
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr onClick={() => handleRowOptionToggleClick(obj.id)}>
-                              <td style={{ borderBottom: 'none' }} className="action-column">
-                                <Icon
-                                  name="chevron-down"
-                                  style={{
-                                    transform:
-                                      openRowOptions.indexOf(obj.id as never) !== -1
-                                        ? 'rotate(180deg)'
-                                        : '',
-                                  }}
-                                />
-                              </td>
-                              {Object.keys(obj.content).map((key, i) => {
-                                return (
-                                  <td
-                                    key={i}
-                                    style={{
-                                      borderBottom: 'none',
-                                    }}
-                                    data-heading={headers[i]}
-                                    title={createTitle(obj.content[key])}
-                                    {...props?.headingProps?.[headers?.[i]]}
-                                  >
-                                    {obj.content[key]}
-                                  </td>
-                                );
-                              })}
-                            </tr>
-                            <tr
-                              className={classNames('row-option', {
-                                open: openRowOptions.indexOf(obj.id as never) !== -1,
-                              })}
-                            >
-                              <td className="inner-table-cell" colSpan={headers.length + 1}>
-                                {obj.rowAccordionContent}
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </td>
-                    </tr>
-                  );
-                } else if (obj.lineItemLink) {
-                  return (
-                    <tr
-                      key={i}
-                      onClick={handleRowClick(obj.lineItemLink)}
-                      className={classNames('hover', rowStyle)}
-                      {...props.rowProps}
-                    >
-                      {Object.keys(obj.content).map((key, i) => {
-                        return (
-                          <td
-                            key={i}
-                            data-heading={headers[i]}
-                            title={createTitle(obj.content[key])}
-                            {...props?.headingProps?.[headers?.[i]]}
-                          >
-                            {obj.content[key]}
-                          </td>
-                        );
-                      })}
-                    </tr>
-                  );
-                } else {
-                  return (
-                    <tr key={i} className={classNames(rowStyle)} {...props.rowProps}>
-                      {Object.keys(obj.content).map((key, i) => {
-                        return (
-                          <td
-                            key={i}
-                            data-heading={headers[i]}
-                            title={createTitle(obj.content[key])}
-                            {...props?.headingProps?.[headers?.[i]]}
-                          >
-                            {obj.content[key]}
-                          </td>
-                        );
-                      })}
-                    </tr>
-                  );
-                }
-              })}
-        </tbody>
-      </table>
-    </StyledSectionTable>
-  );
-};

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

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

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

@@ -1,5 +0,0 @@
-export { Section } from './Section';
-export { SectionBlock } from './SectionBlock';
-export { SectionBody } from './SectionBody';
-export { SectionHeader } from './SectionHeader';
-export { SectionTable } from './SectionTable';

package/src/legacy/components/buttons/Button/Button.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-const meta = {
-  component: Button,
-  title: 'legacy/buttons/Button',
-  argTypes: {
-    onClick: { action: 'clicked/pressed' },
-    className: { control: { disable: true } },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Normal: Story = {
-  args: {
-    id: '1234',
-    variant: 'normal',
-    type: 'button',
-    children: 'Normal button',
-  },
-};
-
-export const Primary: Story = {
-  args: {
-    id: '1234',
-    variant: 'primary',
-    type: 'button',
-    children: 'Primary button',
-  },
-};
-
-export const CallToAction: Story = {
-  args: {
-    id: '1234',
-    variant: 'cta',
-    type: 'button',
-    children: 'Call to action button',
-  },
-};
-
-export const LinkStyled: Story = {
-  args: {
-    id: '1234',
-    variant: 'link-style',
-    type: 'button',
-    children: 'Button styled like a text link',
-  },
-};
-
-export const UnStyled: Story = {
-  args: {
-    id: '1234',
-    variant: 'no-style',
-    type: 'button',
-    children: 'Button with no style',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    id: '1234',
-    variant: 'normal',
-    type: 'button',
-    children: 'Disabled button',
-    disabled: true,
-  },
-};
-
-export const Busy: Story = {
-  args: {
-    id: '1234',
-    variant: 'cta',
-    type: 'button',
-    children: 'Saving',
-    busy: true,
-  },
-};

package/src/legacy/components/buttons/Button/Button.styles.ts

@@ -1,99 +0,0 @@
-import styled from 'styled-components';
-
-import { ANIMATION, COLORS, TYPOGRAPHY } from '@/legacy/tokens';
-
-export const StyledButton = styled.button`
-  border: 0;
-  display: inline-block;
-  cursor: pointer;
-  font-family: ${TYPOGRAPHY.fontFamily.base};
-
-  &.default {
-    border-radius: 2px;
-    padding: 0.625em 1.25em;
-    box-shadow: 0 1px 1px 0 ${COLORS.black};
-    transition: background-color ${ANIMATION.duration} ${ANIMATION.timing};
-  }
-
-  &.primary,
-  &.cta {
-    background-color: ${COLORS.curiousBlue};
-    color: ${COLORS.white};
-
-    &:hover,
-    &:focus {
-      // todo: shouldn't have to override...
-      color: ${COLORS.white};
-      // todo: store as constant
-      background-color: #1777c2;
-    }
-  }
-
-  &.cta {
-    font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
-  }
-
-  &.normal {
-    font-size: ${TYPOGRAPHY.fontSize.base};
-    background-color: ${COLORS.iron};
-    color: ${COLORS.darkFontColor};
-
-    &:hover,
-    &:focus {
-      // todo: store as constant
-      background-color: #bebebe;
-    }
-  }
-
-  &.outline {
-    color: ${COLORS.midFontColor};
-    background: transparent;
-    border: 1px solid ${COLORS.midFontColor};
-    transition:
-      border ${ANIMATION.duration} ${ANIMATION.timing},
-      color ${ANIMATION.duration} ${ANIMATION.timing};
-
-    &:hover,
-    &:focus {
-      border: 1px solid ${COLORS.defaultFontColor};
-      color: ${COLORS.defaultFontColor};
-      background: transparent;
-    }
-
-    &:disabled {
-      border: 1px solid ${COLORS.midFontColor};
-      color: ${COLORS.midFontColor};
-      background: transparent;
-      opacity: 0.6;
-
-      &:hover {
-        background: transparent;
-        border: 1px solid ${COLORS.midFontColor};
-        color: ${COLORS.midFontColor};
-        opacity: 0.6;
-      }
-    }
-  }
-
-  &.no-style {
-    font-size: inherit;
-    color: inherit;
-    background-color: transparent;
-    box-shadow: none;
-    padding: 0;
-
-    &:hover,
-    &:focus {
-      color: inherit;
-      background-color: transparent;
-    }
-
-    &:not(.focus-visible) {
-      outline: none;
-    }
-  }
-
-  &.busy {
-    cursor: wait;
-  }
-`;

package/src/legacy/components/buttons/Button/Button.tsx

@@ -1,74 +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 { CircleSpinner } from '@/legacy/components/loading-indicators';
-import { PermafrostComponent } from '@/types';
-import { StyledButton } from './Button.styles';
-
-export type ButtonVariant = 'primary' | 'cta' | 'normal' | 'link-style' | 'no-style' | 'outline';
-
-export type ButtonProps = PermafrostComponent & {
-  'aria-label'?: string;
-  'aria-pressed'?: boolean;
-  'aria-selected'?: boolean;
-  busy?: boolean;
-  children: React.ReactNode | React.ReactNode[];
-  disabled?: boolean;
-  onClick: (...args: any[]) => void;
-  onFocus?: () => void;
-  role?: string;
-  style?: React.CSSProperties;
-  tabindex?: 0 | -1;
-  type?: 'submit' | 'button' | 'reset';
-  variant?: ButtonVariant;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
-};
-
-export function Button(props: ButtonProps): React.ReactElement {
-  const {
-    id,
-    className,
-    busy,
-    children,
-    disabled,
-    onClick,
-    onFocus,
-    role,
-    style,
-    tabindex,
-    type,
-    variant = 'default',
-    ...rest
-  } = props;
-
-  return (
-    <StyledButton
-      aria-disabled={busy}
-      aria-label={props['aria-label']}
-      aria-pressed={props['aria-pressed']}
-      aria-selected={props['aria-selected']}
-      className={classNames(variant, className, {
-        blue: variant === 'primary' || variant === 'cta',
-        busy,
-      })}
-      data-cy={props['data-cy']}
-      disabled={disabled}
-      id={id}
-      onClick={busy ? undefined : onClick}
-      onFocus={onFocus}
-      role={role}
-      style={style}
-      tabIndex={tabindex}
-      type={type || 'button'}
-      {...rest}
-    >
-      {busy && <CircleSpinner className="mr-2" />}
-
-      {children}
-    </StyledButton>
-  );
-}

package/src/legacy/components/buttons/Button/index.ts

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

package/src/legacy/components/buttons/IconButton/IconButton.stories.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { IconButton } from './IconButton';
-
-const meta = {
-  component: IconButton,
-  title: 'legacy/buttons/IconButton',
-  args: {
-    iconSide: 'start',
-    size: 'normal',
-    variant: 'default',
-  },
-  argTypes: {
-    onPress: { action: 'clicked/pressed' },
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    adjustAlignment: {
-      description: 'vertical alignment of text relative to icon',
-      defaultValue: -2,
-    },
-    className: {
-      control: {
-        disable: true,
-      },
-    },
-    style: {
-      control: {
-        disable: true,
-      },
-    },
-  },
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-type Story = StoryObj<typeof IconButton>;
-
-export const Normal: Story = {
-  args: {
-    iconName: 'fileHappy',
-    label: 'Save',
-    adjustAlignment: 0,
-  },
-};
-
-export const NoLabel: Story = {
-  args: {
-    iconName: 'fileHappy',
-    adjustAlignment: 0,
-  },
-};
-
-export const IconAtEnd: Story = {
-  args: {
-    iconName: 'fa-arrow-right',
-    iconSide: 'end',
-    label: 'Next Step',
-    variant: 'primary',
-    size: 'large',
-  },
-};
-
-export const Busy: Story = {
-  args: {
-    iconName: 'fileHappy',
-    label: 'Saving',
-    busy: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    iconName: 'fileHappy',
-    label: 'Save',
-    adjustAlignment: 0,
-    isDisabled: true,
-  },
-};
-
-export const AsLink: Story = {
-  args: {
-    iconName: 'fa-cog',
-    isLink: '#',
-    label: 'Settings',
-    adjustAlignment: 0,
-  },
-  render: (args) => (
-    <MemoryRouter>
-      <IconButton {...args} />
-    </MemoryRouter>
-  ),
-};

package/src/legacy/components/buttons/IconButton/IconButton.styles.ts

@@ -1,109 +0,0 @@
-import styled, { css } from 'styled-components';
-import { Link } from 'react-router-dom';
-
-import {
-  defaults,
-  sizeLarge,
-  variantDefault,
-  variantDestructive,
-  variantPrimary,
-  disabledOverrides,
-} from '../commonStyles';
-import { COLORS, ANIMATION } from '@/legacy/tokens';
-
-const iconMargin = '0.5em';
-
-export const iconButton = css`
-  align-items: center;
-
-  ${defaults};
-
-  svg {
-    height: 16px;
-    width: 16px;
-  }
-
-  &.large {
-    ${sizeLarge};
-
-    svg {
-      height: 20px;
-      width: 20px;
-    }
-  }
-
-  &.default {
-    ${variantDefault};
-  }
-
-  &.destructive {
-    ${variantDestructive};
-  }
-
-  &.primary {
-    ${variantPrimary};
-  }
-
-  &.outline {
-    color: ${COLORS.midFontColor};
-    background: transparent;
-    border: 1px solid ${COLORS.midFontColor};
-    transition:
-      border ${ANIMATION.duration} ${ANIMATION.timing},
-      color ${ANIMATION.duration} ${ANIMATION.timing};
-
-    &:hover,
-    &:focus {
-      border: 1px solid ${COLORS.defaultFontColor};
-      color: ${COLORS.defaultFontColor};
-      background: transparent;
-    }
-
-    &:disabled {
-      border: 1px solid ${COLORS.midFontColor};
-      color: ${COLORS.midFontColor};
-      background: transparent;
-      opacity: 0.6;
-
-      &:hover {
-        background: transparent;
-        border: 1px solid ${COLORS.midFontColor};
-        color: ${COLORS.midFontColor};
-        opacity: 0.6;
-      }
-    }
-  }
-
-  // todo: use this rule/selector after global styling removed
-  //:not(:disabled):hover {
-  //  background-color: #bebebe;
-  //}
-  ${disabledOverrides};
-
-  &.start {
-    svg.right-margin {
-      margin-right: ${iconMargin};
-    }
-  }
-
-  &.end {
-    svg {
-      order: 1;
-      margin-left: ${iconMargin};
-    }
-  }
-`;
-
-export const StyledIconButton = styled.button`
-  // todo: overrides the global button styling
-  display: flex !important;
-
-  ${iconButton};
-`;
-
-export const StyledIconButtonLink = styled(Link)`
-  // todo: overrides the global button styling
-  display: inline-flex !important;
-
-  ${iconButton};
-`;