Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update TourKit README to correct primaryButton example and formatting (#37427)

This commit is contained in:
Matt Sherman 2023-03-27 07:09:39 -04:00 committed by GitHub
parent a77e4abffe
commit de111c1edb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/fix-tour-kit-documentation Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: dev
Update TourKit README to correct primaryButton example and formatting.

87
packages/js/components/src/tour-kit/README.md
View File

@ -28,13 +28,15 @@ function Tour() {
referenceElements: { referenceElements: {
desktop: '.render-step-near-me', desktop: '.render-step-near-me',
}, },
meta: { meta: {
heading: 'Lorem ipsum dolor sit amet.', heading: 'Lorem ipsum dolor sit amet.',
descriptions: { descriptions: {
desktop: 'Lorem ipsum dolor sit amet.', desktop: 'Lorem ipsum dolor sit amet.',
}, },
primaryButtonText: "Done" primaryButton: {
}, text: 'Done',
},
},
}, },
], ],
closeHandler: () => setShowTour( false ), closeHandler: () => setShowTour( false ),
@ -57,8 +59,8 @@ function Tour() {
When a tour is rendered and focused, the following functionality exists: When a tour is rendered and focused, the following functionality exists:
- Close the tour on `ESC` key (in minimized view) - Close the tour on `ESC` key (in minimized view)
- Go to previous/next step on `left/right` arrow keys (in step view) - Go to previous/next step on `left/right` arrow keys (in step view)
## Configuration ## Configuration
@ -66,51 +68,52 @@ The main API for configuring a tour is the config object. See example usage and
`config.steps`: An array of objects that define the content we wish to render on the page. Each step defined by: `config.steps`: An array of objects that define the content we wish to render on the page. Each step defined by:
- `referenceElements` (optional): A set of `desktop` & `mobile` selectors to render the step near. - `referenceElements` (optional): A set of `desktop` & `mobile` selectors to render the step near.
- `focusElement` (optional): A set of `desktop` & `mobile` & `iframe` selectors to automatically focus. - `focusElement` (optional): A set of `desktop` & `mobile` & `iframe` selectors to automatically focus.
- `meta`: Arbitrary object that encloses the content we want to render for each step. - `meta`: Arbitrary object that encloses the content we want to render for each step.
- `classNames` (optional): An array or CSV of CSS classes applied to a step. - `classNames` (optional): An array or CSV of CSS classes applied to a step.
`config.closeHandler`: The callback responsible for closing the tour. `config.closeHandler`: The callback responsible for closing the tour.
- `tourStep`: A React component that will be called to render each step. Receives the following properties: - `tourStep`: A React component that will be called to render each step. Receives the following properties:
- `steps`: The steps defined for the tour. - `steps`: The steps defined for the tour.
- `currentStepIndex` - `currentStepIndex`
- `onDismiss`: Handler that dismissed/closes the tour. - `onDismiss`: Handler that dismissed/closes the tour.
- `onNext`: Handler that progresses the tour to the next step. - `onNext`: Handler that progresses the tour to the next step.
- `onPrevious`: Handler that takes the tour to the previous step. - `onPrevious`: Handler that takes the tour to the previous step.
- `onMinimize`: Handler that minimizes the tour (passes rendering to `tourMinimized`). - `onMinimize`: Handler that minimizes the tour (passes rendering to `tourMinimized`).
- `setInitialFocusedElement`: A dispatcher that assigns an element to be initially focused when a step renders (see examples). - `setInitialFocusedElement`: A dispatcher that assigns an element to be initially focused when a step renders (see examples).
- `onGoToStep`: Handler that progresses the tour to a given step index. - `onGoToStep`: Handler that progresses the tour to a given step index.
- `tourMinimized`: A React component that will be called to render a minimized view for the tour. Receives the following properties: - `tourMinimized`: A React component that will be called to render a minimized view for the tour. Receives the following properties:
- `steps`: The steps defined for the tour. - `steps`: The steps defined for the tour.
- `currentStepIndex` - `currentStepIndex`
- `onDismiss`: Handler that dismissed/closes the tour. - `onDismiss`: Handler that dismissed/closes the tour.
- `onMaximize`: Handler that expands the tour (passes rendering to `tourStep`). - `onMaximize`: Handler that expands the tour (passes rendering to `tourStep`).
`config.options` (optional): `config.options` (optional):
- `classNames` (optional): An array or CSV of CSS classes to enclose the main tour frame with. - `classNames` (optional): An array or CSV of CSS classes to enclose the main tour frame with.
- `effects`: An object to enable/disable/combine various tour effects: - `effects`: An object to enable/disable/combine various tour effects:
- `spotlight`: Adds a semi-transparent overlay and highlights the reference element when provided with a transparent box over it. Expects an object with optional styles to override the default highlight/spotlight behavior when provided (default: spotlight wraps the entire reference element). - `spotlight`: Adds a semi-transparent overlay and highlights the reference element when provided with a transparent box over it. Expects an object with optional styles to override the default highlight/spotlight behavior when provided (default: spotlight wraps the entire reference element).
- `interactivity`: An object that configures whether the user is allowed to interact with the referenced element during the tour - `interactivity`: An object that configures whether the user is allowed to interact with the referenced element during the tour
- `styles`: CSS properties that configures the styles applied to the spotlight overlay - `styles`: CSS properties that configures the styles applied to the spotlight overlay
- `arrowIndicator`: Adds an arrow tip pointing at the reference element when provided. - `arrowIndicator`: Adds an arrow tip pointing at the reference element when provided.
- `overlay`: Includes the semi-transparent overlay for all the steps (also blocks interactions with the rest of the page) - `overlay`: Includes the semi-transparent overlay for all the steps (also blocks interactions with the rest of the page)
- `autoScroll`: The page scrolls up and down automatically such that the step target element is visible to the user. - `autoScroll`: The page scrolls up and down automatically such that the step target element is visible to the user.
- `callbacks`: An object of callbacks to handle side effects from various interactions (see [types.ts](./src/types.ts)). - `callbacks`: An object of callbacks to handle side effects from various interactions (see [types.ts](./src/types.ts)).
- `popperModifiers`: The tour uses Popper to position steps near reference elements (and for other effects). An implementation can pass its own modifiers to tailor the functionality further e.g. more offset or padding from the reference element. - `popperModifiers`: The tour uses Popper to position steps near reference elements (and for other effects). An implementation can pass its own modifiers to tailor the functionality further e.g. more offset or padding from the reference element.
- `tourRating` (optional - only in WPCOM Tour Kit variant): - `tourRating` (optional - only in WPCOM Tour Kit variant):
- `enabled`: Whether to show rating in last step.
- `useTourRating`: (optional) A hook to provide the rating from an external source/state (see [types.ts](./src/types.ts)).
- `onTourRate`: (optional) A callback to fire off when a rating is submitted.
- `portalElementId`: A string that lets you customize under which DOM element the Tour will be appended. - `enabled`: Whether to show rating in last step.
- `useTourRating`: (optional) A hook to provide the rating from an external source/state (see [types.ts](./src/types.ts)).
- `onTourRate`: (optional) A callback to fire off when a rating is submitted.
- `portalElementId`: A string that lets you customize under which DOM element the Tour will be appended.
`placement` (Optional) : Describes the preferred placement of the popper. Possible values are left-start, left, left-end, top-start, top, top-end, right-start, right, right-end, bottom-start, bottom, and bottom-end. `placement` (Optional) : Describes the preferred placement of the popper. Possible values are left-start, left, left-end, top-start, top, top-end, right-start, right, right-end, bottom-start, bottom, and bottom-end.