Skip to content

Commit b24825d

Browse files
author
[email protected]
committed
added style guide
1 parent 39d2d85 commit b24825d

File tree

8 files changed

+307
-6
lines changed

8 files changed

+307
-6
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,12 @@ const ModalTour = props => {
125125
setIsVisibleDelayed( false )
126126
setIsTransitioning( true )
127127

128+
// If at the last step, just close
129+
if ( currentStep === steps.length - 1 ) {
130+
onClose()
131+
return
132+
}
133+
128134
setTimeout( () => {
129135
setCurrentStep( currentStep => {
130136
setTimeout( () => {

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,21 @@ export const TOUR_STEPS = {
6060
{
6161
title: __( 'Use The Style Guide', i18n ),
6262
description: __( 'You can use the Style Guide to see how your complete design system looks.', i18n ),
63-
help: createInterpolateElement( __( 'Click the <strong>Style Guide</strong> button to continue.', i18n ), {
63+
help: createInterpolateElement( __( 'Click the <strong>Preview Design System</strong> button to continue.', i18n ), {
6464
strong: <strong />,
6565
} ),
66-
anchor: '.ugb-modal-design-system__style-guide-button',
66+
anchor: '.ugb-global-settings__preview-button',
6767
position: 'left',
68-
nextEventTarget: '.ugb-modal-design-system__style-guide-button',
69-
glowTarget: '.ugb-modal-design-system__style-guide-button',
68+
nextEventTarget: '.ugb-global-settings__preview-button',
69+
glowTarget: '.ugb-global-settings__preview-button',
70+
postStep: () => {
71+
// Open the style guide if it's not open.
72+
if ( ! document.querySelector( '.ugb-style-guide-popover' ) ) {
73+
document.querySelector( '.ugb-global-settings__preview-button' )?.click()
74+
}
75+
},
7076
},
77+
// TODO: this is not yet finished
7178
],
7279
},
7380
'editor-welcome': {

‎src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export { default as TaxonomyControl } from './taxonomy-control'
5757
export { default as Tooltip } from './tooltip'
5858
export { default as BlockStyles } from './block-styles'
5959
export { default as GuidedModalTour } from './guided-modal-tour'
60+
export { default as StyleGuide, StyleGuidePopover } from './style-guide'
6061

6162
// V2 only Components, for deprecation
6263
export { default as BlockContainer } from './block-container'

‎src/components/style-guide/editor.scss‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.ugb-style-guide {
2+
.ugb-style-guide__content {
3+
padding: 70px;
4+
}
5+
6+
.ugb-style-guide__columns {
7+
display: grid;
8+
grid-template-columns: 1fr 1fr;
9+
gap: 50px;
10+
}
11+
12+
.ugb-style-guide__section-title {
13+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
14+
font-size: 2em;
15+
font-weight: 700;
16+
border-bottom: 1px solid #eee;
17+
line-height: 1.2;
18+
padding: 0 0 8px;
19+
margin-bottom: 1em;
20+
&:not(:first-child) {
21+
margin-top: 2em;
22+
}
23+
}
24+
25+
.ugb-style-guide__section-subheading {
26+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
27+
font-size: 1.1em;
28+
font-weight: 400;
29+
margin-bottom: 1em;
30+
&:not(:first-child) {
31+
margin-top: 1.5em;
32+
}
33+
}
34+
.ugb-style-guide__label {
35+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
36+
font-size: 1em;
37+
font-weight: 500;
38+
line-height: 1;
39+
}
40+
41+
.ugb-style-guide__colors {
42+
gap: 20px;
43+
margin-top: 20px;
44+
display: flex;
45+
flex-wrap: wrap;
46+
.ugb-style-guide__column {
47+
flex: 1 1 200px;
48+
height: 100px;
49+
border-radius: 10px;
50+
border: 1px solid #eee;
51+
display: flex;
52+
align-items: flex-end;
53+
padding: 12px;
54+
}
55+
}
56+
57+
}
58+
.ugb-style-guide-popover__title {
59+
margin: 70px 70px 0;
60+
}
61+
62+
.ugb-style-guide__print-button {
63+
float: inline-end;
64+
}
65+
.ugb-style-guide-popover {
66+
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
67+
68+
.ugb-style-guide-popover__close-button {
69+
height: 40px;
70+
width: 40px;
71+
padding: 8px;
72+
right: 20px;
73+
position: absolute;
74+
margin-top: 10px;
75+
}
76+
77+
.ugb-style-guide__print-button {
78+
margin: -1em 70px 0 0;
79+
}
80+
81+
> .components-popover__content {
82+
margin-top: 20px;
83+
margin-left: 20px;
84+
width: calc(var(--width) - 40px) !important;
85+
height: calc(var(--height) - 40px) !important;
86+
}
87+
}

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

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { i18n } from 'stackable'
5+
6+
/**
7+
* Internal dependencies
8+
*/
9+
import { toPng } from 'html-to-image'
10+
11+
/**
12+
* WordPress dependencies
13+
*/
14+
import { sprintf, __ } from '@wordpress/i18n'
15+
import { useRef, useState } from '@wordpress/element'
16+
import { Icon, download as downloadIcon } from '@wordpress/icons'
17+
import { Button } from '@wordpress/components'
18+
import { isDarkColor } from '~stackable/util'
19+
20+
export { default as StyleGuidePopover } from './popover'
21+
22+
// TODO: This is not yet finished
23+
const StyleGuide = () => {
24+
const styleGuideRef = useRef( null )
25+
26+
return (
27+
<>
28+
<ExportButton printRef={ styleGuideRef } />
29+
<div className="ugb-style-guide">
30+
<div className="ugb-style-guide__content editor-styles-wrapper" ref={ styleGuideRef }>
31+
32+
<h1 className="ugb-style-guide__section-title">{ __( 'Colors', i18n ) }</h1>
33+
<h2 className="ugb-style-guide__section-subheading">{ __( 'Color Palette', i18n ) }</h2>
34+
<div className="ugb-style-guide__columns ugb-style-guide__colors">
35+
<div className="ugb-style-guide__column" style={ { backgroundColor: '#f00069' } }>
36+
<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#f00069' ) ? '#fff' : '#000' } }>
37+
#F00069
38+
</div>
39+
</div>
40+
<div className="ugb-style-guide__column" style={ { backgroundColor: '#111' } }>
41+
<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#111' ) ? '#fff' : '#000' } }>
42+
#111111
43+
</div>
44+
</div>
45+
<div className="ugb-style-guide__column" style={ { backgroundColor: '#222' } }>
46+
<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#222' ) ? '#fff' : '#000' } }>
47+
#222222
48+
</div>
49+
</div>
50+
<div className="ugb-style-guide__column" style={ { backgroundColor: '#333' } }>
51+
<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#333' ) ? '#fff' : '#000' } }>
52+
#333333
53+
</div>
54+
</div>
55+
<div className="ugb-style-guide__column" style={ { backgroundColor: '#444' } }>
56+
<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#444' ) ? '#fff' : '#000' } }>
57+
#444444
58+
</div>
59+
</div>
60+
<div className="ugb-style-guide__column" style={ { backgroundColor: '#555' } }>
61+
<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#555' ) ? '#fff' : '#000' } }>
62+
#555555
63+
</div>
64+
</div>
65+
<div className="ugb-style-guide__column" style={ { backgroundColor: '#666' } }>
66+
<div className="ugb-style-guide__color-label ugb-style-guide__label" style={ { color: isDarkColor( '#666' ) ? '#fff' : '#000' } }>
67+
#666666
68+
</div>
69+
</div>
70+
</div>
71+
72+
<h2 className="ugb-style-guide__section-subheading">{ __( 'Color Schemes', i18n ) }</h2>
73+
74+
<h1 className="ugb-style-guide__section-title">{ __( 'Typography', i18n ) }</h1>
75+
<div className="ugb-style-guide__columns">
76+
<div className="ugb-style-guide__column">
77+
<h2 className="ugb-style-guide__section-subheading">{ __( 'Titles & Headings', i18n ) }</h2>
78+
<h1>{ __( 'Heading 1', i18n ) }</h1>
79+
<h2>{ __( 'Heading 2', i18n ) }</h2>
80+
<h3>{ __( 'Heading 3', i18n ) }</h3>
81+
<h4>{ __( 'Heading 4', i18n ) }</h4>
82+
<h5>{ __( 'Heading 5', i18n ) }</h5>
83+
<h6>{ __( 'Heading 6', i18n ) }</h6>
84+
<p>{ __( 'Paragraph', i18n ) }</p>
85+
</div>
86+
<div className="ugb-style-guide__column">
87+
<h2 className="ugb-style-guide__section-subheading">{ __( 'Body Text', i18n ) }</h2>
88+
<p>Morning sunlight filters through city windows as familiar voices fill the room. The table is scattered with mugs and yesterday\’s news, while someone debates the best way to arrange the cushions. Laughter drifts from the kitchen, and plans for the day are made between sips of coffee and playful banter.</p>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</>
94+
)
95+
}
96+
97+
export default StyleGuide
98+
99+
const ExportButton = props => {
100+
const { printRef } = props
101+
const [ isExporting, setIsExporting ] = useState( false )
102+
103+
const handlePrint = () => {
104+
setIsExporting( true )
105+
toPng( printRef.current, { cacheBust: true } )
106+
.then( dataUrl => {
107+
const link = document.createElement( 'a' )
108+
link.download = 'style-guide.png'
109+
link.href = dataUrl
110+
link.click()
111+
setIsExporting( false )
112+
} )
113+
.catch( err => {
114+
alert( sprintf( __( 'Error exporting style guide: %s', i18n ), err.message || err ) ) // eslint-disable-line no-alert
115+
setIsExporting( false )
116+
} )
117+
}
118+
119+
return (
120+
<Button
121+
className="ugb-style-guide__print-button"
122+
isSecondary
123+
onClick={ handlePrint }
124+
icon={ <Icon icon={ downloadIcon } /> }
125+
isBusy={ isExporting }
126+
disabled={ isExporting }
127+
>
128+
{ __( 'Export', i18n ) }
129+
</Button>
130+
)
131+
}

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { i18n } from 'stackable'
5+
6+
/**
7+
* Internal dependencies
8+
*/
9+
import { StyleGuide } from '~stackable/components'
10+
11+
/**
12+
* WordPress dependencies
13+
*/
14+
import { __ } from '@wordpress/i18n'
15+
import { useMemo } from '@wordpress/element'
16+
import { Popover, Button } from '@wordpress/components'
17+
import { Icon, close as closeIcon } from '@wordpress/icons'
18+
19+
const StyleGuidePopover = props => {
20+
const { onClose } = props
21+
22+
// On load, look for the .interface-interface-skeleton__content and position over it.
23+
const [ editorStylesWrapper, width, height ] = useMemo( () => {
24+
const el = document.querySelector( '.interface-interface-skeleton__content' )
25+
return [ el, el?.offsetWidth, el?.offsetHeight ]
26+
}, [] )
27+
28+
const style = width && height ? { '--width': `${ width }px`, '--height': `${ height }px` } : {}
29+
30+
return (
31+
<Popover
32+
className="ugb-style-guide-popover"
33+
anchor={ editorStylesWrapper }
34+
placement="overlay"
35+
style={ style }
36+
>
37+
<Button
38+
className="ugb-style-guide-popover__close-button"
39+
variant="tertiary"
40+
onClick={ onClose }
41+
>
42+
<Icon icon={ closeIcon } />
43+
</Button>
44+
<h1 className="ugb-style-guide-popover__title">{ __( 'Design System Style Guide', i18n ) }</h1>
45+
<StyleGuide { ...props } />
46+
</Popover>
47+
)
48+
}
49+
50+
export default StyleGuidePopover

‎src/plugins/global-settings/editor.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,8 @@
3131
position: sticky;
3232
top: 75px;
3333
}
34+
35+
.ugb-global-settings__preview-button {
36+
width: 100%;
37+
justify-content: center !important;
38+
}

‎src/plugins/global-settings/index.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
isContentOnlyMode,
1919
settings,
2020
} from 'stackable'
21-
import { GuidedModalTour } from '~stackable/components'
21+
import { GuidedModalTour, StyleGuidePopover } from '~stackable/components'
2222
import { currentUserHasCapability } from '~stackable/util'
2323

2424
/** WordPress dependencies
@@ -30,7 +30,8 @@ import { useEffect, useState } from '@wordpress/element'
3030
import {
3131
dispatch, select, useSelect,
3232
} from '@wordpress/data'
33-
import { PanelBody } from '@wordpress/components'
33+
import { Icon, layout as layoutIcon } from '@wordpress/icons'
34+
import { Button, PanelBody } from '@wordpress/components'
3435

3536
// Action used to toggle the global settings panel.
3637
addAction( 'stackable.global-settings.toggle-sidebar', 'toggle', () => {
@@ -48,6 +49,8 @@ const GlobalSettings = () => {
4849
const [ userCanManageOptions, setUserCanManageOptions ] = useState( false )
4950
const id = useSelect( select => select( 'core' ).getCurrentUser()?.id )
5051

52+
const [ isStyleGuideOpen, setIsStyleGuideOpen ] = useState( false )
53+
5154
useEffect( () => {
5255
const checkCapabilities = async () => {
5356
const capabilities = await currentUserHasCapability( 'manage_options' )
@@ -77,7 +80,18 @@ const GlobalSettings = () => {
7780
{ /* &nbsp;
7881
<a href="https://docs.wpstackable.com/article/465-how-to-style-the-different-block-hover-states?utm_source=wp-settings-global-settings&utm_campaign=learnmore&utm_medium=wp-dashboard" target="_docs">{ __( 'Learn more', i18n ) }</a> */ }
7982
</p>
83+
<Button
84+
isSecondary
85+
className="ugb-global-settings__preview-button"
86+
onClick={ () => setIsStyleGuideOpen( isOpen => ! isOpen ) }
87+
icon={ <Icon icon={ layoutIcon } /> }
88+
>
89+
{ isStyleGuideOpen ? __( 'Close Preview', i18n ) : __( 'Preview Design System', i18n ) }
90+
</Button>
8091
</PanelBody>
92+
{ isStyleGuideOpen && (
93+
<StyleGuidePopover onClose={ () => setIsStyleGuideOpen( false ) } />
94+
) }
8195
{ globalSettingsInspector }
8296
<GuidedModalTour tourId="design-system-welcome" />
8397
</PluginSidebar>

0 commit comments

Comments
 (0)