@indico-data/design-system 1.0.1

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

@@ -0,0 +1,61 @@
+import { css } from 'styled-components';
+
+import { COLORS, TYPOGRAPHY } from '@/tokens';
+
+export const inputCommon = css`
+  background-color: transparent;
+  color: ${COLORS.defaultFontColor};
+
+  border-radius: 0;
+  border: 0 solid currentColor;
+  border-bottom-width: 1px;
+
+  &: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;
+  color: ${COLORS.lightFontColor};
+`;
+
+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/components/loading-indicators/BarSpinner/BarSpinner.stories.tsx

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

package/src/components/loading-indicators/BarSpinner/BarSpinner.styles.ts

@@ -0,0 +1,53 @@
+import styled, { keyframes } from 'styled-components';
+
+import { COLORS } from '@/tokens';
+
+const moveBg = keyframes`
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(46px);
+  }
+`;
+
+export const StyledBarSpinner = styled.div`
+  display: inline-block;
+  width: 200px;
+  height: 14px; /* Can be anything */
+  position: relative;
+  border-radius: 25px;
+
+  > span {
+    display: block;
+    height: 100%;
+    width: 100%;
+    border-radius: 25px;
+    position: relative;
+    overflow: hidden;
+    background-color: ${COLORS.curiousBlue};
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -46px;
+      bottom: 0;
+      right: 0;
+      background: repeating-linear-gradient(
+        -55deg,
+        transparent 1px,
+        rgba(255, 255, 255, 0.25) 2px,
+        rgba(255, 255, 255, 0.25) 11px,
+        transparent 12px,
+        transparent 20px
+      );
+      animation-name: ${moveBg};
+      animation-duration: 1s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+      border-radius: 20px;
+      overflow: hidden;
+    }
+  }
+`;

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

@@ -0,0 +1,21 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { 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/components/loading-indicators/BarSpinner/index.ts

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

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CirclePulse } from './CirclePulse';
+
+const meta = {
+  component: CirclePulse,
+  title: '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/components/loading-indicators/CirclePulse/CirclePulse.styles.ts

@@ -0,0 +1,81 @@
+import styled, { keyframes } from 'styled-components';
+
+import { COLORS, TYPOGRAPHY } from '@/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/components/loading-indicators/CirclePulse/CirclePulse.tsx

@@ -0,0 +1,61 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { COLORS } from '@/tokens';
+import { PermafrostComponent } from '@/types';
+import { RandomLoadingMessage } from '../RandomLoadingMessage';
+
+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']}
+        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/components/loading-indicators/CirclePulse/index.ts

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

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

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

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

@@ -0,0 +1,37 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { Icon } from '../../Icon';
+import { PermafrostComponent } from '@/types';
+
+type Props = PermafrostComponent & {
+  ariaLabel?: string;
+  size?: string;
+  style?: { [key: string]: string };
+  fill?: string;
+};
+
+export function CircleSpinner(props: Props): React.ReactElement {
+  const { className, fill, id, size, style, ariaLabel = 'Loading...' } = props;
+
+  const loaderSize = size || '12px';
+  const loaderStyle = {
+    position: 'relative',
+    top: '1px',
+    ...style,
+  };
+
+  return (
+    <Icon
+      name="fa-circle-notch"
+      className={`spin ${className || ''}`}
+      data-cy={props['data-cy']}
+      id={id}
+      size={[loaderSize]}
+      style={loaderStyle}
+      fill={fill || 'currentColor'}
+      ariaLabel={ariaLabel}
+    />
+  );
+}

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

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

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

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

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

@@ -0,0 +1,42 @@
+import styled, { keyframes } from 'styled-components';
+
+import { COLORS } from '@/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/components/loading-indicators/LoadingList/LoadingList.tsx

@@ -0,0 +1,9 @@
+// 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/components/loading-indicators/LoadingList/index.ts

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

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PercentageRing } from './PercentageRing';
+
+const meta = {
+  component: PercentageRing,
+  title: '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/components/loading-indicators/PercentageRing/PercentageRing.styles.ts

@@ -0,0 +1,27 @@
+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/components/loading-indicators/PercentageRing/PercentageRing.tsx

@@ -0,0 +1,76 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { COLORS } from '@/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/components/loading-indicators/PercentageRing/index.ts

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

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

@@ -0,0 +1,16 @@
+// 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: 'Loading/RandomLoadingMessage',
+  argTypes: {},
+} satisfies Meta<typeof RandomLoadingMessage>;
+
+export default meta;
+type Story = StoryObj<typeof RandomLoadingMessage>;
+
+export const Normal: Story = {};

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

@@ -0,0 +1,18 @@
+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/components/loading-indicators/RandomLoadingMessage/index.ts

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

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

@@ -0,0 +1,67 @@
+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;