@indico-data/design-system 2.0.2 → 2.1.2

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

@@ -1,143 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { WizardWithSidebar } from './WizardWithSidebar';
-import { COLORS } from '@/legacy/tokens';
-
-const meta = {
-  component: WizardWithSidebar,
-  title: 'legacy/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/legacy/components/WizardWithSidebar/WizardWithSidebar.styles.ts

@@ -1,107 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { TYPOGRAPHY, SPACING, COLORS } from '@/legacy/tokens';
-
-export const StyledWizardWithSidebar = styled.div<{
-  backgroundcolor?: string;
-  color?: string;
-  buttoncolor?: string;
-  className?: string;
-  ['data-cy']?: string;
-  id?: string;
-}>`
-  height: 750px;
-  display: flex;
-  /* display: 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 ${COLORS.silverChalice};
-
-    .sidebar-step {
-      margin-bottom: ${SPACING.sm};
-      display: flex;
-      align-items: center;
-      color: ${COLORS.silverChalice};
-      &.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__wrapper {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    flex-direction: column;
-    height: 100%;
-  }
-  .wizard-content {
-    width: 100%;
-    padding: 30px;
-
-    .wizard-content__header {
-      flex: 0 0 100%;
-    }
-    .wizard-content__body {
-      flex: 0 0 100%;
-    }
-  }
-
-  .wizard-actions {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: end;
-  }
-
-  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};
-  }
-`;

package/src/legacy/components/WizardWithSidebar/WizardWithSidebar.tsx

@@ -1,278 +0,0 @@
-// 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 { ConfirmModal, Icon, IconButton } from '@/legacy/components';
-import { Button } from '@/components/button';
-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__wrapper">
-          <div className="wizard-content__items">
-            <div className="wizard-content__header">
-              <h2>{currentStep}</h2>
-            </div>
-            <div className="wizard-content__body">{children}</div>
-          </div>
-          <nav className="wizard-actions">
-            <div className="wizard-buttons">
-              <Button
-                ariaLabel="cancel"
-                variant="text"
-                color="secondary"
-                onClick={() => setOpenCancelConfirm(true)}
-              >
-                Cancel
-              </Button>
-
-              {steps.indexOf(currentStep) !== 0 && (
-                <Button
-                  variant="outline"
-                  color="secondary"
-                  iconName="fa-arrow-left"
-                  ariaLabel="previous step"
-                  onClick={prevStep}
-                  isDisabled={disablePrevStep}
-                  className="mr-1"
-                >
-                  Previous Step
-                </Button>
-              )}
-
-              {onLastStep ? (
-                <Button
-                  ariaLabel="submit"
-                  iconName="check"
-                  color="secondary"
-                  isLoading={isBusy}
-                  onClick={handleNextPress}
-                  isDisabled={disableSubmit}
-                >
-                  {isBusy ? submitProcessing : submitButtonLabel}
-                </Button>
-              ) : (
-                <Button
-                  ariaLabel="next step"
-                  iconPosition="right"
-                  color="secondary"
-                  iconName="fa-arrow-right"
-                  onClick={handleNextPress}
-                  isDisabled={disableNextStep}
-                  {...nextButtonProps}
-                >
-                  Next Step
-                </Button>
-              )}
-            </div>
-          </nav>
-        </div>
-      </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/legacy/components/WizardWithSidebar/index.ts

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