@indico-data/design-system 1.0.1

package/src/components/dropdowns/BorderSelect/BorderSelect.styles.ts

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+
+import { COLORS, FONT_SIZE } from '@/tokens';
+
+export const StyledSelect = styled.div`
+  &.horizontal {
+    > * {
+      display: inline-block;
+    }
+
+    > label {
+      margin-right: 12px;
+    }
+  }
+
+  label {
+    line-height: 1.2;
+    margin-bottom: 14px;
+    color: ${COLORS.lightFontColor};
+  }
+
+  .select-container {
+    position: relative;
+    max-width: 300px;
+
+    select {
+      background: transparent;
+      border: 1px solid ${COLORS.baliHai};
+      width: 100%;
+      max-width: 300px;
+      color: ${COLORS.lightFontColor};
+      font-size: ${FONT_SIZE.base};
+      border-radius: 4px;
+      padding: 7px 30px 8px 15px;
+      appearance: none;
+      position: relative;
+      z-index: 2;
+
+      &:focus {
+        outline: 0;
+      }
+
+      &::-ms-expand {
+        display: none;
+      }
+    }
+
+    option {
+      color: ${COLORS.black};
+
+      &:not(:checked) {
+        color: ${COLORS.black};
+      }
+    }
+
+    .selectCaret {
+      display: inline-block;
+      right: 12px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 1;
+    }
+  }
+`;
+
+export const StyledValidationError = styled.div`
+  margin-top: 13px;
+
+  p {
+    color: ${COLORS.curiousBlue};
+  }
+`;

package/src/components/dropdowns/BorderSelect/BorderSelect.tsx

@@ -0,0 +1,85 @@
+// 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 '../../Icon';
+import { PermafrostComponent } from '@/types';
+
+import { StyledSelect, StyledValidationError } from './BorderSelect.styles';
+
+type Props = PermafrostComponent & {
+  defaultValue?: string;
+  disabled?: boolean;
+  horizontal?: boolean;
+  initialText?: string;
+  label?: string;
+  onChange(e: React.ChangeEvent<HTMLSelectElement>): void;
+  options: { name: string; value: string | number }[];
+  style?: object;
+  value?: string | number;
+  validationErrors?: string[];
+};
+
+export const BorderSelect = (props: Props) => {
+  const {
+    className = '',
+    disabled,
+    horizontal,
+    id,
+    initialText,
+    label,
+    onChange,
+    options,
+    style = {},
+    value,
+    validationErrors,
+  } = props;
+
+  const selectId = uuid();
+
+  return (
+    <StyledSelect
+      className={classNames('Select', { horizontal }, className)}
+      data-cy={props['data-cy']}
+      id={id}
+      style={style}
+    >
+      {label && <label htmlFor={selectId}>{label}</label>}
+
+      <div className="select-container">
+        <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 name="fa-caret-down" className="selectCaret" />
+      </div>
+      {validationErrors ? (
+        <StyledValidationError>
+          {validationErrors.map((err, i) => {
+            return (
+              <p className={`error-${err}`} key={i}>
+                {err}
+              </p>
+            );
+          })}
+        </StyledValidationError>
+      ) : null}
+    </StyledSelect>
+  );
+};

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

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

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

@@ -0,0 +1,146 @@
+// 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 { Icon, IconButton } from '@/components';
+import { ComboboxOption } from '../types';
+import { MultiCombobox } from './MultiCombobox';
+import { useCombobox } from '../useCombobox';
+
+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) {
+  const selectEl = useRef(null);
+  const { clearValue } = useCombobox(selectEl);
+
+  return (
+    <>
+      <MultiCombobox ref={selectEl} {...props} />
+      <IconButton
+        adjustAlignment={0}
+        iconName="trash"
+        onPress={() => clearValue()}
+        label="clear selections"
+        style={{ marginTop: '1em' }}
+      />
+    </>
+  );
+}
+
+const meta = {
+  component: MultiCombobox,
+  title: '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/components/dropdowns/MultiCombobox/MultiCombobox.styles.ts

@@ -0,0 +1,89 @@
+import styled from 'styled-components';
+import ReactSelect from 'react-select';
+
+import { COLORS } from '@/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 {
+      padding-right: ${spacingCommon};
+
+      :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/components/dropdowns/MultiCombobox/MultiCombobox.tsx

@@ -0,0 +1,123 @@
+// 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 '../../Icon';
+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={[10]} />
+      </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}
+      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/components/dropdowns/MultiCombobox/index.ts

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

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

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

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