Skip to content

Commit

Permalink
Merge pull request #4954 from ampproject/feature/4707-done-screen
Browse files Browse the repository at this point in the history
Setup wizard: Done screen
  • Loading branch information
westonruter committed Jul 2, 2020
2 parents 9248cac + c73edb0 commit 37cb245
Show file tree
Hide file tree
Showing 68 changed files with 1,288 additions and 666 deletions.
21 changes: 17 additions & 4 deletions assets/src/setup/components/__mocks__/options-context-provider.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,29 @@ import { createContext, useState } from '@wordpress/element';

export const Options = createContext();

/**
* MOCK.
*
* @param {Object} props
* @param {any} props.children Component children.
*/
export function OptionsContextProvider( { children } ) {
const [ options, updateOptions ] = useState( {
redirect_toggle: false,
const [ updates, updateOptions ] = useState( {} );
const [ originalOptions, setOriginalOptions ] = useState( {
mobile_redirect: true,
theme_support: 'some-support',
} );

return (
<Options.Provider value={
{
options: options || {},
updateOptions,
editedOptions: { ...originalOptions, ...updates },
originalOptions,
setOriginalOptions,
updates,
updateOptions: ( ( newOptions ) => {
updateOptions( { ...updates, newOptions } );
} ),
}
}>
{ children }
Expand Down
32 changes: 32 additions & 0 deletions assets/src/setup/components/__mocks__/user-context-provider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
* External dependencies
*/
import PropTypes from 'prop-types';

/**
* WordPress dependencies
*/
import { createContext } from '@wordpress/element';

export const User = createContext();

/**
* MOCK.
*
* @param {Object} props
* @param {any} props.children
*/
export function UserContextProvider( { children } ) {
return (
<User.Provider value={
{
savingDeveloperToolsOption: false,
}
}>
{ children }
</User.Provider>
);
}
UserContextProvider.propTypes = {
children: PropTypes.any,
};
37 changes: 37 additions & 0 deletions assets/src/setup/components/amp-info/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* External dependencies
*/
import PropTypes from 'prop-types';

/**
* Internal dependencies
*/
import './style.css';

/**
* A component providing a UI for helpful info.
*
* @param {Object} props Component props.
* @param {?string} props.children Notice content, not including the icon.
* @param {?string} props.className Optional extra class names.
* @param {?Object} props.icon An SVG icon Component
*/
export function AMPInfo( { children, className, icon: Icon } ) {
const classNames = [
className ? className : '',
'amp-info',
].filter( ( item ) => item );

return (
<div className={ classNames.join( ' ' ) }>
{ Icon && <Icon className="amp-info__icon" /> }
{ children }
</div>
);
}

AMPInfo.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
icon: PropTypes.func,
};
13 changes: 13 additions & 0 deletions assets/src/setup/components/amp-info/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.amp-info {
display: inline-block;
font-size: 13px;
font-weight: 600;
margin-top: 0.5rem;
margin-bottom: 2rem;
margin-left: 1rem;
}

.amp-info__icon {
float: left;
margin: 0 0.5rem;
}

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

26 changes: 26 additions & 0 deletions assets/src/setup/components/amp-info/test/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**
* External dependencies
*/
import { create } from 'react-test-renderer';

/**
* Internal dependencies
*/
import { AMPInfo } from '..';
import { IconMobile } from '../../svg/icon-mobile';

describe( 'AMPInfo', () => {
it( 'matches snapshots', () => {
let wrapper = create(
<AMPInfo />,
);
expect( wrapper.toJSON() ).toMatchSnapshot();

wrapper = create(
<AMPInfo className="my-class" icon={ ( props ) => <IconMobile { ...props } /> }>
{ 'Component children' }
</AMPInfo>,
);
expect( wrapper.toJSON() ).toMatchSnapshot();
} );
} );
20 changes: 14 additions & 6 deletions assets/src/setup/components/amp-notice/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,16 @@ function getNoticeIcon( type ) {
switch ( type ) {
case NOTICE_TYPE_SUCCESS:
Icon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#00A02F" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z" />
<svg width="35" height="36" viewBox="0 0 35 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.90112" y="1.98828" width="32.0691" height="32.0691" rx="16.0345" stroke="#00A02F" strokeWidth="2" />
<mask id="mask-notice-success" mask-type="alpha" maskUnits="userSpaceOnUse" x="10" y="12" width="16" height="12">
<path d="M15.0921 21.461L11.3924 17.7613L10.1326 19.0122L15.0921 23.9718L25.7387 13.3252L24.4877 12.0742L15.0921 21.461Z" fill="white" />
</mask>
<g mask="url(#mask-notice-success)">
<rect x="7.28906" y="7.375" width="21.2932" height="21.2932" fill="#00A02F" />
</g>
</svg>

);
break;

Expand All @@ -45,11 +52,12 @@ function getNoticeIcon( type ) {

default:
Icon = () => (
<svg width="31" height="33" viewBox="0 0 31 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.2666" y="1.28516" width="27.7439" height="30" rx="13.8719" stroke="#285BE7" strokeWidth="2" />
<path d="M13.2796 10.4062C13.2796 9.30176 14.1119 8.40625 15.1386 8.40625C16.1652 8.40625 16.9976 9.30176 16.9976 10.4062C16.9976 11.5107 16.1652 12.4062 15.1386 12.4062C14.1119 12.4062 13.2796 11.5107 13.2796 10.4062Z" fill="#285BE7" />
<line x1="15.0474" y1="23.8086" x2="15.0474" y2="14.3013" stroke="#285BE7" strokeWidth="2" />
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.66626" y="1.76172" width="31.4597" height="31.4597" rx="15.7299" stroke="#285BE7" strokeWidth="2" />
<path d="M15.3048 11.3424C15.3048 10.1875 16.2412 9.25113 17.3961 9.25113C18.5509 9.25113 19.4873 10.1875 19.4873 11.3424C19.4873 12.4972 18.5509 13.4336 17.3961 13.4336C16.2412 13.4336 15.3048 12.4972 15.3048 11.3424Z" fill="#285BE7" />
<line x1="17.4184" y1="25.3594" x2="17.4184" y2="15.4184" stroke="#285BE7" strokeWidth="2" />
</svg>

);
}

Expand Down
18 changes: 7 additions & 11 deletions assets/src/setup/components/amp-notice/style.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
.amp-notice {
border-radius: 12px;
display: flex;
font-size: 13px;
line-height: 1.85;
}

.amp-notice__body {
flex-grow: 1;
text-align: left;
}

.amp-notice--success {
Expand All @@ -31,25 +34,18 @@
}

.amp-notice--large {
padding: 0.5rem 1rem 0.5rem 0.5rem;
padding: 0.5rem 1.125rem 0.5rem 0.5rem;
}

.amp-notice--large .amp-notice__icon {
margin-top: 0.5rem;
margin-left: 0.5rem;
}

.amp-notice--large svg {
flex-grow: 0;
margin-right: 1rem;
height: 42px;
width: 42px;
}

.amp-notice--large.amp-notice--success .amp-notice__icon {
padding: 7px;
height: 30px;
width: 30px;
}

.amp-notice--large.amp-notice--success svg {
height: 35px;
width: 35px;
}

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 13 additions & 6 deletions assets/src/setup/components/nav/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import PropTypes from 'prop-types';
*/
import { Navigation } from '../navigation-context-provider';
import './style.css';
import { Options } from '../options-context-provider';
import { User } from '../user-context-provider';

/**
* Navigation component.
Expand All @@ -23,7 +25,9 @@ import './style.css';
* @param {string} props.exitLink Link to exit the application.
*/
export function Nav( { exitLink } ) {
const { activePageIndex, canGoForward, moveBack, moveForward } = useContext( Navigation );
const { activePageIndex, canGoForward, isLastPage, moveBack, moveForward } = useContext( Navigation );
const { savingOptions } = useContext( Options );
const { savingDeveloperToolsOption } = useContext( User );

return (
<div className="amp-setup-nav">
Expand Down Expand Up @@ -64,15 +68,18 @@ export function Nav( { exitLink } ) {
}

<Button
disabled={ ! canGoForward }
disabled={ ! canGoForward || savingOptions || savingDeveloperToolsOption }
href={ isLastPage && ! savingDeveloperToolsOption && ! savingOptions ? exitLink : undefined }
isPrimary
onClick={ moveForward }
>
{ __( 'Next', 'amp' ) }
{ isLastPage ? __( 'Finish', 'amp' ) : __( 'Next', 'amp' ) }

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z" />
</svg>
{ ! isLastPage && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z" />
</svg>
) }

</Button>

Expand Down
Loading

0 comments on commit 37cb245

Please sign in to comment.