Skip to content

Commit 02490b3

Browse files
author
[email protected]
committed
complete style guide
1 parent 0e8409a commit 02490b3

File tree

6 files changed

+195
-2
lines changed

6 files changed

+195
-2
lines changed

‎.config/rules.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ module.exports = [
3939
],
4040
},
4141
{
42-
test: /\.(png|jpg|gif)$/,
42+
test: /\.(png|jpg|gif|webp)$/,
4343
use: [
4444
{
4545
loader: 'file-loader',

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

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,111 @@ $guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
221221
color: #bbb;
222222
margin-top: 8px;
223223
}
224+
225+
// Web Elements
226+
227+
.ugb-style-guide__elements {
228+
display: flex;
229+
flex-wrap: wrap;
230+
gap: 24px;
231+
}
232+
233+
.ugb-style-guide__elements__images img {
234+
width: 60%;
235+
height: auto;
236+
}
237+
238+
// Design System Preview
239+
240+
.ugb-style-guide__preview {
241+
border-radius: 16px;
242+
overflow: hidden;
243+
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
244+
}
245+
246+
.ugb-style-guide__preview-mock-browser {
247+
background: #222;
248+
padding: 8px 16px;
249+
display: flex;
250+
justify-content: center;
251+
align-items: center;
252+
position: relative;
253+
}
254+
.ugb-style-guide__preview-mock-browser__buttons {
255+
display: flex;
256+
gap: 8px;
257+
inset-inline-start: 16px;
258+
position: absolute;
259+
}
260+
.ugb-style-guide__preview-mock-browser__button {
261+
height: 10px;
262+
width: 10px;
263+
background: #999;
264+
border-radius: 100%;
265+
}
266+
.ugb-style-guide__preview-mock-browser__url {
267+
font-size: 12px;
268+
color: #888;
269+
}
270+
.ugb-style-guide__preview-mock-browser__resize-handle {
271+
inset-inline-start: 16px;
272+
}
273+
274+
.ugb-style-guide__preview-hero {
275+
// Fade the background image
276+
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), var(--bg-image);
277+
background-size: cover;
278+
background-position: center;
279+
background-repeat: no-repeat;
280+
// TODO: These should all be the design system: background padding.
281+
padding: 100px 50px;
282+
text-align: center;
283+
color: #fff;
284+
}
285+
286+
.ugb-style-guide__preview-content {
287+
padding: 50px;
288+
// TODO: These should all be the design system: background padding.
289+
> h2,
290+
p {
291+
text-align: center;
292+
}
293+
}
294+
.ugb-style-guide__preview-content__grid {
295+
margin-top: 36px;
296+
display: grid;
297+
grid-template-columns: 1fr 1fr 1fr;
298+
// TODO: These should all be the design system
299+
gap: 24px;
300+
}
301+
302+
.ugb-style-guide__preview-content__grid-item {
303+
text-align: center;
304+
// TODO: These should all be the design system for containers
305+
background: #fff;
306+
padding: 24px;
307+
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
308+
}
309+
310+
.ugb-style-guide__preview-content-2 {
311+
// TODO: These should all be the design system
312+
background: #eee;
313+
display: grid;
314+
grid-template-columns: 1fr 1fr;
315+
gap: 24px;
316+
padding: 50px;
317+
.ugb-style-guide__preview-content__media {
318+
img {
319+
object-fit: cover;
320+
width: 100%;
321+
height: 400px;
322+
// TODO: use image border radius and shadow
323+
}
324+
}
325+
.ugb-style-guide__preview-content__text {
326+
padding-top: 50px;
327+
}
328+
}
224329
}
225330
.ugb-style-guide-popover__heading {
226331
margin: 70px 70px 0;

‎src/components/style-guide/images/hero-bg.webp‎

98.8 KB
Loading

‎src/components/style-guide/images/media-text.webp‎

39.7 KB
Loading

‎src/components/style-guide/images/readme.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
hero-bg image from: https://www.pexels.com/photo/house-near-body-of-water-356807/ by Daniel Frank
2+
media-text image from: https://www.pexels.com/photo/man-in-black-and-white-long-sleeve-shirt-holding-brown-leather-bag-6649411/ by cottonbro studio

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

Lines changed: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
/**
22
* External dependencies
33
*/
4-
import { i18n } from 'stackable'
4+
import { i18n, srcUrl } from 'stackable'
55

66
/**
77
* Internal dependencies
88
*/
99
import { isDarkColor } from '~stackable/util'
10+
import heroBg from './images/hero-bg.webp'
11+
import mediaText from './images/media-text.webp'
12+
import {
13+
Icon,
14+
addTemplate as addTemplateIcon,
15+
styles as stylesIcon,
16+
scheduled as scheduledIcon,
17+
} from '@wordpress/icons'
1018

1119
/**
1220
* WordPress dependencies
@@ -370,6 +378,84 @@ const StyleGuide = props => {
370378
<p>{ LONG_TEXT[ 2 ] } { LONG_TEXT[ 1 ] } { LONG_TEXT[ 2 ] }</p>
371379
</div>
372380
</div>
381+
382+
<h1 className="ugb-style-guide__section-title ugb-style-guide__title">{ __( 'Web Elements', i18n ) }</h1>
383+
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Buttons', i18n ) }</h2>
384+
<div className="ugb-style-guide__elements ugb-style-guide__elements__buttons">
385+
<button className="ugb-style-guide__button">Button</button>
386+
{ /* TODO: Kae: These are block styles: */ }
387+
<button className="ugb-style-guide__button">Secondary Button</button>
388+
<button className="ugb-style-guide__button">Outline Button</button>
389+
</div>
390+
<h2 className="ugb-style-guide__section-subheading ugb-style-guide__title">{ __( 'Images', i18n ) }</h2>
391+
<div className="ugb-style-guide__elements ugb-style-guide__elements__images">
392+
<img src={ srcUrl + '/' + heroBg } alt="Placeholder" />
393+
{ /* TODO: Kae: Block styles here if any */ }
394+
</div>
395+
{ /* TODO: Kae: Remaining block styles: */ }
396+
397+
<h1 className="ugb-style-guide__section-title ugb-style-guide__title">{ __( 'Design System Preview', i18n ) }</h1>
398+
<div className="ugb-style-guide__preview">
399+
<div className="ugb-style-guide__preview-mock-browser">
400+
<div className="ugb-style-guide__preview-mock-browser__buttons">
401+
<div className="ugb-style-guide__preview-mock-browser__button"></div>
402+
<div className="ugb-style-guide__preview-mock-browser__button"></div>
403+
<div className="ugb-style-guide__preview-mock-browser__button"></div>
404+
</div>
405+
{ /* TODO: can we get the URL of the current site here? */ }
406+
<div className="ugb-style-guide__preview-mock-browser__url">https://example.com</div>
407+
<div className="ugb-style-guide__preview-mock-browser__resize-handle"></div>
408+
</div>
409+
{ /* TODO: this is a section with a background */ }
410+
<div className="ugb-style-guide__preview-hero" style={ { '--bg-image': `url(${ srcUrl + '/' + heroBg })` } }>
411+
<div>{ __( 'Subtitle', i18n ) }</div>
412+
<h1>{ __( 'Hero', i18n ) }</h1>
413+
<p>{ LONG_TEXT[ 0 ] }</p>
414+
<div>
415+
<button>{ __( 'Get Started', i18n ) }</button>
416+
<button>{ __( 'Learn More', i18n ) }</button>
417+
</div>
418+
</div>
419+
{ /* TODO: no background section */ }
420+
<div className="ugb-style-guide__preview-content">
421+
<h2>{ __( 'Section Title', i18n ) }</h2>
422+
<p>{ __( 'Description', i18n ) }</p>
423+
<div className="ugb-style-guide__preview-content__grid">
424+
{ /* TODO: this should have containers on */ }
425+
<div className="ugb-style-guide__preview-content__grid-item">
426+
<Icon icon={ addTemplateIcon } />
427+
<h3>{ __( 'Grid Item Title', i18n ) }</h3>
428+
<p>{ LONG_TEXT[ 1 ] }</p>
429+
</div>
430+
<div className="ugb-style-guide__preview-content__grid-item">
431+
<Icon icon={ stylesIcon } />
432+
<h3>{ __( 'Grid Item Title', i18n ) }</h3>
433+
<p>{ LONG_TEXT[ 3 ] }</p>
434+
</div>
435+
<div className="ugb-style-guide__preview-content__grid-item">
436+
<Icon icon={ scheduledIcon } />
437+
<h3>{ __( 'Grid Item Title', i18n ) }</h3>
438+
<p>{ LONG_TEXT[ 4 ] }</p>
439+
</div>
440+
</div>
441+
{ /* TODO: Kae: Add the content here */ }
442+
</div>
443+
{ /* TODO: section with background: media on left, text on right */ }
444+
<div className="ugb-style-guide__preview-content-2">
445+
<div className="ugb-style-guide__preview-content__media">
446+
{ /* TODO: use actual random neutral image */ }
447+
<img src={ srcUrl + '/' + mediaText } alt="Placeholder" />
448+
</div>
449+
<div className="ugb-style-guide__preview-content__text">
450+
<p>{ __( 'Subtitle', i18n ) }</p>
451+
<h2>{ __( 'Section Title', i18n ) }</h2>
452+
<p>{ LONG_TEXT[ 5 ] }</p>
453+
<div>
454+
<button>{ __( 'Learn More', i18n ) }</button>
455+
</div>
456+
</div>
457+
</div>
458+
</div>
373459
</div>
374460
</div>
375461
</>

0 commit comments

Comments
 (0)