@indico-data/design-system 2.43.0 → 2.44.0

package/src/legacy/components/inputs/inputsCommon.styles.ts

@@ -1,57 +0,0 @@
-import { css } from 'styled-components';
-
-import { COLORS, TYPOGRAPHY } from '@/legacy/tokens';
-
-export const inputCommon = css`
-  background-color: transparent;
-  border-radius: 0;
-  border: 0 solid currentColor;
-
-  &:focus,
-  &:hover,
-  &.filled {
-    // border-color: ${COLORS.lightFontColor};
-  }
-
-  &:required {
-    border-bottom-color: ${COLORS.curiousBlue};
-
-    + label:after {
-      content: '*';
-      margin-left: 4px;
-    }
-  }
-
-  &:disabled {
-    border-style: dotted;
-    border-bottom-color: ${COLORS.lightGray};
-    cursor: not-allowed;
-
-    &:hover {
-    }
-  }
-`;
-
-export const labelCommon = css`
-  font-size: ${TYPOGRAPHY.fontSize.base};
-  font-weight: bold;
-`;
-
-export const inputInfoCommon = css`
-  margin-top: 13px;
-  font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-
-  .prompt {
-    color: ${COLORS.curiousBlue};
-  }
-
-  .error {
-    color: ${COLORS.red};
-  }
-`;
-
-export const placeholderCommon = css`
-  &::placeholder {
-    opacity: 0.42;
-  }
-`;

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

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

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

@@ -1,81 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-import { COLORS, TYPOGRAPHY } from '@/legacy/tokens';
-
-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;
-
-    color: ${COLORS.lightFontColor};
-    font-size: ${TYPOGRAPHY.fontSize.base};
-    font-style: italic;
-  }
-`;

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

@@ -1,61 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import { RandomLoadingMessage } from '@/legacy/components';
-import { PermafrostComponent } from '@/types';
-import { COLORS } from '@/legacy/tokens';
-
-import { StyledLoadingIndicator, StyledMessageLoadingIndicator } from './LoadingIndicator.styles';
-
-type Props = PermafrostComponent & {
-  color?: string;
-  overallSize?: string | number;
-  rippleSize?: string | number;
-  showRandomMessage?: boolean;
-};
-
-export function LoadingIndicator(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']}
-        id={id}
-        overallsize={returnSizeString(overallSize)}
-        ripplesize={returnSizeString(rippleSize)}
-        style={color ? { color } : { color: COLORS.curiousBlue }}
-      />
-    );
-  };
-
-  if (showRandomMessage) {
-    return (
-      <StyledMessageLoadingIndicator overallsize={returnSizeString(overallSize)}>
-        {loadingIndicator()}
-
-        <RandomLoadingMessage />
-      </StyledMessageLoadingIndicator>
-    );
-  }
-
-  return loadingIndicator();
-}
-
-function returnSizeString(size: string | number): string {
-  if (typeof size === 'number') {
-    return `${size}px`;
-  }
-
-  return size;
-}

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

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

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

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

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

@@ -1,42 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-import { COLORS } from '@/legacy/tokens';
-
-const loadingAnimation = keyframes`
-  0% {
-    background-position: 100% 0;
-  }
-
-  100% {
-    background-position: 0 0;
-  }
-`;
-
-export const StyledLoadingList = styled.div`
-  position: relative;
-
-  height: 40vh;
-
-  background-image: repeating-linear-gradient(
-    to bottom,
-    ${COLORS.ebony} 0px,
-    ${COLORS.ebony} 60px,
-    ${COLORS.clay} 60px,
-    ${COLORS.clay} 65px
-  );
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-
-    opacity: 0.75;
-
-    background-image: linear-gradient(to right, transparent, ${COLORS.clay}, transparent);
-    background-size: 400% 100%;
-    animation: ${loadingAnimation} 2s ease infinite;
-  }
-`;

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

@@ -1,9 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import { StyledLoadingList } from './LoadingList.styles';
-
-export const LoadingList = () => {
-  return <StyledLoadingList />;
-};

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

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

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

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

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

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledPercentageRing = styled.div`
-  position: relative;
-
-  svg {
-    transform: rotate(-90deg);
-  }
-
-  div {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    margin-top: -0.05em;
-    margin-left: 0.1em;
-
-    span {
-      font-size: 0.6em;
-      margin-top: -0.5em;
-    }
-  }
-`;

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

@@ -1,76 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import { COLORS } from '@/legacy/tokens';
-import { PermafrostComponent } from '@/types';
-
-import { StyledPercentageRing } from './PercentageRing.styles';
-
-type Props = PermafrostComponent & {
-  backgroundColor?: string;
-  foregroundColor?: string;
-  ringRadius?: number;
-  strokeWidth?: number;
-  /** an integer between 0 and 1 */
-  value: number;
-  valueFontSize?: number;
-};
-
-export function PercentageRing(props: Props) {
-  const {
-    backgroundColor = COLORS.clay,
-    className,
-    foregroundColor = COLORS.baliHai,
-    id,
-    ringRadius = 35,
-    strokeWidth = 5,
-    value = 0,
-    valueFontSize = 20,
-  } = props;
-
-  const ringCircumference = 2 * Math.PI * (ringRadius - strokeWidth / 2);
-  const valueCircumference = ringCircumference - value * ringCircumference;
-  const diameter = ringRadius * 2;
-  const circleRadius = ringRadius - strokeWidth / 2;
-
-  // ensure we don’t display a value greater than 100% to the user
-  const displayValue = Math.round(Math.min(value, 1) * 100);
-
-  return (
-    <StyledPercentageRing className={className} data-cy={props['data-cy']} id={id}>
-      <div
-        style={{
-          fontSize: valueFontSize,
-          width: diameter,
-          height: diameter,
-        }}
-      >
-        {displayValue}
-        <span>%</span>
-      </div>
-
-      <svg
-        height={diameter}
-        width={diameter}
-        fill="none"
-        strokeWidth={strokeWidth}
-        aria-hidden="true"
-        focusable="false"
-      >
-        <g>
-          <circle r={circleRadius} cx={ringRadius} cy={ringRadius} stroke={backgroundColor} />
-
-          <circle
-            r={circleRadius}
-            cx={ringRadius}
-            cy={ringRadius}
-            stroke={foregroundColor}
-            strokeDasharray={ringCircumference}
-            strokeDashoffset={valueCircumference}
-          />
-        </g>
-      </svg>
-    </StyledPercentageRing>
-  );
-}

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

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

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

@@ -1,16 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { RandomLoadingMessage } from './RandomLoadingMessage';
-
-const meta = {
-  component: RandomLoadingMessage,
-  title: 'legacy/Loading/RandomLoadingMessage',
-  argTypes: {},
-} satisfies Meta<typeof RandomLoadingMessage>;
-
-export default meta;
-type Story = StoryObj<typeof RandomLoadingMessage>;
-
-export const Normal: Story = {};

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

@@ -1,18 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import MESSAGES from './random-messages';
-
-export const RandomLoadingMessage = () => {
-  const [randomMessage, changeRandomMessage] = useState<string>(
-    MESSAGES[Math.floor(Math.random() * MESSAGES.length)],
-  );
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      changeRandomMessage(MESSAGES[Math.floor(Math.random() * MESSAGES.length)]);
-    }, 3000);
-
-    return () => clearTimeout(timer);
-  });
-
-  return <span className="message">{randomMessage}...</span>;
-};

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

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

package/src/legacy/components/loading-indicators/RandomLoadingMessage/random-messages.js

@@ -1,67 +0,0 @@
-const MESSAGES = [
-  'Charging the flux capacitor',
-  'Spinning up the hamster wheel',
-  'Flushing the pipes',
-  'Counting all the beans',
-  'Take a deep breath and enjoy this beautiful moment',
-  'Counting digits in pi (almost done)',
-  'Folding time and space',
-  'Oiling the gears',
-  'Peeling the data fruits',
-  'Activating the oscillation overthruster',
-  'Gleaming the cube',
-  'Reticulating splines',
-  'Playing a quick game of squash',
-  'Making the sausage',
-  'Building the matrix',
-  'Drawing fractals',
-  'Testing memory (what did you have for breakfast?)',
-  'Priming data pumps',
-  'Whacking datamoles',
-  'Finding Nemo',
-  'Running spin cycle',
-  'Chasing down a dream',
-  'Twiddling the knobs',
-  'Assembling lines',
-  'Making the donuts',
-  'Gathering magic',
-  'Rolling stones',
-  'Busting all the moves',
-  'Augmenting reality',
-  'Leveling up',
-  'Obviating frequencies',
-  'Declaring variables',
-  'Boosting thrusters',
-  'Blazing the saddles',
-  'Flipping some bits',
-  'Unclogging the internet',
-  'Turning it off and back on again',
-  'Entering the ThunderDome',
-  'Rolling logs',
-  'Dangling particles',
-  'Catching moonbeams',
-  'Digging for treasure',
-  'Reconbulating the conbulator',
-  'Machine learning',
-  'Magicing',
-  'Tuning the forks',
-  'Fiddling widgets',
-  'Feeding the data monkeys',
-  'Regularizing expressions',
-  'Ramping up the synergy',
-  'Inflating point flotations',
-  'Entering orbit around alpha centuri',
-  'Squeezing data tubes',
-  'Making a list and checking it twice',
-  'Unkinking the data tubes',
-  'Turning on the data hose',
-  'Preparing for liftoff',
-  'Replacing the hamsters',
-  'Changing the batteries',
-  'Waking up our engineers',
-  'Contemplating the meaning of life',
-  'Downloading fresh dog memes',
-  'Springing the chickens',
-];
-
-export default MESSAGES;

package/src/legacy/components/text-truncate/TextTruncate.stories.tsx

@@ -1,19 +0,0 @@
-import { TextTruncate } from './TextTruncate';
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof TextTruncate> = {
-  component: TextTruncate,
-  tags: ['autodocs'],
-  title: 'legacy/Text Utilities/TextTruncate',
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TextTruncate>;
-
-export const Normal: Story = {
-  args: {
-    string: 'This string is being truncated for length.',
-    maxChars: 30,
-  },
-};

package/src/legacy/components/text-truncate/TextTruncate.styles.ts

@@ -1,3 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledTextTruncate = styled.span``;

package/src/legacy/components/text-truncate/TextTruncate.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { TextTruncate } from './TextTruncate';
-
-describe('TextTruncate', () => {
-  const longText = 'this is a really long string that should be truncated';
-
-  it('truncates text when it exceeds the maximum length and adds a title attr', () => {
-    const { getByTitle } = render(<TextTruncate string={longText} maxChars={20}></TextTruncate>);
-    expect(getByTitle(longText).textContent).toEqual('this is a really lon...');
-  });
-
-  it('does not truncate the text when it is below the max length', () => {
-    const { getByText } = render(<TextTruncate string={longText} maxChars={200}></TextTruncate>);
-    expect(getByText(longText).textContent).toEqual(longText);
-  });
-});

package/src/legacy/components/text-truncate/TextTruncate.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { StyledTextTruncate } from './TextTruncate.styles';
-
-interface TextTruncateProps {
-  string: string;
-  maxChars: number;
-  children?: any;
-  noTitle?: boolean;
-}
-
-export function TextTruncate({ string, maxChars, children, noTitle }: TextTruncateProps) {
-  return string.length > maxChars ? (
-    <StyledTextTruncate title={noTitle ? undefined : string}>
-      {`${string.substring(0, maxChars)}...`}
-      {children}
-    </StyledTextTruncate>
-  ) : (
-    <StyledTextTruncate>
-      {string}
-      {children}
-    </StyledTextTruncate>
-  );
-}

package/src/legacy/components/text-truncate/index.ts

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

package/src/legacy/components/user-feedback/Shrug/Shrug.stories.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Shrug } from './Shrug';
-
-const meta = {
-  component: Shrug,
-  title: 'legacy/User Feedback/Shrug',
-  argTypes: {},
-  args: {
-    message: 'There are no workflows associated with this dataset.',
-  },
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    ),
-  ],
-} satisfies Meta<typeof Shrug>;
-
-export default meta;
-type Story = StoryObj<typeof Shrug>;
-
-export const MessageOnly: Story = {};
-
-export const WithButtonAction: Story = {
-  args: { buttonText: 'Do something', buttonAction: () => {} },
-};
-
-export const WithLinkAction: Story = {
-  args: { actionText: 'Go back', actionLink: 'https://indico.io' },
-};
-
-export const ComponentMessage: Story = {
-  args: { message: <h2>Hello there! I'm an element</h2> },
-};

package/src/legacy/components/user-feedback/Shrug/Shrug.styles.ts

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS, TYPOGRAPHY } from '@/legacy/tokens';
-
-export const StyledShrug = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  padding: 2em;
-
-  font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
-
-  p {
-    font-size: inherit;
-    margin-top: 2em;
-  }
-
-  svg {
-    fill: ${COLORS.iron};
-    opacity: 0.5;
-    width: 260px;
-    height: 84px;
-  }
-`;