Merge pull request #354 from guardian/william/fix-svg-button-issues

Fix svg button issues
guardian · Oct 28, 2020 · e5c960d · e5c960d
2 parents 6c37563 + 9eac82a
commit e5c960d
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 3 deletions.
diff --git a/src/components/AbuseReportForm/AbuseReportForm.tsx b/src/components/AbuseReportForm/AbuseReportForm.tsx
@@ -304,7 +304,7 @@ export const AbuseReportForm: React.FC<{
                         data-link-name="cancel-report-abuse"
                         hideLabel={true}
                     >
-                        {}
+                        close report abuse modal
                     </Button>
                 </div>
             </form>

diff --git a/src/components/CommentContainer/CommentContainer.stories.tsx b/src/components/CommentContainer/CommentContainer.stories.tsx
@@ -75,6 +75,38 @@ const threadComment: CommentType = {
     },
 };
 
+const commentDataWithLongThread: CommentType = {
+    id: 25487686,
+    body:
+        "<p>Beau Jos pizza in Idaho Springs is a great place for mountain pizza pies. Order one with extra thick crust and drizzle it with honey. Y'all can try the Challenge if you fancy, and sketch on your napkins so your art can join their walls. This was 15 years ago, but I hope it's still there! As for music, anything from Boulder's own Big Head Todd &amp; the Monsters - 'Broken Hearted Savior' is a good start, with 'Bittersweet' a good road track. I'm jealous!!!</p>",
+    date: '26 July 2013 4:13pm',
+    isoDateTime: '2013-07-26T15:13:20Z',
+    status: 'visible',
+    webUrl: 'https://discussion.theguardian.com/comment-permalink/25487686',
+    apiUrl:
+        'https://discussion.guardianapis.com/discussion-api/comment/25487686',
+    numRecommends: 0,
+    isHighlighted: false,
+    userProfile: {
+        userId: '2762428',
+        displayName: 'FrankDeFord',
+        webUrl: 'https://profile.theguardian.com/user/id/2762428',
+        apiUrl:
+            'https://discussion.guardianapis.com/discussion-api/profile/2762428',
+        avatar: 'https://avatar.guim.co.uk/user/2762428',
+        secureAvatarUrl: 'https://avatar.guim.co.uk/user/2762428',
+        badge: [],
+    },
+    responses: [],
+    metaData: {
+        commentCount: 6,
+        staffCommenterCount: 1,
+        editorsPickCount: 0,
+        blockedCount: 0,
+        responseCount: 5,
+    },
+};
+
 const aUser = {
     userId: 'abc123',
     displayName: 'Jane Smith',
@@ -97,6 +129,13 @@ const commentDataThreaded: CommentType = {
     },
 };
 
+const commentDataThreadedWithLongThread: CommentType = {
+    ...commentDataWithLongThread,
+    ...{
+        responses: [threadComment],
+    },
+};
+
 export const defaultStory = () => (
     <CommentContainer
         comment={commentData}
@@ -128,3 +167,19 @@ export const threadedComment = () => (
     />
 );
 threadedComment.story = { name: 'threaded' };
+
+export const threadedCommentWithShowMore = () => (
+    <CommentContainer
+        comment={commentDataThreadedWithLongThread}
+        pillar={'lifestyle'}
+        isClosedForComments={false}
+        shortUrl="randomShortURL"
+        user={aUser}
+        threads="collapsed"
+        setCommentBeingRepliedTo={comment => {}}
+        mutes={[]}
+        toggleMuteStatus={() => {}}
+        onPermalinkClick={() => {}}
+    />
+);
+threadedCommentWithShowMore.story = { name: 'threaded with show more button' };
diff --git a/src/components/CommentContainer/CommentContainer.tsx b/src/components/CommentContainer/CommentContainer.tsx
@@ -48,6 +48,8 @@ const buttonStyles = (pillar: Pillar) => css`
     border: 1px solid ${neutral[86]};
     svg {
         fill: ${neutral[60]};
+        width: 15px;
+        height: 15px;
     }
 
     :hover {

diff --git a/src/components/RecommendationCount/RecommendationCount.tsx b/src/components/RecommendationCount/RecommendationCount.tsx
@@ -35,8 +35,9 @@ const buttonStyles = (recommended: boolean, isSignedIn: boolean) => css`
 `;
 
 const arrowStyles = (recommended: Boolean) => css`
-    margin-left: -4px;
-    margin-bottom: -2px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     svg {
         fill: ${recommended ? neutral[100] : neutral[46]};
         height: 15px;