Merge pull request Sage-Bionetworks#778 from emmanmills/PORTALS-1765-…

…page-progress

Portals-1765: Page progress component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "synapse-react-client",
-  "version": "1.15.47",
+  "version": "1.15.48",
   "private": false,
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",

src/__tests__/lib/containers/PageProgress.test.tsx

@@ -0,0 +1,63 @@
+import { mount } from 'enzyme'
+import * as React from 'react'
+import PageProgress, { PageProgressProps } from '../../../lib/containers/PageProgress'
+
+describe('Page Progress: basic functionality', () => {
+
+  const onBackButtonClicked = jest.fn()
+  const onNextButtonClicked = jest.fn()
+  const props:PageProgressProps = {
+    barColor: "",
+    barPercent: 30,
+    backBtnLabel: "Go back",
+    backBtnCallback: onBackButtonClicked,
+    forwardBtnLabel: "Go forward",
+    forwardBtnCallback: onNextButtonClicked,
+    forwardBtnActive: false
+  }
+  const canGoNextProps:PageProgressProps = {...props}
+  canGoNextProps.forwardBtnActive = true
+
+  it('render component without crashing', async () => {
+    const wrapper = mount(<PageProgress {...props} />)
+    expect(wrapper).toBeDefined()
+  })
+
+  it('should render progress bar with correct width', async () => {
+    const wrapper = mount(<PageProgress {...props} />)
+    expect(wrapper.find('.page-progress-percent').prop('style')).toHaveProperty('width', '30%')
+  })
+
+  it('should render button with correct labels', async () => {
+    const wrapper = mount(<PageProgress {...props} />)
+    expect(wrapper.find('button.btn-progress-back').text()).toEqual('Go back')
+    expect(wrapper.find('button.btn-progress-next').text()).toEqual('Go forward')
+  })
+
+  it('should have correct css class for forward button', async () => {
+    const wrapper = mount(<PageProgress {...props} />)
+    expect(wrapper.find('button.btn-progress-back')).toBeDefined()
+
+    const wrapper2 = mount(<PageProgress {...canGoNextProps} />)
+    expect(wrapper2.find('button.btn-progress-next-active').text()).toEqual('Go forward')
+  })
+
+  it('should call back button callback when clicked', async () => {
+    const wrapper = mount(<PageProgress {...props} />)
+    wrapper.find("button.btn-progress-back").simulate('click')
+    expect(onBackButtonClicked).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not call forward button callback when it is not active', async () => {
+    const wrapper = mount(<PageProgress {...props} />)
+    wrapper.find("button.btn-progress-back").simulate('click')
+    expect(onNextButtonClicked).toHaveBeenCalledTimes(0)
+  })
+
+  it('should call forward button callback when it is active', async () => {
+    const wrapper = mount(<PageProgress {...canGoNextProps} />)
+    wrapper.find("button.btn-progress-next-active").simulate('click')
+    expect(onNextButtonClicked).toHaveBeenCalledTimes(1)
+  })
+
+})

src/lib/containers/PageProgress.md

@@ -0,0 +1,11 @@
+```jsx
+      <PageProgress
+        barColor={ "green" }
+        barPercent={ 75 }
+        backBtnLabel={ "Back"}
+        backBtnCallback={ ()=>{ console.log("you just clicked back button") } }
+        forwardBtnLabel={ "Next" }
+        forwardBtnCallback={ ()=>{ console.log("When forwardBtnActive is set to true, you will see this message") } }
+        forwardBtnActive={ false }
+      />
+```

src/lib/containers/PageProgress.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react'
+import { Button } from 'react-bootstrap'
+
+export type PageProgressProps = {
+  barColor: string
+  barPercent: number
+  backBtnLabel: string
+  backBtnCallback?: Function
+  forwardBtnLabel: string
+  forwardBtnCallback?: Function
+  forwardBtnActive: boolean
+}
+
+const PageProgress: React.FunctionComponent<PageProgressProps> = (props) => {
+
+  const {barColor, barPercent, backBtnLabel, forwardBtnLabel, forwardBtnActive, backBtnCallback, forwardBtnCallback} = props
+  const [progressPercent, setProgressPercent] = useState<number>(0)
+  let mounted = true
+
+  useEffect(() => {
+    if (mounted) {
+      setProgressPercent(barPercent)
+    }
+    return () => {
+      mounted = false
+    }
+  }, [barPercent])
+
+  const handleBackButtonClick = (e:React.MouseEvent) => {
+    if(backBtnCallback) {
+      backBtnCallback()
+    }
+  }
+
+  const handleNextButtonClick = (e:React.MouseEvent) => {
+    if (forwardBtnCallback && forwardBtnActive) {
+      forwardBtnCallback()
+    }
+  }
+
+  return (
+    <section className="page-progress">
+      <div
+        className="page-progress-percent"
+        style={{
+          width: progressPercent + "%",
+          backgroundColor: barColor
+        }}
+      >
+      </div>
+      <div className="page-progress-action">
+        <Button
+          className="btn-progress-back"
+          onClick={handleBackButtonClick}>{backBtnLabel}
+        </Button>
+        <Button
+          className={forwardBtnActive ? "btn-progress-next-active" : "btn-progress-next" }
+          onClick={handleNextButtonClick}>{forwardBtnLabel}
+        </Button>
+      </div>
+    </section>
+  )
+}
+
+export default PageProgress

src/lib/index.ts

@@ -34,6 +34,7 @@ import UserCardListGroups from './containers/home_page/people/UserCardListGroups
 import { AccountLevelBadge } from './containers/AccountLevelBadge'
 import RenderIfInView from './containers/RenderIfInView'
 import TermsAndConditions from './containers/TermsAndConditions'
+import PageProgress from './containers/PageProgress'
 
 // we exclude this from main.scss because react doesn't like importing an svg
 // with a relative import.
@@ -76,6 +77,7 @@ const SynapseComponents = {
   AccountLevelBadge,
   RenderIfInView,
   TermsAndConditions,
+  PageProgress,
 }
 
 export { SynapseClient, SynapseConstants, SynapseComponents }

src/lib/rollup.index.ts

@@ -11,6 +11,7 @@ import { EvaluationRoundEditorList } from './containers/evaluation_queues/Evalua
 import { AccessTokenPage } from './containers/personal_access_token/AccessTokenPage'
 import { AccountLevelBadge } from './containers/AccountLevelBadge'
 import TermsAndConditions from './containers/TermsAndConditions'
+import PageProgress from './containers/PageProgress'
 
 const SynapseComponents = {
   Login,
@@ -23,6 +24,7 @@ const SynapseComponents = {
   AccessTokenPage,
   AccountLevelBadge,
   TermsAndConditions,
+  PageProgress,
 }
 
 export { SynapseComponents, SynapseConstants, SynapseClient }

src/lib/style/abstracts/_variables.scss

@@ -40,3 +40,11 @@ $breakpoints: (
   'medium': 768px,
   'large': 1024px,
 ) !default;
+
+// To reset bootstrap button style
+%button-reset {
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  border-radius: 2px;
+}

src/lib/style/components/_all.scss

@@ -10,4 +10,4 @@
   './bar-loader', './facet-plots-card', './featured-data-plots',
   './featured-data-tabs', './programs', './user-card-list-groups',
   './evaluation_queue/all', './personal-access-tokens', './copy-to-clipboard',
-  './account-level-badge', './terms-and-conditions';
+  './account-level-badge', './terms-and-conditions', './page-progress';

src/lib/style/components/_page-progress.scss

@@ -0,0 +1,34 @@
+.page-progress {
+  &-percent {
+    height: 10px;
+  }
+  &-action {
+    padding: 30px 0;
+    text-align: center;
+  }
+  button,
+  button:active,
+  button:focus,
+  button:active:focus {
+    @extend %button-reset;
+    padding: 10px 120px;
+  }
+  .btn-progress-back,
+  .btn-progress-back:active:focus {
+    margin-right: 30px;
+    color: #1A1C29;
+    background-color: #dcdcdc;
+  }
+  .btn-progress-next,
+  .btn-progress-next-active {
+    margin-right: 30px;
+  }
+  .btn-progress-next,
+  .btn-progress-next:active:focus {
+    background-color: #bbbbbc;
+  }
+  .btn-progress-next-active,
+  .btn-progress-next-active:active:focus {
+    background-color: #1C76AF;
+  }
+}

src/lib/style/components/_terms-and-conditions.scss

@@ -1,9 +1,3 @@
-%button-reset {
-  border: 0;
-  outline: none;
-  box-shadow: none;
-}
-
 $terms-text-color: #ABABAC;
 $terms-accent-gray: #DCDCDC;
 $terms-margin: 20px;