diff --git a/docs-src/tutorials/02-usage.md b/docs-src/tutorials/02-usage.md index 4ed3691b4..d082d12f9 100644 --- a/docs-src/tutorials/02-usage.md +++ b/docs-src/tutorials/02-usage.md @@ -108,6 +108,8 @@ const myTour = new Shepherd.Tour(options); - `confirmCancelMessage`: The message to display in the confirm dialog - `defaultStepOptions`: Default options for Steps created through `addStep` - `exitOnEsc`: Exiting the tour with the escape key will be enabled unless this is explicitly set to `false`. +- `includeStyles`: If false, the majority of the Shepherd styles will not be included. +You may want to use this option if you find yourself overriding a lot of the Shepherd styles. - `keyboardNavigation`: Navigating the tour via left and right arrow keys will be enabled unless this is explicitly set to `false`. - `modalContainer` An optional container element for the modal. If not set, the modal will be appended to `document.body`. - `steps`: An array of step options objects or Step instances to initialize the tour with. @@ -209,6 +211,7 @@ For example: `{selector: '.some-element', event: 'click'}`. It doesn't have to You can also always manually advance the Tour by calling `myTour.next()`. - `highlightClass`: An extra class to apply to the `attachTo` element when it is highlighted (that is, when its step is active). You can then target that selector in your CSS. - `id`: The string to use as the `id` for the step. If an id is not passed one will be generated. +- `modalOverlayOpeningPadding`: An amount of padding to add around the modal overlay opening - `showOn`: A function that, when it returns true, will show the step. If it returns false, the step will be skipped. - `scrollTo`: Should the element be scrolled to when this step is shown? - `scrollToHandler`: A function that lets you override the default `scrollTo` behavior and define a custom action to do the scrolling, diff --git a/src/js/components/shepherd-content/shepherd-footer/shepherd-button/styles.js b/src/js/components/shepherd-content/shepherd-footer/shepherd-button/styles.js index 00d4ef197..2683f4700 100644 --- a/src/js/components/shepherd-content/shepherd-footer/shepherd-button/styles.js +++ b/src/js/components/shepherd-content/shepherd-footer/shepherd-button/styles.js @@ -1,34 +1,40 @@ import { darken } from 'polished'; -export default function buttonStyles(classPrefix, variables) { - return { - button: { - background: variables.shepherdThemePrimary, - borderRadius: variables.shepherdButtonBorderRadius, - border: 0, - color: variables.shepherdThemeTextPrimary, - cursor: 'pointer', - display: 'inline-block', - fontFamily: 'inherit', - fontSize: '0.8em', - letterSpacing: '0.1em', - lineHeight: '1em', - marginRight: '0.5em', - padding: '0.75em 2em', - textTransform: 'uppercase', - transition: 'all 0.5s ease', - verticalAlign: 'middle', - '&:hover': { - background: darken(0.1, variables.shepherdThemePrimary) - }, - [`&.${classPrefix}shepherd-button-secondary`]: { - background: variables.shepherdThemeSecondary, - color: variables.shepherdThemeTextSecondary, +export default function buttonStyles(classPrefix, variables, includeStyles) { + if (includeStyles) { + return { + button: { + background: variables.shepherdThemePrimary, + borderRadius: variables.shepherdButtonBorderRadius, + border: 0, + color: variables.shepherdThemeTextPrimary, + cursor: 'pointer', + display: 'inline-block', + fontFamily: 'inherit', + fontSize: '0.8em', + letterSpacing: '0.1em', + lineHeight: '1em', + marginRight: '0.5em', + padding: '0.75em 2em', + textTransform: 'uppercase', + transition: 'all 0.5s ease', + verticalAlign: 'middle', '&:hover': { - background: darken(0.1, variables.shepherdThemeSecondary), - color: darken(0.1, variables.shepherdThemeTextSecondary) + background: darken(0.1, variables.shepherdThemePrimary) + }, + [`&.${classPrefix}shepherd-button-secondary`]: { + background: variables.shepherdThemeSecondary, + color: variables.shepherdThemeTextSecondary, + '&:hover': { + background: darken(0.1, variables.shepherdThemeSecondary), + color: darken(0.1, variables.shepherdThemeTextSecondary) + } } } - } + }; + } + + return { + button: {} }; } diff --git a/src/js/components/shepherd-content/shepherd-footer/styles.js b/src/js/components/shepherd-content/shepherd-footer/styles.js index 28fea8661..a5fe8a55b 100644 --- a/src/js/components/shepherd-content/shepherd-footer/styles.js +++ b/src/js/components/shepherd-content/shepherd-footer/styles.js @@ -1,16 +1,22 @@ -export default function footerStyles(classPrefix, variables) { - return { - footer: { - borderBottomLeftRadius: variables.shepherdElementBorderRadius, - borderBottomRightRadius: variables.shepherdElementBorderRadius, - display: 'flex', - justifyContent: 'flex-end', - padding: '0 0.75em 0.75em', - [`.${classPrefix}shepherd-button`]: { - '&:last-child': { - marginRight: 0 +export default function footerStyles(classPrefix, variables, includeStyles) { + if (includeStyles) { + return { + footer: { + borderBottomLeftRadius: variables.shepherdElementBorderRadius, + borderBottomRightRadius: variables.shepherdElementBorderRadius, + display: 'flex', + justifyContent: 'flex-end', + padding: '0 0.75em 0.75em', + [`.${classPrefix}shepherd-button`]: { + '&:last-child': { + marginRight: 0 + } } } - } + }; + } + + return { + footer: {} }; } diff --git a/src/js/components/shepherd-content/shepherd-header/styles.js b/src/js/components/shepherd-content/shepherd-header/styles.js index c7a7f565d..1d41bc321 100644 --- a/src/js/components/shepherd-content/shepherd-header/styles.js +++ b/src/js/components/shepherd-content/shepherd-header/styles.js @@ -1,7 +1,33 @@ import { getLighterOrDarker } from '../../../styles/utils'; -export default function headerStyles(classPrefix, variables) { - return { +export default function headerStyles(classPrefix, variables, includeStyles) { + const header = { + alignItems: 'center', + borderTopLeftRadius: variables.shepherdElementBorderRadius, + borderTopRightRadius: variables.shepherdElementBorderRadius, + display: 'flex', + justifyContent: 'flex-end', + lineHeight: '2em', + padding: '0.75em 0.75em 0', + [`.${classPrefix}shepherd-has-title .${classPrefix}shepherd-content &`]: { + background: variables.shepherdHeaderBackground, + padding: '1em' + } + }; + + const title = { + color: variables.shepherdThemeTextHeader, + display: 'flex', + flex: '1 0 auto', + fontSize: '1.1em', + fontWeight: 'normal', + margin: 0, + padding: 0, + position: 'relative', + verticalAlign: 'middle' + }; + + let styles = { 'cancel-icon': { background: 'transparent', border: 'none', @@ -24,32 +50,22 @@ export default function headerStyles(classPrefix, variables) { color: variables.shepherdThemeTextHeader } } - }, - - header: { - alignItems: 'center', - borderTopLeftRadius: variables.shepherdElementBorderRadius, - borderTopRightRadius: variables.shepherdElementBorderRadius, - display: 'flex', - justifyContent: 'flex-end', - lineHeight: '2em', - padding: '0.75em 0.75em 0', - [`.${classPrefix}shepherd-has-title .${classPrefix}shepherd-content &`]: { - background: variables.shepherdHeaderBackground, - padding: '1em' - } - }, - - title: { - color: variables.shepherdThemeTextHeader, - display: 'flex', - flex: '1 0 auto', - fontSize: '1.1em', - fontWeight: 'normal', - margin: 0, - padding: 0, - position: 'relative', - verticalAlign: 'middle' } }; + + if (includeStyles) { + styles = { + ...styles, + header, + title + }; + } else { + styles = { + ...styles, + header: {}, + title: {} + }; + } + + return styles; } diff --git a/src/js/components/shepherd-content/shepherd-text/styles.js b/src/js/components/shepherd-content/shepherd-text/styles.js index 6585ab8e9..825c14433 100644 --- a/src/js/components/shepherd-content/shepherd-text/styles.js +++ b/src/js/components/shepherd-content/shepherd-text/styles.js @@ -1,17 +1,23 @@ -export default function textStyles(variables) { - return { - text: { - color: variables.shepherdThemeTextColor, - fontSize: variables.shepherdTextFontSize, - lineHeight: variables.shepherdTextLineHeight, - padding: '0.75em', - p: { - marginTop: 0, +export default function textStyles(variables, includeStyles) { + if (includeStyles) { + return { + text: { + color: variables.shepherdThemeTextColor, + fontSize: variables.shepherdTextFontSize, + lineHeight: variables.shepherdTextLineHeight, + padding: '0.75em', + p: { + marginTop: 0, - '&:last-child': { - marginBottom: 0 + '&:last-child': { + marginBottom: 0 + } } } - } + }; + } + + return { + text: {} }; } diff --git a/src/js/components/shepherd-content/styles.js b/src/js/components/shepherd-content/styles.js index f911546d8..e3380fa8e 100644 --- a/src/js/components/shepherd-content/styles.js +++ b/src/js/components/shepherd-content/styles.js @@ -1,11 +1,17 @@ -export default function contentStyles(variables) { +export default function contentStyles(variables, includeStyles) { + if (includeStyles) { + return { + content: { + background: variables.shepherdTextBackground, + borderRadius: variables.shepherdElementBorderRadius, + fontSize: 'inherit', + outline: 'none', + padding: 0 + } + }; + } + return { - content: { - background: variables.shepherdTextBackground, - borderRadius: variables.shepherdElementBorderRadius, - fontSize: 'inherit', - outline: 'none', - padding: 0 - } + content: {} }; } diff --git a/src/js/styles/generateStyles.js b/src/js/styles/generateStyles.js index 0860a7951..a17a17a1b 100644 --- a/src/js/styles/generateStyles.js +++ b/src/js/styles/generateStyles.js @@ -14,6 +14,7 @@ export function generateStyles(options) { const variables = getVariables(options); const classPrefix = normalizePrefix(options.classPrefix); const tippyPrefix = normalizePrefix(options.tippyClassPrefix); + const { includeStyles } = options; const styles = { active: { @@ -32,13 +33,13 @@ export function generateStyles(options) { } }, - ...buttonStyles(classPrefix, variables), - ...contentStyles(variables), + ...buttonStyles(classPrefix, variables, includeStyles), + ...contentStyles(variables, includeStyles), ...elementStyles(), - ...footerStyles(classPrefix, variables), - ...headerStyles(classPrefix, variables), + ...footerStyles(classPrefix, variables, includeStyles), + ...headerStyles(classPrefix, variables, includeStyles), ...modalStyles(classPrefix, variables), - ...textStyles(variables) + ...textStyles(variables, includeStyles) }; if (variables.useDropShadow) { diff --git a/src/js/tour.jsx b/src/js/tour.jsx index aaa92cc0d..e64c499af 100644 --- a/src/js/tour.jsx +++ b/src/js/tour.jsx @@ -44,6 +44,8 @@ export class Tour extends Evented { * mousewheel, arrow keys, etc. You may want to use this to ensure you are driving the scroll position with the tour. * @param {boolean} options.exitOnEsc Exiting the tour with the escape key will be enabled unless this is explicitly * set to false. + * @param {boolean} options.includeStyles If false, the majority of the Shepherd styles will not be included. + * You may want to use this option if you find yourself overriding a lot of the Shepherd styles. * @param {boolean} options.keyboardNavigation Navigating the tour via left and right arrow keys will be enabled * unless this is explicitly set to false. * @param {HTMLElement} options.modalContainer An optional container element for the modal. @@ -65,12 +67,13 @@ export class Tour extends Evented { const defaultTourOptions = { exitOnEsc: true, + includeStyles: true, keyboardNavigation: true }; this.options = Object.assign({}, defaultTourOptions, options); this.classPrefix = this.options ? normalizePrefix(this.options.classPrefix) : ''; - this.styles = generateStyles(options); + this.styles = generateStyles(this.options); this.steps = []; this.addSteps(this.options.steps); diff --git a/src/types/step.d.ts b/src/types/step.d.ts index 9dcbdf178..091108cf8 100644 --- a/src/types/step.d.ts +++ b/src/types/step.d.ts @@ -113,9 +113,9 @@ declare namespace Step { id?: string; /** - * Extra [options to pass to tippy.js]{@link https://atomiks.github.io/tippyjs/#all-options} + * An amount of padding to add around the modal overlay opening */ - tippyOptions?: object; + modalOverlayOpeningPadding?: number; /** * Should the element be scrolled to when this step is shown? @@ -145,6 +145,11 @@ declare namespace Step { */ text?: string | ReadonlyArray | HTMLElement | (() => string | ReadonlyArray | HTMLElement) + /** + * Extra [options to pass to tippy.js]{@link https://atomiks.github.io/tippyjs/#all-options} + */ + tippyOptions?: object; + /** * The step's title. It becomes an `h3` at the top of the step. */ diff --git a/src/types/tour.d.ts b/src/types/tour.d.ts index 59ac952f0..76426408f 100644 --- a/src/types/tour.d.ts +++ b/src/types/tour.d.ts @@ -122,6 +122,12 @@ declare namespace Tour { */ exitOnEsc?: boolean; + /** + * If false, the majority of the Shepherd styles will not be included. + * You may want to use this option if you find yourself overriding a lot of the Shepherd styles. + */ + includeStyles?: boolean; + /** * Navigating the tour via left and right arrow keys will be enabled * unless this is explicitly set to false.