Skip to content

Commit 86aa8e2

Browse files
author
[email protected]
committed
Finished design system tour
1 parent c76c334 commit 86aa8e2

File tree

3 files changed

+148
-24
lines changed

3 files changed

+148
-24
lines changed

‎src/components/guided-modal-tour/index.js‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ const ModalTour = props => {
106106
const [ isVisibleDelayed, setIsVisibleDelayed ] = useState( false )
107107
const [ forceRefresh, setForceRefresh ] = useState( 0 )
108108
const [ isTransitioning, setIsTransitioning ] = useState( false )
109+
const [ direction, setDirection ] = useState( 'forward' )
109110
const modalRef = useRef( null )
110111
const glowElementRef = useRef( null )
111112

@@ -128,6 +129,7 @@ const ModalTour = props => {
128129
preStep = NOOP, // If provided, this is a function to run before the step is shown.
129130
// eslint-disable-next-line no-unused-vars
130131
postStep = NOOP, // If provided, this is a function to run after the step is shown.
132+
skipIf = NOOP, // If provided, this is a function to check if the step should be skipped.
131133
} = steps[ currentStep ]
132134

133135
// While the modal is visible, just keep on force refreshing the modal in an interval to make sure the modal is always in the correct position.
@@ -147,6 +149,7 @@ const ModalTour = props => {
147149
setIsVisible( false )
148150
setIsVisibleDelayed( false )
149151
setIsTransitioning( true )
152+
setDirection( 'forward' )
150153

151154
// If at the last step, just close
152155
if ( currentStep === steps.length - 1 ) {
@@ -160,7 +163,9 @@ const ModalTour = props => {
160163
steps[ currentStep ]?.postStep?.( currentStep )
161164
}, 50 )
162165
const nextStep = currentStep + 1
163-
steps[ nextStep ]?.preStep?.( nextStep )
166+
setTimeout( () => {
167+
steps[ nextStep ]?.preStep?.( nextStep )
168+
}, 50 )
164169
return nextStep
165170
} )
166171

@@ -187,6 +192,7 @@ const ModalTour = props => {
187192
setIsVisible( false )
188193
setIsVisibleDelayed( false )
189194
setIsTransitioning( true )
195+
setDirection( 'backward' )
190196

191197
setTimeout( () => {
192198
setCurrentStep( currentStep => {
@@ -214,6 +220,17 @@ const ModalTour = props => {
214220
}, 650 )
215221
}, [ currentStep, steps ] )
216222

223+
// If we just moved to this step, even before showing it check if we should skip it, if so, move to the next/prev step.
224+
useEffect( () => {
225+
if ( skipIf() ) {
226+
if ( direction === 'forward' ) {
227+
handleNextEvent()
228+
} else {
229+
handleBackEvent()
230+
}
231+
}
232+
}, [ currentStep, direction ] )
233+
217234
// Show modal after 1 second delay
218235
useEffect( () => {
219236
const timer = setTimeout( () => {
@@ -308,20 +325,37 @@ const ModalTour = props => {
308325
case 'left':
309326
// Left, middle
310327
return [ `${ anchorRect.left - modalRect.width - 16 }px`, `${ anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) }px` ]
328+
case 'left-top':
329+
return [ `${ anchorRect.left - modalRect.width - 16 }px`, `${ anchorRect.top + 16 }px` ]
330+
case 'left-bottom':
331+
return [ `${ anchorRect.left - modalRect.width - 16 }px`, `${ anchorRect.bottom - modalRect.height - 16 }px` ]
311332
case 'right':
312333
// Right, middle
313334
return [ `${ anchorRect.right + 16 }px`, `${ anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) }px` ]
335+
case 'right-top':
336+
return [ `${ anchorRect.right + 16 }px`, `${ anchorRect.top + 16 }px` ]
337+
case 'right-bottom':
338+
return [ `${ anchorRect.right + 16 }px`, `${ anchorRect.bottom - modalRect.height - 16 }px` ]
314339
case 'top':
315340
// Center, top
316341
return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.top - modalRect.height - 16 }px` ]
342+
case 'top-left':
343+
return [ `${ anchorRect.left + 16 }px`, `${ anchorRect.top - modalRect.height - 16 }px` ]
344+
case 'top-right':
345+
return [ `${ anchorRect.right - modalRect.width - 16 }px`, `${ anchorRect.top + 16 }px` ]
317346
case 'bottom':
318347
// Center, bottom
319348
return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.bottom + 16 }px` ]
349+
case 'bottom-left':
350+
return [ `${ anchorRect.left + 16 }px`, `${ anchorRect.bottom + 16 }px` ]
351+
case 'bottom-right':
352+
return [ `${ anchorRect.right - modalRect.width - 16 }px`, `${ anchorRect.bottom + 16 }px` ]
320353
case 'center':
321-
return [
322-
`${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`,
323-
`${ anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) }px`,
324-
]
354+
return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) }px` ]
355+
case 'center-top':
356+
return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.top + 16 }px` ]
357+
case 'center-bottom':
358+
return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.bottom - modalRect.height - 16 }px` ]
325359
default:
326360
return defaultOffset
327361
}
@@ -380,7 +414,7 @@ const ModalTour = props => {
380414
shouldCloseOnClickOutside={ false }
381415
size={ size }
382416
// onRequestClose={ onClose } // Do not use onRequestClose, it will cause the tour finish
383-
className={ classNames( 'ugb-tour-modal', `ugb-tour-modal--${ position }`, {
417+
className={ classNames( 'ugb-tour-modal', `ugb-tour-modal--${ position.replace( /-.*$/, '' ) }`, {
384418
'ugb-tour-modal--visible': isVisible,
385419
'ugb-tour-modal--visible-delayed': isVisibleDelayed,
386420
} ) }

‎src/components/guided-modal-tour/tour-steps.js‎

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const TOUR_STEPS = {
8080
description: __( 'Design once, apply everywhere! Set global styles so every block across your site looks and feels unified.', i18n ),
8181
size: 'medium',
8282
anchor: '.interface-interface-skeleton__sidebar',
83-
position: 'left',
83+
position: 'left-top',
8484
// glowTarget: '.interface-interface-skeleton__sidebar',
8585
},
8686
{
@@ -100,7 +100,87 @@ export const TOUR_STEPS = {
100100
}
101101
},
102102
},
103-
// TODO: this is not yet finished
103+
{
104+
title: __( 'This is Your Style Guide', i18n ),
105+
description: __( 'This Style Guide shows a live preview of your entire design system showing how the different design elements look. This updates based on your current settings.', i18n ),
106+
help: __( 'Scroll down to explore', i18n ),
107+
size: 'medium',
108+
anchor: '.ugb-style-guide-popover > .components-popover__content',
109+
position: 'center',
110+
// glowTarget: '.interface-interface-skeleton__sidebar',
111+
},
112+
{
113+
title: __( 'Customize Your Design System', i18n ),
114+
description: __( 'These settings are applied to all blocks across your entire site. They are used as defaults for your blocks, but you can override them on a per block basis.', i18n ),
115+
help: createInterpolateElement( __( 'Open the <strong>Global Typography</strong> panel to continue.', i18n ), {
116+
strong: <strong />,
117+
} ),
118+
anchor: '.ugb-global-typography__panel .components-panel__body-title',
119+
position: 'left',
120+
glowTarget: '.ugb-global-typography__panel .components-panel__body-toggle',
121+
nextEventTarget: '.ugb-global-typography__panel .components-panel__body-toggle',
122+
skipIf: () => {
123+
return document.querySelector( '.ugb-global-typography__panel' )?.classList.contains( 'is-opened' )
124+
},
125+
postStep: () => {
126+
// Open the typography panel if it's not open.
127+
if ( document.querySelector( '.ugb-global-typography__panel:not(.is-opened)' ) ) {
128+
document.querySelector( '.ugb-global-typography__panel .components-panel__body-toggle' )?.click()
129+
}
130+
},
131+
},
132+
{
133+
title: __( 'Try Changing Your Font Pair', i18n ),
134+
description: __( 'Try changing the font pair to see how it looks in the Style Guide.', i18n ),
135+
help: createInterpolateElement( __( 'Pick another <strong>Preset Font Pair</strong> to continue.', i18n ), {
136+
strong: <strong />,
137+
} ),
138+
anchor: '.ugb-global-settings-font-pair-control:not(.ugb-global-settings-font-pair__selected)',
139+
position: 'left',
140+
glowTarget: '.ugb-global-settings-font-pair-control:not(.ugb-global-settings-font-pair__selected)',
141+
nextEventTarget: '.ugb-global-settings-font-pair__container [role="button"]',
142+
preStep: () => {
143+
// Make sure that the typography panel is open.
144+
if ( document.querySelector( '.ugb-global-typography__panel:not(.is-opened)' ) ) {
145+
document.querySelector( '.ugb-global-typography__panel .components-panel__body-title' )?.click()
146+
}
147+
},
148+
},
149+
{
150+
title: __( 'Whoa! Your Site Updated', i18n ),
151+
description: __( 'Did you see that? Your site has been updated with the new font pair. You can see the changes in the Style Guide as well!', i18n ),
152+
help: __( 'Other parts below the style guide also updated!', i18n ),
153+
anchor: '.ugb-style-guide__color-container',
154+
position: 'top',
155+
glowTarget: '.ugb-style-guide__color-container',
156+
preStep: () => {
157+
const el = document.querySelector( '.ugb-style-guide-popover > .components-popover__content' )
158+
// Scroll this to the top.
159+
if ( el ) {
160+
el.scrollTo( {
161+
top: 0,
162+
behavior: 'smooth',
163+
} )
164+
}
165+
},
166+
},
167+
{
168+
title: __( 'Share Your Style Guide', i18n ),
169+
description: __( 'Lastly, you can easily share your design system with others by exporting your Style Guide as an image. This is perfect for sharing with clients, teammates, or for documentation.', i18n ),
170+
anchor: '.ugb-style-guide__print-button',
171+
position: 'bottom',
172+
glowTarget: '.ugb-style-guide__print-button',
173+
preStep: () => {
174+
const el = document.querySelector( '.ugb-style-guide-popover > .components-popover__content' )
175+
// Scroll this to the top.
176+
if ( el ) {
177+
el.scrollTo( {
178+
top: 0,
179+
behavior: 'smooth',
180+
} )
181+
}
182+
},
183+
},
104184
],
105185
},
106186
'design-library': {

‎src/components/style-guide/components.js‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export const Colors = ( { colors } ) => {
126126

127127
export const Typography = ( { typography } ) => {
128128
return <>
129-
<h1 className="ugb-style-guide__section-title ugb-style-guide__title">{ __( 'Typography', i18n ) }</h1>
129+
<h1 className="ugb-style-guide__section-title ugb-style-guide__title ugb-style-guide__typography-title">{ __( 'Typography', i18n ) }</h1>
130130
<div className="ugb-style-guide__columns ugb-style-guide__typography-headings">
131131

132132
<div className="ugb-style-guide__column">
@@ -309,17 +309,19 @@ export const WebPreview = ( { className } ) => {
309309
<div className="has-text-align-center stk-block-content stk-inner-blocks stk-830918c-inner-blocks">
310310
<div className="wp-block-stackable-subtitle stk-block-subtitle stk-block stk-fb52f96" data-block-id="fb52f96">
311311
<style>{ '.stk-fb52f96 .stk-block-subtitle__text{color:#bbbbbb !important;}' }</style>
312-
<p className="stk-block-subtitle__text stk-subtitle has-text-color">{ __( 'Subtitle', i18n ) }</p>
312+
<p className="stk-block-subtitle__text stk-subtitle has-text-color">{ __( 'Welcome to Our Company', i18n ) }</p>
313313
</div>
314314

315315
<div className="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-6602002" id="hero" data-block-id="6602002">
316316
<style>{ '.stk-6602002 .stk-block-heading__text{color:#ffffff !important;}' }</style>
317-
<h1 className="stk-block-heading__text has-text-color">{ __( 'Hero', i18n ) }</h1>
317+
<h1 className="stk-block-heading__text has-text-color">{ __( 'Professional Solutions for Businesses', i18n ) }</h1>
318318
</div>
319319

320320
<div className="wp-block-stackable-text stk-block-text stk-block stk-f9171eb" data-block-id="f9171eb">
321321
<style>{ '.stk-f9171eb .stk-block-text__text{color:#ffffff !important;}' }</style>
322-
<p className="stk-block-text__text has-text-color">{ LONG_TEXT[ 0 ] }</p>
322+
<p className="stk-block-text__text has-text-color">
323+
{ __( 'We provide innovative services and support to help your business grow and succeed in a competitive market.', i18n ) }
324+
</p>
323325
</div>
324326

325327
<div className="wp-block-stackable-button-group stk-block-button-group stk-block stk-ff42814" data-block-id="ff42814">
@@ -353,11 +355,11 @@ export const WebPreview = ( { className } ) => {
353355
<div className="stk-column-wrapper stk-block-column__content stk-container stk-24d7b12-container stk--no-background stk--no-padding">
354356
<div className="has-text-align-center stk-block-content stk-inner-blocks stk-24d7b12-inner-blocks">
355357
<div className="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-8b4585e" id="section-title" data-block-id="8b4585e">
356-
<h2 className="stk-block-heading__text">{ __( 'Section Title', i18n ) }</h2>
358+
<h2 className="stk-block-heading__text">{ __( 'Our Services', i18n ) }</h2>
357359
</div>
358360

359361
<div className="wp-block-stackable-text stk-block-text stk-block stk-111d3c5" data-block-id="111d3c5">
360-
<p className="stk-block-text__text">{ __( 'Description', i18n ) }</p>
362+
<p className="stk-block-text__text">{ __( 'Explore a wide range of solutions designed to meet your business needs.', i18n ) }</p>
361363
</div>
362364

363365
<div className="wp-block-stackable-columns stk-block-columns stk-block stk-a05e839" data-block-id="a05e839">
@@ -374,11 +376,13 @@ export const WebPreview = ( { className } ) => {
374376
</div>
375377

376378
<div className="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-3b5efe7" id="grid-item-title" data-block-id="3b5efe7">
377-
<h3 className="stk-block-heading__text">{ __( 'Grid Item Title', i18n ) }</h3>
379+
<h3 className="stk-block-heading__text">{ __( 'Consulting', i18n ) }</h3>
378380
</div>
379381

380382
<div className="wp-block-stackable-text stk-block-text stk-block stk-b456df6" data-block-id="b456df6">
381-
<p className="stk-block-text__text">{ LONG_TEXT[ 1 ] }</p>
383+
<p className="stk-block-text__text">
384+
{ __( 'Strategic guidance and expert advice to help your organization achieve its objectives.', i18n ) }
385+
</p>
382386
</div>
383387
</div>
384388
</div>
@@ -396,11 +400,13 @@ export const WebPreview = ( { className } ) => {
396400
</div>
397401

398402
<div className="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-8248330" id="grid-item-title" data-block-id="8248330">
399-
<h3 className="stk-block-heading__text">{ __( 'Grid Item Title', i18n ) }</h3>
403+
<h3 className="stk-block-heading__text">{ __( 'Technology', i18n ) }</h3>
400404
</div>
401405

402406
<div className="wp-block-stackable-text stk-block-text stk-block stk-dd2581b" data-block-id="dd2581b">
403-
<p className="stk-block-text__text">{ LONG_TEXT[ 3 ] }</p>
407+
<p className="stk-block-text__text">
408+
{ __( 'Custom software and IT solutions to streamline your business processes.', i18n ) }
409+
</p>
404410
</div>
405411
</div>
406412
</div>
@@ -418,11 +424,13 @@ export const WebPreview = ( { className } ) => {
418424
</div>
419425

420426
<div className="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-3d2ed89" id="grid-item-title" data-block-id="3d2ed89">
421-
<h3 className="stk-block-heading__text">{ __( 'Grid Item Title', i18n ) }</h3>
427+
<h3 className="stk-block-heading__text">{ __( 'Support', i18n ) }</h3>
422428
</div>
423429

424430
<div className="wp-block-stackable-text stk-block-text stk-block stk-ffddcf7" data-block-id="ffddcf7">
425-
<p className="stk-block-text__text">{ LONG_TEXT[ 4 ] }</p>
431+
<p className="stk-block-text__text">
432+
{ __( 'Dedicated assistance and ongoing support for all your business needs.', i18n ) }
433+
</p>
426434
</div>
427435
</div>
428436
</div>
@@ -460,22 +468,24 @@ export const WebPreview = ( { className } ) => {
460468
<div className="stk-column-wrapper stk-block-column__content stk-container stk-d99e48d-container stk--no-background stk--no-padding">
461469
<div className="stk-block-content stk-inner-blocks stk-d99e48d-inner-blocks">
462470
<div className="wp-block-stackable-subtitle stk-block-subtitle stk-block stk-9514e13" data-block-id="9514e13">
463-
<p className="stk-block-subtitle__text stk-subtitle">{ __( 'Subtitle', i18n ) }</p>
471+
<p className="stk-block-subtitle__text stk-subtitle">{ __( 'About Our Company', i18n ) }</p>
464472
</div>
465473

466474
<div className="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-505a24b" id="section-title" data-block-id="505a24b">
467-
<h2 className="stk-block-heading__text">{ __( 'Section Title', i18n ) }</h2>
475+
<h2 className="stk-block-heading__text">{ __( 'Committed to Your Success', i18n ) }</h2>
468476
</div>
469477

470478
<div className="wp-block-stackable-text stk-block-text stk-block stk-36a0bf6" data-block-id="36a0bf6">
471-
<p className="stk-block-text__text">{ LONG_TEXT[ 5 ] }</p>
479+
<p className="stk-block-text__text">
480+
{ __( 'Our experienced team delivers reliable solutions and outstanding results for businesses of all sizes and industries.', i18n ) }
481+
</p>
472482
</div>
473483

474484
<div className="wp-block-stackable-button-group stk-block-button-group stk-block stk-cdea3f4" data-block-id="cdea3f4">
475485
<div className="stk-row stk-inner-blocks stk-block-content stk-button-group">
476486
<div className="wp-block-stackable-button stk-block-button stk-block stk-96502ae" data-block-id="96502ae">
477487
<a className="stk-link stk-button stk--hover-effect-darken" href="#" onClick={ e => e.preventDefault() }>
478-
<span className="stk-button__inner-text">{ __( 'Learn More', i18n ) }</span>
488+
<span className="stk-button__inner-text">{ __( 'Read More', i18n ) }</span>
479489
</a>
480490
</div>
481491
</div>

0 commit comments

Comments
 (0)