@indico-data/design-system 2.43.1 → 2.45.0

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.stories.tsx

@@ -1,147 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React, { useRef } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ComboboxOption } from '../types';
-import { MultiCombobox } from './MultiCombobox';
-import { useCombobox } from '../useCombobox';
-import { Button, Icon } from '@/index';
-
-const options = [
-  { value: 'angie', label: 'angie - Labeler' },
-  { value: 'barry', label: 'barry - Labeler' },
-  { value: 'cecily', label: 'cecily - Labeler' },
-  { value: 'david', label: 'david - Labeler' },
-  { value: 'evelyn', label: 'evelyn - Labeler' },
-  { value: 'heather', label: 'heather - Labeler' },
-  { value: 'isaac', label: 'isaac - Labeler' },
-];
-
-const complexItems = options.map((option) => {
-  const textParts = option.label.split('-');
-
-  return {
-    email: option.value,
-    user: textParts[0].trim(),
-    role: textParts[1].trim(),
-  };
-});
-
-function StoryRender(props: any) {
-  const selectEl = useRef(null);
-  const { clearValue } = useCombobox(selectEl);
-
-  return (
-    <>
-      <MultiCombobox ref={selectEl} {...props} />
-      <Button
-        iconName="trash"
-        onClick={() => clearValue()}
-        ariaLabel="clear selections"
-        className="mt-4"
-      >
-        clear selections
-      </Button>
-    </>
-  );
-}
-
-const meta = {
-  component: MultiCombobox,
-  title: 'legacy/dropdowns/MultiCombobox',
-  argTypes: {
-    options: { control: { disable: true } },
-    defaultValue: { control: { disable: true } },
-  },
-  args: {
-    options,
-    placeholder: 'Select Team Member(s)',
-    onChange: (selectedOptions: ComboboxOption[]) => console.info(selectedOptions),
-  },
-} satisfies Meta<typeof MultiCombobox>;
-
-export default meta;
-type Story = StoryObj<typeof MultiCombobox>;
-
-export const Normal: Story = {
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Open: Story = {
-  args: {
-    menuIsOpen: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    loading: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const WithSelections: Story = {
-  args: {
-    defaultValue: [options[0], options[1]],
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-function customOption(props: { data: any; isFocused?: boolean; isDisabled?: boolean }) {
-  const { user, role } = props.data;
-
-  return (
-    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-      <div>{user}</div>
-      <div>
-        <Icon style={{ color: '#ffa', marginRight: '0.5em', marginBottom: '-3px' }} name="fa-tag" />{' '}
-        {role}
-      </div>
-    </div>
-  );
-}
-export const WithCustomOptionComponent: Story = {
-  args: {
-    options: complexItems,
-    customOption,
-    customOptionLabel: (option: any) => `${option.email}`,
-    customOptionValue: (option: any) => `${option.email}`,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const WithDataCyAttributes: Story = {
-  args: {
-    'data-cy': 'cypressSelector',
-    multiValueProps: {
-      'data-cy': 'multiValueSelector',
-    },
-    optionProps: {
-      'data-cy': 'optionSelector',
-    },
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.styles.ts

@@ -1,91 +0,0 @@
-import styled from 'styled-components';
-import ReactSelect from 'react-select';
-
-import { COLORS } from '@/legacy/tokens';
-import { basicDefaults } from '../commonStyles';
-
-const spacingCommon = '10px';
-
-export const StyledMultiCombobox = styled(ReactSelect)`
-  ${basicDefaults};
-
-  background-color: ${COLORS.clay};
-
-  .combobox__control,
-  .combobox__menu {
-    background-color: inherit;
-    border: 1px solid ${COLORS.comet};
-    border-radius: 4px;
-  }
-
-  // overall component container
-  .combobox__control {
-    :hover {
-      border-color: ${COLORS.baliHai};
-    }
-  }
-
-  .combobox__control--is-disabled {
-    :hover {
-      border-color: ${COLORS.comet};
-    }
-  }
-
-  // the dropdown list container
-  .combobox__menu {
-    margin-top: 3px;
-  }
-
-  // text input placeholder text
-  .combobox__placeholder {
-    margin-left: calc(${spacingCommon} + 2px); // ensures text doesn’t overlap with input cursor
-    color: ${COLORS.lightFontColor};
-  }
-
-  // container component for the text input
-  .combobox__input-container {
-    margin-left: ${spacingCommon};
-  }
-
-  // container for selected items (visually inside input)
-  .combobox__value-container {
-    padding: 0;
-    border-radius: inherit;
-  }
-
-  // each selected item (pill)
-  .combobox__multi-value {
-    height: 30px;
-
-    color: ${COLORS.defaultFontColor};
-    background-color: ${COLORS.oxfordBlue};
-    border-radius: 2px;
-
-    > * {
-      color: inherit;
-      margin-top: auto;
-      margin-bottom: auto;
-    }
-
-    &__remove {
-      margin-right: ${spacingCommon};
-      margin-left: 4px;
-      padding: 0;
-
-      :hover {
-        cursor: pointer;
-        color: ${COLORS.white};
-        background-color: transparent;
-      }
-    }
-
-    &__label {
-      padding-left: ${spacingCommon};
-    }
-  }
-
-  // caret button to open/close menu
-  .combobox__dropdown-indicator {
-    border-radius: inherit;
-  }
-`;

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.tsx

@@ -1,123 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-import { components } from 'react-select';
-
-import { PermafrostComponent } from '@/types';
-import { Icon } from '@/components';
-import { addCustomProps } from '../utils';
-import type { ComboboxProps, ComboboxOption } from '../types';
-
-import { StyledMultiCombobox } from './MultiCombobox.styles';
-
-type Props = PermafrostComponent &
-  ComboboxProps & {
-    /**
-     * MultiValue is a selected option in the input area
-     */
-    multiValueProps?: {
-      'data-cy': string;
-    };
-    optionProps?: {
-      'data-cy': string;
-    };
-    // validationErrors?: string[];
-    values?: ComboboxOption[];
-    onChange: (selectedOption: ComboboxOption[]) => void;
-  };
-
-/**
- * Multiselect combobox component. If selections are not bound to outside state
- * via the `value` prop, you will need to import and use the `useCombobox` hook
- * in order to clear its selected value .
- *
- * @see [useCombobox]{@link import('useCombobox').useCombobox}
- */
-export const MultiCombobox = React.forwardRef((props: Props, ref: any) => {
-  const {
-    className,
-    closeMenuOnSelect,
-    customOption,
-    customOptionLabel,
-    customOptionValue,
-    defaultValue,
-    disabled,
-    id,
-    loading,
-    menuIsOpen,
-    multiValueProps = {},
-    noOptionsMessage,
-    onChange,
-    optionProps = {},
-    options,
-    placeholder,
-    // validationErrors,
-    values,
-  } = props;
-
-  const MultiValue = (props: any) => {
-    return <components.MultiValue {...props} />;
-  };
-
-  const MultiValueRemove = (props: any) => {
-    return (
-      <components.MultiValueRemove {...props}>
-        <Icon name="x-close" ariaLabel="remove" size="xs" />
-      </components.MultiValueRemove>
-    );
-  };
-
-  // handles a custom option component generator, if passed in
-  const Option = (props: any) => {
-    if (customOption) {
-      return (
-        <components.Option {...props} {...optionProps}>
-          {customOption(props)}
-        </components.Option>
-      );
-    }
-
-    return <components.Option {...props} {...optionProps} />;
-  };
-
-  const ComboboxComponent = () => (
-    <StyledMultiCombobox
-      aria-label={props['aria-label']}
-      aria-labelledby={props['aria-labelledby']}
-      ref={ref}
-      className={className}
-      classNamePrefix="combobox"
-      closeMenuOnSelect={closeMenuOnSelect}
-      components={{
-        MultiValue: addCustomProps(MultiValue, multiValueProps),
-        MultiValueRemove,
-        Option: addCustomProps(Option, optionProps),
-      }}
-      defaultValue={defaultValue}
-      getOptionLabel={customOptionLabel}
-      getOptionValue={customOptionValue}
-      id={id}
-      isClearable={false}
-      isDisabled={disabled}
-      isMulti
-      isLoading={loading}
-      menuIsOpen={menuIsOpen}
-      noOptionsMessage={() => noOptionsMessage}
-      onChange={onChange as any}
-      options={options}
-      placeholder={placeholder}
-      // validationErrors={validationErrors}
-      value={values}
-    />
-  );
-
-  if (props['data-cy']) {
-    return (
-      <div data-cy={props['data-cy']}>
-        <ComboboxComponent />
-      </div>
-    );
-  }
-
-  return <ComboboxComponent />;
-});

package/src/legacy/components/dropdowns/MultiCombobox/index.ts

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

package/src/legacy/components/dropdowns/Select/Select.stories.tsx

@@ -1,54 +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 { Select } from './Select';
-
-const meta = {
-  component: Select,
-  title: 'legacy/dropdowns/Select',
-  argTypes: {},
-  args: {
-    onChange: () => {},
-    options: [
-      { name: 'Andy', value: 'andy' },
-      { name: 'Jackson', value: 'jackson' },
-      { name: 'Mike', value: 'mike' },
-    ],
-  },
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof Select>;
-
-export const Base: Story = {};
-
-export const InitialText: Story = {
-  args: {
-    initialText: 'Select Name',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-  },
-};
-
-export const Light: Story = {
-  args: {
-    variant: 'light',
-  },
-  parameters: {
-    backgrounds: {
-      default: 'light',
-      values: [{ name: 'light', value: '#fff' }],
-    },
-  },
-};

package/src/legacy/components/dropdowns/Select/Select.styles.ts

@@ -1,73 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS, FONT_SIZE } from '@/legacy/tokens';
-
-export const StyledSelect = styled.div`
-  display: inline-block;
-
-  .Select__container {
-    position: relative;
-    z-index: 0;
-
-    select {
-      color: ${COLORS.defaultFontColor};
-      appearance: none;
-      background: transparent;
-      border: none;
-      z-index: 1;
-
-      &:focus {
-        outline: 0;
-      }
-    }
-
-    option {
-      color: ${COLORS.black};
-
-      &:not(:checked) {
-        color: ${COLORS.black};
-      }
-    }
-
-    .chevron {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: -1;
-    }
-
-    &.light {
-      select {
-        color: ${COLORS.black};
-      }
-
-      .chevron {
-        color: ${COLORS.black};
-      }
-    }
-
-    &.small {
-      select {
-        font-size: ${FONT_SIZE.base};
-        padding: 0;
-        padding-right: 15px;
-      }
-
-      .chevron {
-        right: 0px;
-      }
-    }
-
-    &.medium {
-      font-size: ${FONT_SIZE.subheadSmall};
-
-      select {
-        padding: 7px 35px 8px 15px;
-      }
-
-      .chevron {
-        right: 12px;
-      }
-    }
-  }
-`;

package/src/legacy/components/dropdowns/Select/Select.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-
-import { v4 as uuid } from 'uuid';
-
-import { Icon } from '@/components';
-import { PermafrostComponent } from '@/types';
-
-import { StyledSelect } from './Select.styles';
-import classNames from 'classnames';
-import { ComboboxSize, ComboboxVariant } from '../types';
-
-type Props = PermafrostComponent & {
-  disabled?: boolean;
-  initialText?: string;
-  options: { name: string; value: string | number }[];
-  size?: ComboboxSize;
-  style?: object;
-  value?: string | number;
-  variant?: ComboboxVariant;
-  onChange(e: React.ChangeEvent<HTMLSelectElement>): void;
-  onClick?(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
-};
-
-export const Select = (props: Props) => {
-  const {
-    id,
-    className,
-    disabled,
-    initialText,
-    onChange,
-    options,
-    size = 'medium',
-    style = {},
-    value,
-    variant,
-    onClick,
-  } = props;
-
-  const selectId = uuid();
-
-  return (
-    <StyledSelect className={className} data-cy={props['data-cy']} id={id} style={style}>
-      <div
-        className={classNames('Select__container', size, variant)}
-        onClick={(e) => (onClick ? onClick(e) : null)}
-      >
-        <select onChange={onChange} value={value} disabled={disabled} id={selectId}>
-          {initialText && (
-            <option disabled value="">
-              {initialText}
-            </option>
-          )}
-
-          {options.map((o) => {
-            const key = uuid();
-
-            return (
-              <option key={key} value={o.value}>
-                {o.name}
-              </option>
-            );
-          })}
-        </select>
-        {/* TODO: Fix this size mismatch when bringing Select into DS */}
-        <Icon className="chevron" name="chevron-down" size={size === 'small' ? 'xs' : 'sm'} />
-      </div>
-    </StyledSelect>
-  );
-};

package/src/legacy/components/dropdowns/Select/index.ts

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

package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.stories.tsx

@@ -1,61 +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 { ComboboxOption } from '../types';
-import { SingleCombobox } from './SingleCombobox';
-
-const options = [
-  { value: 'due-date', label: 'Due Date' },
-  { value: 'invoice-number', label: 'Invoice Number' },
-  { value: 'invoice', label: 'Invoice' },
-  { value: 'line-item-value', label: 'Line Item Value' },
-  { value: 'line-item', label: 'Line Item' },
-  { value: 'vendor', label: 'Vendor' },
-];
-
-const meta = {
-  component: SingleCombobox,
-  title: 'legacy/dropdowns/SingleCombobox',
-  argTypes: {},
-  args: {
-    options,
-    placeholder: 'Select Label to add to Label Group',
-    onChange: (selectedOption: ComboboxOption) => console.info(selectedOption),
-  },
-} satisfies Meta<typeof SingleCombobox>;
-
-export default meta;
-type Story = StoryObj<typeof SingleCombobox>;
-
-export const Normal: Story = {
-  args: {
-    dropdownIndicatorProps: {
-      'data-cy': 'dropdownIndicatorSelector',
-    },
-  },
-};
-
-export const Open: Story = {
-  args: {
-    menuIsOpen: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const WithDataCyAttributes: Story = {
-  args: {
-    'data-cy': 'cypressSelector',
-    dropdownIndicatorProps: {
-      'data-cy': 'dropdownIndicatorSelector',
-    },
-    optionProps: {
-      'data-cy': 'optionSelector',
-    },
-  },
-};

package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.styles.ts

@@ -1,56 +0,0 @@
-import styled from 'styled-components';
-
-import ReactSelect from 'react-select';
-
-import { COLORS } from '@/legacy/tokens';
-
-import { basicDefaults } from '../commonStyles';
-
-export const StyledSingleCombobox = styled(ReactSelect)`
-  ${basicDefaults};
-
-  // overall component container
-  .combobox__control {
-    border-radius: 0;
-
-    background-color: transparent;
-
-    border-top: none;
-    border-right: none;
-    border-bottom: 1px solid ${COLORS.defaultFontColor};
-    border-left: none;
-
-    :hover {
-      border-color: ${COLORS.lightFontColor};
-    }
-  }
-
-  .combobox__control--is-disabled {
-    :hover {
-      border-color: ${COLORS.defaultFontColor};
-    }
-  }
-
-  // the dropdown list container
-  .combobox__menu {
-    background-color: ${COLORS.clay};
-    border: 1px solid ${COLORS.mediumGray};
-  }
-
-  // the dropdown list
-  .combobox__menu-list {
-    border-radius: inherit;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  // text input placeholder text
-  .combobox__placeholder {
-    color: ${COLORS.defaultFontColor};
-  }
-
-  // selected item text inside input
-  .combobox__single-value {
-    color: ${COLORS.lightFontColor};
-  }
-`;