@indico-data/design-system 2.43.0 → 2.44.0

package/src/legacy/components/inputs/RadioButtons/index.tsx

@@ -1 +0,0 @@
-export { Radio, RadioGroup } from './RadioButtons';

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

@@ -1,66 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Radio, RadioGroup } from './RadioGroup';
-
-const meta = {
-  component: RadioGroup,
-  title: 'legacy/inputs/RadioGroup',
-  args: {
-    value: 'andy',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-type Story = StoryObj<typeof RadioGroup>;
-
-function StoryRender(props: any) {
-  return (
-    <RadioGroup {...props} defaultValue="andy">
-      <Radio value="andy">Andy</Radio>
-      <Radio value="jess">Jess</Radio>
-      <Radio value="mike">Mike</Radio>
-    </RadioGroup>
-  );
-}
-
-export const Normal: Story = {
-  args: {
-    label: 'Select a person:',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const WithHiddenLabel: Story = {
-  args: {
-    ['aria-label']: 'Select a person:',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Horizontal: Story = {
-  args: {
-    label: 'Select a person:',
-    orientation: 'horizontal',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Select a person:',
-    isDisabled: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};

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

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledRadioGroup = styled.div`
-  &.horizontal {
-    display: flex;
-
-    > * {
-      margin-right: 10px;
-    }
-  }
-`;

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

@@ -1,119 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React, { createContext, useContext, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { AriaRadioGroupProps, AriaRadioProps } from '@react-types/radio';
-import { useRadio, useRadioGroup } from '@react-aria/radio';
-import { useFocusRing } from '@react-aria/focus';
-import { useVisuallyHidden } from '@react-aria/visually-hidden';
-import { RadioGroupState, useRadioGroupState } from 'react-stately';
-
-import { PermafrostComponent } from '@/types';
-import { StyledRadioGroup } from './RadioGroup.styles';
-
-export type RadioGroupProps = PermafrostComponent & {
-  value?: string;
-  onChange?: (value: string) => void;
-  children: React.ReactNode;
-  className?: string;
-} & AriaRadioGroupProps;
-
-export const RadioContext = createContext({} as RadioGroupState);
-
-/**
- * Renders a group of radio buttons with no styling. This component is not
- * designed to be user-facing, and should only be used to provide functionality.
- *
- * A group label must be included: either pass a string or markup into the
- * `label` prop, or include an `aria-label` or `aria-labelledby` attribute.
- */
-export function RadioGroup(props: RadioGroupProps) {
-  const {
-    children,
-    className,
-    value,
-    id,
-    isDisabled,
-    isReadOnly,
-    label,
-    name,
-    onChange,
-    orientation,
-    defaultValue,
-  } = props;
-
-  const [lastFocusedValue, setLastFocusedValue] = useState<string | null>(null);
-
-  const radioGroupState = {
-    isDisabled: isDisabled || false,
-    isReadOnly: isReadOnly || false,
-    lastFocusedValue,
-    name: name || '',
-    defaultValue,
-    value,
-    setLastFocusedValue,
-    onChange: onChange ? (value: string) => onChange(value) : undefined,
-  };
-
-  const state = useRadioGroupState(radioGroupState);
-  const { radioGroupProps, labelProps } = useRadioGroup(props, state);
-
-  return (
-    <StyledRadioGroup
-      {...radioGroupProps}
-      className={classNames(className, { horizontal: orientation === 'horizontal' })}
-      data-cy={props['data-cy']}
-      id={id}
-    >
-      {label && (
-        <div className="groupLabel" {...labelProps}>
-          {label}
-        </div>
-      )}
-
-      <RadioContext.Provider value={state}>{children}</RadioContext.Provider>
-    </StyledRadioGroup>
-  );
-}
-
-/**
- * A single radio button and its label; no styling is applied, and the native
- * radio button is visually hidden.
- */
-export function Radio(
-  props: AriaRadioProps & {
-    className?: string;
-    isVisuallySelected?: (selectedValue: string) => void;
-  },
-) {
-  const { children, className, isDisabled, isVisuallySelected } = props;
-  const state = useContext(RadioContext);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const { visuallyHiddenProps } = useVisuallyHidden();
-
-  const { inputProps } = useRadio(props, state, inputRef);
-  const { isFocusVisible, focusProps } = useFocusRing();
-
-  let isSelected;
-
-  if (isVisuallySelected) {
-    isSelected = isVisuallySelected(state.selectedValue as string);
-  } else {
-    isSelected = state.selectedValue === props.value;
-  }
-
-  return (
-    <label
-      className={classNames(className, {
-        disabled: isDisabled || state.isDisabled,
-        selected: isSelected,
-        focused: isFocusVisible,
-      })}
-    >
-      <input {...inputProps} {...visuallyHiddenProps} {...focusProps} ref={inputRef} />
-
-      {children}
-    </label>
-  );
-}

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

@@ -1 +0,0 @@
-export { Radio as AbstractRadio, RadioGroup as AbstractRadioGroup } from './RadioGroup';

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

@@ -1,37 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import { Meta, StoryObj } from '@storybook/react';
-
-import { SearchInput } from './SearchInput';
-
-const meta = {
-  component: SearchInput,
-  title: 'legacy/inputs/SearchInput',
-  argTypes: {},
-  args: { placeholder: 'Search field placeholder' },
-} satisfies Meta<typeof SearchInput>;
-
-export default meta;
-type Story = StoryObj<typeof SearchInput>;
-
-export const Base: Story = {};
-
-export const Border: Story = {
-  args: { inputBorder: true },
-};
-
-export const SearchIcon: Story = {
-  args: { showSearchIcon: true },
-};
-
-export const BorderAndSearchIcon: Story = {
-  args: { inputBorder: true, showSearchIcon: true },
-};
-
-export const ClearInputIcon: Story = {
-  args: { showClearInputIcon: true },
-};
-
-export const ClearInputIconWithBorder: Story = {
-  args: { showClearInputIcon: true, inputBorder: true },
-};

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

@@ -1,51 +0,0 @@
-import styled from 'styled-components';
-
-import { TYPOGRAPHY } from '@/legacy/tokens';
-
-import { inputCommon } from '../inputsCommon.styles';
-
-export const StyledSearchField = styled.div`
-  position: relative;
-  background: transparent;
-
-  label {
-    position: absolute;
-    top: 4px;
-    left: 0;
-    font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-  }
-
-  input {
-    ${inputCommon};
-    padding: 5px;
-    font-size: ${TYPOGRAPHY.fontSize.base};
-    margin-bottom: 0;
-  }
-
-  &.border.showSearchIcon label {
-    top: 7px;
-    left: 5px;
-  }
-
-  &.inputBorder {
-    border: 1px solid currentColor;
-    border-radius: 4px;
-  }
-
-  &.showSearchIcon input {
-    padding: 5px 5px 5px 25px;
-  }
-
-  &.showClearInputIcon .clear-input {
-    cursor: pointer;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-`;

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