@indico-data/design-system 2.43.1 → 2.44.0

package/src/legacy/components/inputs/SearchInput/SearchInput.tsx

@@ -1,73 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-import { v4 as uuid } from 'uuid';
-import classNames from 'classnames';
-
-import { Icon } from '@/components';
-import { PermafrostComponent } from '@/types';
-
-import { StyledSearchField } from './SearchInput.styles';
-
-type Props = PermafrostComponent & {
-  inputBorder?: boolean;
-  showClearInputIcon?: boolean;
-  showSearchIcon?: boolean;
-  inputProps?: { [key: string]: string };
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onClear?(): void;
-  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  placeholder?: string;
-  value?: string;
-};
-
-export const SearchInput = (props: Props) => {
-  const {
-    id,
-    inputBorder,
-    showSearchIcon,
-    showClearInputIcon,
-    className = '',
-    inputProps,
-    onChange,
-    onClear,
-    onKeyUp,
-    placeholder,
-    value,
-  } = props;
-
-  const getId = id ? id : uuid();
-
-  return (
-    <StyledSearchField
-      className={classNames(className, {
-        inputBorder,
-        showSearchIcon,
-        showClearInputIcon,
-      })}
-      data-cy={props['data-cy']}
-    >
-      {showSearchIcon && (
-        <label htmlFor={getId}>
-          <Icon name="fa-search" ariaLabel="search" />
-        </label>
-      )}
-
-      <input
-        data-testid={props['data-testid']}
-        type="search"
-        id={getId}
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-        onKeyUp={onKeyUp}
-        {...inputProps}
-      />
-      {showClearInputIcon && (
-        <Icon name="x-close" ariaLabel="clear input" className="clear-input" onClick={onClear} />
-      )}
-    </StyledSearchField>
-  );
-};
-
-export default SearchInput;

package/src/legacy/components/inputs/SearchInput/index.ts

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

package/src/legacy/components/inputs/TextInput/TextInput.stories.tsx

@@ -1,104 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React, { ChangeEvent, useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-
-import { TextInput } from './TextInput';
-
-const validationErrors = [
-  'Some helpful error to display to user',
-  'Another error that may not be so helpful',
-];
-
-function StoryRender(props: any) {
-  const [value, setValue] = useState<string>(props.value);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return <TextInput {...props} onChange={handleChange} value={value} />;
-}
-
-const meta = {
-  component: TextInput,
-  title: 'legacy/inputs/TextInput',
-  argTypes: {
-    autoComplete: { control: { disable: true } },
-    className: { control: { disable: true } },
-    defaultValue: { control: { disable: true } },
-    inputProps: { control: { disable: true } },
-    name: { control: { disable: true } },
-    promptProps: { control: { disable: true } },
-    type: { control: { disable: true } },
-    validationErrors: { control: { disable: true } },
-    value: { control: { disable: true } },
-  },
-  args: {},
-} satisfies Meta<typeof TextInput>;
-
-export default meta;
-type Story = StoryObj<typeof TextInput>;
-
-export const Base: Story = {
-  args: { label: 'Default Text Field', placeholder: 'Placeholder for Default Input' },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Required: Story = {
-  args: { label: 'Required Text Field', placeholder: 'Required Placeholder', required: true },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const WithPrompt: Story = {
-  args: {
-    label: 'Text Field with Prompts',
-    placeholder: 'Prompt Example',
-    displayErrors: false,
-    required: true,
-    validationErrors,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    label: 'Text Field with Errors',
-    placeholder: 'Error Example',
-    displayErrors: true,
-    validationErrors,
-    value: 'This text is incorrect for some reason',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled Text Field',
-    placeholder: 'Disabled field',
-    displayErrors: true,
-    disabled: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const CharacterLimit: Story = {
-  args: {
-    label: 'Text Field with a character limit',
-    maxLength: 12,
-    value: '',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};

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

@@ -1,74 +0,0 @@
-import styled from 'styled-components';
-
-import { ANIMATION, COLORS, TYPOGRAPHY } from '@/legacy/tokens';
-
-import {
-  inputInfoCommon,
-  inputCommon,
-  labelCommon,
-  placeholderCommon,
-} from '../inputsCommon.styles';
-
-export const StyledTextInput = styled.div`
-  position: relative;
-  color: ${COLORS.defaultFontColor};
-  font-family: ${TYPOGRAPHY.fontFamily.base};
-
-  min-height: 40px;
-  margin-top: 35px;
-
-  label {
-    pointer-events: none;
-
-    position: absolute;
-    top: 6px;
-
-    transition: transform ${ANIMATION.duration} ${ANIMATION.timing};
-  }
-
-  input {
-    ${inputCommon};
-
-    padding: 5px 0 10px;
-    margin-top: 0;
-
-    border: 0 solid currentColor;
-    border-bottom-width: 1px;
-
-    &::placeholder {
-      color: inherit;
-      opacity: 0;
-
-      transition: opacity ${ANIMATION.duration} ${ANIMATION.timing};
-    }
-
-    &:focus,
-    &.filled {
-      ${placeholderCommon}
-
-      + label {
-        ${labelCommon};
-
-        transform: translateY(-30px);
-      }
-    }
-  }
-`;
-
-export const StyledInputInfo = styled.div`
-  ${inputInfoCommon};
-
-  display: flex;
-
-  p {
-    margin: 0;
-  }
-
-  .count {
-    margin-left: auto;
-  }
-
-  .isMax {
-    color: ${COLORS.white};
-  }
-`;

package/src/legacy/components/inputs/TextInput/TextInput.tsx

@@ -1,116 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React, { ChangeEvent } from 'react';
-import classNames from 'classnames';
-import { v4 as uuid } from 'uuid';
-
-import { PermafrostComponent } from '@/types';
-
-import { StyledInputInfo, StyledTextInput } from './TextInput.styles';
-
-export type Props = PermafrostComponent & {
-  autoComplete?: 'email' | 'current-password' | 'new-password' | string;
-  autoFocus?: boolean;
-  defaultValue?: string;
-  disabled?: boolean;
-  displayErrors?: boolean;
-  inputProps?: any;
-  label?: string;
-  maxLength?: number;
-  name?: string;
-  onBlur?(): void;
-  onChange?(event: ChangeEvent<HTMLInputElement>): void;
-  onFocus?(): void;
-  placeholder?: string;
-  promptProps?: any;
-  required?: boolean;
-  type?: 'text' | 'email' | 'password' | string;
-  validationErrors?: string[];
-  value?: string;
-  readOnly?: boolean;
-};
-
-export function TextInput(props: Props): React.ReactElement {
-  // ensures unique value to associate label with input
-  const inputId = uuid();
-  const {
-    autoComplete,
-    autoFocus,
-    className,
-    defaultValue,
-    disabled,
-    displayErrors,
-    id,
-    inputProps,
-    label,
-    maxLength,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    placeholder,
-    promptProps,
-    required,
-    type = 'text',
-    validationErrors,
-    value,
-    readOnly,
-  } = props;
-
-  const errorClass: string = displayErrors ? 'error' : 'prompt';
-
-  return (
-    <StyledTextInput className={className} data-cy={props['data-cy']} id={id}>
-      <input
-        autoComplete={autoComplete}
-        autoFocus={autoFocus}
-        className={classNames('text-input__input-element', {
-          filled: (value && value.length > 0) || defaultValue,
-        })}
-        disabled={disabled}
-        defaultValue={defaultValue}
-        id={inputId}
-        maxLength={maxLength}
-        name={name}
-        onBlur={onBlur}
-        onChange={onChange}
-        onFocus={onFocus}
-        onKeyUp={(e) => {
-          if (e.key === 'Enter') {
-            e.currentTarget.blur();
-          }
-        }}
-        placeholder={placeholder}
-        required={required}
-        type={type}
-        value={value}
-        readOnly={readOnly}
-        {...inputProps}
-      />
-
-      {label ? <label htmlFor={inputId}>{label}</label> : null}
-
-      {(validationErrors || maxLength) && (
-        <StyledInputInfo>
-          {validationErrors && (
-            <div>
-              {validationErrors.map((err, i) => {
-                return (
-                  <p className={errorClass} key={i} {...promptProps}>
-                    {err}
-                  </p>
-                );
-              })}
-            </div>
-          )}
-
-          {maxLength && (
-            <div className={classNames('count', { isMax: value?.length === maxLength })}>
-              {value?.length || 0} / {maxLength}
-            </div>
-          )}
-        </StyledInputInfo>
-      )}
-    </StyledTextInput>
-  );
-}

package/src/legacy/components/inputs/TextInput/index.ts

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

package/src/legacy/components/inputs/index.ts

@@ -1,6 +0,0 @@
-export { EditableInput } from './EditableInput';
-export { NumberInput } from './NumberInput';
-export { SearchInput } from './SearchInput';
-export { TextInput } from './TextInput';
-export { Radio, RadioGroup } from './RadioButtons';
-export { AbstractRadio, AbstractRadioGroup } from './RadioGroup';

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