T244850 scrolldown arrow (#170)

* Add arrow down icon to lead image page * Update icon color to #72777D * Fix indicator width & height * adding test for indicator Co-authored-by: Jose Pita <[email protected]>
wikimedia · Mar 12, 2020 · ff89e2a · ff89e2a
1 parent 8046005
commit ff89e2a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 1 deletion.
diff --git a/cypress/integration/article-view-spec.js b/cypress/integration/article-view-spec.js
@@ -146,6 +146,21 @@ describe('Article view', () => {
     cy.enter()
     articlePage.getArticleText().should('have.attr', 'style', 'font-size: 14px;')
   })
+
+  it('check down arrow to hint user to use dpad down', () => {
+    goToCatArticle()
+    articlePage.getDownArrowIndicator().should('be.visible')
+    cy.downArrow()
+    articlePage.getDownArrowIndicator().should('not.be.visible')
+  })
+
+  it('check down arrow doesnt show', () => {
+    cy.navigateToPageWithoutOnboarding('article/en/Catt')
+    articlePage.title().should('have.text', 'Catt')
+    articlePage.getDownArrowIndicator().should('not.be.visible')
+    cy.downArrow()
+    articlePage.getDownArrowIndicator().should('not.be.visible')
+  })
 })
 
 function goToCatArticle () {

diff --git a/cypress/page-objects/article-page.js b/cypress/page-objects/article-page.js
@@ -74,4 +74,8 @@ export class ArticlePage {
   increaseTextSize () {
     cy.get('body').type('6')
   }
+
+  getDownArrowIndicator () {
+    return cy.get('div.indicator>img')
+  }
 }
diff --git a/images/icon-down-arrow.svg b/images/icon-down-arrow.svg
diff --git a/src/components/Article.js b/src/components/Article.js
@@ -83,7 +83,7 @@ const ArticleSection = ({
 
       const introNode = contentRef.current.querySelector('.intro')
       let introHeight = introNode.getBoundingClientRect().height
-      introHeight += 34 // Magic number needed to make it work
+      introHeight += 21 // Magic number needed to make it work
       const articleSectionHeight = contentRef.current.getBoundingClientRect().height
       const marginTop = articleSectionHeight - introHeight
 
@@ -105,6 +105,11 @@ const ArticleSection = ({
             </Fragment>
           ) }
           { actions && <ArticleActions actions={actions} /> }
+          { imageUrl && (
+            <div class='indicator'>
+              <img src='images/icon-down-arrow.svg' />
+            </div>
+          ) }
         </div>
         { isFooter
           ? <ArticleFooter lang={lang} title={articleTitle} items={suggestedArticles} />

diff --git a/style/article.less b/style/article.less
@@ -47,6 +47,17 @@
 				color: #323438;
 			}
 
+			.indicator {
+				width: 100%;
+				position: relative;
+				text-align: center;
+
+				img {
+					width: 20px;
+					height: 20px;
+				}
+			}
+
 			.article-actions {
 				display: flex;
 				justify-content: space-around;