Miscellaneous updates

client/src/block-editor.js

@@ -1,5 +1,4 @@
 // External dependencies.
-import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { registerPlugin } from '@wordpress/plugins';
 
@@ -8,10 +7,10 @@ import {
   BylineManagerPanelInfoProvider,
   BylineManagerPanelInfo,
   BylineSlotContainer,
-} from 'containers';
+} from './containers';
 
-// Register our store.
-import { store } from './store';
+// Get and register our store.
+import store from './store';
 
 // Styles.
 import './styles/styles.scss';

client/src/components/byline-autocomplete/index.jsx

@@ -1,13 +1,14 @@
 // External dependencies.
-import React from 'react';
 import { useState, useEffect } from '@wordpress/element';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Autocomplete from 'react-autocomplete';
 
 // Hooks.
 import { useDebounce } from '@uidotdev/usehooks';
 
 const BylineAutocomplete = ({
+  id,
   profiles,
   onUpdate,
   profilesApiUrl,
@@ -40,7 +41,7 @@ const BylineAutocomplete = ({
     className: 'components-text-control__input',
     type: 'text',
     placeholder: addAuthorPlaceholder,
-    id: 'profiles_autocomplete',
+    id,
     onKeyDown: (e) => {
       // If the user hits 'enter', stop the parent form from submitting.
       if (13 === e.keyCode) {
@@ -59,7 +60,7 @@ const BylineAutocomplete = ({
     <div className="profile-controls components-base-control__field">
       <label
         className="components-base-control__label"
-        htmlFor="profiles_autocomplete"
+        htmlFor={id}
       >
         {addAuthorLabel}
       </label>
@@ -69,22 +70,29 @@ const BylineAutocomplete = ({
         value={search}
         getItemValue={(item) => item.name}
         wrapperStyle={{ position: 'relative', display: 'block' }}
-        onSelect={(value, item) => {
+        onSelect={(__, item) => {
           setSearch('');
           setSearchResults([]);
 
           onUpdate(item);
         }}
-        onChange={(event, next) => setSearch(next)}
+        onChange={(__, next) => setSearch(next)}
         renderMenu={(children) => (
           <div className="menu">
             {children}
           </div>
         )}
         renderItem={(item, isHighlighted) => (
           <div
-            className={`item ${isHighlighted ? 'item-highlighted' : ''}`}
             key={item.id}
+            className={
+              classNames(
+                'item',
+                {
+                  'item-highlighted': isHighlighted,
+                }
+              )
+            }
           >
             {item.name}
           </div>
@@ -97,7 +105,12 @@ const BylineAutocomplete = ({
   );
 };
 
+BylineAutocomplete.defaultProps = {
+  id: 'profiles_autocomplete',
+};
+
 BylineAutocomplete.propTypes = {
+  id: PropTypes.string,
   profiles: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.oneOfType([
       PropTypes.number,

client/src/components/byline-freeform/index.jsx

@@ -1,10 +1,10 @@
 // External dependencies.
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 const BylineFreeform = ({
+  id,
   addFreeformLabel,
   addFreeformPlaceholder,
   addFreeformButtonLabel,
@@ -32,15 +32,15 @@ const BylineFreeform = ({
     >
       <label
         className="components-base-control__label"
-        htmlFor="byline_freeform"
+        htmlFor={id}
       >
         {addFreeformLabel}
       </label>
       <div className="freeformInputGrp">
         <input
           className="components-text-control__input"
-          id="byline_freeform"
-          name="byline_freeform"
+          id={id}
+          name={id}
           onChange={(e) => {
             setTextByline(e.target.value);
           }}
@@ -51,9 +51,9 @@ const BylineFreeform = ({
         <Button
           label={addFreeformButtonLabel}
           className="button"
+          size="small"
           variant="secondary"
           disabled={! textByline}
-          isSmall
           onClick={onSubmit}
         >
           {addFreeformButtonLabel}
@@ -63,7 +63,12 @@ const BylineFreeform = ({
   );
 };
 
+BylineFreeform.defaultProps = {
+  id: 'byline_freeform',
+};
+
 BylineFreeform.propTypes = {
+  id: PropTypes.string,
   addFreeformLabel: PropTypes.string.isRequired,
   addFreeformPlaceholder: PropTypes.string.isRequired,
   addFreeformButtonLabel: PropTypes.string.isRequired,

client/src/components/byline-list-item/index.jsx

@@ -16,7 +16,7 @@ const BylineListItem = SortableElement(({
       label={removeAuthorLabel}
       isDestructive
       variant="secondary"
-      isSmall
+      size="small"
       onClick={(e) => {
         e.preventDefault();
         removeItem();

client/src/components/byline-metabox/index.js

@@ -1,7 +1,6 @@
 /* global bylineData */
 
 // External dependencies.
-import React from 'react';
 import PropTypes from 'prop-types';
 
 // Internal dependencies.

client/src/components/byline-profiles/index.js

@@ -1,5 +1,4 @@
 // External dependencies.
-import React from 'react';
 import PropTypes from 'prop-types';
 import { useState, useEffect } from '@wordpress/element';
 import classNames from 'classnames';
@@ -38,7 +37,7 @@ const SortableItem = SortableElement(({
     <Button
       label={removeAuthorLabel}
       isDestructive
-      isSmall
+      size="small"
       variant="secondary"
       onClick={(e) => {
         e.preventDefault();
@@ -72,6 +71,8 @@ const BylineList = SortableContainer(({
 ));
 
 const BylineProfiles = ({
+  autocompleteInputId,
+  freeformInputId,
   addAuthorLabel,
   addAuthorPlaceholder,
   addFreeformButtonLabel,
@@ -123,7 +124,7 @@ const BylineProfiles = ({
     className: 'components-text-control__input',
     type: 'text',
     placeholder: addAuthorPlaceholder,
-    id: 'profiles_autocomplete',
+    id: autocompleteInputId,
     onKeyDown: (e) => {
       // If the user hits 'enter', stop the parent form from submitting.
       if (13 === e.keyCode) {
@@ -145,7 +146,7 @@ const BylineProfiles = ({
           {/* eslint-disable jsx-a11y/label-has-for */}
           <label
             className="components-base-control__label"
-            htmlFor="profiles_autocomplete"
+            htmlFor={autocompleteInputId}
           >
             {addAuthorLabel}
           </label>
@@ -155,12 +156,12 @@ const BylineProfiles = ({
             value={search}
             getItemValue={(item) => item.name}
             wrapperStyle={{ position: 'relative', display: 'block' }}
-            onSelect={(item, next) => {
+            onSelect={(__, next) => {
               setSearch('');
               setSearchResults([]);
               setProfiles([...profiles, next]);
             }}
-            onChange={(event, next) => setSearch(next)}
+            onChange={(__, next) => setSearch(next)}
             renderMenu={(children) => (
               <div className="menu">
                 {children}
@@ -186,15 +187,15 @@ const BylineProfiles = ({
         <div className="freeform-controls components-base-control__field">
           <label
             className="components-base-control__label"
-            htmlFor="byline_freeform"
+            htmlFor={freeformInputId}
           >
             {addFreeformLabel}
           </label>
           <div className="freeformInputGrp">
             <input
               className="components-text-control__input"
-              id="byline_freeform"
-              name="byline_freeform"
+              id={freeformInputId}
+              name={freeformInputId}
               onChange={(e) => {
                 setValue(e.target.value);
               }}
@@ -206,8 +207,8 @@ const BylineProfiles = ({
               label={addFreeformButtonLabel}
               className="button"
               disabled={! value}
+              size="small"
               variant="secondary"
-              isSmall
               onClick={(e) => {
                 e.preventDefault();
                 const newItem = {
@@ -239,7 +240,14 @@ const BylineProfiles = ({
   );
 };
 
+BylineProfiles.defaultProps = {
+  autocompleteInputId: 'profiles_autocomplete',
+  freeformInputId: 'byline_freeform',
+};
+
 BylineProfiles.propTypes = {
+  autocompleteInputId: PropTypes.string,
+  freeformInputId: PropTypes.string,
   addAuthorLabel: PropTypes.string.isRequired,
   addAuthorPlaceholder: PropTypes.string.isRequired,
   addFreeformButtonLabel: PropTypes.string.isRequired,

client/src/components/byline-slot-wrapper/index.jsx

@@ -1,7 +1,6 @@
 /* global bylineData */
 
 // External dependencies.
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Spinner } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
@@ -12,17 +11,19 @@ import BylineFreeform from '../byline-freeform';
 import BylineList from '../byline-list';
 
 const BylineSlotWrapper = ({
-  profiles,
-  addProfile,
-  removeProfile,
-  reorderProfile,
   addAuthorLabel,
   addAuthorPlaceholder,
-  removeAuthorLabel,
+  addFreeformButtonLabel,
   addFreeformLabel,
   addFreeformPlaceholder,
-  addFreeformButtonLabel,
+  addProfile,
+  autocompleteInputId,
+  freeformInputId,
+  profiles,
   profilesApiUrl,
+  removeAuthorLabel,
+  removeProfile,
+  reorderProfile,
 }) => (
   <div className="components-base-control">
     {null === profiles ? (
@@ -32,13 +33,15 @@ const BylineSlotWrapper = ({
     ) : (
       <Fragment>
         <BylineAutocomplete
+          id={autocompleteInputId}
           profiles={profiles}
           onUpdate={addProfile}
           profilesApiUrl={profilesApiUrl || bylineData.profilesApiUrl}
           addAuthorPlaceholder={addAuthorPlaceholder || bylineData.addAuthorPlaceholder}
           addAuthorLabel={addAuthorLabel || bylineData.addAuthorLabel}
         />
         <BylineFreeform
+          id={freeformInputId}
           onUpdate={addProfile}
           addFreeformLabel={addFreeformLabel || bylineData.addFreeformLabel}
           addFreeformPlaceholder={addFreeformPlaceholder || bylineData.addFreeformPlaceholder}
@@ -60,17 +63,27 @@ const BylineSlotWrapper = ({
 );
 
 BylineSlotWrapper.defaultProps = {
-  profiles: [],
   addAuthorLabel: null,
   addAuthorPlaceholder: null,
-  removeAuthorLabel: null,
+  addFreeformButtonLabel: null,
   addFreeformLabel: null,
   addFreeformPlaceholder: null,
-  addFreeformButtonLabel: null,
+  autocompleteInputId: 'profiles_autocomplete',
+  freeformInputId: 'byline_freeform',
+  profiles: [],
   profilesApiUrl: null,
+  removeAuthorLabel: null,
 };
 
 BylineSlotWrapper.propTypes = {
+  addAuthorLabel: PropTypes.string,
+  addAuthorPlaceholder: PropTypes.string,
+  addFreeformButtonLabel: PropTypes.string,
+  addFreeformLabel: PropTypes.string,
+  addFreeformPlaceholder: PropTypes.string,
+  addProfile: PropTypes.func.isRequired,
+  autocompleteInputId: PropTypes.string,
+  freeformInputId: PropTypes.string,
   profiles: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.oneOfType([
       PropTypes.number,
@@ -83,16 +96,10 @@ BylineSlotWrapper.propTypes = {
       PropTypes.string,
     ]),
   })),
-  addProfile: PropTypes.func.isRequired,
+  profilesApiUrl: PropTypes.string,
+  removeAuthorLabel: PropTypes.string,
   removeProfile: PropTypes.func.isRequired,
   reorderProfile: PropTypes.func.isRequired,
-  addAuthorLabel: PropTypes.string,
-  addAuthorPlaceholder: PropTypes.string,
-  removeAuthorLabel: PropTypes.string,
-  addFreeformLabel: PropTypes.string,
-  addFreeformPlaceholder: PropTypes.string,
-  addFreeformButtonLabel: PropTypes.string,
-  profilesApiUrl: PropTypes.string,
 };
 
 export default BylineSlotWrapper;