diff --git a/docs/README.md b/docs/README.md index 068c7f3a..7acc724f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -4,10 +4,10 @@ ### Create awesome tours for your app! -Showcase your app to new users or explain functionality of new features. +Showcase your app to new users or explain the functionality of new features. It uses [react-floater](https://github.com/gilbarbara/react-floater) for positioning and styling. -And you can use your own components too. +You can also use your own components. **Open the** [**demo**](https://react-joyride.com/) **Open GitHub** [**repo**](https://github.com/gilbarbara/react-joyride) @@ -50,4 +50,4 @@ export default function App() { } ``` -> If you need to support legacy browsers you need to include the [scrollingelement](https://github.com/mathiasbynens/document.scrollingElement) polyfill. +> To support legacy browsers, include the [scrollingelement](https://github.com/mathiasbynens/document.scrollingElement) polyfill. diff --git a/docs/accessibility.md b/docs/accessibility.md index 4ddecbd1..298e22ef 100644 --- a/docs/accessibility.md +++ b/docs/accessibility.md @@ -4,7 +4,7 @@ react-joyride aims to be fully accessible, using the [WAI-ARIA](https://www.w3.o ## Keyboard navigation -When the dialog is open, the TAB key will be keep the focus on the dialog elements \(input\|select\|textarea\|button\|object\) within its contents. Elements outside the tooltip won't receive focus. +When the dialog is open, the TAB key will keep the focus on the dialog elements (input|select|textarea|button|object) within its contents. Elements outside the tooltip will not receive focus. When the tooltip is closed the focus returns to the default. diff --git a/docs/callback.md b/docs/callback.md index 9b9e34c9..fd33b144 100644 --- a/docs/callback.md +++ b/docs/callback.md @@ -75,7 +75,7 @@ export default function App() { // Update state to advance the tour setStepIndex(index + (action === ACTIONS.PREV ? -1 : 1)); } else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) { - // Need to set our running state to false, so we can restart if we click start again. + // You need to set our running state to false, so we can restart if we click start again. setRun(false); } diff --git a/docs/custom-components.md b/docs/custom-components.md index 5b895a85..0f327f5a 100644 --- a/docs/custom-components.md +++ b/docs/custom-components.md @@ -1,9 +1,9 @@ # Custom Components -You can use custom components to have complete control of the UI. They will receive data through props and need to be a React class or forwardRef since it needs to set `ref` +You can use custom components to have complete control of the UI. They will receive data through props and need to be a React class or forwardRef since it needs to set `ref.` {% hint style="info" %} -If you are looking to customize the default UI, check the [styling](styling.md) docs. +If you want to customize the default UI, check the [styling](styling.md) docs. {% endhint %} ## beaconComponent diff --git a/docs/migration.md b/docs/migration.md index d6f5682d..ecfa4a25 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -1,6 +1,6 @@ --- description: >- - If you are coming from V1 make sure to follow this guide to upgrade your + If you are coming from V1, make sure to follow this guide to upgrade your setup. --- @@ -8,7 +8,7 @@ description: >- ## Styling -V2 uses inline styles instead of SCSS/CSS so you need to remove the imports. Check [Styling](styling.md) for more information. +V2 uses inline styles instead of SCSS/CSS, so you must remove the imports. Check [Styling](styling.md) for more information. ## Props @@ -19,7 +19,7 @@ V2 uses inline styles instead of SCSS/CSS so you need to remove the imports. Che **disableOverlay** `false` ▶︎ **disableOverlayClicks** `false` **keyboardNavigation** `true` ▶︎ **disableCloseOnEsc** `false` -the space, return and tab keys are now controlled with tabIndex +the space, return, and tab keys are now controlled with tabIndex **scrollToSteps** `true` ▶︎ disableScrolling `false` @@ -48,10 +48,10 @@ the space, return and tab keys are now controlled with tabIndex There are a few changes to the step syntax too: **selector** ▶︎ **target** -Now it supports HTMLElement and string. +Now, it supports HTMLElement and string. **position** ▶︎ **placement** -The default is **bottom** now +The default is **bottom** now. **text** ▶︎ **content** diff --git a/docs/props.md b/docs/props.md index a1d8db70..37d46997 100644 --- a/docs/props.md +++ b/docs/props.md @@ -3,10 +3,10 @@ The only required prop is `steps` with an array of [steps](step.md). Below is the complete list of possible props and options: -{% hint style="info" %} ▶︎ indicates the default value if there's one You can check the types definition for the props [here](https://github.com/gilbarbara/react-joyride/blob/main/src/types/components.ts) {% endhint %} +{% hint style="info" %} ▶︎ indicates the default value if there's one. You can check the definition of the type for the props [here](https://github.com/gilbarbara/react-joyride/blob/main/src/types/components.ts) {% endhint %} **beaconComponent** `ElementType` -A React component to use instead the default Beacon. Check [custom components](custom-components.md) for details. +A React component to use instead of the default Beacon. Check [custom components](custom-components.md) for details. **callback** `() => CallBackProps` A function to be called when Joyride's state changes. It returns a single parameter with the state. @@ -27,7 +27,7 @@ Don't show the overlay. Don't close the tooltip when clicking the overlay. **disableScrolling** `boolean` ▶︎ **false** -Disable auto scrolling between steps. +Disable autoscrolling between steps. **disableScrollParentFix** `boolean` ▶︎ **false** Disable the fix to handle "unused" overflow parents. @@ -36,7 +36,7 @@ Disable the fix to handle "unused" overflow parents. Options to be passed to [react-floater](https://github.com/gilbarbara/react-floater). **getHelpers** `() => StoreHelpers` -Get the store methods to control the tour programmatically. `prev, next, go, close, skip, reset, info` +Get the store methods to control the tour programmatically. `prev, next, go, close, skip, reset, info`. **hideBackButton** `boolean` ▶︎ **false** Hide the **Back** button. @@ -63,7 +63,7 @@ The scroll distance from the element scrollTop value. Scroll the page for the first step. **showProgress** `boolean` ▶︎ **false** -Display the tour progress in the next button \_e.g. 2/5 \_in `continuous` tours. +Display the tour progress in the next button, `2/5`, in `continuous` tours. **showSkipButton** `boolean` ▶︎ **false** Display a button to skip the tour. @@ -77,7 +77,7 @@ The padding of the spotlight. **stepIndex** `number` Setting a number here will turn Joyride into `controlled` mode. -You'll have to keep an internal state by yourself and update it with the events in the `callback`. +You'll have to keep an internal state and update it with the events in the `callback`. > **Do not use this if you don't need it.** @@ -89,4 +89,4 @@ Check the [step](step.md) docs for more information. Override the [styling](styling.md) of the Tooltip **tooltipComponent** `ElementType` -A React component to use instead the default Tooltip. Check [custom components](custom-components.md) for details. +A React component to use instead of the default Tooltip. Check [custom components](custom-components.md) for details. diff --git a/docs/step.md b/docs/step.md index e06abb49..3ccbebdd 100644 --- a/docs/step.md +++ b/docs/step.md @@ -16,13 +16,16 @@ The step is a plain object that only requires two properties to be valid: `targe **content** `React.Node` The tooltip's body. +**data** `any` +Additional data you can add to the step. + **disableBeacon** `boolean` ▶︎ **false** Don't show the Beacon before the tooltip. **event** `'click' | 'hover'` ▶︎ **click** The event to trigger the beacon. -hideFooter `boolean` ▶︎ **false** +**hideFooter** `boolean` ▶︎ **false** Hide the tooltip's footer. **isFixed** `boolean` ▶︎ **false** @@ -45,7 +48,7 @@ It can be: Check [react-floater](https://github.com/gilbarbara/react-floater) for more information. **placementBeacon** `string` ▶︎ placement -The placement of the beacon. It will use the placement if nothing is passed, and it can be: `top, bottom, left, right`. +The beacon's placement can be top, bottom, left, or right. If nothing is passed, it will use the `placement`. **styles** `Partial` Override the [styling](styling.md) of the step's Tooltip diff --git a/docs/styling.md b/docs/styling.md index e10afb2c..62de89ba 100644 --- a/docs/styling.md +++ b/docs/styling.md @@ -65,10 +65,10 @@ export default function App() { } ``` -You can customize the styles per step too. +You can customize the styles per step, too. Check [styles.js](https://github.com/gilbarbara/react-joyride/blob/main/src/styles.ts) for more information. -Or if you need finer control you can use you own components for the beacon and tooltip. Check the [custom components](custom-components.md) documentation. +Or, if you need finer control, you can use your own components for the beacon and tooltip. Check the [custom components](custom-components.md) documentation. If you want to customize the arrow, check [react-floater](https://github.com/gilbarbara/react-floater) documentation. diff --git a/src/types/components.ts b/src/types/components.ts index cbbcc422..497b6cbd 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -222,6 +222,10 @@ export type Step = Simplify< * The tooltip's body. */ content: ReactNode; + /** + * Additional data you can add to the step. + */ + data?: any; /** * Don't show the Beacon before the tooltip. * @default false diff --git a/test/__fixtures__/CustomOptions.tsx b/test/__fixtures__/CustomOptions.tsx index caff9be2..72262abf 100644 --- a/test/__fixtures__/CustomOptions.tsx +++ b/test/__fixtures__/CustomOptions.tsx @@ -2,10 +2,12 @@ import { useReducer } from 'react'; import { standardSteps } from './steps'; -import Joyride, { STATUS, Status } from '../../src'; +import Joyride, { LIFECYCLE, STATUS, Status } from '../../src'; import { CallBackProps, Props, Step } from '../../src/types'; -interface CustomOptionsProps extends Omit {} +interface CustomOptionsProps extends Omit { + finishedCallback: () => void; +} interface State { index: number; @@ -28,11 +30,14 @@ const tourSteps = [ target: '.outro h2 span', placement: 'top' as const, content: "Text only steps — Because sometimes you don't really need a proper heading", + data: { + last: true, + }, }, ]; -export default function CutomOptionss(props: Omit) { - const { callback, ...rest } = props; +export default function CustomOptions(props: Omit) { + const { callback, finishedCallback, ...rest } = props; const [{ run, steps }, setState] = useReducer( (previousState: State, nextState: Partial) => ({ ...previousState, @@ -50,7 +55,7 @@ export default function CutomOptionss(props: Omit { - const { status } = data; + const { lifecycle, status, step } = data; if (([STATUS.FINISHED, STATUS.SKIPPED] as Array).includes(status)) { setState({ run: false }); @@ -59,6 +64,10 @@ export default function CutomOptionss(props: Omit Custom Options', () => { render( { mockGetPopper(popper, type); @@ -147,5 +149,6 @@ describe('Joyride > Custom Options', () => { ); expect(mockGetPopper).toHaveBeenCalledTimes(8); + expect(mockFinishedCallback).toHaveBeenCalledTimes(1); }); });