refactor(inpageNavigation): restructure as a button

eea · Mar 30, 2023 · 48e22ac · 48e22ac
1 parent 4f4d0df
commit 48e22ac
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 8 deletions.
diff --git a/src/ui/InpageNavigation/InpageNavigation.jsx b/src/ui/InpageNavigation/InpageNavigation.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Container, Icon } from 'semantic-ui-react';
+import { Container, Button, Icon } from 'semantic-ui-react';
 
 class InpageNavigation extends Component {
   constructor(props) {
@@ -39,10 +39,9 @@ class InpageNavigation extends Component {
   render() {
     return (
       <Container>
-        <div
+        <Button
           id="inpage-navigation"
           onClick={this.onInpageNavigationClick}
-          role="none"
           className={this.state.removeClass}
         >
           <div className="mobile tablet only">
@@ -52,7 +51,7 @@ class InpageNavigation extends Component {
             <Icon className="ri-arrow-up-s-line" />
             <div className="text">top</div>
           </div>
-        </div>
+        </Button>
       </Container>
     );
   }

diff --git a/src/ui/InpageNavigation/InpageNavigation.stories.jsx b/src/ui/InpageNavigation/InpageNavigation.stories.jsx
@@ -52,7 +52,7 @@ function InpageNavigationExample() {
           tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
           in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
           bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
-          aliquet.
+          aliquet. <a href="/#">Link example</a>
         </p>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
@@ -80,7 +80,7 @@ function InpageNavigationExample() {
           tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
           in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
           bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
-          aliquet.
+          aliquet. <a href="/#">Link example</a>
         </p>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
@@ -108,7 +108,7 @@ function InpageNavigationExample() {
           tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
           in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
           bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
-          aliquet.
+          aliquet. <a href="/#">Link example</a>
         </p>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
@@ -136,7 +136,7 @@ function InpageNavigationExample() {
           tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
           in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
           bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
-          aliquet.
+          aliquet. <a href="/#">Link example</a>
         </p>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis

diff --git a/theme/themes/eea/extras/inpageNavigation.less b/theme/themes/eea/extras/inpageNavigation.less
@@ -22,6 +22,8 @@
   color: @navColor;
   font-weight: @navFontWeight;
   z-index: @z-index-important;
+  line-height: @navLineHeight;
+  padding: @navPadding;
 
   /* Icon align fix */
   > div > i.icon,

diff --git a/theme/themes/eea/extras/inpageNavigation.variables b/theme/themes/eea/extras/inpageNavigation.variables
@@ -13,6 +13,8 @@
 @tabletNavHeight      : 2.25rem;
 @computerNavWidth     : 3.125rem;
 @computerNavHeight    : 3.125rem;
+@navLineHeight        : @font-lineheight-3;
+@navPadding           : 0;
 
 /* Desktop Icon */
 @inpageNavigationIconWidth : 100%;