@indico-data/design-system 1.0.48 → 1.0.49

package/lib/tokens/colors.d.ts

@@ -18,6 +18,7 @@ export declare const allColors: {
     readonly bouqet: "#a35c9a";
     readonly brick: "#c62828";
     readonly brightDusk: "#efebf7";
+    readonly britishShorthair: "#4b94eb";
     readonly brown: "#785349";
     readonly candyCorn: "#fcef4d";
     readonly carnation: "#ff8adf";
@@ -28,6 +29,7 @@ export declare const allColors: {
     readonly charcoal: "#474b4b";
     readonly chartreuse: "#34ff01";
     readonly clay: "#283243";
+    readonly clementine: "#F16E00";
     readonly cocoaBean: "#5c1200";
     readonly comet: "#5a6982";
     readonly cornflower: "#2060ff";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -19,89 +19,92 @@
     "**/*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@indico-data/utils": "^0.0.5",
+    "@react-aria/radio": "^3.10.0",
+    "@react-aria/visually-hidden": "^3.8.8",
     "@react-types/button": "^3.9.1",
     "@react-types/checkbox": "^3.6.0",
     "@react-types/radio": "^3.7.0",
-    "classnames": "^2.3.2",
-    "date-fns": "^2.30.0",
-    "html-webpack-plugin": "^5.5.3",
+    "classnames": "^2.5.1",
+    "date-fns": "^3.3.1",
+    "html-webpack-plugin": "^5.6.0",
+    "react-aria-components": "^1.0.1",
     "react-modal": "^3.16.1",
+    "react-stately": "^3.29.1",
     "simple-zustand-devtools": "^1.1.0",
-    "svgo": "^3.0.3",
+    "svgo": "^3.2.0",
     "tslib": "^2.6.2",
     "uuid": "^9.0.1",
-    "webpack": "^5",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
+    "@babel/core": "^7.23.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-env": "^7.23.8",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@react-aria/button": "^3.9.0",
-    "@react-aria/focus": "^3.15.0",
+    "@react-aria/button": "^3.9.1",
+    "@react-aria/focus": "^3.16.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-docs": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addon-styling": "^2.0.2-next.4",
-    "@storybook/addon-styling-webpack": "^0.0.5",
-    "@storybook/addon-themes": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
-    "@storybook/test": "^7.6.0-alpha.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-docs": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-styling-webpack": "^0.0.6",
+    "@storybook/addon-themes": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
+    "@storybook/test": "^7.6.10",
     "@storybook/test-runner": "^0.16.0",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.2.1",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.11",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/react-modal": "^3",
-    "@types/styled-components": "^5.1.30",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-modal": "^3.16.3",
+    "@types/styled-components": "^5.1.34",
     "@types/uuid": "^9.0.7",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
     "babel-preset-react-app": "^10.0.1",
-    "eslint": "^8.53.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.0",
-    "postcss": "^8.4.31",
-    "prettier": "3.1.0",
+    "postcss": "^8.4.33",
+    "prettier": "3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.20.1",
+    "react-router-dom": "^6.21.3",
     "react-select": "^5.8.0",
-    "rollup": "^4.6.1",
+    "rollup": "^4.9.6",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.5.3",
-    "styled-components": "^6.1.1",
-    "ts-jest": "^29.1.2",
+    "storybook": "^7.6.10",
+    "styled-components": "^6.1.8",
     "ts-loader": "^9.5.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

package/src/components/Wizard/Wizard.tsx

@@ -122,7 +122,6 @@ export function Wizard(props: Props) {
 
   const handleNextPress = () => {
     const allowNext = onNextPress ? onNextPress() : true;
-    debugger;
 
     if (!allowNext) {
       return;

package/src/components/WizardWithSidebar/WizardWithSidebar.tsx

@@ -255,6 +255,7 @@ export function WizardWithSidebar(props: Props) {
         open={openCancelConfirm}
         clickOutsideHandler={() => setOpenCancelConfirm(false)}
         responseHandler={handleCancelRequest}
+        width={430}
       />
     </StyledWizardWithSidebar>
   );

package/src/components/index.ts

@@ -3,7 +3,16 @@ export { Section, SectionBlock, SectionBody, SectionHeader, SectionTable } from
 export { Button, IconButton } from './buttons';
 export { BorderSelect, MultiCombobox, Select, SingleCombobox } from './dropdowns';
 export { Icon, faIcons, indicons } from './Icon';
-export { EditableInput, NumberInput, SearchInput, TextInput } from './inputs';
+export {
+  EditableInput,
+  NumberInput,
+  SearchInput,
+  TextInput,
+  Radio,
+  RadioGroup,
+  AbstractRadio,
+  AbstractRadioGroup,
+} from './inputs';
 export {
   BarSpinner,
   CirclePulse,

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

@@ -0,0 +1,84 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { COLORS } from '@/tokens';
+import { Radio, RadioGroup } from './RadioButtons';
+
+const meta = {
+  component: RadioGroup,
+  title: 'inputs/RadioButtons',
+  args: {},
+  tags: ['autodocs'],
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+
+function StoryRender(props: any) {
+  const [value, setValue] = useState<string>('andy');
+  return (
+    <RadioGroup
+      {...props}
+      defaultValue="andy"
+      value={value}
+      onChange={(value: string) => setValue(value)}
+    >
+      <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 CustomColors: Story = {
+  args: {
+    label: 'Select a person:',
+    color: `${COLORS.red}`,
+    labelColor: `${COLORS.black}`,
+    hoverAndSelectedColor: `${COLORS.blueDarknut}`,
+    focusRingColor: `${COLORS.blueDarknut}`,
+  },
+  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/components/inputs/RadioButtons/RadioButtons.styles.ts

@@ -0,0 +1,82 @@
+import styled from 'styled-components';
+
+import { ANIMATION, COLORS, SPACING } from '@/tokens';
+import { AbstractRadioGroup } from '../RadioGroup';
+
+const radioSize = '20px';
+const strokeWidth = 2;
+
+export const StyledRadioGroup = styled(AbstractRadioGroup)<{
+  hideFocusRing: boolean;
+  color: string;
+  labelColor: string;
+  hoverAndSelectedColor: string;
+  focusRingColor: string;
+}>`
+  color: ${(props) => props.color || 'currentColor'};
+
+  .groupLabel {
+    margin-bottom: ${SPACING.sm};
+    font-size: 16px;
+    color: ${(props) => props.labelColor || COLORS.lightGray};
+  }
+
+  // this is the Radio component; something gets cranky and styles end up
+  // not applied if we create a separate StyledComponent for Radio.
+  label {
+    display: flex;
+    align-items: center;
+
+    margin-bottom: ${SPACING.sm};
+
+    &.disabled {
+      cursor: not-allowed;
+    }
+
+    &:not(.disabled) {
+      cursor: pointer;
+
+      &.selected,
+      &:hover {
+        color: ${(props) => props.hoverAndSelectedColor || COLORS.white};
+      }
+    }
+
+    transition: color ${ANIMATION.duration} ${ANIMATION.timing};
+
+    svg {
+      width: ${radioSize};
+      height: ${radioSize};
+
+      margin-top: 1px;
+      margin-right: ${SPACING.sm};
+    }
+
+    .radioCircle {
+      stroke-width: ${strokeWidth};
+    }
+
+    .radioDot {
+      opacity: 0;
+    }
+
+    .focusRing {
+      opacity: 0;
+
+      stroke: ${(props) => props.focusRingColor || COLORS.curiousBlue};
+      stroke-width: ${strokeWidth};
+    }
+
+    &.selected {
+      .radioDot {
+        opacity: 1;
+      }
+    }
+
+    &.focused {
+      .focusRing {
+        opacity: ${(props) => (props.hideFocusRing ? 0 : 1)};
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,61 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+import { AriaRadioProps, RadioGroupProps } from '@react-types/radio';
+
+import { AbstractRadio } from '@/components';
+import { PermafrostComponent } from '@/types';
+import { StyledRadioGroup } from './RadioButtons.styles';
+
+type Props = {
+  ['aria-label']: string;
+  children?: React.ReactNode;
+  hideFocusRing: boolean;
+  color: string;
+  labelColor: string;
+  hoverAndSelectedColor: string;
+  focusRingColor: string;
+} & RadioGroupProps &
+  PermafrostComponent;
+
+/**
+ * Renders a group of radio buttons.
+ *
+ * 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({ children, ...props }: Props) {
+  const { color, hideFocusRing, labelColor, hoverAndSelectedColor, focusRingColor } = props;
+  return (
+    <StyledRadioGroup
+      {...props}
+      hideFocusRing
+      data-cy={props['data-cy']}
+      color={color}
+      labelColor={labelColor}
+      hoverAndSelectedColor={hoverAndSelectedColor}
+      focusRingColor={focusRingColor}
+    >
+      {children}
+    </StyledRadioGroup>
+  );
+}
+
+/**
+ * A single radio button and its label.
+ */
+export function Radio({ children, ...props }: AriaRadioProps) {
+  return (
+    <AbstractRadio {...props}>
+      <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false" overflow="visible">
+        <circle cx={10} cy={10} r={9} fill="none" stroke="currentColor" className="radioCircle" />
+
+        <circle cx={10} cy={10} r={5} fill="currentColor" stroke="none" className="radioDot" />
+
+        <circle cx={10} cy={10} r={12} fill="none" className="focusRing" />
+      </svg>
+
+      {children}
+    </AbstractRadio>
+  );
+}

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

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

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

@@ -0,0 +1,66 @@
+// 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: '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/components/inputs/RadioGroup/RadioGroup.styles.ts

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

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

@@ -0,0 +1,120 @@
+// 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 || '',
+    selectedValue: value,
+    setLastFocusedValue,
+    setSelectedValue: onChange,
+    defaultValue,
+  };
+
+  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 {
+    // @ts-ignore
+    isSelected = state.selectedValue === props.value || state?.defaultValue === 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/components/inputs/RadioGroup/index.ts

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

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

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import { TYPOGRAPHY } from '@/tokens';
 

package/src/components/inputs/index.ts

@@ -2,3 +2,5 @@ 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/components/loading-indicators/LoadingIndicator/LoadingIndicator.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { LoadingIndicator } from './LoadingIndicator';

package/src/index.ts

@@ -16,6 +16,8 @@ export {
 } from './tokens';
 
 export {
+  AbstractRadio,
+  AbstractRadioGroup,
   Accordion,
   BarSpinner,
   BorderSelect,
@@ -35,6 +37,8 @@ export {
   NumberInput,
   Pagination,
   PercentageRing,
+  Radio,
+  RadioGroup,
   RandomLoadingMessage,
   SearchInput,
   Section,