@indico-data/design-system 2.53.0 → 2.55.0

package/src/legacy/components/Tooltip/Tooltip.tsx

@@ -1,70 +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/icons/Icon';
-import { PermafrostComponent } from '../../../types';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
-
-import { StyledTooltip } from './Tooltip.styles';
-
-enum PlacesType {
-  top = 'top',
-  'top-start' = 'top-start',
-  'top-end' = 'top-end',
-  right = 'right',
-  'right-start' = 'right-start',
-  'right-end' = 'right-end',
-  bottom = 'bottom',
-  'bottom-start' = 'bottom-start',
-  'bottom-end' = 'bottom-end',
-  left = 'left',
-  'left-start' = 'left-start',
-  'left-end' = 'left-end',
-}
-
-type Props = PermafrostComponent & {
-  questionMark?: boolean;
-  for?: string | null;
-  place?: string;
-  clickToShow?: boolean;
-  delayShow?: number;
-  delayHide?: number;
-  questionMarkClassName?: string;
-  children: React.ReactNode;
-  block?: boolean;
-};
-
-export const Tooltip = (props: Props) => {
-  return (
-    <StyledTooltip
-      className={props.className}
-      data-cy={props['data-cy']}
-      id={props.id}
-      // this was done in a hurry, consider refactor on next pass.
-      style={{ display: props.block ? 'block' : 'inline-block' }}
-    >
-      {props.questionMark && (
-        <i
-          className={props.questionMarkClassName}
-          // data-tip={props.clickToShow ? 'custom show' : ''}
-          data-tooltip-id={props.for as string | undefined}
-          data-tooltip-place={(props.place as PlacesType) || 'top'}
-        >
-          <Icon name="fa-question-circle" />
-        </i>
-      )}
-      <ReactTooltip
-        className="tool"
-        // globalEventOff={props.clickToShow ? 'click' : ''}
-        // place={(props.place as PlacesType) || 'top'}
-        openOnClick={props.clickToShow}
-        id={props.for as string | undefined}
-        delayShow={props.delayShow}
-        delayHide={props.delayHide}
-      >
-        {props.children}
-      </ReactTooltip>
-    </StyledTooltip>
-  );
-};

package/src/legacy/components/index.ts

@@ -1,2 +0,0 @@
-export { BarSpinner, CirclePulse, CircleSpinner } from './loading-indicators';
-export { Tooltip } from './Tooltip';

package/src/legacy/components/loading-indicators/BarSpinner/BarSpinner.stories.tsx

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

package/src/legacy/components/loading-indicators/BarSpinner/BarSpinner.tsx

@@ -1,21 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import type { PermafrostComponent } from '../../../../types';
-
-import { StyledBarSpinner } from './BarSpinner.styles';
-
-type Props = PermafrostComponent & {
-  width?: string;
-};
-
-export function BarSpinner(props: Props): React.ReactElement {
-  const { className, id, width = '100%' } = props;
-
-  return (
-    <StyledBarSpinner className={className} data-cy={props['data-cy']} id={id} style={{ width }}>
-      <span />
-    </StyledBarSpinner>
-  );
-}

package/src/legacy/components/loading-indicators/CirclePulse/CirclePulse.stories.tsx

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { CirclePulse } from './CirclePulse';
-
-const meta = {
-  component: CirclePulse,
-  title: 'legacy/Loading/CirclePulse',
-  argTypes: {},
-} satisfies Meta<typeof CirclePulse>;
-
-export default meta;
-type Story = StoryObj<typeof CirclePulse>;
-
-export const Normal: Story = {};
-
-export const CustomColor: Story = {
-  args: { color: '#f0f' },
-};
-
-export const WithRandomMessage: Story = {
-  args: { showRandomMessage: true },
-};

package/src/legacy/components/loading-indicators/CirclePulse/CirclePulse.styles.ts

@@ -1,77 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-const ripple = (size: string) => keyframes`
-  0% {
-    width: 0;
-    height: 0;
-    opacity: 0;
-  }
-  
-  20% {
-    opacity: 1;
-  }
-  
-  100% {
-    width: ${size};
-    height: ${size};
-    opacity: 0;
-  }
-`;
-
-const animationSpeed = 1.4;
-
-export const StyledLoadingIndicator = styled.div<{
-  overallsize: string;
-  ripplesize: string;
-}>`
-  display: grid;
-  place-items: center;
-
-  width: ${(props) => props.overallsize};
-  height: ${(props) => props.overallsize};
-
-  margin-left: auto;
-  margin-right: auto;
-
-  &:before,
-  &:after {
-    content: '';
-    border: 4px solid currentColor;
-    border-radius: 50%;
-
-    grid-area: 1 / 1;
-
-    animation: ${(props) => ripple(props.ripplesize)} ${animationSpeed}s
-      cubic-bezier(0, 0.2, 0.8, 1) infinite;
-
-    @media (prefers-reduced-motion) {
-      animation-duration: ${animationSpeed * 2}s;
-    }
-  }
-
-  &:after {
-    animation-delay: -${animationSpeed / 2}s;
-
-    @media (prefers-reduced-motion) {
-      animation-delay: -${animationSpeed}s;
-    }
-  }
-`;
-
-export const StyledMessageLoadingIndicator = styled.div<{ overallsize: string }>`
-  display: block;
-
-  > * {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .message {
-    text-align: center;
-    display: block;
-    width: ${(props) => props.overallsize};
-    margin-top: -50px;
-
-    font-style: italic;
-  }
-`;

package/src/legacy/components/loading-indicators/CirclePulse/CirclePulse.tsx

@@ -1,57 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import type { PermafrostComponent } from '../../../../types';
-
-import { StyledLoadingIndicator, StyledMessageLoadingIndicator } from './CirclePulse.styles';
-
-type Props = PermafrostComponent & {
-  color?: string;
-  overallSize?: string | number;
-  rippleSize?: string | number;
-  showRandomMessage?: boolean;
-};
-
-export function CirclePulse(props: Props): React.ReactElement {
-  const {
-    className,
-    color,
-    id,
-    overallSize = '200px',
-    rippleSize = '76px',
-    showRandomMessage,
-  } = props;
-
-  const loadingIndicator = () => {
-    return (
-      <StyledLoadingIndicator
-        aria-hidden={true}
-        className={className}
-        data-cy={props['data-cy']}
-        data-testid={props['data-testid']}
-        id={id}
-        overallsize={returnSizeString(overallSize)}
-        ripplesize={returnSizeString(rippleSize)}
-      />
-    );
-  };
-
-  if (showRandomMessage) {
-    return (
-      <StyledMessageLoadingIndicator overallsize={returnSizeString(overallSize)}>
-        {loadingIndicator()}
-      </StyledMessageLoadingIndicator>
-    );
-  }
-
-  return loadingIndicator();
-}
-
-function returnSizeString(size: string | number): string {
-  if (typeof size === 'number') {
-    return `${size}px`;
-  }
-
-  return size;
-}

package/src/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.stories.tsx

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

package/src/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.tsx

@@ -1,36 +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/icons/Icon';
-import type { PermafrostComponent, IconSizes } from '../../../../types';
-
-type Props = PermafrostComponent & {
-  ariaLabel?: string;
-  size?: IconSizes;
-  style?: React.CSSProperties;
-  fill?: string;
-};
-
-export function CircleSpinner(props: Props): React.ReactElement {
-  const { className, fill, id, size = 'sm', style, ariaLabel = 'Loading...' } = props;
-
-  const loaderStyle: React.CSSProperties = {
-    position: 'relative',
-    top: '1px',
-    color: fill || 'currentColor',
-    ...style,
-  };
-
-  return (
-    <Icon
-      name="fa-circle-notch"
-      className={`spin ${className || ''}`}
-      data-cy={props['data-cy']}
-      id={id}
-      size={size}
-      style={loaderStyle}
-      ariaLabel={ariaLabel}
-    />
-  );
-}

package/src/legacy/components/loading-indicators/CircleSpinner/index.ts

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

package/src/legacy/components/loading-indicators/index.ts

@@ -1,3 +0,0 @@
-export { CircleSpinner } from './CircleSpinner';
-export { BarSpinner } from './BarSpinner';
-export { CirclePulse } from './CirclePulse';