@indico-data/design-system 1.0.47 → 1.0.49

package/src/components/WizardWithSidebar/WizardWithSidebar.tsx

@@ -0,0 +1,262 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React, { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+
+import { Button, ConfirmModal, Icon, IconButton } from '@/components';
+import { PermafrostComponent } from '@/types';
+
+import { StyledWizardWithSidebar } from './WizardWithSidebar.styles';
+
+export type CancelText = {
+  // "confirm" button text
+  confirmText: string;
+  message?: string;
+  // "reject" button text
+  rejectText: string;
+  title: string;
+  // Optional, supporting text
+};
+
+type Props = PermafrostComponent & {
+  children: React.ReactNode;
+  /**
+   * text for the cancel confirmation modal
+   */
+  confirmCancel: CancelText;
+  disableNextStep?: boolean;
+  disablePrevStep?: boolean;
+  disableSubmit?: boolean;
+  isLastStep?: boolean;
+  /**
+   * for testing/mocking purposes
+   */
+  startingStep?: string;
+  stepSchema: {
+    [key: string]: {
+      inputsRequiringValidation: string[];
+      description: string[];
+    };
+  };
+  /**
+   * the text to appear on the submit button
+   */
+  submitButtonLabel: string;
+  /**
+   * Puts button in "busy" mode, and replaces button label with this text
+   */
+  submitProcessing?: string;
+  wizardTitle: string;
+  onCancel?(): void;
+  onNextPress?(): boolean;
+  /**
+   * returns the current step name to the parent component
+   */
+  onStepChange(stepName: string): void;
+  onSubmit(): void;
+  /**
+   * Allows for any custom attribute to be added directly to "next button" in wizard
+   */
+  nextButtonProps?: {
+    'data-cy': string;
+  };
+
+  bottomNav?: boolean;
+  validationErrors?: any;
+  backgroundColor?: string;
+  color?: string;
+  buttonColor?: string;
+};
+
+export function WizardWithSidebar(props: Props) {
+  const {
+    children,
+    className,
+    confirmCancel,
+    disableNextStep,
+    disablePrevStep,
+    disableSubmit,
+    id,
+    isLastStep,
+    onCancel,
+    onNextPress,
+    onStepChange,
+    onSubmit,
+    startingStep,
+    stepSchema,
+    submitButtonLabel,
+    submitProcessing = '',
+    wizardTitle,
+    nextButtonProps,
+    validationErrors,
+    backgroundColor,
+    color,
+    buttonColor,
+  } = props;
+
+  const steps = Object.keys(stepSchema);
+  const [currentStep, setCurrentStep] = useState<string>(startingStep || steps[0]);
+  const [openCancelConfirm, setOpenCancelConfirm] = useState<boolean>(false);
+
+  const onLastStep: boolean = useMemo(() => {
+    if (isLastStep !== undefined) {
+      return isLastStep;
+    }
+
+    return steps.indexOf(currentStep) === steps.length - 1;
+  }, [isLastStep, steps, currentStep]);
+
+  const isBusy = !!(submitProcessing && submitProcessing.length > 0);
+
+  const nextStep = () => {
+    if (!onLastStep) {
+      const currentIndex = steps.indexOf(currentStep);
+
+      setCurrentStep(steps[currentIndex + 1]);
+    }
+  };
+
+  const prevStep = () => {
+    const currentIndex = steps.indexOf(currentStep);
+
+    if (currentIndex !== 0) {
+      setCurrentStep(steps[currentIndex - 1]);
+    }
+  };
+
+  // handles the user's selection in the cancel confirmation modal
+  const handleCancelRequest = (confirmCancel: boolean) => {
+    if (confirmCancel && onCancel) {
+      onCancel();
+    }
+
+    setOpenCancelConfirm(false);
+  };
+
+  const handleNextPress = () => {
+    const allowNext = onNextPress ? onNextPress() : true;
+
+    if (!allowNext) {
+      return;
+    }
+
+    if (onLastStep) {
+      handleSubmit();
+    } else {
+      nextStep();
+    }
+  };
+
+  const handleSubmit = () => {
+    onSubmit();
+  };
+
+  // report current step to the consuming component
+  useEffect(() => {
+    onStepChange(currentStep);
+  }, [currentStep]);
+
+  // ensures `currentStep` is reset on unmount, just in case
+  useEffect(() => {
+    return () => setCurrentStep(steps[0] || '');
+  }, []);
+
+  return (
+    <StyledWizardWithSidebar
+      className={className}
+      data-cy={props['data-cy']}
+      id={id}
+      backgroundcolor={backgroundColor}
+      color={color}
+      buttoncolor={buttonColor}
+    >
+      <div className="wizard-sidebar">
+        <h2> {wizardTitle}</h2>
+
+        {steps.map((step: string, index: number) => {
+          return (
+            <div
+              className={classNames('sidebar-step', {
+                ['current-step']: index === steps.indexOf(currentStep),
+                ['prior-step']: index < steps.indexOf(currentStep),
+              })}
+              key={step}
+            >
+              {(Object.keys(validationErrors ? validationErrors : []).some((error) =>
+                stepSchema[step].inputsRequiringValidation.includes(error),
+              ) ||
+                index > steps.indexOf(currentStep)) && (
+                <div className="sidebar-step__number-icon">{index + 1}</div>
+              )}
+
+              {!Object.keys(validationErrors ? validationErrors : []).some((error) =>
+                stepSchema[step].inputsRequiringValidation.includes(error),
+              ) &&
+                index <= steps.indexOf(currentStep) && (
+                  <Icon name="fa-check-circle" className="sidebar-step__check-icon" />
+                )}
+              {step}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="wizard-content">
+        <div className="wizard-content__header">
+          <h2>{currentStep}</h2>
+        </div>
+        <div className="wizard-content__body">{children}</div>
+
+        <nav>
+          <div className="wizard-buttons">
+            <Button onClick={() => setOpenCancelConfirm(true)} variant="link-style">
+              Cancel
+            </Button>
+
+            {steps.indexOf(currentStep) !== 0 && (
+              <IconButton
+                variant="outline"
+                iconName="fa-arrow-left"
+                label="Previous Step"
+                onPress={prevStep}
+                isDisabled={disablePrevStep}
+              />
+            )}
+
+            {onLastStep ? (
+              <IconButton
+                variant="primary"
+                iconName="check"
+                busy={isBusy}
+                label={isBusy ? submitProcessing : submitButtonLabel}
+                onPress={handleNextPress}
+                isDisabled={disableSubmit}
+              />
+            ) : (
+              <IconButton
+                variant="primary"
+                iconSide="end"
+                iconName="fa-arrow-right"
+                label="Next Step"
+                onPress={handleNextPress}
+                isDisabled={disableNextStep}
+                {...nextButtonProps}
+              />
+            )}
+          </div>
+        </nav>
+      </div>
+
+      <ConfirmModal
+        title={confirmCancel.title}
+        message={confirmCancel.message}
+        confirmText={confirmCancel.confirmText}
+        rejectText={confirmCancel.rejectText}
+        open={openCancelConfirm}
+        clickOutsideHandler={() => setOpenCancelConfirm(false)}
+        responseHandler={handleCancelRequest}
+        width={430}
+      />
+    </StyledWizardWithSidebar>
+  );
+}

package/src/components/WizardWithSidebar/index.ts

@@ -0,0 +1,2 @@
+export { WizardWithSidebar } from './WizardWithSidebar';
+export { StyledWizardWithSidebar } from './WizardWithSidebar.styles';

package/src/components/buttons/IconButton/IconButton.styles.ts

@@ -9,6 +9,7 @@ import {
   variantPrimary,
   disabledOverrides,
 } from '../commonStyles';
+import { COLORS, ANIMATION } from '@/tokens';
 
 const iconMargin = '0.5em';
 
@@ -43,6 +44,36 @@ export const iconButton = css`
     ${variantPrimary};
   }
 
+  &.outline {
+    color: ${COLORS.midFontColor};
+    background: transparent;
+    border: 1px solid ${COLORS.midFontColor};
+    transition:
+      border ${ANIMATION.duration} ${ANIMATION.timing},
+      color ${ANIMATION.duration} ${ANIMATION.timing};
+
+    &:hover,
+    &:focus {
+      border: 1px solid ${COLORS.defaultFontColor};
+      color: ${COLORS.defaultFontColor};
+      background: transparent;
+    }
+
+    &:disabled {
+      border: 1px solid ${COLORS.midFontColor};
+      color: ${COLORS.midFontColor};
+      background: transparent;
+      opacity: 0.6;
+
+      &:hover {
+        background: transparent;
+        border: 1px solid ${COLORS.midFontColor};
+        color: ${COLORS.midFontColor};
+        opacity: 0.6;
+      }
+    }
+  }
+
   // todo: use this rule/selector after global styling removed
   //:not(:disabled):hover {
   //  background-color: #bebebe;

package/src/components/buttons/IconButton/IconButton.tsx

@@ -6,11 +6,10 @@ import { useButton } from '@react-aria/button';
 import { useFocusRing } from '@react-aria/focus';
 import { AriaButtonProps } from '@react-types/button';
 
-import { IconName } from '@/types';
-import { Icon } from '@/components/Icon';
-import { CircleSpinner } from '@/components/loading-indicators';
-import { PermafrostComponent } from '@/types';
-import { ButtonSize, ButtonVariant } from '../types';
+import { SPACING } from '@/tokens';
+import { IconName, PermafrostComponent } from '@/types';
+import { Icon, CircleSpinner } from '@/components';
+import { ButtonSize, IconButtonVariant } from '../types';
 
 import { StyledIconButton, StyledIconButtonLink } from './IconButton.styles';
 
@@ -30,7 +29,7 @@ type Props = PermafrostComponent & {
   label?: string;
   size?: ButtonSize;
   style?: React.CSSProperties;
-  variant?: ButtonVariant;
+  variant?: IconButtonVariant;
 } & AriaButtonProps;
 
 /**
@@ -60,6 +59,7 @@ export function IconButton(props: Props) {
   const buttonEl = useRef();
   const { buttonProps } = useButton(
     { ...props, onPress: busy ? undefined : props.onPress },
+    // @ts-ignore
     buttonEl,
   );
   const { isFocusVisible, focusProps } = useFocusRing();
@@ -85,6 +85,7 @@ export function IconButton(props: Props) {
       style={{
         marginTop: `${adjustAlignment}px`,
         marginBottom: `${Math.abs(adjustAlignment)}px`,
+        marginRight: `${SPACING.xs}`,
       }}
     />
   ) : (
@@ -105,6 +106,7 @@ export function IconButton(props: Props) {
   }
 
   return (
+    // @ts-ignore
     <StyledIconButton {...commonProps}>
       {iconElement} {labelElement}
     </StyledIconButton>

package/src/components/buttons/types.ts

@@ -1,2 +1,3 @@
-export type ButtonVariant = 'default' | 'primary' | 'destructive';
+export type ButtonVariant = 'primary' | 'cta' | 'normal' | 'link-style' | 'no-style' | 'outline';
+export type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
 export type ButtonSize = 'normal' | 'large';

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,
@@ -11,7 +20,13 @@ export {
   LoadingList,
   PercentageRing,
   RandomLoadingMessage,
+  LoadingIndicator,
 } from './loading-indicators';
 export { ListTable } from './ListTable';
 export { Pagination } from './Pagination';
 export { Shrug } from './user-feedback';
+export { ConfirmModal, ModalBase } from './modals';
+export { LoadingAwareContainer } from './LoadingAwareContainer';
+export { Wizard, WizardCard, WizardSection, StyledWizard } from './Wizard';
+export { WizardWithSidebar } from './WizardWithSidebar';
+export { Drawer } from './Navigation/Drawer';

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} />;
+  },
+};