@indico-data/design-system 1.0.47 → 1.0.49

package/src/components/Wizard/Wizard.tsx

@@ -0,0 +1,211 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Button, ConfirmModal, IconButton } from '@/components';
+import { PermafrostComponent, ButtonSize } from '@/types';
+
+import { StyledWizard } from './Wizard.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;
+  steps: 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;
+  };
+};
+
+const commonButtonProps = {
+  size: 'large' as ButtonSize,
+};
+
+export function Wizard(props: Props) {
+  const {
+    children,
+    className,
+    confirmCancel,
+    disableNextStep,
+    disablePrevStep,
+    disableSubmit,
+    id,
+    isLastStep,
+    onCancel,
+    onNextPress,
+    onStepChange,
+    onSubmit,
+    startingStep,
+    steps,
+    submitButtonLabel,
+    submitProcessing = '',
+    wizardTitle,
+    nextButtonProps,
+  } = props;
+
+  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 (
+    <StyledWizard className={className} data-cy={props['data-cy']} id={id}>
+      <nav>
+        <h1>
+          {wizardTitle}: {currentStep}
+        </h1>
+
+        <div className="wizard-buttons">
+          <Button onClick={() => setOpenCancelConfirm(true)} variant="link-style">
+            Cancel
+          </Button>
+
+          {steps.indexOf(currentStep) !== 0 && (
+            <IconButton
+              {...commonButtonProps}
+              iconName="fa-arrow-left"
+              label="Previous Step"
+              onPress={prevStep}
+              isDisabled={disablePrevStep}
+            />
+          )}
+
+          {onLastStep ? (
+            <IconButton
+              {...commonButtonProps}
+              variant="primary"
+              iconName="check"
+              busy={isBusy}
+              label={isBusy ? submitProcessing : submitButtonLabel}
+              onPress={handleNextPress}
+              isDisabled={disableSubmit}
+            />
+          ) : (
+            <IconButton
+              {...commonButtonProps}
+              variant="primary"
+              iconSide="end"
+              iconName="fa-arrow-right"
+              label="Next Step"
+              onPress={handleNextPress}
+              isDisabled={disableNextStep}
+              {...nextButtonProps}
+            />
+          )}
+        </div>
+      </nav>
+
+      <>{children}</>
+
+      <ConfirmModal
+        title={confirmCancel.title}
+        message={confirmCancel.message}
+        confirmText={confirmCancel.confirmText}
+        rejectText={confirmCancel.rejectText}
+        open={openCancelConfirm}
+        clickOutsideHandler={() => setOpenCancelConfirm(false)}
+        responseHandler={handleCancelRequest}
+      />
+    </StyledWizard>
+  );
+}

package/src/components/Wizard/index.ts

@@ -0,0 +1,2 @@
+export { Wizard } from './Wizard';
+export { WizardCard, WizardSection, StyledWizard } from './Wizard.styles';

package/src/components/WizardWithSidebar/WizardWithSidebar.stories.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { WizardWithSidebar } from './WizardWithSidebar';
+import { COLORS } from '@/tokens';
+
+const meta = {
+  component: WizardWithSidebar,
+  title: 'wizards/WizardWithSidebar',
+  args: {
+    buttonColor: `${COLORS.blueDarknut}`,
+    backgroundColor: '#ffffff',
+    color: '#000000',
+    stepSchema: {
+      'Library Details': { inputsRequiringValidation: ['libraryName'], description: [] },
+      'Configure Source': {
+        inputsRequiringValidation: [],
+        description: [
+          'Select workflows to use for document ingestion to build your library.',
+          'Select a folder to use for document ingestion to build your library.',
+        ],
+      },
+      Summary: { inputsRequiringValidation: [], description: [] },
+    },
+    onCancel: () => console.info('cancelling'),
+    onSubmit: () => console.info('submitting'),
+    wizardTitle: 'New Teach Task',
+    confirmCancel: {
+      title: 'Are you sure you want to stop creating this Task?',
+      message: 'Your Task will not be saved, nor available to be labeled.',
+      confirmText: 'Yes, go ahead',
+      rejectText: 'No, go back',
+    },
+    submitButtonLabel: 'Add Teach Task',
+    // Evidently, we need to add this prop or its corresponding logic within the component evaluates to false in storybook.
+    // Was not happening in earlier version, so was not necessary.
+    onNextPress: () => true,
+  },
+} satisfies Meta<typeof WizardWithSidebar>;
+
+export default meta;
+type Story = StoryObj<typeof WizardWithSidebar>;
+
+const steps = Object.keys(meta.args.stepSchema);
+function StoryRender(props: any) {
+  const [currentStep, setCurrentStep] = useState('');
+
+  const currentStepContent = () => {
+    if (currentStep === steps[0]) {
+      return <div style={{ height: '300px', width: '500px' }}>First step content</div>;
+    }
+
+    if (currentStep === steps[1]) {
+      return <div style={{ height: '300px', width: '500px' }}>Second step content</div>;
+    }
+
+    if (currentStep === steps[2]) {
+      return <div style={{ height: '300px', width: '500px' }}>Third step content</div>;
+    }
+  };
+
+  return (
+    <WizardWithSidebar {...props} onStepChange={(step) => setCurrentStep(step)}>
+      {currentStepContent()}
+    </WizardWithSidebar>
+  );
+}
+
+export const FirstStep: Story = {
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const SecondStep: Story = {
+  args: {
+    startingStep: steps[1],
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const LastStep: Story = {
+  args: {
+    startingStep: steps[2],
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const DisabledNextStep: Story = {
+  args: {
+    disableNextStep: true,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const DisabledPreviousStep: Story = {
+  args: {
+    startingStep: steps[1],
+    disablePrevStep: true,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const SubmitProcessing: Story = {
+  args: {
+    submitProcessing: 'Adding Library',
+    startingStep: steps[2],
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const LastStepOverride: Story = {
+  args: {
+    startingStep: steps[2],
+    isLastStep: false,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const WithValidationErrors: Story = {
+  args: {
+    startingStep: steps[2],
+    validationErrors: {
+      libraryName: ['Library name must be at least 6 characters.'],
+    },
+    isLastStep: false,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};

package/src/components/WizardWithSidebar/WizardWithSidebar.styles.ts

@@ -0,0 +1,123 @@
+import styled, { css } from 'styled-components';
+
+import { TYPOGRAPHY, SPACING, COLORS } from '@/tokens';
+
+export const StyledWizardWithSidebar = styled.div<{
+  backgroundcolor?: string;
+  color?: string;
+  buttoncolor?: string;
+  className?: string;
+  ['data-cy']?: string;
+  id?: string;
+}>`
+  display: inline-flex;
+  /* min-height: 455px; */
+  background-color: ${(props) => (props.backgroundcolor ? props.backgroundcolor : 'currentColor')};
+  color: ${(props) => (props.color ? props.color : 'inherit')};
+  border-radius: 4px;
+
+  h2 {
+    font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
+    margin-bottom: ${SPACING.md};
+    color: ${(props) => (props.color ? props.color : 'inherit')};
+    font-weight: bold;
+  }
+
+  .wizard-sidebar {
+    width: 245px;
+    padding: 30px;
+    border-right: 1px solid #aaaaaa;
+
+    .sidebar-step {
+      margin-bottom: ${SPACING.sm};
+      display: flex;
+      align-items: center;
+      color: #aaaaaa;
+      &.current-step,
+      &.prior-step {
+        color: ${COLORS.black};
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .sidebar-step__check-icon {
+        fill: ${COLORS.green};
+        margin-right: ${SPACING.sm};
+        width: 24px;
+        height: 24px;
+      }
+
+      .sidebar-step__number-icon {
+        margin-right: ${SPACING.sm};
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        border: 1px solid currentColor;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: ${TYPOGRAPHY.fontSize.caption};
+      }
+    }
+  }
+
+  .wizard-content {
+    /* min-width: 660px; */
+    padding: 30px;
+
+    .wizard-content__header {
+      /* min-height: 70px; */
+    }
+    .wizard-content__body {
+      /* min-height: 520px; */
+    }
+  }
+
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    // override for some styling in AppChrome IPA component
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin-top: ${SPACING.md};
+  }
+
+  .wizard-buttons {
+    display: flex;
+    align-items: center;
+    font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
+
+    button {
+      ${(props) =>
+        props.buttoncolor &&
+        css`
+          background-color: ${props.buttoncolor};
+          color: ${props.backgroundcolor || 'inherit'};
+        `}
+    }
+
+    button.outline {
+      background-color: inherit;
+      ${(props) =>
+        props.buttoncolor &&
+        css`
+          color: ${props.buttoncolor};
+          border-color: ${props.buttoncolor};
+        `};
+    }
+
+    button.link-style {
+      font-size: inherit;
+      margin-right: 1em;
+      background-color: inherit;
+      ${(props) =>
+        props.buttoncolor &&
+        css`
+          color: ${props.buttoncolor};
+        `};
+    }
+  }
+`;