Skip to content

Commit 53e86fa

Browse files
resource11coleshaw
resource11
authored and
coleshaw
committed
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
1 parent 0ec8436 commit 53e86fa

16 files changed

Lines changed: 1550 additions & 11365 deletions

‎client/js/components/book/page.jsx‎

Lines changed: 78 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,13 @@ const select = (state) => {
2828
};
2929
};
3030

31+
const svg = (
32+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
33+
<path d="M14.83 16.42l9.17 9.17 9.17-9.17 2.83 2.83-12 12-12-12z" />
34+
</svg>
35+
);
36+
37+
3138
export class Page extends React.Component {
3239

3340
static propTypes = {
@@ -36,7 +43,6 @@ export class Page extends React.Component {
3643
tocMeta: React.PropTypes.shape({
3744
gradeUnit: React.PropTypes.string,
3845
subjectLesson: React.PropTypes.string,
39-
lastModified: React.PropTypes.string,
4046
}),
4147
locale: React.PropTypes.string,
4248
videoPlay: React.PropTypes.func,
@@ -288,9 +294,6 @@ export class Page extends React.Component {
288294
}
289295

290296
render() {
291-
const lastModified = this.props.tocMeta.lastModified;
292-
const footerText = lastModified ? `CLIx release date: ${lastModified}` : undefined;
293-
294297
let previousButton;
295298
let nextButton;
296299
const { tableOfContents, params } = this.props;
@@ -300,69 +303,96 @@ export class Page extends React.Component {
300303
item => item.id === params.pageId
301304
);
302305

303-
if (currentPageIndex > -1 && currentPageIndex !== 0) {
306+
if (currentPageIndex > -1) {
304307
// show Previous button
305-
previousButton = (
306-
<button
307-
className="page-nav-button"
308-
onClick={() => this.props.selectPage(tableOfContents[currentPageIndex - 1].id)}
309-
>
310-
{this.props.localizedStrings.footer.previous}
311-
</button>
312-
);
313-
}
308+
previousButton = (currentPageIndex === 0)
309+
? (
310+
<button
311+
className="c-btn-footer c-btn-footer--prev-page"
312+
disabled
313+
>
314+
{ svg }
315+
{this.props.localizedStrings.footer.previous}
316+
</button>
317+
) :
318+
(
319+
<button
320+
className="c-btn-footer c-btn-footer--prev-page"
321+
onClick={() => this.props.selectPage(tableOfContents[currentPageIndex - 1].id)}
322+
>
323+
{ svg }
324+
{this.props.localizedStrings.footer.previous}
325+
</button>
326+
);
314327

315-
if (currentPageIndex > -1 && currentPageIndex !== tableOfContents.length - 1) {
316328
// show Next button
317-
nextButton = (
318-
<button
319-
className="page-nav-button"
320-
onClick={() => this.props.selectPage(tableOfContents[currentPageIndex + 1].id)}
321-
>
322-
{this.props.localizedStrings.footer.next}
323-
</button>
324-
);
329+
nextButton = (currentPageIndex === tableOfContents.length - 1)
330+
? (
331+
<button
332+
className="c-btn-footer c-btn-footer--next-page"
333+
disabled
334+
>
335+
{this.props.localizedStrings.footer.next}
336+
{ svg }
337+
</button>
338+
) :
339+
(
340+
<button
341+
className="c-btn-footer c-btn-footer--next-page"
342+
onClick={() => this.props.selectPage(tableOfContents[currentPageIndex + 1].id)}
343+
>
344+
{this.props.localizedStrings.footer.next}
345+
{ svg }
346+
</button>
347+
);
325348
}
326349
}
327350

328351
let bibliography;
352+
let drawer;
329353

330354
if (this.props.bibliography) {
331355
bibliography = (
332356
<button
333357
onClick={this.toggleDrawer}
334-
className="bibliography-btn"
358+
className="c-btn-footer c-btn-footer--bibliography"
359+
aria-pressed={this.state.drawerOpen}
360+
aria-expanded={this.state.drawerOpen}
361+
aria-haspopup
362+
aria-controls="citationsDrawer"
335363
>
336364
{this.props.localizedStrings.footer.bibliography}
337365
</button>
338366
);
339-
}
340367

341-
let drawer;
342-
343-
if (this.props.bibliography) {
344368
drawer = (
345-
<FocusTrap
346-
active={this.state.activeTrap}
369+
<div
370+
aria-hidden={!this.state.drawerOpen}
371+
id="citationsDrawer"
347372
>
348-
<Drawer
349-
docked={false}
350-
width="75%"
351-
openSecondary
352-
open={this.state.drawerOpen}
373+
<FocusTrap
374+
active={this.state.activeTrap}
353375
>
354-
<button
355-
onClick={this.toggleDrawer}
356-
className="close-bibliography-btn"
376+
<Drawer
377+
docked={false}
378+
width="75%"
379+
openSecondary
380+
open={this.state.drawerOpen}
357381
>
358-
X
359-
</button>
360-
<iframe
361-
title="Citations"
362-
src={`${this.props.contentPath}/${this.props.bibliography.content}`}
363-
/>
364-
</Drawer>
365-
</FocusTrap>
382+
<button
383+
onClick={this.toggleDrawer}
384+
className="c-drawer-btn-close"
385+
aria-label="close drawer"
386+
>
387+
X
388+
</button>
389+
<iframe
390+
title="Citations"
391+
src={`${this.props.contentPath}/${this.props.bibliography.content}`}
392+
/>
393+
</Drawer>
394+
</FocusTrap>
395+
</div>
366396
);
367397
}
368398

@@ -372,12 +402,11 @@ export class Page extends React.Component {
372402
<html lang={this.props.locale} />
373403
</Helmet>
374404
{this.iframe(this.props)}
375-
<div className="c-release">
405+
<nav className="c-page-nav">
376406
{previousButton}
377-
<span>{footerText}</span>
378407
{bibliography}
379408
{nextButton}
380-
</div>
409+
</nav>
381410
{drawer}
382411
</section>
383412
);

‎client/js/components/book/page.spec.jsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,24 @@ describe('page', () => {
4747
};
4848

4949
page = TestUtils.renderIntoDocument(<Page {...pageProps} />);
50-
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'page-nav-button').length).toEqual(1);
50+
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--next-page').length).toEqual(1);
51+
expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--next-page').disabled).toEqual(false);
52+
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--prev-page').length).toEqual(1);
53+
expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--prev-page').disabled).toEqual(true);
5154

5255
pageProps.params.pageId = '2';
5356
page = TestUtils.renderIntoDocument(<Page {...pageProps} />);
54-
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'page-nav-button').length).toEqual(2);
57+
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--next-page').length).toEqual(1);
58+
expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--next-page').disabled).toEqual(false);
59+
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--prev-page').length).toEqual(1);
60+
expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--prev-page').disabled).toEqual(false);
5561

5662
pageProps.params.pageId = '3';
5763
page = TestUtils.renderIntoDocument(<Page {...pageProps} />);
58-
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'page-nav-button').length).toEqual(1);
64+
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--next-page').length).toEqual(1);
65+
expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--next-page').disabled).toEqual(true);
66+
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--prev-page').length).toEqual(1);
67+
expect(TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--prev-page').disabled).toEqual(false);
5968
});
6069

6170
it('renders bibliography button when appropriate', () => {
@@ -82,7 +91,8 @@ describe('page', () => {
8291
);
8392

8493
page = TestUtils.renderIntoDocument(wrappedPage);
85-
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'bibliography-btn').length).toEqual(0);
94+
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--bibliography').length).toEqual(0);
95+
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-drawer-btn-close').length).toEqual(0);
8696
expect(TestUtils.scryRenderedComponentsWithType(page, Drawer).length).toEqual(0);
8797

8898
pageProps.bibliography = {
@@ -96,15 +106,18 @@ describe('page', () => {
96106
);
97107

98108
page = TestUtils.renderIntoDocument(wrappedPage);
99-
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'bibliography-btn').length).toEqual(1);
100-
const drawerBtn = TestUtils.findRenderedDOMComponentWithClass(page, 'bibliography-btn');
109+
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-btn-footer--bibliography').length).toEqual(1);
110+
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-drawer-btn-close').length).toEqual(1);
111+
const drawerBtn = TestUtils.findRenderedDOMComponentWithClass(page, 'c-btn-footer--bibliography');
101112

102113
expect(TestUtils.scryRenderedComponentsWithType(page, Drawer).length).toEqual(1);
103114
let drawer = TestUtils.findRenderedComponentWithType(page, Drawer);
104115
expect(drawer.props.open).toEqual(false);
105116

106117
TestUtils.Simulate.click(drawerBtn);
107118

119+
expect(TestUtils.scryRenderedDOMComponentsWithClass(page, 'c-drawer-btn-close').length).toEqual(1);
120+
expect(TestUtils.scryRenderedComponentsWithType(page, Drawer).length).toEqual(1);
108121
drawer = TestUtils.findRenderedComponentWithType(page, Drawer);
109122
expect(drawer.props.open).toEqual(true);
110123
});

‎client/js/components/chrome/sidebar.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export class Sidebar extends React.Component {
2323
tocMeta: React.PropTypes.shape({
2424
gradeUnit: React.PropTypes.string,
2525
subjectLesson: React.PropTypes.string,
26+
lastModified: React.PropTypes.string,
2627
}),
2728
selectPage: React.PropTypes.func,
2829
focusPage: React.PropTypes.func,
@@ -55,6 +56,8 @@ export class Sidebar extends React.Component {
5556
let unit = '';
5657
let subject = '';
5758
let tableOfContents = '';
59+
const { lastModified } = this.props.tocMeta;
60+
const footerText = lastModified ? `CLIx Release Date: ${lastModified}` : undefined;
5861

5962
if (this.props.sidebarOpen) {
6063
btnToggleClass = 'c-sidebar__toggle-button c-sidebar__toggle-button--open';
@@ -104,6 +107,7 @@ export class Sidebar extends React.Component {
104107
{tableOfContents}
105108
</ul>
106109
</div>
110+
<footer className="clix-release">{footerText}</footer>
107111
</nav>
108112
);
109113
}

‎client/js/locales/en.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ export default {
44
activityList: 'Activity List'
55
},
66
footer: {
7-
next: 'Next', // Next page button in the footer
8-
previous: 'Previous', // Previous page button in the footer
9-
bibliography: 'Click to see the citations' // Text for bibliography link
7+
next: 'Next activity', // Next page button in the footer
8+
previous: 'Previous activity', // Previous page button in the footer
9+
bibliography: 'Citations' // Text for bibliography link
1010
}
1111
}
1212
};

‎client/js/locales/hi.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
export default {
22
hi: {
33
sidebar:{
4-
activityList: "गतिविधीयों की सूची" // Sidebar title
4+
activityList: 'गतिविधीयों की सूची' // Sidebar title
55
},
66
footer: {
7-
next: 'आगामी', // Next page button in the footer
8-
previous: 'पिछला', // Previous page button in the footer
9-
bibliography: 'प्रशंसा पत्र देखने के लिए क्लिक करें' // Text for bibliography link
7+
next: 'अगली गतिविधि', // Next page button in the footer
8+
previous: 'पिछली गतिविधि', // Previous page button in the footer
9+
bibliography: 'उद्धरण' // Text for bibliography link
1010
}
1111
}
1212
};

‎client/js/locales/te.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
export default {
22
te: {
33
sidebar:{
4-
activityList: "కార్యాచరణ జాబితా" // Sidebar title
4+
activityList: 'కార్యాచరణ జాబితా' // Sidebar title
55
},
66
footer: {
7-
next: 'తరువాత', // Next page button in the footer
8-
previous: 'మునుపటి', // Previous page button in the footer
9-
bibliography: 'అనులేఖనాలను చూడటానికి క్లిక్ చేయండి' // Text for bibliography link
7+
next: 'తదుపరి చర్య', // Next page button in the footer
8+
previous: 'మునుపటి కార్యాచరణ', // Previous page button in the footer
9+
bibliography: 'ఉదహరణలు' // Text for bibliography link
1010
}
1111
}
1212
};

0 commit comments

Comments
 (0)