qpp-style 2.1.13 → 2.2.0-sm.0

package/js/components/SideNav/Links/NavLinkToggle.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-const NavLinkToggle = ({isAltStyle, collapseRef, isExpanded, onClick}) => {
-    const expandedStyle = isExpanded ? "link-collapse" : "link-expand";
-    const altStyle = isAltStyle ? "alt-style" : "";
-
-    return (
-        <button
-            type="button"
-            aria-label={`Click to ${isExpanded ? 'collapse' : 'expand'} the sidebar menu`}
-            ref={collapseRef}
-            className={`${expandedStyle} ${altStyle}`}
-            onClick={onClick}
-        >
-            <svg className="left-icon" aria-hidden="true" focusable="false">
-                <use xlinkHref={isExpanded ? '#nav-collapse' : '#nav-expand'} />
-            </svg>
-            <span>
-                {isExpanded ? 'Collapse' : 'Expand'}
-            </span>
-        </button>
-    )
-};
-
-export default NavLinkToggle;

package/js/components/SideNav/Links/index.js

@@ -1,7 +0,0 @@
-export { default as NavLinkContainer } from './NavLinkContainer';
-export { default as CmsReportLink } from './CmsReportLink';
-export { default as NavLinkBack } from './NavLinkBack';
-export { default as NavLinkDrawer } from './NavLinkDrawer';
-export { default as NavLinkInline } from './NavLinkInline';
-export { default as NavLinkSlideOut } from './NavLinkSlideOut';
-export { default as NavLinkToggle } from './NavLinkToggle';

package/js/components/SideNav/UI/SideNavUI.jsx

@@ -1,115 +0,0 @@
-import React, { Component } from 'react';
-import { LevelOneContent, LevelTwoContent, LevelThreeContent, CmsContent, FeedbackContent } from '../Content';
-import { NavLinkToggle } from '../Links';
-import SVGInline from "react-svg-inline";
-
-export default class SideNavUI extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isExpanded: true,
-            currentLevel: 1
-        };
-        this.keys = {
-            ESC: 27
-        };
-        this._onKeyDown = this.onKeyDown.bind(this);
-        this._toggleExpanded = this.toggleExpanded.bind(this);
-        this._collapseRef = this.collapseRef.bind(this);
-        this._getLevelContent = this.getLevelContent.bind(this);
-    }
-
-    componentWillMount() {
-        const { currentLevel, isExpanded } = this.props;
-        if (currentLevel) {
-            this.setState({
-                currentLevel: currentLevel,
-                isExpanded: isExpanded
-            })
-        }
-    }
-
-    componentWillReceiveProps(nextProps) {
-        const { isExpanded, currentLevel} = this.state;
-        if (nextProps.isExpanded !== isExpanded) {
-            this.setState({ isExpanded: nextProps.isExpanded });
-        }
-
-        if (nextProps.currentLevel !== currentLevel) {
-            this.setState({ currentLevel: nextProps.currentLevel });
-        }
-    }
-
-    toggleExpanded () {
-        this.state.isExpanded ? this.collapse() : this.expand();
-    }
-
-    expand () {
-        this.setState({ isExpanded: true });
-        if (this.props.onExpanded) {
-            this.props.onExpanded();
-        }
-    }
-
-    collapse () {
-        this.setState({ isExpanded: false });
-        if (this.props.onCollapsed) {
-            this.props.onCollapsed();
-        }
-    }
-
-    onKeyDown (e) {
-        if (e.keyCode === this.keys.ESC) {
-            this.setState({isExpanded: false});
-            this.collapseToggle.focus();
-        }
-    }
-
-    collapseRef(ref) {
-        this.collapseToggle = ref;
-    }
-
-    getLevelContent() {
-        const { chartData, config, showManageAccountLink } = this.props;
-        const { isExpanded, currentLevel } = this.state;
-
-        switch (currentLevel) {
-            default:
-            case 1:
-                return <LevelOneContent isExpanded={isExpanded} config={config} showManageAccountLink={showManageAccountLink} />;
-            case 2:
-                return <LevelTwoContent isExpanded={isExpanded} chartData={chartData} config={config} />;
-            case 3:
-                return <LevelThreeContent isExpanded={isExpanded} chartData={chartData} config={config} />;
-            case 4:
-                return <CmsContent isExpanded={isExpanded} config={config} />;
-            case 5:
-                return <FeedbackContent isExpanded={isExpanded} config={config} />;
-        }
-    }
-
-    render() {
-        const { svgIcons } = this.props;
-        const { isExpanded, currentLevel } = this.state;
-        const isAltStyle = currentLevel === 3 || currentLevel === 4;
-        const content = this._getLevelContent();
-
-        return (
-            <aside
-                id="qppSidebar"
-                tabIndex="-1"
-                className={isExpanded ? "sidebar" : "sidebar closed"}
-                onKeyDown={this._onKeyDown}
-                onClick={!isExpanded && this._toggleExpanded}
-            >
-                <SVGInline svg={ svgIcons } />
-                {content}
-                <NavLinkToggle
-                    isAltStyle={isAltStyle}
-                    collapseRef={this._collapseRef}
-                    isExpanded={isExpanded}
-                    onClick={this._toggleExpanded} />
-            </aside>
-        );
-    }
-}

package/js/components/SideNav/UI/index.js

@@ -1 +0,0 @@
-export { default as SideNavUI } from './SideNavUI';

package/js/components/SideNav/index.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { SideNavUI } from './UI';
-import SVGIcons from '../../../_includes/svg-definitions.svg';
-
-const SideNav = (options = {}) => {
-  const { rootElement, isExpanded, onExpanded, onCollapsed, chartData, currentLevel, config, showManageAccountLink } = options;
-  const { expand, collapse } = render(
-      <SideNavUI
-          svgIcons={SVGIcons}
-          isExpanded={isExpanded}
-          onExpanded={onExpanded}
-          onCollapsed={onCollapsed}
-          chartData={chartData}
-          currentLevel={currentLevel}
-          config={config}
-          showManageAccountLink={showManageAccountLink}
-      />,
-      rootElement
-    );
-
-  return { expand, collapse };
-};
-
-export default SideNav;

package/js/components/index.js

@@ -1,11 +0,0 @@
-import SideNav from './SideNav';
-import Footer from './Footer/footer';
-import Header from './Header/header';
-import ErrorPage from './Error/error';
-
-export {
-    SideNav,
-    Footer,
-    Header,
-    ErrorPage
-}

package/js/index.js

@@ -1,28 +0,0 @@
-import { RefreshSession, LogoutSession } from './session';
-import { SideNav, Footer, Header, ErrorPage } from './components';
-
-import '../styles/_main.scss';
-
-const QppStyleComponents = {
-    footer(options) {
-        return new Footer(options);
-    },
-
-    header(options) {
-        return new Header(options);
-    },
-
-    RefreshSession,
-
-    LogoutSession,
-
-    sideNav(options) {
-        return SideNav(options);
-    },
-
-    errorPage(options) {
-        return new ErrorPage(options);
-    }
-};
-
-export default QppStyleComponents;

package/js/session/logout.js

@@ -1,43 +0,0 @@
-import cookie from 'cookie';
-import axios from 'axios';
-
-/**
- * Makes an API request to end the user session.
- * @param  {Object} [_window] The DOM Window
- */
-const LogoutSession = (_window) => {
-    let cookies = cookie.parse(_window.document.cookie);
-    let logoutDestination = '/logout-confirmation';
-
-    if (cookies.hasOwnProperty('qpp_auth_token')) {
-        const options = {
-            method: 'POST',
-            url: '/api/auth/sessions/logout',
-            headers: {
-                'Accept': 'application/vnd.qpp.cms.gov.v1+json',
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${cookies.qpp_auth_token}`
-            }
-        };
-
-        let onSuccess = (response) => {
-            // redirect to login/logged out screen
-            _window.location = logoutDestination;
-        };
-
-        let onError = (response) => {
-            // delete cookie and redirect login/logged out screen
-            _window.location = logoutDestination;
-        };
-
-        return axios(options)
-            .then(onSuccess, onError)
-            .catch(function (err) {
-                console.log(err);
-            });
-    } else {
-        _window.location = logoutDestination;
-    }
-}
-
-export default LogoutSession;

package/js/session/refresh.js

@@ -1,47 +0,0 @@
-import cookie from 'cookie';
-import axios from 'axios';
-import LogoutSession from './logout.js';
-
-/**
- * Makes an API request to refresh the session token cookie, if it exists.
- * @param {Object}   [options] - Optional configuration parameters.
- * @param {function} [options.onSuccess] - An optional success callback.
- * @param {function} [options.onError] - An optional error callback.
- * @param {Object} [options.window] - The DOM window.
- */
-const RefreshSession = (options = {}) => {
-    let cookies = cookie.parse(options.window.document.cookie);
-
-    if (cookies.hasOwnProperty('qpp_auth_token')) {
-        const requestOptions = {
-            method: 'POST',
-            url: '/api/auth/sessions/refresh',
-            headers: {
-                'Accept': 'application/vnd.qpp.cms.gov.v1+json',
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${cookies.qpp_auth_token}`
-            }
-        };
-
-        let onSuccess = (response) => {
-            if (typeof options.onSuccess === 'function') {
-                options.onSuccess();
-            }
-        };
-
-        let onError = (response) => {
-            if (typeof options.onError === 'function') {
-                options.onError();
-            }
-            return LogoutSession(options.window);
-        };
-
-        return axios(requestOptions)
-            .then(onSuccess, onError)
-            .catch(function (err) {
-                console.log(err);
-            });
-    }
-}
-
-export default RefreshSession;

package/js/session/ttl.js

@@ -1,32 +0,0 @@
-import axios from 'axios';
-
-const fetchTtl = (token) => {
-    const requestOptions = {
-        method: 'GET',
-        url: `/api/auth/sessions/ttl`,
-        headers: {
-            'Accept': 'application/vnd.qpp.cms.gov.v1+json',
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`
-        },
-        transformResponse: [function (response) {
-            return JSON.parse(response).data;
-        }],
-    }
-
-    return axios(requestOptions)
-        .then((response) => {
-            let expiry;
-
-            if (response && response.data) {
-                // See https://tools.ietf.org/html/rfc7519
-                // `expiry` is a NumericDate representing "seconds since the epoch"
-                // and it needs to be milliseconds to get a JavaScript date from it.
-                expiry = new Date(response.data.ttl * 1000);
-            }
-
-            return expiry;
-        })
-}
-
-export default fetchTtl;

package/sidebar-demo.html

@@ -1,48 +0,0 @@
----
-title: Sidebar Demo
----
-
-<!doctype html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Untitled Document</title>
-<link rel = "stylesheet"
-   type = "text/css"
-   href = "{{ site.baseurl }}/styles/guide/sidebar-demo.css" />
-</head>
-
-<body>
-  <div class="scroll">
-        <div id="header">HEADER</div>
-  <div class="wrapper cf">
-     <div class="sidebar">
-          <h3>Sidebar</h3>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime fugiat perspiciatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime fugiat perspiciatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime fugiat perspiciatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime fugiat perspiciatis.</p>
-        </div>
-        <div class="footer">COLLAPSE</div>
-    <div class="content">
-      <h1>Content Area</h1>
-      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
-        Mauris placerat eleifend leo.</p>
-         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
-        Mauris placerat eleifend leo.</p>
-            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
-        Mauris placerat eleifend leo.</p>
-         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
-        Mauris placerat eleifend leo.</p>
-            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
-        Mauris placerat eleifend leo.</p>
-         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
-        Mauris placerat eleifend leo.</p>
-            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
-        Mauris placerat eleifend leo.</p>
-         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
-        Mauris placerat eleifend leo.</p>
-
-    </div>
-
-  </div>
-</div>
-</body>
-</html>

package/styles/components/_footer.scss

@@ -1,157 +0,0 @@
-footer {
-	background: $color-navy-dark;
-	margin-top: 100px;
-	padding: 25px 0;
-	font-size: 1rem;
-	color: $nav-text-color;
-
-	h4 {
-		font-family: inherit;
-		font-size: 1rem;
-		text-transform: uppercase;
-		color: $nav-text-color;
-		font-weight: 600;
-		line-height: 26px;
-	}
-
-	ul {
-		list-style: none;
-		padding: 0;
-		li {
-			margin-bottom: 10px;
-			margin-right: 2em;
-			display: block;
-			@include breakpoint(sm) {
-				display: inline-block;
-			}
-
-			a {
-				margin: 0;
-
-				&:link,
-				&:visited {
-					color: $nav-color-secondary-light;
-					text-decoration: none;
-				}
-
-				&:focus,
-				&:hover {
-					text-decoration: underline;
-					color: $nav-color-secondary-light;
-				}
-			}
-		}
-		&.small {
-			@include breakpoint(xs) {
-				margin-top: 40px;
-			}
-			@include breakpoint(sm) {
-				margin-top: 40px;
-			}
-			li {
-				margin: 0 1em 0 0;
-			}
-		}
-	}
-
-	.logo-container {
-		border-bottom: 1px solid #294d71;
-		margin-bottom: 20px;
-		padding-bottom: 30px;
-	}
-
-	.qpp-logo {
-		height: 55px;
-		@include breakpoint(xs) {
-			margin: 0 auto;
-			display: block;
-		}
-	}
-
-	.hhs-logo-container {
-		border-top: 1px solid #294d71;
-		margin-top: 15px;
-		margin-bottom: 15px;
-		@include breakpoint(sm) {
-			border-left: 1px solid #294d71;
-			border-top: none;
-			padding-left: 15px;
-		}
-		@include breakpoint(md) {
-			padding-left: 30px;
-		}
-		img {
-			max-width: 100%;
-			max-height: 100%;
-			height: 150px;
-			width: auto;
-			display: block;
-			
-			@include breakpoint(xs) {
-				margin-top: 30px;
-				margin-right: auto;
-				margin-left: auto;
-			}
-
-			// IE11 Fix
-			@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-				width: 100%;
-			}
-		}
-	}
-
-	#build-version {
-		display: none;
-	}
-
-	.container-full-width {
-		margin-left: 40px;
-	}
-}
-
-// Authenticated Footer
-.container-full-width {
-	margin-right: 0;
-
-	.logo-container .qpp-logo {
-		margin: 0;
-		@include breakpoint(xs) {
-			display: block;
-			margin: auto;
-		}
-		@include breakpoint(sm) {
-			display: block;
-			margin: auto;
-		}
-		@include breakpoint(md) {
-			margin: 0;
-		}
-	}
-	.hhs-logo-container {
-		@include breakpoint(sm) {
-			border-left: none;
-			border-top: 1px solid #294d71;
-		}
-
-		@include breakpoint(md) {
-			border-left: 1px solid #294d71;
-			border-top: none;
-		}
-	}
-}
-
-.container-full-width .links {
-		ul li {
-			@include breakpoint(sm) {
-				display: block;
-			}
-
-			@include breakpoint(md) {
-				display: inline-block;
-			}
-		}
-	}
-
-.container-full-width .row {
-	margin-right: 0;
-}