fix: fixed post style according to figma

2023-01-27 17:15:44 +05:00
parent 2fa0900a65
commit af5bc1a664
19 changed files with 663 additions and 459 deletions
--- a/src/discussions/posts/post/LikeButton.jsx
+++ b/src/discussions/posts/post/LikeButton.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Icon, IconButtonWithTooltip } from '@edx/paragon';
+import {
+  Icon, IconButton, OverlayTrigger, Tooltip,
+} from '@edx/paragon';

 import { ThumbUpFilled, ThumbUpOutline } from '../../../components/icons';
 import messages from './messages';
@@ -12,7 +14,6 @@ function LikeButton({
  intl,
  onClick,
  voted,
-  preview,
 }) {
  const handleClick = (e) => {
    e.preventDefault();
@@ -24,19 +25,27 @@ function LikeButton({

  return (
    <div className="d-flex align-items-center mr-36px text-primary-500">
-      <IconButtonWithTooltip
-        id={`like-${count}-tooltip`}
-        tooltipPlacement="top"
-        tooltipContent={intl.formatMessage(voted ? messages.removeLike : messages.like)}
-        src={voted ? ThumbUpFilled : ThumbUpOutline}
-        iconAs={Icon}
-        alt="Like"
-        onClick={handleClick}
-        size={preview ? 'inline' : 'sm'}
-        className={`mr-0.5 ${preview && 'p-3'}`}
-        iconClassNames={preview && 'icon-size'}
-      />
-      {(count && count > 0) ? count : null}
+      <OverlayTrigger
+        overlay={(
+          <Tooltip id={`liked-${count}-tooltip`}>
+            {intl.formatMessage(voted ? messages.removeLike : messages.like)}
+          </Tooltip>
+        )}
+      >
+        <IconButton
+          src={voted ? ThumbUpFilled : ThumbUpOutline}
+          onClick={handleClick}
+          className="post-footer-icon-dimentions"
+          alt="Like"
+          iconAs={Icon}
+          iconClassNames="like-icon-dimentions"
+
+        />
+      </OverlayTrigger>
+      <div className="font-family-inter font-style-normal">
+        {(count && count > 0) ? count : null}
+      </div>
+
    </div>
  );
 }
@@ -46,13 +55,11 @@ LikeButton.propTypes = {
  intl: intlShape.isRequired,
  onClick: PropTypes.func,
  voted: PropTypes.bool,
-  preview: PropTypes.bool,
 };

 LikeButton.defaultProps = {
  voted: false,
  onClick: undefined,
-  preview: false,
 };

 export default injectIntl(LikeButton);
--- a/src/discussions/posts/post/Post.jsx
+++ b/src/discussions/posts/post/Post.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';

 import classNames from 'classnames';
@@ -41,7 +41,6 @@ function Post({
  const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false);
  const [isReporting, showReportConfirmation, hideReportConfirmation] = useToggle(false);
  const [isClosing, showClosePostModal, hideClosePostModal] = useToggle(false);
-  const [showHoverCard, setShowHoverCard] = useState(false);

  const handleAbusedFlag = () => {
    if (post.abuseFlagged) {
@@ -91,10 +90,8 @@ function Post({

  return (
    <div
-      className="d-flex flex-column w-100 mw-100 "
-      data-testid={`post-${post.id}`}
-      onMouseEnter={() => setShowHoverCard(true)}
-      onMouseLeave={() => setShowHoverCard(false)}
+      className="d-flex flex-column w-100 mw-100 post-card-comment"
+      aria-level={5}
    >
      <Confirmation
        isOpen={isDeleting}
@@ -115,29 +112,29 @@ function Post({
          confirmButtonVariant="danger"
        />
      )}
-      {showHoverCard && (
-        <HoverCard
-          commentOrPost={post}
-          actionHandlers={actionHandlers}
-          handleResponseCommentButton={handleAddResponseButton}
-          addResponseCommentButtonMessage={intl.formatMessage(messages.addResponse)}
-          onLike={() => dispatch(updateExistingThread(post.id, { voted: !post.voted }))}
-          onFollow={() => dispatch(updateExistingThread(post.id, { following: !post.following }))}
-          isClosedPost={post.closed}
-        />
-      )}
+
+      <HoverCard
+        commentOrPost={post}
+        actionHandlers={actionHandlers}
+        handleResponseCommentButton={handleAddResponseButton}
+        addResponseCommentButtonMessage={intl.formatMessage(messages.addResponse)}
+        onLike={() => dispatch(updateExistingThread(post.id, { voted: !post.voted }))}
+        onFollow={() => dispatch(updateExistingThread(post.id, { following: !post.following }))}
+        isClosedPost={post.closed}
+      />
+
      <AlertBanner content={post} />
      <PostHeader post={post} />
-      <div className="d-flex mt-14px text-break font-style-normal text-primary-500">
-        <HTMLLoader htmlNode={post.renderedBody} componentId="post" />
+      <div className="d-flex mt-14px text-break font-style-normal font-family-inter text-primary-500">
+        <HTMLLoader htmlNode={post.renderedBody} componentId="post" cssClassName="html-loader" />
      </div>
      {topicContext && topic && (
        <div
-          className={classNames('mb-10px',
+          className={classNames('mt-14px mb-1 font-style-normal font-family-inter font-size-12',
            { 'w-100': enableInContextSidebar })}
          style={{ lineHeight: '20px' }}
        >
-          <span className="text-gray-500">{intl.formatMessage(messages.relatedTo)}{' '}</span>
+          <span className="text-gray-500" style={{ lineHeight: '20px' }}>{intl.formatMessage(messages.relatedTo)}{' '}</span>
          <Hyperlink
            destination={topicContext.unitLink}
            target="_top"
--- a/src/discussions/posts/post/PostFooter.jsx
+++ b/src/discussions/posts/post/PostFooter.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';

 import { useDispatch, useSelector } from 'react-redux';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
-  Badge, Icon, IconButtonWithTooltip, OverlayTrigger, Tooltip,
+  Icon, IconButton, OverlayTrigger, Tooltip,
 } from '@edx/paragon';
 import {
  Locked,
@@ -13,8 +12,6 @@ import {

 import {
  People,
-  QuestionAnswer,
-  QuestionAnswerOutline,
  StarFilled,
  StarOutline,
 } from '../../../components/icons';
@@ -27,58 +24,39 @@ import { postShape } from './proptypes';
 function PostFooter({
  post,
  intl,
-  preview,
-  showNewCountLabel,
 }) {
  const dispatch = useDispatch();
  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
  return (
-    <div className="d-flex align-items-center">
+    <div className="d-flex align-items-center ml-n1.5 mt-10px" style={{ lineHeight: '32px' }}>
      {post.voteCount !== 0 && (
        <LikeButton
          count={post.voteCount}
          onClick={() => dispatch(updateExistingThread(post.id, { voted: !post.voted }))}
          voted={post.voted}
-          preview={preview}
        />
      )}
      {post.following && (
-        <IconButtonWithTooltip
-          id={`follow-${post.id}-tooltip`}
-          tooltipPlacement="top"
-          tooltipContent={intl.formatMessage(post.following ? messages.unFollow : messages.follow)}
-          src={post.following ? StarFilled : StarOutline}
-          iconAs={Icon}
-          alt="Follow"
-          onClick={(e) => {
-            e.preventDefault();
-            dispatch(updateExistingThread(post.id, { following: !post.following }));
-            return true;
-          }}
-          size={preview ? 'inline' : 'sm'}
-          className={preview && 'p-3'}
-          iconClassNames={preview && 'icon-size'}
-        />
-      )}
-      {preview && post.commentCount > 1 && (
-        <div className="d-flex align-items-center ml-4">
-          <IconButtonWithTooltip
-            tooltipPlacement="top"
-            tooltipContent={intl.formatMessage(messages.viewActivity)}
-            src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline}
+        <OverlayTrigger
+          overlay={(
+            <Tooltip id={`follow-${post.id}-tooltip`}>
+              {intl.formatMessage(post.following ? messages.unFollow : messages.follow)}
+            </Tooltip>
+          )}
+        >
+          <IconButton
+            src={post.following ? StarFilled : StarOutline}
+            onClick={(e) => {
+              e.preventDefault();
+              dispatch(updateExistingThread(post.id, { following: !post.following }));
+              return true;
+            }}
            iconAs={Icon}
-            alt="Comment Count"
-            size="inline"
-            className="p-3 mr-0.5"
-            iconClassNames="icon-size"
+            iconClassNames="follow-icon-dimentions"
+            className="post-footer-icon-dimentions"
+            alt="Follow"
          />
-          {post.commentCount}
-        </div>
-      )}
-      {showNewCountLabel && preview && post?.unreadCommentCount > 0 && post.commentCount > 1 && (
-        <Badge variant="light" className="ml-2">
-          {intl.formatMessage(messages.newLabel, { count: post.unreadCommentCount })}
-        </Badge>
+        </OverlayTrigger>
      )}
      <div className="d-flex flex-fill justify-content-end align-items-center">
        {post.groupId && userHasModerationPrivileges && (
@@ -101,7 +79,7 @@ function PostFooter({
          </>
        )}

-        {!preview && post.closed
+        {post.closed
          && (
            <OverlayTrigger
              overlay={(
@@ -128,13 +106,7 @@ function PostFooter({
 PostFooter.propTypes = {
  intl: intlShape.isRequired,
  post: postShape.isRequired,
-  preview: PropTypes.bool,
-  showNewCountLabel: PropTypes.bool,
-};

-PostFooter.defaultProps = {
-  preview: false,
-  showNewCountLabel: false,
 };

 export default injectIntl(PostFooter);
--- a/src/discussions/posts/post/PostFooter.test.jsx
+++ b/src/discussions/posts/post/PostFooter.test.jsx
@@ -64,11 +64,6 @@ describe('PostFooter', () => {
    });
  });

-  it("shows 'x new' badge for new comments in case of read post only", () => {
-    renderComponent(mockPost, true, true);
-    expect(screen.getByText('2 New')).toBeTruthy();
-  });
-
  it("doesn't have 'new' badge when there are 0 new comments", () => {
    renderComponent({ ...mockPost, unreadCommentCount: 0 });
    expect(screen.queryByText('2 New')).toBeFalsy();
--- a/src/discussions/posts/post/PostHeader.jsx
+++ b/src/discussions/posts/post/PostHeader.jsx
@@ -108,13 +108,14 @@ function PostHeader({
                  && <Badge variant="success">{intl.formatMessage(messages.answered)}</Badge>}
              </div>
            )
-            : <h5 className="mb-0" style={{ lineHeight: '21px' }} aria-level="1" tabIndex="-1" accessKey="h">{post.title}</h5>}
+            : <h5 className="mb-0 font-style-normal font-family-inter text-primary-500" style={{ lineHeight: '21px' }} aria-level="1" tabIndex="-1" accessKey="h">{post.title}</h5>}
          <AuthorLabel
            author={post.author || intl.formatMessage(messages.anonymous)}
            authorLabel={post.authorLabel}
            labelColor={authorLabelColor && `text-${authorLabelColor}`}
            linkToProfile
            postCreatedAt={post.createdAt}
+            postOrComment
          />
        </div>
      </div>