Update getStyles to support floaterProps styles.arrow.color

- add CustomOptions test

Author: gilbarbara

src/modules/step.ts

@@ -39,7 +39,7 @@ export function getMergedStep(currentStep: Step | undefined, props: Props): Step
     isMergeableObject: is.plainObject,
   }) as StepMerged;
 
-  const mergedStyles = getStyles(props.styles, mergedStep.styles);
+  const mergedStyles = getStyles(props, mergedStep);
   const scrollParent = hasCustomScrollParent(
     getElement(mergedStep.target),
     mergedStep.disableScrollParentFix,

src/styles.ts

@@ -1,8 +1,7 @@
 import deepmerge from 'deepmerge';
-import { PartialDeep } from 'type-fest';
 
 import { hexToRGB } from './modules/helpers';
-import { Styles, StylesOptions } from './types';
+import { Props, StepMerged, StylesOptions } from './types';
 
 const defaultOptions = {
   arrowColor: '#fff',
@@ -33,11 +32,9 @@ const spotlight = {
   position: 'absolute' as const,
 };
 
-export default function getStyles(
-  propsStyles?: PartialDeep<Styles>,
-  stepStyles?: PartialDeep<Styles>,
-) {
-  const mergedStyles = deepmerge(propsStyles ?? {}, stepStyles ?? {});
+export default function getStyles(props: Props, step: StepMerged) {
+  const { floaterProps, styles } = props;
+  const mergedStyles = deepmerge(styles ?? {}, step?.styles ?? {});
   const options = deepmerge(defaultOptions, mergedStyles.options || {}) satisfies StylesOptions;
   let { width } = options;
 
@@ -179,7 +176,7 @@ export default function getStyles(
     },
     floaterStyles: {
       arrow: {
-        color: options.arrowColor,
+        color: floaterProps?.styles?.arrow?.color ?? options.arrowColor,
       },
       options: {
         zIndex: options.zIndex + 100,

test/__fixtures__/CustomOptions.tsx

@@ -0,0 +1,145 @@
+import { useReducer } from 'react';
+
+import { standardSteps } from './steps';
+
+import Joyride, { STATUS, Status } from '../../src';
+import { CallBackProps, Props, Step } from '../../src/types';
+
+interface CustomOptionsProps extends Omit<Props, 'run' | 'steps'> {}
+
+interface State {
+  index: number;
+  run: boolean;
+  steps: Array<Step>;
+}
+
+const tourSteps = [
+  ...standardSteps.slice(0, 3).map(step => {
+    if (step.target === '.mission button') {
+      return {
+        ...step,
+        target: '.mission h2 span',
+      };
+    }
+
+    return step;
+  }),
+  {
+    target: '.outro h2 span',
+    placement: 'top' as const,
+    content: "Text only steps — Because sometimes you don't really need a proper heading",
+  },
+];
+
+export default function CutomOptionss(props: Omit<CustomOptionsProps, 'run' | 'steps'>) {
+  const { callback, ...rest } = props;
+  const [{ run, steps }, setState] = useReducer(
+    (previousState: State, nextState: Partial<State>) => ({
+      ...previousState,
+      ...nextState,
+    }),
+    {
+      index: 0,
+      run: false,
+      steps: tourSteps,
+    },
+  );
+
+  const handleClickStart = () => {
+    setState({ run: true });
+  };
+
+  const handleJoyrideCallback = (data: CallBackProps) => {
+    const { status } = data;
+
+    if (([STATUS.FINISHED, STATUS.SKIPPED] as Array<Status>).includes(status)) {
+      setState({ run: false });
+    }
+
+    setState({ index: data.index });
+
+    callback?.(data);
+  };
+
+  return (
+    <div data-test-id="demo">
+      <Joyride
+        callback={handleJoyrideCallback}
+        continuous
+        run={run}
+        scrollToFirstStep
+        showSkipButton
+        steps={steps}
+        styles={{
+          buttonClose: {
+            color: '#000',
+          },
+          buttonNext: {
+            backgroundColor: '#a947ff',
+          },
+          options: {
+            arrowColor: '#5cff47',
+            primaryColor: '#ff0000',
+            overlayColor: 'rgba(0, 0, 0, 0.3)',
+          },
+          tooltip: {
+            borderRadius: 8,
+            padding: 12,
+          },
+          tooltipContent: {
+            padding: '1px 8px',
+          },
+        }}
+        {...rest}
+      />
+      <main>
+        <div className="hero">
+          <div className="container">
+            <div className="hero__content">
+              <h1>
+                <span>Create walkthroughs and guided tours for your ReactJS apps.</span>
+              </h1>
+              <button data-test-id="start" onClick={handleClickStart} type="button">
+                Let's Go!
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="demo__section projects">
+          <div className="container">
+            <h2>
+              <span>Projects</span>
+            </h2>
+            <div className="list">
+              <div>Installation</div>
+              <div>Documentation</div>
+              <div>Support </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="demo__section mission">
+          <div className="container">
+            <h2>
+              <span>Mission</span>
+            </h2>
+          </div>
+        </div>
+        <div className="demo__section about">
+          <div className="container">
+            <h2>
+              <span>About</span>
+            </h2>
+          </div>
+        </div>
+        <div className="demo__section outro">
+          <div className="container">
+            <h2>
+              <span>Outro</span>
+            </h2>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}