diff --git a/src/components/PostHelpPanel.jsx b/src/components/PostHelpPanel.jsx new file mode 100644 index 000000000..ac216fd5f --- /dev/null +++ b/src/components/PostHelpPanel.jsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react'; + +import { + Hyperlink, Icon, IconButton, IconButtonWithTooltip, +} from '@openedx/paragon'; +import { Close, HelpOutline } from '@openedx/paragon/icons'; + +import { useIntl } from '@edx/frontend-platform/i18n'; + +import messages from '../discussions/posts/post-editor/messages'; + +const PostHelpPanel = () => { + const intl = useIntl(); + const [showHelpPane, setShowHelpPane] = useState(false); + + return ( + <> +
+ setShowHelpPane(true)} + alt={intl.formatMessage(messages.showHelpIcon)} + tooltipContent={
{intl.formatMessage(messages.discussionHelpTooltip)}
} + src={HelpOutline} + iconAs={Icon} + size="inline" + className="float-right p-3 help-icon" + iconClassNames="help-icon-size" + data-testid="help-button" + invertColors + isActive + /> +
+ {showHelpPane && ( +
+ setShowHelpPane(false)} + alt={intl.formatMessage(messages.actionsAlt)} + src={Close} + iconAs={Icon} + size="inline" + className="float-right p-3" + iconClassNames="icon-size" + data-testid="hide-help-button" + /> +
+

{intl.formatMessage(messages.discussionHelpHeader)}

+

{intl.formatMessage(messages.discussionHelpDescription)}

+ + {intl.formatMessage(messages.discussionHelpCourseParticipation)} + + + {intl.formatMessage(messages.discussionHelpMathExpressions)} + +
+
+ )} + + ); +}; + +export default React.memo(PostHelpPanel); diff --git a/src/discussions/posts/post-editor/PostEditor.jsx b/src/discussions/posts/post-editor/PostEditor.jsx index 834304b35..a2f57959c 100644 --- a/src/discussions/posts/post-editor/PostEditor.jsx +++ b/src/discussions/posts/post-editor/PostEditor.jsx @@ -18,6 +18,7 @@ import { AppContext } from '@edx/frontend-platform/react'; import { TinyMCEEditor } from '../../../components'; import FormikErrorFeedback from '../../../components/FormikErrorFeedback'; +import PostHelpPanel from '../../../components/PostHelpPanel'; import PostPreviewPanel from '../../../components/PostPreviewPanel'; import useDispatchWithState from '../../../data/hooks'; import selectCourseCohorts from '../../cohorts/data/selectors'; @@ -409,6 +410,7 @@ const PostEditor = ({ onEditorChange={formikCompatibleHandler(handleChange, 'comment')} onBlur={formikCompatibleHandler(handleBlur, 'comment')} /> + diff --git a/src/discussions/posts/post-editor/PostEditor.test.jsx b/src/discussions/posts/post-editor/PostEditor.test.jsx index c72678485..d6c0e2409 100644 --- a/src/discussions/posts/post-editor/PostEditor.test.jsx +++ b/src/discussions/posts/post-editor/PostEditor.test.jsx @@ -368,5 +368,34 @@ describe('PostEditor', () => { expect(container.querySelector('[data-testid="hide-preview-button"]')).not.toBeInTheDocument(); }); }); + + it('should show Help Panel', async () => { + await renderComponent(true, `/${courseId}/posts/${threadId}/edit`); + + await act(async () => { + fireEvent.click(container.querySelector('[data-testid="help-button"]')); + }); + + await waitFor(() => { + expect(container.querySelector('[data-testid="hide-help-button"]')).toBeInTheDocument(); + }); + }); + + it('should hide Help Panel', async () => { + await renderComponent(true, `/${courseId}/posts/${threadId}/edit`); + + await act(async () => { + fireEvent.click(container.querySelector('[data-testid="help-button"]')); + }); + + await act(async () => { + fireEvent.click(container.querySelector('[data-testid="hide-help-button"]')); + }); + + await waitFor(() => { + expect(container.querySelector('[data-testid="help-button"]')).toBeInTheDocument(); + expect(container.querySelector('[data-testid="hide-help-button"]')).not.toBeInTheDocument(); + }); + }); }); }); diff --git a/src/discussions/posts/post-editor/messages.js b/src/discussions/posts/post-editor/messages.js index c2691aebb..e91781317 100644 --- a/src/discussions/posts/post-editor/messages.js +++ b/src/discussions/posts/post-editor/messages.js @@ -116,6 +116,36 @@ const messages = defineMessages({ defaultMessage: 'Show preview', description: 'show preview button text to allow user to see their post content.', }, + showHelpIcon: { + id: 'discussions.editor.posts.showHelp.icon', + defaultMessage: 'Show Help', + description: 'show help icon to allow user to see important documentation.', + }, + discussionHelpHeader: { + id: 'discussions.editor.posts.discussionHelpHeader', + defaultMessage: 'Discussions help', + description: 'header text for post help section.', + }, + discussionHelpDescription: { + id: 'discussions.editor.posts.discussionHelpDescription', + defaultMessage: 'Course discussions give you the opportunity to start conversations, ask questions, and interact with other learners. See the links below to learn more:', + description: 'description message for post help section.', + }, + discussionHelpCourseParticipation: { + id: 'discussions.editor.posts.discussionHelpCourseParticipation', + defaultMessage: 'Participating in course discussions', + description: 'Documentation link title for participating in course discussions.', + }, + discussionHelpMathExpressions: { + id: 'discussions.editor.posts.discussionHelpMathExpressions', + defaultMessage: 'Entering math expressions in course discussions', + description: 'Documentation link title for entering math expressions in course discussions.', + }, + discussionHelpTooltip: { + id: 'discussions.editor.posts.discussionHelpTooltip', + defaultMessage: 'Learn more about MathJax & LaTeX', + description: 'Tooltip help message for documentation help.', + }, actionsAlt: { id: 'discussions.actions.label', defaultMessage: 'Actions menu', diff --git a/src/index.scss b/src/index.scss index 3fd21986f..99c8a0a65 100755 --- a/src/index.scss +++ b/src/index.scss @@ -593,6 +593,15 @@ th, td { white-space: nowrap; } +.help-icon { + margin: -47px -3px 0px 0px; +} + +.help-icon-size { + height: 16px !important; + width: 16px !important; +} + @media only screen and (max-width: 367px) { .discussion-comments h5, @@ -603,7 +612,8 @@ th, td { .pgn__modal, .pgn__form-label, .dropdown-menu, - .tox-tbtn { + .tox-tbtn, + .tooltip { font-size: 10px !important; } @@ -640,7 +650,8 @@ th, td { .pgn__form-label, .pgn__modal, .dropdown-menu, - .tox-tbtn { + .tox-tbtn, + .tooltip { font-size: 12px !important; } @@ -659,7 +670,8 @@ th, td { @media only screen and (min-width: 769px) { body, - #main { + #main, + .tooltip { font-size: 14px; } }