Show tips on the post help content + update styles (#20415)

* change in article help content + styles

* some attempt at keyboard navigation

* fix v1 editor

app/assets/stylesheets/views/article-form.scss

@@ -232,6 +232,19 @@
     &--body {
       @include animationSlide(slideInBody);
     }
+
+    .pl-6 {
+      padding-left: var(--su-6);
+    }
+
+    .list-disc {
+      list-style-type: disc;
+      //list-style-position: inside;
+
+      li {
+        margin-bottom: 0.5rem;
+      }
+    }
   }
 }
 

app/javascript/article-form/articleForm.jsx

@@ -75,7 +75,14 @@ export class ArticleForm extends Component {
 
   constructor(props) {
     super(props);
-    const { article, version, siteLogo, schedulingEnabled, coverImageHeight, coverImageCrop } = this.props;
+    const {
+      article,
+      version,
+      siteLogo,
+      schedulingEnabled,
+      coverImageHeight,
+      coverImageCrop,
+    } = this.props;
     let { organizations } = this.props;
     this.article = JSON.parse(article);
     organizations = organizations ? JSON.parse(organizations) : null;
@@ -401,11 +408,12 @@ export class ArticleForm extends Component {
     }
   };
 
-  switchHelpContext = ({ target }) => {
+  switchHelpContext = (event, override = null) => {
+    const id = override || event.target.id;
     this.setState({
       ...this.setCommonProps({
-        helpFor: target.id,
-        helpPosition: target.getBoundingClientRect().y,
+        helpFor: id,
+        helpPosition: event.target.getBoundingClientRect().y,
       }),
     });
   };
@@ -493,7 +501,7 @@ export class ArticleForm extends Component {
             switchHelpContext={this.switchHelpContext}
             coverImageHeight={coverImageHeight}
             coverImageCrop={coverImageCrop}
-            />
+          />
         )}
 
         <Help
@@ -538,6 +546,7 @@ export class ArticleForm extends Component {
           onConfigChange={this.handleConfigChange}
           submitting={submitting}
           previewLoading={previewLoading}
+          switchHelpContext={this.switchHelpContext}
         />
 
         <KeyboardShortcuts

app/javascript/article-form/components/EditorActions.jsx

@@ -18,6 +18,7 @@ export const EditorActions = ({
   onConfigChange,
   submitting,
   previewLoading,
+  switchHelpContext,
 }) => {
   const isVersion1 = version === 'v1';
   const isVersion2 = version === 'v2';
@@ -60,12 +61,17 @@ export const EditorActions = ({
   }
 
   return (
-    <div className="crayons-article-form__footer">
+    <div
+      id="editor-actions"
+      className="crayons-article-form__footer"
+      onMouseEnter={switchHelpContext}
+    >
       <Button
         variant="primary"
         className="mr-2 whitespace-nowrap"
         onClick={onPublish}
         disabled={previewLoading}
+        onFocus={(event) => switchHelpContext(event, 'editor-actions')}
       >
         {saveButtonText}
       </Button>
@@ -75,6 +81,7 @@ export const EditorActions = ({
           className="mr-2 whitespace-nowrap"
           onClick={onSaveDraft}
           disabled={previewLoading}
+          onFocus={(event) => switchHelpContext(event, 'editor-actions')}
         >
           Save <span className="hidden s:inline">draft</span>
         </Button>
@@ -87,6 +94,7 @@ export const EditorActions = ({
           onConfigChange={onConfigChange}
           onSaveDraft={onSaveDraft}
           previewLoading={previewLoading}
+          onFocus={(event) => switchHelpContext(event, 'editor-actions')}
         />
       )}
 
@@ -95,6 +103,7 @@ export const EditorActions = ({
           onClick={onClearChanges}
           className="whitespace-nowrap fw-normal fs-s"
           disabled={previewLoading}
+          onFocus={(event) => switchHelpContext(event, 'editor-actions')}
         >
           Revert <span className="hidden s:inline">new changes</span>
         </Button>

app/javascript/article-form/components/Help/ArticleTips.jsx

@@ -0,0 +1,25 @@
+import { h } from 'preact';
+
+export const ArticleTips = () => (
+  <div
+    data-testid="article-publishing-tips"
+    className="crayons-article-form__help crayons-article-form__help--tags"
+  >
+    <h4 className="mb-2 fs-l">Publishing Tips</h4>
+    <ul className="list-disc pl-6 color-base-70">
+      <li>
+        Ensure your post has a cover image set to make the most of the home feed
+        and social media platforms.
+      </li>
+      <li>
+        Share your post on social media platforms or with your co-workers or
+        local communities.
+      </li>
+      <li>
+        Ask people to leave questions for you in the comments. It's a great way
+        to spark additional discussion describing personally why you wrote it or
+        why people might find it helpful.
+      </li>
+    </ul>
+  </div>
+);

app/javascript/article-form/components/Help/TagInput.jsx

@@ -7,18 +7,17 @@ export const TagInput = () => (
   >
     <h4 className="mb-2 fs-l">Tagging Guidelines</h4>
     <ul className="list-disc pl-6 color-base-70">
-      <li>Tags help people find your post.</li>
       <li>
-        Think of tags as the topics or categories that best describe your post.
+        Tags help people find your post - think of them as the topics or
+        categories that best describe your post.
       </li>
       <li>
-        Add up to four comma-separated tags per post. Combine tags to reach the
-        appropriate subcommunities.
+        Add up to four comma-separated tags per post. Use existing tags whenever
+        possible.
       </li>
-      <li>Use existing tags whenever possible.</li>
       <li>
-        Some tags, such as “help” or “healthydebate”, have special posting
-        guidelines.
+        Some tags have special posting guidelines - double check to make sure
+        your post complies with them.
       </li>
     </ul>
   </div>

app/javascript/article-form/components/Help/index.jsx

@@ -5,6 +5,7 @@ import { ArticleFormTitle } from './ArticleFormTitle';
 import { TagInput } from './TagInput';
 import { BasicEditor } from './BasicEditor';
 import { EditorFormattingHelp } from './EditorFormattingHelp';
+import { ArticleTips } from './ArticleTips';
 import { Modal } from '@crayons';
 
 const renderModal = (onClose, title, selector) => {
@@ -60,14 +61,16 @@ export const Help = ({ previewShowing, helpFor, helpPosition, version }) => {
           className="sticky"
           style={{ top: version === 'v1' ? '56px' : helpPosition }}
         >
-          {helpFor === 'article-form-title' && <ArticleFormTitle />}
-          {helpFor === 'tag-input' && <TagInput />}
-
           {version === 'v1' && <BasicEditor openModal={openModal} />}
-
           {(helpFor === 'article_body_markdown' || version === 'v1') && (
             <EditorFormattingHelp openModal={openModal} />
           )}
+
+          {helpFor === 'article-form-title' && <ArticleFormTitle />}
+          {helpFor === 'tag-input' && <TagInput />}
+          {(helpFor === 'editor-actions' || version === 'v1') && (
+            <ArticleTips />
+          )}
         </div>
       )}
       {liquidShowing &&

app/javascript/article-form/components/__tests__/Help.test.jsx

@@ -68,6 +68,7 @@ describe('<Help />', () => {
     expect(getByTestId('article-form__help-section')).toBeInTheDocument();
     expect(getByTestId('basic-editor-help')).toBeInTheDocument();
     expect(getByTestId('format-help')).toBeInTheDocument();
+    expect(getByTestId('article-publishing-tips')).toBeInTheDocument();
 
     expect(queryByTestId('title-help')).not.toBeInTheDocument();
     expect(queryByTestId('basic-tag-input-help')).not.toBeInTheDocument();