This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at for more info.


    2.1.5 • Public • Published

    Build Status


    The drawer component offers a convenient method for presenting secondary information which doesn't need to be immediately visible.

    UX Framework Design Page:

    Demo Page:

    Getting Started

    Initial Machine Setup Install Git. Install Node 6.0.0 or greater - Need to run multiple versions of Node? Use nvm. On a Mac? You're all set. If you're on Windows, complete the steps for your OS below. On Windows:

    Install Ruby as the runtime engine for SCSS. Install Python 2.7. Some node modules may rely on node-gyp, which requires Python on Windows. On Chrome browser:

    Optionally, install React developer tools.

    installing the component:

    npm install @pearson-components/drawer --save
    yarn add @pearson-components/drawer

    Quick Start

    git clone
    cd drawer
    npm install
    npm start

    Navigate to http://localhost:8081/drawer/, where the spawned Node server hosts a webpack-generated SPA using React Router for defining how to render the components.

    As you save changes to the source, the changes are automatically reloaded in the browser.


    To use the Drawer in a React.js page:

    import the drawer and it's child views:

       import { Drawer, BasicView, DetailView } from "@pearson-components/drawer";

    then configure the drawer and it's views:

    this.state = {
        drawerTop    : "61px",
        drawerIsOpen : false,
        position     : "right",
        text         : {
                headerTitle       : "Basic Title",
                closeButtonSRText : "Close",
                backButtonText    : "Back"
        drawerTop     = {this.state.drawerTop}
        drawerOpen    = {this.state.drawerIsOpen}
        position      = {this.state.position}
        text          = {this.state.text}
        drawerHandler = {this.drawerHandler}>
            <BasicView mapToDetail='detailView1' myKind="BasicView">
            <BasicView myKind="BasicView">
            <BasicView mapToDetail='detailView3' myKind="BasicView">
            <DetailView id='detailView1' myKind="DetailView">
            <DetailView id='detailView3' myKind="DetailView">
                    <summary>Copyright 1999-2014.</summary>
                    <p> - by Data. All Rights Reserved.</p>
                    <p>All content and graphics on this web site are the property of the company  Data.</p>

    sample handler:

    _drawerHandler = () => {

    BasicViews and DetailViews must be wrapped in a div.

    BasicView and DetailView must both specify the prop myKind.

    BasicView may specify a mapToDetail prop. This prop corresponds to a DetailView with the matching id. Clicking on the BasicView will start an animated transition to the DetailView with the corresponding id.


    <BasicView mapToDetail='detailView1' myKind="BasicView">
    <DetailView id='detailView1' myKind="DetailView">

    props for Drawer:

    position      : String   - one of:"left","right" default "right"
    drawerTop     : String   - adjust drawer top property default "61px"
    drawerOpen    : Boolean  - (required) default false default false
    drawerHandler : Function - (required) sets state of drawerOpen to true or false
    text          : Object   - (required) text to be passed in.
                                default {
                                          headerTitle       : "Basic Title",
                                          closeButtonSRText : "Close",
                                          backButtonText    : "Back"

    props for BasicView:

    mapToDetail : String - DetailView to be shown, maps to DetailView id.
    myKind      : String - (required) one of:"BasicView","DetailView";

    props for DetailView:

    id     : String - (required) BasicView that produces DetailView on click id maps to mapToDetail.
    myKind : String - (required) one of:"BasicView","DetailView";


    The project is wired to unit test with Jest.

    npm test

    After running npm test && npm start, you may view the code coverage site at: http://localhost:8081/coverage/lcov-report

    Event Instantiation

    Non React Apps may use the event harness by pulling in the eventInterface from the build directory. To instantiate a component use this format:

    document.body.dispatchEvent(new CustomEvent('o.InitComponent', {
        detail: {
          elementId: 'drawer',
          props: {
            text: {
                    headerTitle       : "Basic Title",
                    closeButtonSRText : "Close",
                    backButtonText    : "Back"
            drawerOpen: true,
                    drawerHandler: () => {},
            children: React.createElement('div', {},

    External Dependencies

    React and ReactDOM (v0.14 or v15) are external dependencies required to use this component. They are npm-installable or available from a third-party CDN.

    This component targets the styling in the Pearson Elements SDK.


    React components with internationalisation use React-Intl which relies on the ECMAScript Internationalisation API. This was not supported in Safari until version 10. If you are supporting Safari older than 10, there is a polyfill from Andy Earnshaw (see below).

    CustomEvent support in IE is also polyfilled. Because many teams are supporting both IE 11 and Safari 9, we've combined the polyfills into a single script. The example below polyfills for CustomEvent and localisation for English and French:

    Be sure to include the above script (a version of it that makes sense for your project and supported browsers) on your HTML page running CompoundsSDK, if you need it.

    CodeCoverage site

    After running npm test && npm start, you may view the code coverage site at: http://localhost:8081/coverage/lcov-report


    All submissions must be via pull request and approved before the team will merge and allow it to enter the release process. All submissions must pass this project's linting, test with 100% code coverage, and be compatible with the version(s) of React approved for the Pearson User Experience Platform.


    This software is published by Pearson Education under the MIT license.




    npm i @pearson-components/drawer

    DownloadsWeekly Downloads






    Unpacked Size

    8.49 MB

    Total Files


    Last publish


    • pearson-ux