@indico-data/design-system 2.43.1 → 2.45.0

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

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

@@ -1,45 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/components';
-import { PermafrostComponent } from '@/types';
-
-import { StyledShrug } from './Shrug.styles';
-
-type Props = PermafrostComponent & {
-  actionLink?: string;
-  actionText?: string;
-  buttonAction?(): void;
-  buttonText?: string;
-  message?: string | React.ReactNode;
-  messageProps?: { 'data-cy': string };
-};
-
-export function Shrug(props: Props): React.ReactElement {
-  const { actionLink, actionText, buttonAction, buttonText, className, id, message } = props;
-  return (
-    <StyledShrug className={className} data-cy={props['data-cy']} id={id}>
-      <Icon name="shrug" />
-      {typeof message === 'string' ? (
-        <p className="t-subhead-large" {...props?.messageProps}>
-          {message}
-        </p>
-      ) : (
-        message
-      )}
-      {actionLink && actionText && (
-        <Link to={actionLink} className="button blue cta mt-5">
-          {actionText}
-        </Link>
-      )}
-      {buttonAction && buttonText && (
-        <Button onClick={buttonAction} className="mt-5" variant="cta">
-          {buttonText}
-        </Button>
-      )}
-    </StyledShrug>
-  );
-}

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

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

package/src/legacy/components/user-feedback/index.ts

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

package/src/legacy/styles/globals/buttons.ts

@@ -1,154 +0,0 @@
-import { createGlobalStyle, css } from 'styled-components';
-
-import { COLORS, TYPOGRAPHY, ANIMATION } from '@/legacy/tokens';
-
-const buttonColor = COLORS.darkFontColor;
-const buttonBackground = COLORS.iron;
-
-const buttonDefault = css`
-  appearance: none;
-  background-color: ${buttonBackground};
-  border: 0;
-  border-radius: 2px;
-  color: ${buttonColor};
-  cursor: pointer;
-  display: inline-block;
-  font-family: ${TYPOGRAPHY.fontFamily.base};
-  font-size: ${TYPOGRAPHY.fontSize.base};
-  line-height: 1;
-  padding: ${TYPOGRAPHY.spacing.half} ${TYPOGRAPHY.spacing.base};
-  text-align: center;
-  text-decoration: none;
-  transition: background-color ${ANIMATION.duration} ${ANIMATION.timing};
-  user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-  box-shadow: 0 1px 1px 0 ${COLORS.black};
-`;
-
-export const Buttons = createGlobalStyle`
-  button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'],
-  .button {
-    ${buttonDefault}
-
-    &:hover,
-    &:focus {
-      background-color: #bebebe;
-      color: ${buttonColor};
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-
-      background-color: ${COLORS.romanSilver};
-  
-      &:hover {
-        background-color: ${COLORS.romanSilver};
-      }
-    }
-
-    &.red {
-      background-color: ${COLORS.red};
-      color: ${COLORS.hiliteFontColor};
-
-      &:hover {
-        background-color: #ed3c39;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background-color: ${COLORS.red};
-
-        &:hover {
-          background-color: ${COLORS.red};
-        }
-      }
-
-      &.round:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background-color: ${COLORS.red};
-
-        &:hover {
-          background-color: ${COLORS.red};
-        }
-      }
-    }
-
-    &.blue {
-      background-color: ${COLORS.curiousBlue};
-      color: ${COLORS.hiliteFontColor};
-
-      &:hover {
-        background-color: #1777c2;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background-color: #1e88e5;
-
-        &:hover {
-          background-color: #1e88e5;
-        }
-      }
-    }
-
-    &.green {
-      background-color: ${COLORS.green};
-      color: ${COLORS.hiliteFontColor};
-
-      &:hover {
-        background-color: #419a45;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background-color: #419a45;
-
-        &:hover {
-          background-color: #419a45;
-        }
-      }
-    }
-
-    &.cta {
-      font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
-    }
-
-    &.round {
-      border-radius: 50%;
-      padding: 10px;
-    }
-
-    &.link-style {
-      background: none;
-      box-shadow: none;
-      text-decoration: underline;
-      padding: 0;
-      transition: color ${ANIMATION.duration} ${ANIMATION.timing}, text-decoration-color ${ANIMATION.duration} ${ANIMATION.timing};
-      color: ${COLORS.midFontColor};
-      text-decoration-color: currentColor;
-
-      &:hover {
-        text-decoration-color: transparent;
-        color: ${COLORS.defaultFontColor};
-      }
-    }
-
-    .fa-fw {
-      width: 1em;
-      text-align: center;
-    }
-
-    i {
-      display: inline-block;
-      margin-right: 2px;
-    }
-  }
-`;

package/src/legacy/styles/globals/forms.ts

@@ -1,53 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-import { COLORS, TYPOGRAPHY, ANIMATION } from '@/legacy/tokens';
-
-const formBoxShadow = 'inset 0 0 0 rgba(#000, 0)';
-const formBoxShadowFocus = formBoxShadow;
-
-export const Forms = createGlobalStyle`
-  fieldset {
-    background-color: transparent;
-    border: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  legend {
-    font-weight: 600;
-    margin-bottom: ${TYPOGRAPHY.spacing.quarter};
-    padding: 0;
-  }
-
-  label {
-    display: block;
-    font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-    margin-bottom: ${TYPOGRAPHY.spacing.quarter};
-  }
-
-  input,
-  select,
-  textarea {
-    display: block;
-    font-family: ${TYPOGRAPHY.fontFamily.base};
-    font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-  }
-
-
-
-
-  textarea {
-    resize: vertical;
-  }
-
-  [type="checkbox"],
-  [type="radio"] {
-    display: inline;
-    margin-right: ${TYPOGRAPHY.spacing.quarter};
-  }
-
-  [type="file"] {
-    margin-bottom: ${TYPOGRAPHY.spacing.half};
-    width: 100%;
-  }
-`;

package/src/legacy/styles/globals/index.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { UtilityClasses } from './utility-classes';
-import { Forms } from './forms';
-import { Layout } from './layout';
-import { Lists } from './lists';
-import { Media } from './media';
-import { Tables } from './tables';
-import { Typography } from './typography';
-import { MarginPadding } from './margin-padding';
-
-export const GlobalStyles = () => (
-  <>
-    <UtilityClasses />
-    <Forms />
-    <Layout />
-    <Lists />
-    <Media />
-    <Tables />
-    <Typography />
-    <MarginPadding />
-  </>
-);

package/src/legacy/styles/globals/layout.ts

@@ -1,22 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const Layout = createGlobalStyle`
-  html {
-    box-sizing: border-box;
-  }
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-
-  html,
-  body {
-    height: 100%;
-  }
-
-  body {
-    margin: 0;
-  }
-`;

package/src/legacy/styles/globals/lists.ts

@@ -1,23 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const Lists = createGlobalStyle`
-  ul,
-  ol {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  dl {
-    margin: 0;
-  }
-
-  dt {
-    font-weight: 600;
-    margin: 0;
-  }
-
-  dd {
-    margin: 0;
-  }
-`;