Update Customize Your Store introduction page (#40293)
* Add intro Banner components * Add intro banner svg * Add additional theme card data * Add theme slug * Add intro page layout and styling * Remove unused component files * Update button events * Add intro Banner components * Add intro banner svg * Add additional theme card data * Add theme slug * Add intro page layout and styling * Remove unused component files * Update button events * Add changelog * Fix lint issues * Fix lint issues * Fix lint issues * Fix lint issues --------- Co-authored-by: Adrian Duffell <9312929+adrianduffell@users.noreply.github.com>
This commit is contained in:
Chris Runnells
GitHub
parent
2313667d81
commit
77db736fc9
|
|
@ -0,0 +1,26 @@
|
|||
<svg width="399" height="351" viewBox="0 0 399 351" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M690.229 71.6773C732.419 29.4861 704.871 -66.489 628.68 -142.668C552.49 -218.86 456.531 -246.423 414.327 -204.232C387.767 -177.672 388.854 -129.818 412.279 -78.9995C293.927 -161.631 168.994 -182.204 107.389 -120.612C45.7841 -59.0053 66.3567 65.9162 149 184.286C98.1829 160.846 50.3307 159.773 23.7712 186.333C-18.4189 228.525 9.12891 324.5 85.3197 400.678C161.51 476.871 257.469 504.419 299.659 462.228C326.219 435.668 325.131 387.815 301.707 336.996C420.073 419.628 545.006 440.201 606.597 378.608C668.202 317.002 647.629 192.08 564.986 73.7106C615.803 97.1502 663.655 98.2233 690.215 71.6632L690.229 71.6773Z" fill="#E6DCFF" fill-opacity="0.5"/>
|
||||
<path d="M376.07 217H319.352V229.555H376.07V217Z" fill="#271B3D"/>
|
||||
<path d="M376.07 229.555H319.352V250.479H376.07V229.555Z" fill="#BEA0F2"/>
|
||||
<path d="M367.337 221.185L371.521 225.37" stroke="white" stroke-width="0.71" stroke-miterlimit="10"/>
|
||||
<path d="M371.521 221.185L367.337 225.37" stroke="white" stroke-width="0.71" stroke-miterlimit="10"/>
|
||||
<path d="M334.217 324.551H376.066V303.627H334.217V324.551Z" fill="#BEA0F2"/>
|
||||
<path d="M240.498 324.551H282.346V303.627H240.498V324.551Z" fill="#BEA0F2"/>
|
||||
<path d="M287.36 324.551H329.208V303.627H287.36V324.551Z" fill="#BEA0F2"/>
|
||||
<path d="M308.272 299.132H350.12V278.208H308.272V299.132Z" fill="#BEA0F2"/>
|
||||
<path d="M355.142 299.132H376.066V278.208H355.142V299.132Z" fill="#BEA0F2"/>
|
||||
<path d="M261.694 293.642C274.881 298.601 282.371 290.256 282.371 290.256L248.478 277.509L281.459 262.557C281.459 262.557 273.437 254.722 260.602 260.544C255.735 262.749 246.829 268.457 238.79 273.868L223.499 268.118C224.173 263.636 221.657 259.129 217.251 257.472C212.187 255.568 206.517 258.137 204.613 263.205C202.708 268.269 205.278 273.939 210.346 275.843C214.849 277.538 219.82 275.689 222.21 271.7C223.821 272.696 227.776 275.12 232.672 278.036C227.985 281.263 224.202 283.941 222.653 285.046C220.009 281.225 214.916 279.71 210.538 281.698C205.609 283.933 203.42 289.758 205.655 294.688C207.889 299.618 213.719 301.806 218.644 299.572C222.934 297.626 225.148 292.96 224.177 288.536L239.054 281.79C247.436 286.657 256.697 291.767 261.698 293.646L261.694 293.642ZM212.074 271.236C209.551 270.286 208.266 267.457 209.216 264.934C210.166 262.406 212.995 261.125 215.518 262.075C218.042 263.025 219.327 265.854 218.377 268.378C217.427 270.901 214.598 272.186 212.074 271.236ZM216.611 295.085C214.154 296.199 211.246 295.106 210.132 292.65C209.019 290.193 210.111 287.285 212.568 286.172C215.024 285.059 217.933 286.151 219.046 288.607C220.159 291.064 219.067 293.972 216.611 295.085Z" fill="#271B3D"/>
|
||||
<path d="M314.552 265.804H323.88" stroke="#271B3D" stroke-miterlimit="10"/>
|
||||
<path d="M327.869 265.804H337.192" stroke="#271B3D" stroke-miterlimit="10"/>
|
||||
<path d="M341.181 265.804H350.509" stroke="#271B3D" stroke-miterlimit="10"/>
|
||||
<path d="M354.497 265.804H363.821" stroke="#271B3D" stroke-miterlimit="10"/>
|
||||
<path d="M366.817 265.804H376.145" stroke="#271B3D" stroke-miterlimit="10"/>
|
||||
<path d="M301.24 265.804H310.564" stroke="#271B3D" stroke-miterlimit="10"/>
|
||||
<path d="M287.924 265.804H297.248" stroke="#271B3D" stroke-miterlimit="10"/>
|
||||
<path d="M236.378 227.437C236.378 226.429 235.892 225.501 235.072 224.736L228.891 227.462L235.038 230.171C235.875 229.402 236.378 228.457 236.378 227.437Z" fill="#271B3D"/>
|
||||
<path d="M235.072 224.736C235.888 225.501 236.377 226.429 236.377 227.437C236.377 228.458 235.879 229.398 235.038 230.171L251.702 237.92H257.239V217H251.702L235.072 224.736Z" fill="#BEA0F2"/>
|
||||
<path d="M251.798 217C250.053 217.949 248.706 218.693 248.706 220.847C248.706 222.288 249.442 223.502 250.748 224.148C249.451 224.804 248.714 226.03 248.706 227.462C248.714 228.89 249.446 230.117 250.748 230.776C249.442 231.423 248.706 232.637 248.706 234.077C248.706 236.232 250.053 236.975 251.798 237.924H307.704L311.328 232.107V222.817L307.704 217H251.798Z" fill="#271B3D"/>
|
||||
<path d="M307.707 237.924L311.331 232.11V222.818L307.707 217H297.659L294.035 222.818V232.11L297.659 237.924H307.707Z" fill="#BEA0F2"/>
|
||||
<path d="M302.681 231.245C304.08 231.245 305.213 229.535 305.213 227.425C305.213 225.315 304.08 223.604 302.681 223.604C301.283 223.604 300.15 225.315 300.15 227.425C300.15 229.535 301.283 231.245 302.681 231.245Z" fill="#271B3D"/>
|
||||
<path d="M128 227.739H225.415" stroke="#271B3D" stroke-miterlimit="10"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
|
|
@ -1,8 +1,17 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { chevronLeft } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { CustomizeStoreComponent } from '../types';
|
||||
|
||||
import './intro.scss';
|
||||
|
||||
export type events =
|
||||
| { type: 'DESIGN_WITH_AI' }
|
||||
| { type: 'CLICKED_ON_BREADCRUMB' }
|
||||
|
|
@ -15,33 +24,106 @@ export * as services from './services';
|
|||
|
||||
export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
|
||||
const {
|
||||
intro: { themeCards, activeTheme },
|
||||
intro: { themeCards },
|
||||
} = context;
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Intro</h1>
|
||||
<div>Active theme: { activeTheme }</div>
|
||||
{ themeCards?.map( ( themeCard ) => (
|
||||
<button
|
||||
key={ themeCard.name }
|
||||
onClick={ () =>
|
||||
sendEvent( {
|
||||
type: 'SELECTED_NEW_THEME',
|
||||
payload: { theme: themeCard.name },
|
||||
} )
|
||||
}
|
||||
>
|
||||
{ themeCard.name }
|
||||
</button>
|
||||
) ) }
|
||||
<button onClick={ () => sendEvent( { type: 'DESIGN_WITH_AI' } ) }>
|
||||
Design with AI
|
||||
</button>
|
||||
<button
|
||||
onClick={ () => sendEvent( { type: 'SELECTED_ACTIVE_THEME' } ) }
|
||||
>
|
||||
Assembler Hub
|
||||
</button>
|
||||
<div className="woocommerce-customize-store-header">
|
||||
<h1>{ 'Site title' }</h1>
|
||||
</div>
|
||||
|
||||
<div className="woocommerce-customize-store-container">
|
||||
<div className="woocommerce-customize-store-sidebar">
|
||||
<div className="woocommerce-customize-store-sidebar__title">
|
||||
<button
|
||||
onClick={ () => {
|
||||
sendEvent( 'CLICKED_ON_BREADCRUMB' );
|
||||
} }
|
||||
>
|
||||
{ chevronLeft }
|
||||
</button>
|
||||
{ __( 'Customize your store', 'woocommerce' ) }
|
||||
</div>
|
||||
<p>
|
||||
{ __(
|
||||
'Create a store that reflects your brand and business. Select one of our professionally designed themes to customize, or create your own using AI.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="woocommerce-customize-store-main">
|
||||
<div className="woocommerce-customize-store-banner">
|
||||
<div
|
||||
className={ `woocommerce-customize-store-banner-content` }
|
||||
>
|
||||
<h1>
|
||||
{ __(
|
||||
'Use the power of AI to design your store',
|
||||
'woocommerce'
|
||||
) }
|
||||
</h1>
|
||||
<p>
|
||||
{ __(
|
||||
'Design the look of your store, create pages, and generate copy using our built-in AI tools.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</p>
|
||||
<button
|
||||
onClick={ () =>
|
||||
sendEvent( { type: 'DESIGN_WITH_AI' } )
|
||||
}
|
||||
>
|
||||
{ __( 'Design with AI', 'woocommerce' ) }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
{ __(
|
||||
'Or select a professionally designed theme to customize and make your own.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</p>
|
||||
|
||||
<div className="woocommerce-customize-store-theme-cards">
|
||||
{ themeCards?.map( ( themeCard ) => (
|
||||
<div className="theme-card" key={ themeCard.slug }>
|
||||
<div>
|
||||
<img
|
||||
src={ themeCard.image }
|
||||
alt={ themeCard.description }
|
||||
/>
|
||||
</div>
|
||||
<h2 className="theme-card__title">
|
||||
{ themeCard.name }
|
||||
</h2>
|
||||
</div>
|
||||
) ) }
|
||||
</div>
|
||||
|
||||
<div className="woocommerce-customize-store-browse-themes">
|
||||
<button
|
||||
onClick={ () =>
|
||||
sendEvent( {
|
||||
type: 'SELECTED_BROWSE_ALL_THEMES',
|
||||
} )
|
||||
}
|
||||
>
|
||||
{ __( 'Browse all themes', 'woocommerce' ) }
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={ () =>
|
||||
sendEvent( { type: 'SELECTED_ACTIVE_THEME' } )
|
||||
}
|
||||
>
|
||||
Assembler Hub
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,155 @@
|
|||
.woocommerce-profile-wizard__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-customize-store-header {
|
||||
min-height: 64px;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.woocommerce-customize-store-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.woocommerce-customize-store-sidebar {
|
||||
flex: 0 0 380px;
|
||||
padding: 1rem;
|
||||
|
||||
.woocommerce-customize-store-sidebar__title {
|
||||
color: #1e1e1e;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
padding-right: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: inherit;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0 1rem;
|
||||
color: #757575;
|
||||
max-width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-customize-store-main {
|
||||
margin-right: 2.5rem;
|
||||
|
||||
p {
|
||||
color: #2f2f2f;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-customize-store-banner {
|
||||
background: var(--woo-purple-woo-purple-0, #f2edff);
|
||||
background-image: url(../assets/images/banner-design-with-ai.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
background-size: contain;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
margin: 1.25rem 0 3.375rem;
|
||||
min-height: 343px;
|
||||
padding: 70px 0;
|
||||
width: 820px;
|
||||
|
||||
.woocommerce-customize-store-banner-content {
|
||||
width: 345px;
|
||||
margin-left: 50px;
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #3858e9;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
line-height: 1.25rem;
|
||||
padding: 10px 15px;
|
||||
|
||||
&:hover {
|
||||
background-color: #2234e0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-customize-store-theme-cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
max-width: 820px;
|
||||
|
||||
.theme-card {
|
||||
flex-basis: 45%;
|
||||
|
||||
img {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 394px;
|
||||
}
|
||||
|
||||
.theme-card__title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-customize-store-browse-themes {
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
background-color: #fff;
|
||||
border: 1px solid #3858e9;
|
||||
border-radius: 2px;
|
||||
color: #3858e9;
|
||||
display: inline-block;
|
||||
font-size: 0.8125rem;
|
||||
margin: 3.75rem 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,12 +3,55 @@
|
|||
export const fetchThemeCards = async () => {
|
||||
return [
|
||||
{
|
||||
slug: 'twentytwentyone',
|
||||
name: 'Twenty Twenty One',
|
||||
description: 'The default theme for WordPress.',
|
||||
image: 'https://i0.wp.com/s2.wp.com/wp-content/themes/pub/twentytwentyone/screenshot.png',
|
||||
styleVariations: [],
|
||||
},
|
||||
{
|
||||
slug: 'twentytwenty',
|
||||
name: 'Twenty Twenty',
|
||||
description: 'The previous default theme for WordPress.',
|
||||
image: 'https://i0.wp.com/s2.wp.com/wp-content/themes/pub/twentytwenty/screenshot.png',
|
||||
styleVariations: [],
|
||||
},
|
||||
{
|
||||
slug: 'tsubaki',
|
||||
name: 'Tsubaki',
|
||||
description:
|
||||
'Tsubaki puts the spotlight on your products and your customers. This theme leverages WooCommerce to provide you with intuitive product navigation and the patterns you need to master digital merchandising.',
|
||||
image: 'https://i0.wp.com/s2.wp.com/wp-content/themes/premium/tsubaki/screenshot.png',
|
||||
styleVariations: [],
|
||||
},
|
||||
{
|
||||
slug: 'winkel',
|
||||
name: 'Winkel',
|
||||
description:
|
||||
'Winkel is a minimal, product-focused theme featuring Payments block. Its clean, cool look combined with a simple layout makes it perfect for showcasing fashion items – clothes, shoes, and accessories.',
|
||||
image: 'https://i0.wp.com/s2.wp.com/wp-content/themes/pub/winkel/screenshot.png',
|
||||
styleVariations: [
|
||||
{
|
||||
title: 'Default',
|
||||
primary: '#ffffff',
|
||||
secondary: '#676767',
|
||||
},
|
||||
{
|
||||
title: 'Charcoal',
|
||||
primary: '#1f2527',
|
||||
secondary: '#9fd3e8',
|
||||
},
|
||||
{
|
||||
title: 'Rainforest',
|
||||
primary: '#eef4f7',
|
||||
secondary: '#35845d',
|
||||
},
|
||||
{
|
||||
title: 'Ruby Wine',
|
||||
primary: '#ffffff',
|
||||
secondary: '#c8133e',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
export type ThemeCard = {
|
||||
// placeholder props, possibly take reference from https://github.com/Automattic/wp-calypso/blob/1f1b79210c49ef0d051f8966e24122229a334e29/packages/design-picker/src/components/theme-card/index.tsx#L32
|
||||
slug: string;
|
||||
name: string;
|
||||
description: string;
|
||||
image: string;
|
||||
isActive: boolean;
|
||||
styleVariations: string[];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Update intro screen for the new Customize Your Store task
|
||||
Loading…
Reference in New Issue