From 4be6df8baf076f88f6dd03cedabedb8425c9ca22 Mon Sep 17 00:00:00 2001 From: Philip How Date: Thu, 11 Jan 2024 14:55:14 +0000 Subject: [PATCH] Show tips on the post help content + update styles (#20415) * change in article help content + styles * some attempt at keyboard navigation * fix v1 editor --- .../stylesheets/views/article-form.scss | 13 ++++++++++ app/javascript/article-form/articleForm.jsx | 19 ++++++++++---- .../article-form/components/EditorActions.jsx | 11 +++++++- .../components/Help/ArticleTips.jsx | 25 +++++++++++++++++++ .../article-form/components/Help/TagInput.jsx | 13 +++++----- .../article-form/components/Help/index.jsx | 11 +++++--- .../components/__tests__/Help.test.jsx | 1 + 7 files changed, 76 insertions(+), 17 deletions(-) create mode 100644 app/javascript/article-form/components/Help/ArticleTips.jsx diff --git a/app/assets/stylesheets/views/article-form.scss b/app/assets/stylesheets/views/article-form.scss index 846aa9e99..fcfe5a768 100644 --- a/app/assets/stylesheets/views/article-form.scss +++ b/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; + } + } } } diff --git a/app/javascript/article-form/articleForm.jsx b/app/javascript/article-form/articleForm.jsx index ed0c9e3ad..dc12370cb 100644 --- a/app/javascript/article-form/articleForm.jsx +++ b/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} - /> + /> )} { const isVersion1 = version === 'v1'; const isVersion2 = version === 'v2'; @@ -60,12 +61,17 @@ export const EditorActions = ({ } return ( -
+
@@ -75,6 +81,7 @@ export const EditorActions = ({ className="mr-2 whitespace-nowrap" onClick={onSaveDraft} disabled={previewLoading} + onFocus={(event) => switchHelpContext(event, 'editor-actions')} > Save draft @@ -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 new changes diff --git a/app/javascript/article-form/components/Help/ArticleTips.jsx b/app/javascript/article-form/components/Help/ArticleTips.jsx new file mode 100644 index 000000000..d85727e24 --- /dev/null +++ b/app/javascript/article-form/components/Help/ArticleTips.jsx @@ -0,0 +1,25 @@ +import { h } from 'preact'; + +export const ArticleTips = () => ( +
+

Publishing Tips

+
    +
  • + Ensure your post has a cover image set to make the most of the home feed + and social media platforms. +
    • +
  • + Share your post on social media platforms or with your co-workers or + local communities. +
    • +
  • + 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. +
    • +
+
+); diff --git a/app/javascript/article-form/components/Help/TagInput.jsx b/app/javascript/article-form/components/Help/TagInput.jsx index c36102879..7a9fd1bee 100644 --- a/app/javascript/article-form/components/Help/TagInput.jsx +++ b/app/javascript/article-form/components/Help/TagInput.jsx @@ -7,18 +7,17 @@ export const TagInput = () => ( >

Tagging Guidelines

    -
  • Tags help people find your post.
  • - 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.
  • - 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.
    • -
  • Use existing tags whenever possible.
  • - 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.
diff --git a/app/javascript/article-form/components/Help/index.jsx b/app/javascript/article-form/components/Help/index.jsx index 9ca8dbe54..faab63852 100644 --- a/app/javascript/article-form/components/Help/index.jsx +++ b/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' && } - {helpFor === 'tag-input' && } - {version === 'v1' && } - {(helpFor === 'article_body_markdown' || version === 'v1') && ( )} + + {helpFor === 'article-form-title' && } + {helpFor === 'tag-input' && } + {(helpFor === 'editor-actions' || version === 'v1') && ( + + )}
)} {liquidShowing && diff --git a/app/javascript/article-form/components/__tests__/Help.test.jsx b/app/javascript/article-form/components/__tests__/Help.test.jsx index 103590a41..094c258e6 100644 --- a/app/javascript/article-form/components/__tests__/Help.test.jsx +++ b/app/javascript/article-form/components/__tests__/Help.test.jsx @@ -68,6 +68,7 @@ describe('', () => { 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();