@indico-data/design-system 2.43.1 → 2.44.0

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

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

@@ -1,114 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React, { useRef } from 'react';
-import classNames from 'classnames';
-import { useButton } from '@react-aria/button';
-import { useFocusRing } from '@react-aria/focus';
-import { AriaButtonProps } from '@react-types/button';
-
-import { SPACING } from '@/legacy/tokens';
-import { IconName, PermafrostComponent } from '@/types';
-import { Icon } from '@/components';
-import { CircleSpinner } from '@/legacy/components';
-import { ButtonSize, IconButtonVariant } from '../types';
-
-import { StyledIconButton, StyledIconButtonLink } from './IconButton.styles';
-
-type Props = PermafrostComponent & {
-  /**
-   * Adjusts vertical alignment of the text label, in relation to the icon
-   */
-  adjustAlignment?: number;
-  busy?: boolean;
-  iconName: IconName;
-  iconSide?: 'start' | 'end';
-  isDisabled?: boolean;
-  /**
-   * If element will be an `<a>`, the href URL
-   */
-  isLink?: string;
-  label?: string;
-  size?: ButtonSize;
-  style?: React.CSSProperties;
-  variant?: IconButtonVariant;
-} & AriaButtonProps;
-
-/**
- * General utility “button with an icon” component. May also be used for links that _look_
- * like buttons, via the `isLink` property.
- *
- * The button handler must be passed in via the `onPress` property (replaces `onClick`).
- *
- * @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
- */
-export function IconButton(props: Props) {
-  const {
-    adjustAlignment = 0,
-    busy,
-    className,
-    iconName,
-    iconSide = 'start',
-    id,
-    isDisabled,
-    isLink,
-    label,
-    size = 'normal',
-    style,
-    variant,
-  } = props;
-
-  const buttonEl = useRef();
-  const { buttonProps } = useButton(
-    { ...props, onPress: busy ? undefined : props.onPress },
-    // @ts-ignore
-    buttonEl,
-  );
-  const { isFocusVisible, focusProps } = useFocusRing();
-
-  const commonProps = {
-    'aria-disabled': busy,
-    className: classNames(iconSide, size, variant, className, {
-      'focus-visible': isFocusVisible,
-      busy,
-      disabled: isLink && isDisabled,
-    }),
-    ...buttonProps,
-    ...focusProps,
-    'data-cy': props['data-cy'],
-    id,
-    ref: buttonEl,
-    style,
-  };
-
-  const iconElement = busy ? (
-    <CircleSpinner
-      style={{
-        marginTop: `${adjustAlignment}px`,
-        marginBottom: `${Math.abs(adjustAlignment)}px`,
-        marginRight: `${SPACING.xs}`,
-      }}
-    />
-  ) : (
-    <Icon className={classNames({ 'right-margin': label })} name={iconName} />
-  );
-
-  const labelElement = label ? (
-    <span style={{ marginTop: `${adjustAlignment}px` }}>{label}</span>
-  ) : null;
-
-  if (isLink && !isDisabled) {
-    return (
-      //@ts-ignore
-      <StyledIconButtonLink {...commonProps} to={isLink}>
-        {iconElement} {labelElement}
-      </StyledIconButtonLink>
-    );
-  }
-
-  return (
-    // @ts-ignore
-    <StyledIconButton {...commonProps}>
-      {iconElement} {labelElement}
-    </StyledIconButton>
-  );
-}

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

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

package/src/legacy/components/buttons/commonStyles.ts

@@ -1,104 +0,0 @@
-// TODO: This file's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import { css } from 'styled-components';
-
-import { ANIMATION, COLORS, TYPOGRAPHY } from '@/legacy/tokens';
-
-export const defaultHeight = '36px';
-export const largeHeight = '50px';
-
-export const basicDefaults = css`
-  border: 0;
-  display: inline-block;
-  cursor: pointer;
-
-  border-radius: 2px;
-  box-shadow: 0 1px 1px 0 ${COLORS.black};
-
-  &.busy {
-    cursor: wait;
-  }
-
-  &:disabled,
-  &.disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  &:not(.focus-visible) {
-    outline: none;
-  }
-
-  transition-property: opacity, background-color;
-  transition-duration: ${ANIMATION.duration};
-  transition-timing-function: ${ANIMATION.timing};
-`;
-
-export const defaults = css`
-  ${basicDefaults};
-
-  height: ${defaultHeight};
-  font-size: ${TYPOGRAPHY.fontSize.base};
-  font-family: ${TYPOGRAPHY.fontFamily.base};
-
-  padding: 0 1em !important;
-`;
-
-export const sizeLarge = css`
-  height: ${largeHeight};
-  font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
-`;
-
-export const variantDefault = css`
-  color: ${COLORS.darkFontColor};
-  background-color: ${COLORS.iron};
-
-  &:hover {
-    background-color: #bebebe;
-  }
-`;
-
-export const variantPrimary = css`
-  background-color: ${COLORS.curiousBlue};
-  color: ${COLORS.white};
-
-  &:hover {
-    background-color: #1777c2;
-    color: ${COLORS.white};
-
-    &:disabled {
-      background-color: ${COLORS.curiousBlue} !important;
-    }
-  }
-`;
-
-export const variantDestructive = css`
-  background-color: ${COLORS.red};
-  color: ${COLORS.white};
-
-  &:hover {
-    background-color: #d4464b;
-    color: ${COLORS.white};
-  }
-`;
-
-// todo: remove once globals no longer need to be overridden
-export const disabledOverrides = css`
-  &:disabled,
-  &.disabled {
-    &:hover {
-      // todo: override due to default global styling
-      background-color: ${COLORS.iron} !important;
-
-      &.primary {
-        // todo: override due to default global styling
-        background-color: ${COLORS.curiousBlue} !important;
-      }
-
-      &.destructive {
-        // todo: override due to default global styling
-        background-color: ${COLORS.red} !important;
-      }
-    }
-  }
-`;

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

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

package/src/legacy/components/buttons/types.ts

@@ -1,3 +0,0 @@
-export type ButtonVariant = 'primary' | 'cta' | 'normal' | 'link-style' | 'no-style' | 'outline';
-export type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
-export type ButtonSize = 'normal' | 'large';

package/src/legacy/components/dropdowns/BorderSelect/BorderSelect.stories.tsx

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { BorderSelect } from './BorderSelect';
-
-const meta = {
-  component: BorderSelect,
-  title: 'legacy/dropdowns/BorderSelect',
-  argTypes: {},
-  args: {
-    onChange: () => {},
-    options: [
-      { name: 'Andy', value: 'andy' },
-      { name: 'Jess', value: 'jess' },
-      { name: 'Mike', value: 'mike' },
-    ],
-  },
-} satisfies Meta<typeof BorderSelect>;
-
-export default meta;
-type Story = StoryObj<typeof BorderSelect>;
-
-export const Base: Story = {};

package/src/legacy/components/dropdowns/BorderSelect/BorderSelect.styles.ts

@@ -1,73 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS, FONT_SIZE } from '@/legacy/tokens';
-
-export const StyledSelect = styled.div`
-  &.horizontal {
-    > * {
-      display: inline-block;
-    }
-
-    > label {
-      margin-right: 12px;
-    }
-  }
-
-  label {
-    line-height: 1.2;
-    margin-bottom: 14px;
-    // color: ${COLORS.lightFontColor};
-  }
-
-  .select-container {
-    position: relative;
-    // max-width: 300px;
-
-    select {
-      background: transparent;
-      border: 1px solid currentColor;
-      width: 100%;
-      // max-width: 300px;
-      // color: ${COLORS.lightFontColor};
-      font-size: ${FONT_SIZE.base};
-      border-radius: 4px;
-      padding: 7px 30px 8px 15px;
-      appearance: none;
-      position: relative;
-      z-index: 2;
-
-      &:focus {
-        outline: 0;
-      }
-
-      &::-ms-expand {
-        display: none;
-      }
-    }
-
-    option {
-      color: ${COLORS.black};
-
-      &:not(:checked) {
-        color: ${COLORS.black};
-      }
-    }
-
-    .selectCaret {
-      display: inline-block;
-      right: 12px;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: 1;
-    }
-  }
-`;
-
-export const StyledValidationError = styled.div`
-  margin-top: 13px;
-
-  p {
-    color: ${COLORS.curiousBlue};
-  }
-`;

package/src/legacy/components/dropdowns/BorderSelect/BorderSelect.tsx

@@ -1,85 +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 classNames from 'classnames';
-
-import { Icon } from '@/components';
-import { PermafrostComponent } from '@/types';
-
-import { StyledSelect, StyledValidationError } from './BorderSelect.styles';
-
-type Props = PermafrostComponent & {
-  defaultValue?: string;
-  disabled?: boolean;
-  horizontal?: boolean;
-  initialText?: string;
-  label?: string;
-  onChange(e: React.ChangeEvent<HTMLSelectElement>): void;
-  options: { name: string; value: string | number }[];
-  style?: object;
-  value?: string | number;
-  validationErrors?: string[];
-};
-
-export const BorderSelect = (props: Props) => {
-  const {
-    className = '',
-    disabled,
-    horizontal,
-    id,
-    initialText,
-    label,
-    onChange,
-    options,
-    style = {},
-    value,
-    validationErrors,
-  } = props;
-
-  const selectId = uuid();
-
-  return (
-    <StyledSelect
-      className={classNames('Select', { horizontal }, className)}
-      data-cy={props['data-cy']}
-      id={id}
-      style={style}
-    >
-      {label && <label htmlFor={selectId}>{label}</label>}
-
-      <div className="select-container">
-        <select onChange={onChange} value={value} disabled={disabled} id={selectId}>
-          {initialText && (
-            <option disabled value="">
-              {initialText}
-            </option>
-          )}
-
-          {options.map((o) => {
-            const key = uuid();
-
-            return (
-              <option key={key} value={o.value}>
-                {o.name}
-              </option>
-            );
-          })}
-        </select>
-
-        <Icon name="fa-caret-down" className="selectCaret" />
-      </div>
-      {validationErrors ? (
-        <StyledValidationError>
-          {validationErrors.map((err, i) => {
-            return (
-              <p className={`error-${err}`} key={i}>
-                {err}
-              </p>
-            );
-          })}
-        </StyledValidationError>
-      ) : null}
-    </StyledSelect>
-  );
-};

package/src/legacy/components/dropdowns/BorderSelect/index.ts

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