@indico-data/design-system 1.0.1

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

@@ -0,0 +1,69 @@
+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>
+
+        <Icon className="chevron" name="chevron-down" size={size === 'small' ? [10] : [12]} />
+      </div>
+    </StyledSelect>
+  );
+};

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

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

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

@@ -0,0 +1,61 @@
+// 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: '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/components/dropdowns/SingleCombobox/SingleCombobox.styles.ts

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+import ReactSelect from 'react-select';
+
+import { COLORS } from '@/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};
+  }
+`;

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

@@ -0,0 +1,103 @@
+import React from 'react';
+
+import { components } from 'react-select';
+
+import { Icon } from '@/components';
+import { PermafrostComponent } from '@/types';
+import { addCustomProps } from '../utils';
+
+import { StyledSingleCombobox } from './SingleCombobox.styles';
+
+import type { ComboboxProps, ComboboxOption } from '../types';
+
+type Props = PermafrostComponent &
+  ComboboxProps & {
+    dropdownIndicatorProps?: {
+      'data-cy': string;
+    };
+    optionProps?: {
+      'data-cy': string;
+    };
+    // validationErrors?: string[];
+    value?: ComboboxOption;
+    onChange: (selectedOption: ComboboxOption) => void;
+  };
+
+/**
+ * Combobox component to select a single option. 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 SingleCombobox = React.forwardRef((props: Props, ref: any) => {
+  const {
+    className,
+    closeMenuOnSelect,
+    customOptionLabel,
+    customOptionValue,
+    defaultValue,
+    disabled,
+    dropdownIndicatorProps = {},
+    id,
+    menuIsOpen,
+    noOptionsMessage,
+    onChange,
+    optionProps = {},
+    options,
+    placeholder,
+    // validationErrors,
+    value,
+  } = props;
+
+  const DropdownIndicator = (props: any) => {
+    return (
+      <components.DropdownIndicator {...props}>
+        <Icon name="fa-caret-down" ariaLabel="open dropdown" size={[14]} />
+      </components.DropdownIndicator>
+    );
+  };
+
+  const Option = (props: any) => {
+    return <components.Option {...props} {...optionProps} />;
+  };
+
+  const ComboboxComponent = () => (
+    <StyledSingleCombobox
+      aria-label={props['aria-label']}
+      aria-labelledby={props['aria-labelledby']}
+      ref={ref}
+      className={className}
+      classNamePrefix="combobox"
+      closeMenuOnSelect={closeMenuOnSelect}
+      components={{
+        DropdownIndicator: addCustomProps(DropdownIndicator, dropdownIndicatorProps),
+        Option: addCustomProps(Option, optionProps),
+      }}
+      defaultValue={defaultValue}
+      getOptionLabel={customOptionLabel}
+      getOptionValue={customOptionValue}
+      id={id}
+      isClearable={false}
+      isDisabled={disabled}
+      isMulti={false}
+      menuIsOpen={menuIsOpen}
+      noOptionsMessage={() => noOptionsMessage}
+      onChange={onChange}
+      options={options}
+      placeholder={placeholder}
+      // validationErrors={validationErrors}
+      value={value}
+    />
+  );
+
+  if (props['data-cy']) {
+    return (
+      <div data-cy={props['data-cy']}>
+        <ComboboxComponent />
+      </div>
+    );
+  }
+
+  return <ComboboxComponent />;
+});

package/src/components/dropdowns/SingleCombobox/index.ts

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

package/src/components/dropdowns/commonStyles.ts

@@ -0,0 +1,65 @@
+import { css } from 'styled-components';
+
+import { COLORS, TYPOGRAPHY } from '@/tokens';
+
+export const basicDefaults = css`
+  font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
+  color: ${COLORS.lightFontColor};
+
+  &.combobox--is-disabled {
+    pointer-events: auto;
+    opacity: 0.6;
+  }
+
+  // overall component container
+  .combobox__control {
+    box-shadow: none;
+    min-height: unset;
+  }
+
+  .combobox__control--is-disabled {
+    cursor: not-allowed;
+  }
+
+  // container component for the text input
+  .combobox__input-container {
+    color: ${COLORS.defaultFontColor};
+    cursor: text;
+
+    input {
+      margin-bottom: 0;
+      caret-color: ${COLORS.white};
+    }
+  }
+
+  // the dropdown list
+  .combobox__menu-list {
+    border-radius: inherit;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  // each available item in the dropdown list
+  .combobox__option {
+    background-color: inherit;
+
+    :hover,
+    &--is-focused {
+      background-color: ${COLORS.oxfordBlue};
+    }
+  }
+
+  // normally displays as a thin vertical line before the buttons on the far right
+  .combobox__indicator-separator {
+    display: none;
+  }
+
+  // caret button to open/close menu
+  .combobox__dropdown-indicator {
+    color: ${COLORS.lightFontColor};
+
+    :hover {
+      color: ${COLORS.white};
+    }
+  }
+`;

package/src/components/dropdowns/index.ts

@@ -0,0 +1,4 @@
+export { BorderSelect } from './BorderSelect';
+export { Select } from './Select';
+export { MultiCombobox } from './MultiCombobox';
+export { SingleCombobox } from './SingleCombobox';

package/src/components/dropdowns/types.ts

@@ -0,0 +1,45 @@
+export type ComboboxProps = {
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  className?: string;
+  closeMenuOnSelect?: boolean;
+  /**
+   * Function to generate a custom React component for every available list `Option`
+   * @see {@link https://react-select.com/props#option}
+   */
+  customOption?: (props: any) => JSX.Element;
+  /**
+   * Customize the text to appear in selected items.
+   *
+   * @example (option) => `${option.value}`
+   */
+  customOptionLabel?(option: any): string;
+  /**
+   * Customize the value for the Combobox to use. Defaults to `value`
+   *
+   * @example (option) => `${option.id}`
+   */
+  customOptionValue?(option: any): string;
+  defaultValue?: any[];
+  disabled?: boolean;
+  loading?: boolean;
+  menuIsOpen?: boolean;
+  /**
+   * Custom text to show if there are no more items available to select
+   */
+  noOptionsMessage?: string;
+  /**
+   * Combobox defaults to expect { label: string; value: string; } at minimum - use `customOptionLabel` and `customOptionValue` props to change
+   */
+  options: ComboboxOption[];
+  /**
+   * Input placeholder text
+   */
+  placeholder?: string;
+};
+
+// ComboboxOption is an object that needs to contain prop label, along with any other values you need returned onChange
+export type ComboboxOption = { label?: string; [key: string]: any };
+
+export type ComboboxSize = 'small' | 'medium';
+export type ComboboxVariant = 'default' | 'light';

package/src/components/dropdowns/useCombobox.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+
+/**
+ * @filename useCombobox.ts
+ * Allows access to the internals of a MultiCombobox component. For example, a discrete
+ * button to clear all selected values.
+ *
+ * In your component’s file, import this hook and create a `ref` to the component.
+ * Then, pass the ref into this hook.
+ *
+ * @example
+ * const comboboxEl = useRef(null);
+ * const { clearValue } = useCombobox(comboboxEl);
+ *
+ * <MultiCombobox ref={comboboxEl} ... />
+ *
+ * const handleSubmit = () => {
+ *   clearValue();
+ * };
+ *
+ * @see {@link https://react-select.com/props}
+ * @see {@link https://github.com/JedWatson/react-select/discussions/4352}
+ */
+export function useCombobox(comboboxEl: React.RefObject<any>) {
+  const clearValue = () => {
+    if (comboboxEl?.current) {
+      comboboxEl.current.clearValue();
+    }
+  };
+
+  return { clearValue };
+}

package/src/components/dropdowns/utils.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ * Adds custom props to a react-select component
+ *
+ * @example
+ * type Props = ComboboxProps & {
+ *   multiValueProps: {
+ *     'data-cy': string;
+ *   };
+ *
+ * <StyledMultiCombobox
+ *   ...
+ *   components={{
+ *    MultiValue: addCustomProps(MultiValue, { ...multiValueProps }),
+ *    ...
+ *
+ * @see {@link https://gist.github.com/MikaelCarpenter/1fe226967b00eea82e6a4760b244ada1}
+ */
+export const addCustomProps =
+  (Component: any, customProps: { [key: string]: string }) => (props: any) => {
+    return (
+      <Component {...props} innerProps={Object.assign({}, props.innerProps, { ...customProps })} />
+    );
+  };

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './buttons';
+export * from './dropdowns';
+export * from './inputs';
+export * from './Icon';
+export * from './loading-indicators';
+export * from './basic-section';
+export * from './user-feedback';
+export * from './Accordion';
+export * from './Pagination';

package/src/components/inputs/EditableInput/EditableInput.stories.tsx

@@ -0,0 +1,26 @@
+// 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 { EditableInput } from './EditableInput';
+
+const meta = {
+  component: EditableInput,
+  title: 'inputs/EditableInput',
+  args: {
+    children: <h2>Input-Value</h2>,
+  },
+  argTypes: {},
+} satisfies Meta<typeof EditableInput>;
+
+export default meta;
+type Story = StoryObj<typeof EditableInput>;
+
+export const Normal: Story = {};
+
+export const MinLengthEight: Story = {
+  args: {
+    minLength: 8,
+  },
+};

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const transitionDuration = '200ms';
+
+export const StyledEditableInput = styled.span`
+  &:hover .pencil-icon {
+    opacity: 1;
+  }
+
+  [role='textbox'] > * {
+    display: inline-block;
+  }
+
+  .pencil-icon {
+    margin-left: 0.25em;
+    margin-right: 3px;
+    opacity: 0;
+
+    transition: opacity ${transitionDuration};
+  }
+`;

package/src/components/inputs/EditableInput/EditableInput.tsx

@@ -0,0 +1,103 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
+
+// todo: how to handle/inform user when length is too short?
+
+import classNames from 'classnames';
+
+import { stringUtils } from '@indico-data/utils';
+
+import { Icon } from '@/components';
+import { PermafrostComponent } from '@/types';
+
+import { StyledEditableInput } from './EditableInput.styles';
+
+type Props = PermafrostComponent & {
+  children: React.ReactNode | string;
+  minLength?: number;
+  onUpdate?(newValue: string): void;
+};
+
+/**
+ * Wrapper component which enables text editing in place directly on a child component,
+ * element, or plain text.
+ */
+export function EditableInput(props: Props) {
+  const { children, className, minLength = 3, onUpdate } = props;
+
+  const [initialValue, setInitialValue] = useState('');
+
+  // used as unique css class name
+  const { current: id } = useRef(stringUtils.createRandomString());
+
+  const editableEl = useRef() as MutableRefObject<HTMLSpanElement>;
+
+  const handleBlur = () => {
+    const node = editableEl.current.children[0] as HTMLElement;
+    const currentValue = node.innerText || editableEl.current.innerText;
+
+    if (minLength && currentValue.length < minLength) {
+      // revert to last good value
+
+      if (node) {
+        node.textContent = initialValue;
+      } else {
+        editableEl.current.textContent = initialValue;
+      }
+    } else if (currentValue !== initialValue) {
+      // allow updated value
+      setInitialValue(currentValue);
+
+      if (onUpdate) onUpdate(currentValue);
+    }
+  };
+
+  const handleKeypress = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      editableEl.current.blur();
+    }
+  };
+
+  // Records the initial value for the text, in order to check length and compare to current text.
+  // Also ensures the size of the icon is relative to the text inside the editable element (which
+  // is the icon’s *sibling*, not ancestor).
+  useEffect(() => {
+    const style = document.createElement('style');
+    const node = editableEl.current.children[0] as HTMLElement;
+    document.head.appendChild(style);
+
+    if (node) {
+      const { fontSize } = getComputedStyle(node);
+
+      style?.sheet?.insertRule(`.${id} .pencil-icon { font-size: calc(${fontSize} * 0.8) }`);
+
+      setInitialValue(node.innerText);
+    } else {
+      style?.sheet?.insertRule(`.${id} .pencil-icon { font-size: 0.8em }`);
+      setInitialValue(editableEl.current.innerText);
+    }
+  }, []);
+
+  return (
+    <StyledEditableInput
+      className={classNames('EditableInput-container', id, className)}
+      data-cy={props['data-cy']}
+      id={props.id}
+    >
+      <span
+        role="textbox"
+        tabIndex={0}
+        contentEditable
+        suppressContentEditableWarning={true}
+        ref={editableEl}
+        onKeyDown={handleKeypress}
+        onBlur={handleBlur}
+      >
+        {children}
+      </span>
+
+      <Icon name="fa-pencil-alt" className="pencil-icon" />
+    </StyledEditableInput>
+  );
+}

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

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