@indico-data/design-system 1.0.47 → 1.0.48

package/src/components/WizardWithSidebar/WizardWithSidebar.tsx

@@ -0,0 +1,261 @@
+// 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}
+      />
+    </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

@@ -11,7 +11,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/SearchInput/SearchInput.styles.ts

@@ -4,11 +4,7 @@ import { TYPOGRAPHY } from '@/tokens';
 
 import { inputCommon } from '../inputsCommon.styles';
 
-export const StyledSearchField = styled.div<{
-  border?: boolean;
-  showSearchIcon?: boolean;
-  showClearInputIcon?: boolean;
-}>`
+export const StyledSearchField = styled.div`
   position: relative;
   background: transparent;
 
@@ -17,49 +13,39 @@ export const StyledSearchField = styled.div<{
     top: 4px;
     left: 0;
     font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-
-    ${(props) =>
-      props.border &&
-      props.showSearchIcon &&
-      css`
-        top: 7px;
-        left: 5px;
-      `}
   }
 
   input {
     ${inputCommon};
-
     padding: 5px;
     font-size: ${TYPOGRAPHY.fontSize.base};
     margin-bottom: 0;
-    ${(props) =>
-      props.border &&
-      css`
-        border: 1px solid currentColor;
-        border-radius: 4px;
-      `}
-    ${(props) =>
-      props.showSearchIcon &&
-      css`
-        padding: 5px 5px 5px 25px;
-      `}
   }
 
-  ${(props) =>
-    props.showClearInputIcon &&
-    css`
-      .clear-input {
-        cursor: pointer;
-        height: 10px;
-        width: 10px;
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-        &:hover {
-          opacity: 0.5;
-        }
-      }
-    `}
+  &.border.showSearchIcon label {
+    top: 7px;
+    left: 5px;
+  }
+
+  &.border input {
+    border: 1px solid currentColor;
+    border-radius: 4px;
+  }
+
+  &.showSearchIcon input {
+    padding: 5px 5px 5px 25px;
+  }
+
+  &.showClearInputIcon .clear-input {
+    cursor: pointer;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    &:hover {
+      opacity: 0.5;
+    }
+  }
 `;

package/src/components/inputs/SearchInput/SearchInput.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { v4 as uuid } from 'uuid';
+import classNames from 'classnames';
 
 import { Icon } from '@/components/Icon';
 import { PermafrostComponent } from '@/types';
@@ -39,10 +40,11 @@ export const SearchInput = (props: Props) => {
 
   return (
     <StyledSearchField
-      className={className}
-      border={border}
-      showSearchIcon={showSearchIcon}
-      showClearInputIcon={showClearInputIcon}
+      className={classNames(className, {
+        border,
+        showSearchIcon,
+        showClearInputIcon,
+      })}
       data-cy={props['data-cy']}
     >
       {showSearchIcon && (

package/src/components/loading-indicators/CirclePulse/CirclePulse.styles.ts

@@ -23,14 +23,14 @@ const ripple = (size: string) => keyframes`
 const animationSpeed = 1.4;
 
 export const StyledLoadingIndicator = styled.div<{
-  overallSize: string;
-  rippleSize: string;
+  overallsize: string;
+  ripplesize: string;
 }>`
   display: grid;
   place-items: center;
 
-  width: ${(props) => props.overallSize};
-  height: ${(props) => props.overallSize};
+  width: ${(props) => props.overallsize};
+  height: ${(props) => props.overallsize};
 
   margin-left: auto;
   margin-right: auto;
@@ -43,7 +43,7 @@ export const StyledLoadingIndicator = styled.div<{
 
     grid-area: 1 / 1;
 
-    animation: ${(props) => ripple(props.rippleSize)} ${animationSpeed}s
+    animation: ${(props) => ripple(props.ripplesize)} ${animationSpeed}s
       cubic-bezier(0, 0.2, 0.8, 1) infinite;
 
     @media (prefers-reduced-motion) {
@@ -60,7 +60,7 @@ export const StyledLoadingIndicator = styled.div<{
   }
 `;
 
-export const StyledMessageLoadingIndicator = styled.div<{ overallSize: string }>`
+export const StyledMessageLoadingIndicator = styled.div<{ overallsize: string }>`
   display: block;
 
   > * {
@@ -71,7 +71,7 @@ export const StyledMessageLoadingIndicator = styled.div<{ overallSize: string }>
   .message {
     text-align: center;
     display: block;
-    width: ${(props) => props.overallSize};
+    width: ${(props) => props.overallsize};
     margin-top: -50px;
 
     color: ${COLORS.lightFontColor};

package/src/components/loading-indicators/CirclePulse/CirclePulse.tsx

@@ -32,8 +32,8 @@ export function CirclePulse(props: Props): React.ReactElement {
         className={className}
         data-cy={props['data-cy']}
         id={id}
-        overallSize={returnSizeString(overallSize)}
-        rippleSize={returnSizeString(rippleSize)}
+        overallsize={returnSizeString(overallSize)}
+        ripplesize={returnSizeString(rippleSize)}
         style={color ? { color } : { color: COLORS.curiousBlue }}
       />
     );
@@ -41,7 +41,7 @@ export function CirclePulse(props: Props): React.ReactElement {
 
   if (showRandomMessage) {
     return (
-      <StyledMessageLoadingIndicator overallSize={returnSizeString(overallSize)}>
+      <StyledMessageLoadingIndicator overallsize={returnSizeString(overallSize)}>
         {loadingIndicator()}
 
         <RandomLoadingMessage />

package/src/components/loading-indicators/LoadingIndicator/LoadingIndicator.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LoadingIndicator } from './LoadingIndicator';
+
+const meta = {
+  component: LoadingIndicator,
+  title: 'LoadingIndicator',
+} satisfies Meta<typeof LoadingIndicator>;
+
+export default meta;
+type Story = StoryObj<typeof LoadingIndicator>;
+
+export const Normal: Story = {
+  args: {},
+};
+export const CustomColor: Story = {
+  args: { color: '#f0f' },
+};
+
+export const WithRandomMessage: Story = {
+  args: { showRandomMessage: true },
+};

package/src/components/loading-indicators/LoadingIndicator/LoadingIndicator.styles.ts

@@ -0,0 +1,81 @@
+import styled, { keyframes } from 'styled-components';
+
+import { COLORS, TYPOGRAPHY } from '@/tokens';
+
+const ripple = (size: string) => keyframes`
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  
+  20% {
+    opacity: 1;
+  }
+  
+  100% {
+    width: ${size};
+    height: ${size};
+    opacity: 0;
+  }
+`;
+
+const animationSpeed = 1.4;
+
+export const StyledLoadingIndicator = styled.div<{
+  overallsize: string;
+  ripplesize: string;
+}>`
+  display: grid;
+  place-items: center;
+
+  width: ${(props) => props.overallsize};
+  height: ${(props) => props.overallsize};
+
+  margin-left: auto;
+  margin-right: auto;
+
+  &:before,
+  &:after {
+    content: '';
+    border: 4px solid currentColor;
+    border-radius: 50%;
+
+    grid-area: 1 / 1;
+
+    animation: ${(props) => ripple(props.ripplesize)} ${animationSpeed}s
+      cubic-bezier(0, 0.2, 0.8, 1) infinite;
+
+    @media (prefers-reduced-motion) {
+      animation-duration: ${animationSpeed * 2}s;
+    }
+  }
+
+  &:after {
+    animation-delay: -${animationSpeed / 2}s;
+
+    @media (prefers-reduced-motion) {
+      animation-delay: -${animationSpeed}s;
+    }
+  }
+`;
+
+export const StyledMessageLoadingIndicator = styled.div<{ overallsize: string }>`
+  display: block;
+
+  > * {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .message {
+    text-align: center;
+    display: block;
+    width: ${(props) => props.overallsize};
+    margin-top: -50px;
+
+    color: ${COLORS.lightFontColor};
+    font-size: ${TYPOGRAPHY.fontSize.base};
+    font-style: italic;
+  }
+`;