Merge branch 'feature/534-settings-page' of github.com:material-components/material-design-for-wordpress into feature/534-settings-page

Author: emeaguiar

package.json

@@ -59,7 +59,7 @@
     "@wordpress/components": "9.4.0",
     "@wordpress/compose": "3.12.0",
     "@wordpress/data": "4.14.2",
-    "@wordpress/date": "^3.13.1",
+    "@wordpress/date": "3.13.1",
     "@wordpress/dom": "2.8.0",
     "@wordpress/dom-ready": "2.8.0",
     "@wordpress/e2e-test-utils": "4.16.0",

plugin/assets/css/src/settings/base.css

@@ -46,6 +46,10 @@
 		margin-top: 0;
 	}
 
+	& h2 {
+		margin-top: 32px;
+	}
+
 	& p {
 		font-size: 16px;
 		margin: 0;
@@ -63,4 +67,16 @@
 		text-align: left;
 		width: 105px;
 	}
+
+	& .material-settings__message {
+		align-items: center;
+		color: var(--material-design-settings-error-color);
+		display: flex;
+	}
+
+	& .material-settings__message-text {
+		font-size: 16px;
+		font-weight: 500;
+		margin-left: 10px;
+	}
 }

plugin/assets/fonts/google-fonts.json

@@ -436,14 +436,24 @@
     },
     "Archivo": {
         "variants": [
+            "100",
+            "200",
+            "300",
             "regular",
-            "italic",
             "500",
-            "500italic",
             "600",
-            "600italic",
             "700",
-            "700italic"
+            "800",
+            "900",
+            "100italic",
+            "200italic",
+            "300italic",
+            "italic",
+            "500italic",
+            "600italic",
+            "700italic",
+            "800italic",
+            "900italic"
         ],
         "category": "sans-serif"
     },
@@ -545,12 +555,12 @@
     "Asap": {
         "variants": [
             "regular",
-            "italic",
             "500",
-            "500italic",
             "600",
-            "600italic",
             "700",
+            "italic",
+            "500italic",
+            "600italic",
             "700italic"
         ],
         "category": "sans-serif"
@@ -1340,7 +1350,11 @@
             "regular",
             "500",
             "600",
-            "700"
+            "700",
+            "italic",
+            "500italic",
+            "600italic",
+            "700italic"
         ],
         "category": "serif"
     },
@@ -2209,6 +2223,12 @@
         ],
         "category": "handwriting"
     },
+    "Dela Gothic One": {
+        "variants": [
+            "regular"
+        ],
+        "category": "display"
+    },
     "Delius": {
         "variants": [
             "regular"
@@ -4172,6 +4192,14 @@
         ],
         "category": "sans-serif"
     },
+    "Kiwi Maru": {
+        "variants": [
+            "300",
+            "regular",
+            "500"
+        ],
+        "category": "serif"
+    },
     "Knewave": {
         "variants": [
             "regular"
@@ -4448,6 +4476,18 @@
         ],
         "category": "display"
     },
+    "Lexend": {
+        "variants": [
+            "100",
+            "300",
+            "regular",
+            "500",
+            "600",
+            "700",
+            "800"
+        ],
+        "category": "sans-serif"
+    },
     "Lexend Deca": {
         "variants": [
             "regular"
@@ -5529,6 +5569,12 @@
         ],
         "category": "display"
     },
+    "New Tegomin": {
+        "variants": [
+            "regular"
+        ],
+        "category": "serif"
+    },
     "News Cycle": {
         "variants": [
             "regular",
@@ -8167,6 +8213,12 @@
         ],
         "category": "display"
     },
+    "Train One": {
+        "variants": [
+            "regular"
+        ],
+        "category": "display"
+    },
     "Trirong": {
         "variants": [
             "100",

plugin/assets/src/settings/components/errors.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SettingsContext from '../context';
+
+const Errors = () => {
+	const { state } = useContext( SettingsContext );
+
+	return Object.keys( state.errors ).map( key => (
+		<div
+			key={ key }
+			className="material-settings__message material-settings__message--error"
+		>
+			<i
+				className="material-icons mdc-button__icon leading-icon"
+				aria-hidden="true"
+			>
+				error
+			</i>
+			<span className="material-settings__message-text">
+				{ state.errors[ key ] }
+			</span>
+		</div>
+	) );
+};
+
+export default Errors;

plugin/assets/src/settings/components/integrations/api.js

@@ -1,3 +1,19 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /**
  * WordPress dependencies
  */
@@ -19,24 +35,47 @@ const Api = () => {
 	const [ isLoading, setIsLoading ] = useState( false );
 	const isApiOk = 'ok' === state.apiStatus;
 
+	const dispatchError = error =>
+		dispatch( {
+			type: ACTIONS.ADD_ERROR,
+			payload: { id: 'api_error', error },
+		} );
+
 	const removeApiKey = () => {
 		setIsLoading( true );
 		setApi( '' );
 
-		setApiKey( api ).then( () => {
-			setIsLoading( false );
-			dispatch( { type: ACTIONS.REMOVE_API_KEY } );
-		} );
+		setApiKey( api )
+			.then( () => {
+				setIsLoading( false );
+				dispatch( { type: ACTIONS.REMOVE_API_KEY } );
+			} )
+			.catch( error => {
+				dispatchError( error.message );
+				console.error( error );
+				setIsLoading( false );
+			} );
 	};
 
 	const activateApiKey = () => {
 		setIsLoading( true );
 
-		setApiKey( api ).then( () => {
-			setIsLoading( false );
-			dispatch( { type: ACTIONS.ADD_API_KEY } );
-			setApi( '' );
-		} );
+		setApiKey( api )
+			.then( response => {
+				setIsLoading( false );
+				dispatch( {
+					type: ACTIONS.ADD_API_KEY,
+					payload: {
+						lastUpdated: response.lastUpdated,
+					},
+				} );
+				setApi( '' );
+			} )
+			.catch( error => {
+				dispatchError( error.message );
+				console.error( error );
+				setIsLoading( false );
+			} );
 	};
 
 	const handleSubmit = event => {
@@ -51,7 +90,7 @@ const Api = () => {
 				{ ! isApiOk && (
 					<TextControl
 						className="material-settings__api-input mdc-layout-grid__cell"
-						value={ api }
+						value={ api || '' }
 						placeholder={ __( 'Google API Key', 'material-design' ) }
 						onChange={ value => {
 							setApi( value );

plugin/assets/src/settings/components/integrations/index.js

@@ -1,3 +1,19 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /**
  * External dependencies
  */
@@ -34,11 +50,11 @@ const Integrations = () => {
 							'Integrate %s and %s to get the most out of the Material Theme.',
 							'material-design'
 						),
-						`<a href="https://fonts.google.com/">${ __(
+						`<a href="https://fonts.google.com/" target="_blank" rel="noopener noreferrer">${ __(
 							'Google Fonts',
 							'material-design'
 						) }</a>`,
-						`<a href="https://material.io/resources/icons/?style=baseline">${ __(
+						`<a href="https://material.io/resources/icons/?style=baseline" target="_blank" rel="noopener noreferrer">${ __(
 							'Material icons',
 							'material-design'
 						) }</a>`
@@ -78,7 +94,7 @@ const Integrations = () => {
 							'To use Google Fonts in Material Theme, please activate your %s and enable updates',
 							'material-design'
 						),
-						`<a href="https://developers.google.com/fonts/docs/developer_api#APIKey">${ __(
+						`<a href="https://developers.google.com/fonts/docs/developer_api#APIKey" target="_blank" rel="noopener noreferrer">${ __(
 							'Google API Key',
 							'material-design'
 						) }</a>`

plugin/assets/src/settings/components/integrations/switch.js

@@ -1,3 +1,19 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /**
  * External dependencies
  */