Feature/km/style prev next citation (#20)

* styles prev/next buttons, drawer button, moves footnote * styles prev/next buttons, tweaks button text * styles citation button and drawer-close button * adds aria label to drawer, minor linting * update tests; add aria-hidden attribute to drawer
CLIxIndia-Dev · Dec 29, 2017 · 53e86fa · 53e86fa
1 parent 0ec8436
commit 53e86fa
Show file tree

Hide file tree

Showing 16 changed files with 1,550 additions and 11,365 deletions.
diff --git a/client/js/components/book/page.jsx b/client/js/components/book/page.jsx
@@ -28,6 +28,13 @@ const select = (state) => {
   };
 };
 
+const svg = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M14.83 16.42l9.17 9.17 9.17-9.17 2.83 2.83-12 12-12-12z" />
+  </svg>
+);
+
+
 export class Page extends React.Component {
 
   static propTypes = {
@@ -36,7 +43,6 @@ export class Page extends React.Component {
     tocMeta: React.PropTypes.shape({
       gradeUnit: React.PropTypes.string,
       subjectLesson: React.PropTypes.string,
-      lastModified: React.PropTypes.string,
     }),
     locale: React.PropTypes.string,
     videoPlay: React.PropTypes.func,
@@ -288,9 +294,6 @@ export class Page extends React.Component {
   }
 
   render() {
-    const lastModified = this.props.tocMeta.lastModified;
-    const footerText = lastModified ? `CLIx release date: ${lastModified}` : undefined;
-
     let previousButton;
     let nextButton;
     const { tableOfContents, params } = this.props;
@@ -300,69 +303,96 @@ export class Page extends React.Component {
         item => item.id === params.pageId
       );
 
-      if (currentPageIndex > -1 && currentPageIndex !== 0) {
+      if (currentPageIndex > -1) {
         // show Previous button
-        previousButton = (
-          <button
-            className="page-nav-button"
-            onClick={() => this.props.selectPage(tableOfContents[currentPageIndex - 1].id)}
-          >
-            {this.props.localizedStrings.footer.previous}
-          </button>
-        );
-      }
+        previousButton = (currentPageIndex === 0)
+          ? (
+            <button
+              className="c-btn-footer c-btn-footer--prev-page"
+              disabled
+            >
+              { svg }
+              {this.props.localizedStrings.footer.previous}
+            </button>
+          ) :
+          (
+            <button
+              className="c-btn-footer c-btn-footer--prev-page"
+              onClick={() => this.props.selectPage(tableOfContents[currentPageIndex - 1].id)}
+            >
+              { svg }
+              {this.props.localizedStrings.footer.previous}
+            </button>
+          );
 
-      if (currentPageIndex > -1 && currentPageIndex !== tableOfContents.length - 1) {
         // show Next button
-        nextButton = (
-          <button
-            className="page-nav-button"
-            onClick={() => this.props.selectPage(tableOfContents[currentPageIndex + 1].id)}
-          >
-            {this.props.localizedStrings.footer.next}
-          </button>
-        );
+        nextButton = (currentPageIndex === tableOfContents.length - 1)
+          ? (
+            <button
+              className="c-btn-footer c-btn-footer--next-page"
+              disabled
+            >
+              {this.props.localizedStrings.footer.next}
+              { svg }
+            </button>
+          ) :
+          (
+            <button
+              className="c-btn-footer c-btn-footer--next-page"
+              onClick={() => this.props.selectPage(tableOfContents[currentPageIndex + 1].id)}
+            >
+              {this.props.localizedStrings.footer.next}
+              { svg }
+            </button>
+          );
       }
     }
 
     let bibliography;
+    let drawer;
 
     if (this.props.bibliography) {
       bibliography = (
         <button
           onClick={this.toggleDrawer}
-          className="bibliography-btn"
+          className="c-btn-footer c-btn-footer--bibliography"
+          aria-pressed={this.state.drawerOpen}
+          aria-expanded={this.state.drawerOpen}
+          aria-haspopup
+          aria-controls="citationsDrawer"
         >
           {this.props.localizedStrings.footer.bibliography}
         </button>
       );
-    }
 
-    let drawer;
-
-    if (this.props.bibliography) {
       drawer = (
-        <FocusTrap
-          active={this.state.activeTrap}
+        <div
+          aria-hidden={!this.state.drawerOpen}
+          id="citationsDrawer"
         >
-          <Drawer
-            docked={false}
-            width="75%"
-            openSecondary
-            open={this.state.drawerOpen}
+          <FocusTrap
+            active={this.state.activeTrap}
           >
-            <button
-              onClick={this.toggleDrawer}
-              className="close-bibliography-btn"
+            <Drawer
+              docked={false}
+              width="75%"
+              openSecondary
+              open={this.state.drawerOpen}
             >
-              X
-            </button>
-            <iframe
-              title="Citations"
-              src={`${this.props.contentPath}/${this.props.bibliography.content}`}
-            />
-          </Drawer>
-        </FocusTrap>
+              <button
+                onClick={this.toggleDrawer}
+                className="c-drawer-btn-close"
+                aria-label="close drawer"
+              >
+                X
+              </button>
+              <iframe
+                title="Citations"
+                src={`${this.props.contentPath}/${this.props.bibliography.content}`}
+              />
+            </Drawer>
+          </FocusTrap>
+        </div>
       );
     }
 
@@ -372,12 +402,11 @@ export class Page extends React.Component {
           <html lang={this.props.locale} />
         </Helmet>
         {this.iframe(this.props)}
-        <div className="c-release">
+        <nav className="c-page-nav">
           {previousButton}
-          <span>{footerText}</span>
           {bibliography}
           {nextButton}
-        </div>
+        </nav>
         {drawer}
       </section>
     );

diff --git a/client/js/components/book/page.spec.jsx b/client/js/components/book/page.spec.jsx
@@ -47,15 +47,24 @@ describe('page', () => {
     };
 
     page = TestUtils.renderIntoDocument(<Page {...pageProps} />);
-    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'page-nav-button').length).toEqual(1);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--next-page').length).toEqual(1);
+    expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--next-page').disabled).toEqual(false);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--prev-page').length).toEqual(1);
+    expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--prev-page').disabled).toEqual(true);
 
     pageProps.params.pageId = '2';
     page = TestUtils.renderIntoDocument(<Page {...pageProps} />);
-    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'page-nav-button').length).toEqual(2);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--next-page').length).toEqual(1);
+    expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--next-page').disabled).toEqual(false);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--prev-page').length).toEqual(1);
+    expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--prev-page').disabled).toEqual(false);
 
     pageProps.params.pageId = '3';
     page = TestUtils.renderIntoDocument(<Page {...pageProps} />);
-    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'page-nav-button').length).toEqual(1);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--next-page').length).toEqual(1);
+    expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--next-page').disabled).toEqual(true);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--prev-page').length).toEqual(1);
+    expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--prev-page').disabled).toEqual(false);
   });
 
   it('renders bibliography button when appropriate', () => {
@@ -82,7 +91,8 @@ describe('page', () => {
     );
 
     page = TestUtils.renderIntoDocument(wrappedPage);
-    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'bibliography-btn').length).toEqual(0);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--bibliography').length).toEqual(0);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-drawer-btn-close').length).toEqual(0);
     expect(TestUtils.scryRenderedComponentsWithType(page, Drawer).length).toEqual(0);
 
     pageProps.bibliography = {
@@ -96,15 +106,18 @@ describe('page', () => {
     );
 
     page = TestUtils.renderIntoDocument(wrappedPage);
-    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'bibliography-btn').length).toEqual(1);
-    const drawerBtn = TestUtils.findRenderedDOMComponentWithClass(page, 'bibliography-btn');
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--bibliography').length).toEqual(1);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-drawer-btn-close').length).toEqual(1);
+    const drawerBtn = TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--bibliography');
 
     expect(TestUtils.scryRenderedComponentsWithType(page, Drawer).length).toEqual(1);
     let drawer = TestUtils.findRenderedComponentWithType(page, Drawer);
     expect(drawer.props.open).toEqual(false);
 
     TestUtils.Simulate.click(drawerBtn);
 
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-drawer-btn-close').length).toEqual(1);
+    expect(TestUtils.scryRenderedComponentsWithType(page, Drawer).length).toEqual(1);
     drawer = TestUtils.findRenderedComponentWithType(page, Drawer);
     expect(drawer.props.open).toEqual(true);
   });

diff --git a/client/js/components/chrome/sidebar.jsx b/client/js/components/chrome/sidebar.jsx
@@ -23,6 +23,7 @@ export class Sidebar extends React.Component {
     tocMeta: React.PropTypes.shape({
       gradeUnit: React.PropTypes.string,
       subjectLesson: React.PropTypes.string,
+      lastModified: React.PropTypes.string,
     }),
     selectPage: React.PropTypes.func,
     focusPage: React.PropTypes.func,
@@ -55,6 +56,8 @@ export class Sidebar extends React.Component {
     let unit = '';
     let subject = '';
     let tableOfContents = '';
+    const { lastModified } = this.props.tocMeta;
+    const footerText = lastModified ? `CLIx Release Date: ${lastModified}` : undefined;
 
     if (this.props.sidebarOpen) {
       btnToggleClass = 'c-sidebar__toggle-button c-sidebar__toggle-button--open';
@@ -104,6 +107,7 @@ export class Sidebar extends React.Component {
             {tableOfContents}
           </ul>
         </div>
+        <footer className="clix-release">{footerText}</footer>
       </nav>
     );
   }

diff --git a/client/js/locales/en.js b/client/js/locales/en.js
@@ -4,9 +4,9 @@ export default {
       activityList: 'Activity List'
     },
     footer: {
-      next: 'Next', // Next page button in the footer
-      previous: 'Previous', // Previous page button in the footer
-      bibliography: 'Click to see the citations' // Text for bibliography link
+      next: 'Next activity', // Next page button in the footer
+      previous: 'Previous activity', // Previous page button in the footer
+      bibliography: 'Citations' // Text for bibliography link
     }
   }
 };
diff --git a/client/js/locales/hi.js b/client/js/locales/hi.js
@@ -1,12 +1,12 @@
 export default {
   hi: {
     sidebar:{
-      activityList: "गतिविधीयों की सूची" // Sidebar title
+      activityList: 'गतिविधीयों की सूची' // Sidebar title
     },
     footer: {
-      next: 'आगामी', // Next page button in the footer
-      previous: 'पिछला', // Previous page button in the footer
-      bibliography: 'प्रशंसा पत्र देखने के लिए क्लिक करें' // Text for bibliography link
+      next: 'अगली गतिविधि', // Next page button in the footer
+      previous: 'पिछली गतिविधि', // Previous page button in the footer
+      bibliography: 'उद्धरण' // Text for bibliography link
     }
   }
 };
diff --git a/client/js/locales/te.js b/client/js/locales/te.js
@@ -1,12 +1,12 @@
 export default {
   te: {
     sidebar:{
-      activityList: "కార్యాచరణ జాబితా" // Sidebar title
+      activityList: 'కార్యాచరణ జాబితా' // Sidebar title
     },
     footer: {
-      next: 'తరువాత', // Next page button in the footer
-      previous: 'మునుపటి', // Previous page button in the footer
-      bibliography: 'అనులేఖనాలను చూడటానికి క్లిక్ చేయండి' // Text for bibliography link
+      next: 'తదుపరి చర్య', // Next page button in the footer
+      previous: 'మునుపటి కార్యాచరణ', // Previous page button in the footer
+      bibliography: 'ఉదహరణలు' // Text for bibliography link
     }
   }
 };