@indico-data/design-system 2.53.0 → 2.54.0

package/lib/legacy/components/Tooltip/Tooltip.styles.d.ts

@@ -1 +0,0 @@
-export declare const StyledTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/legacy/components/index.d.ts

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

package/lib/legacy/components/loading-indicators/BarSpinner/BarSpinner.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { PermafrostComponent } from '../../../../types';
-type Props = PermafrostComponent & {
-    width?: string;
-};
-export declare function BarSpinner(props: Props): React.ReactElement;
-export {};

package/lib/legacy/components/loading-indicators/BarSpinner/BarSpinner.stories.d.ts

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

package/lib/legacy/components/loading-indicators/BarSpinner/BarSpinner.styles.d.ts

@@ -1 +0,0 @@
-export declare const StyledBarSpinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/legacy/components/loading-indicators/CirclePulse/CirclePulse.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { PermafrostComponent } from '../../../../types';
-type Props = PermafrostComponent & {
-    color?: string;
-    overallSize?: string | number;
-    rippleSize?: string | number;
-    showRandomMessage?: boolean;
-};
-export declare function CirclePulse(props: Props): React.ReactElement;
-export {};

package/lib/legacy/components/loading-indicators/CirclePulse/CirclePulse.stories.d.ts

@@ -1,12 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { CirclePulse } from './CirclePulse';
-declare const meta: {
-    component: typeof CirclePulse;
-    title: string;
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof CirclePulse>;
-export declare const Normal: Story;
-export declare const CustomColor: Story;
-export declare const WithRandomMessage: Story;

package/lib/legacy/components/loading-indicators/CirclePulse/CirclePulse.styles.d.ts

@@ -1,7 +0,0 @@
-export declare const StyledLoadingIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    overallsize: string;
-    ripplesize: string;
-}>> & string;
-export declare const StyledMessageLoadingIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    overallsize: string;
-}>> & string;

package/lib/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { PermafrostComponent, IconSizes } from '../../../../types';
-type Props = PermafrostComponent & {
-    ariaLabel?: string;
-    size?: IconSizes;
-    style?: React.CSSProperties;
-    fill?: string;
-};
-export declare function CircleSpinner(props: Props): React.ReactElement;
-export {};

package/lib/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.stories.d.ts

@@ -1,10 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { CircleSpinner } from './CircleSpinner';
-declare const meta: {
-    component: typeof CircleSpinner;
-    title: string;
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof CircleSpinner>;
-export declare const Normal: Story;

package/lib/legacy/components/loading-indicators/CircleSpinner/index.d.ts

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

package/lib/legacy/components/loading-indicators/index.d.ts

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

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

@@ -1,107 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { Tooltip } from './Tooltip';
-
-const meta: Meta<typeof Tooltip> = {
-  component: Tooltip,
-  tags: ['autodocs'],
-  title: 'legacy/Tooltip',
-  args: {},
-};
-
-export default meta;
-type Story = StoryObj<typeof Tooltip>;
-
-function RenderQuestionMark(props: any) {
-  return (
-    <div style={{ height: '500px' }}>
-      <Tooltip for="example-tooltip" {...props}>
-        This is a paragraph
-      </Tooltip>
-
-      <p data-tip data-for="example-tooltip">
-        Hover on text to see tooltip
-      </p>
-    </div>
-  );
-}
-
-function RenderNoQuestionMark(props: any) {
-  return (
-    <>
-      <Tooltip for="example-tooltip">
-        <p>This is a paragraph</p>
-      </Tooltip>
-
-      <p
-        data-tooltip-id="example-tooltip"
-        data-tooltip-place={props.place}
-        style={{ display: 'inline-block', marginTop: '100px' }}
-      >
-        Hover on text to see tooltip
-      </p>
-    </>
-  );
-}
-
-export const Single: Story = {
-  args: {
-    questionMark: true,
-    for: 'example-tooltip',
-    place: 'top',
-    clickToShow: false,
-    delayHide: 0,
-    questionMarkClassName: 'question-mark',
-    children: 'This is a paragraph',
-    block: false,
-  },
-  render: (args) => {
-    return <RenderQuestionMark {...args} />;
-  },
-};
-
-export const NoQuestionMark: Story = {
-  args: {
-    questionMark: false,
-    for: 'example-tooltip',
-    place: 'top',
-    clickToShow: false,
-    delayHide: 0,
-    children: 'This is a paragraph',
-    block: false,
-  },
-  render: (args) => {
-    return <RenderNoQuestionMark {...args} />;
-  },
-};
-
-export const Bottom: Story = {
-  args: {
-    questionMark: false,
-    for: 'example-tooltip',
-    place: 'bottom',
-    clickToShow: false,
-    delayHide: 0,
-    children: 'This is a paragraph',
-    block: false,
-  },
-  render: (args) => {
-    return <RenderNoQuestionMark {...args} />;
-  },
-};
-
-export const Right: Story = {
-  args: {
-    questionMark: false,
-    for: 'example-tooltip',
-    place: 'right',
-    clickToShow: false,
-    delayHide: 0,
-    children: 'This is a paragraph',
-    block: false,
-  },
-  render: (args) => {
-    return <RenderNoQuestionMark {...args} />;
-  },
-};

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

@@ -1,64 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledTooltip = styled.div`
-  display: inline-block;
-
-  i:hover {
-    cursor: pointer;
-  }
-
-  p {
-    line-height: 1.4;
-    font-size: 13px;
-  }
-
-  .tool {
-    border-radius: 2px !important;
-    padding: 8px 11px !important;
-    opacity: 1 !important;
-
-    &.place-left:after {
-      border-top: 5px solid transparent !important;
-      border-bottom: 5px solid transparent !important;
-      right: -6px !important;
-      top: 50% !important;
-      margin-top: -9px !important;
-    }
-
-    &.place-left:before {
-      border-left-width: 8px !important;
-      border-left-style: solid !important;
-      margin-top: -10px !important;
-    }
-
-    &.place-right:after {
-      border-top: 5px solid transparent !important;
-      border-bottom: 5px solid transparent !important;
-      left: -6px !important;
-      top: 50% !important;
-      margin-top: -9px !important;
-    }
-
-    &.place-right:before {
-      border-right-width: 8px !important;
-      border-right-style: solid !important;
-      margin-top: -10px !important;
-    }
-
-    &.place-top:after {
-    }
-
-    &.place-top:before {
-      border-top-width: 8px !important;
-      border-top-style: solid !important;
-    }
-
-    &.place-bottom:after {
-    }
-
-    &.place-bottom:before {
-      border-bottom-width: 8px !important;
-      border-bottom-style: solid !important;
-    }
-  }
-`;

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';