Merge pull request #4998 from ampproject/feature/4704-settings-screen…

…-updates

Incorporate wizard components onto Settings screen

.eslintrc

@@ -57,7 +57,7 @@
     "react/no-unused-prop-types": "error",
     "react/self-closing-comp": "error",
     "import/no-unresolved": [ "error", {
-      "ignore": [ "jquery", "amp-block-editor-data", "amp-setup" ]
+      "ignore": [ "jquery", "amp-block-editor-data", "amp-settings" ]
     } ],
     "import/order": [ "error", { "groups": [ "builtin", [ "external", "unknown" ], "internal", "parent", "sibling", "index" ] } ],
     "jsdoc/check-indentation": "error",

assets/src/setup/components/amp-notice/index.js → assets/src/components/amp-notice/index.js

@@ -73,7 +73,7 @@ function getNoticeIcon( type ) {
  * @param {string} props.size The notice size.
  * @param {string} props.type The notice type.
  */
-export function AMPNotice( { children, className, size, type } ) {
+export function AMPNotice( { children, className, size = NOTICE_SIZE_LARGE, type = NOTICE_TYPE_INFO } ) {
 	const noticeIcon = getNoticeIcon( type );
 
 	const classNames = [
@@ -98,6 +98,6 @@ export function AMPNotice( { children, className, size, type } ) {
 AMPNotice.propTypes = {
 	children: PropTypes.node,
 	className: PropTypes.string,
-	size: PropTypes.oneOf( [ NOTICE_SIZE_LARGE, NOTICE_SIZE_SMALL ] ).isRequired,
-	type: PropTypes.oneOf( [ NOTICE_TYPE_INFO, NOTICE_TYPE_SUCCESS, NOTICE_TYPE_WARNING ] ).isRequired,
+	size: PropTypes.oneOf( [ NOTICE_SIZE_LARGE, NOTICE_SIZE_SMALL ] ),
+	type: PropTypes.oneOf( [ NOTICE_TYPE_INFO, NOTICE_TYPE_SUCCESS, NOTICE_TYPE_WARNING ] ),
 };

assets/src/setup/components/amp-notice/style.css → assets/src/components/amp-notice/style.css

@@ -5,11 +5,21 @@
 	line-height: 1.85;
 }
 
+.amp-notice p {
+	font-size: 13px;
+}
+
 .amp-notice__body {
 	flex-grow: 1;
 	text-align: left;
 }
 
+.amp-notice__body .components-panel__body-toggle,
+.amp-notice__body .components-panel__body-toggle:focus:not(:disabled) {
+	color: var(--black);
+	outline: none;
+}
+
 .amp-notice--success {
 	background-color: #ecfef1;
 }
@@ -23,6 +33,7 @@
 }
 
 .amp-notice--small {
+	line-height: 1.5;
 	padding: 0.5rem 1rem 0.5rem 0.5rem;
 }
 

assets/src/setup/components/amp-notice/test/index.js → assets/src/components/amp-notice/test/index.js

@@ -46,6 +46,17 @@ describe( 'AMPNotice', () => {
 	} );
 
 	it( 'has correct classes', () => {
+		act( () => {
+			render(
+				<AMPNotice>
+					{ 'children' }
+				</AMPNotice>,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'div' ).getAttribute( 'class' ) ).toBe( 'amp-notice amp-notice--info amp-notice--large' );
+
 		act( () => {
 			render(
 				<AMPNotice type={ NOTICE_TYPE_SUCCESS } size={ NOTICE_SIZE_LARGE } className="my-cool-class">

assets/src/components/amp-setting-toggle/index.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './style.css';
+
+/**
+ * Styled toggle control.
+ *
+ * @param {Object} props Component props.
+ * @param {boolean} props.checked Whether the toggle is on.
+ * @param {boolean} props.disabled Whether the toggle is disabled.
+ * @param {Function} props.onChange Change handler.
+ * @param {?string} props.text Toggle text.
+ * @param {string} props.title Toggle title.
+ */
+export function AMPSettingToggle( { checked, disabled = false, onChange, text, title } ) {
+	return (
+		<div className={ `amp-setting-toggle ${ disabled ? 'amp-setting-toggle--disabled' : '' }` }>
+			<ToggleControl
+				checked={ ! disabled && checked }
+				label={ (
+					<div className="amp-setting-toggle__label-text">
+						<h3>
+							{ title }
+						</h3>
+						{ text && (
+							<p>
+								{ text }
+							</p> ) }
+					</div>
+				) }
+				onChange={ onChange }
+			/>
+		</div>
+	);
+}
+AMPSettingToggle.propTypes = {
+	checked: PropTypes.bool.isRequired,
+	disabled: PropTypes.bool,
+	onChange: PropTypes.func.isRequired,
+	text: PropTypes.string,
+	title: PropTypes.string.isRequired,
+};

assets/src/components/amp-setting-toggle/style.css

@@ -0,0 +1,49 @@
+/**
+ * AMP setting toggle component.
+ */
+.amp-setting-toggle__label-text h3 {
+	font-weight: 700;
+	font-size: 1.25rem;
+	margin-bottom: 1rem;
+	margin-top: 0;
+}
+
+.amp-setting-toggle__label-text p:last-child {
+	margin-bottom: 0;
+}
+
+.amp-setting-toggle .components-toggle-control .components-base-control__field .components-toggle-control__label {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.amp-setting-toggle__illustration {
+	padding-bottom: 1.5rem;
+
+	@media screen and (min-width: 783px) {
+		padding: 0 1.5rem;
+	}
+}
+
+.amp .amp-setting-toggle .components-form-toggle {
+	margin-bottom: 2.25rem;
+	margin-right: 2.25rem;
+}
+
+.amp-setting-toggle .components-toggle-control .components-base-control__field {
+	align-items: baseline;
+	margin-bottom: 0;
+}
+
+.amp-setting-toggle .components-form-toggle.is-checked .components-form-toggle__track {
+	background-color: var(--brand);
+}
+
+.amp-setting-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
+	box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--brand);
+}
+
+.amp-setting-toggle--disabled .components-form-toggle {
+	pointer-events: none;
+	opacity: 0.5;
+}

assets/src/components/amp-setting-toggle/test/index.js

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+import { create } from 'react-test-renderer';
+
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AMPSettingToggle } from '../';
+
+let container;
+
+describe( 'AMPSettingToggle', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'matches snapshots', () => {
+		let wrapper = create(
+			<AMPSettingToggle checked={ true } onChange={ () => null } text={ 'My text' } title={ 'My title' } />,
+		);
+		expect( wrapper.toJSON() ).toMatchSnapshot();
+
+		wrapper = create(
+			<AMPSettingToggle checked={ false } onChange={ () => null } title={ 'My title' } />,
+		);
+		expect( wrapper.toJSON() ).toMatchSnapshot();
+	} );
+
+	it( 'has correct elements and text', () => {
+		act( () => {
+			render(
+				<AMPSettingToggle title="My title" onChange={ () => null } checked={ false }>
+					{ 'children' }
+				</AMPSettingToggle>,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'h3' ).textContent ).toBe( 'My title' );
+		expect( container.querySelector( 'p' ) ).toBeNull();
+		expect( container.querySelector( 'input:checked' ) ).toBeNull();
+
+		act( () => {
+			render(
+				<AMPSettingToggle title="My title" onChange={ () => null } checked={ true } text="My text">
+					{ 'children' }
+				</AMPSettingToggle>,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'h3' ).textContent ).toBe( 'My title' );
+		expect( container.querySelector( 'p' ).textContent ).toBe( 'My text' );
+		expect( container.querySelector( 'input:checked' ) ).not.toBeNull();
+	} );
+} );