qpp-style 2.1.13 → 2.2.0-sm.0

package/styles/third-party/legacy-bootstrap/mixins/_vendor-prefixes.scss

@@ -0,0 +1,182 @@
+// Vendor Prefixes
+//
+// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
+// Autoprefixer in our Gruntfile. They have been removed in v4.
+
+// - Animations
+// - Backface visibility
+// - Box shadow
+// - Box sizing
+// - Content columns
+// - Hyphens
+// - Placeholder text
+// - Transformations
+// - Transitions
+// - User Select
+
+// Drop shadows
+//
+// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
+// supported browsers that have box shadow capabilities now support it.
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+  box-shadow: $shadow;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+  -moz-box-sizing: $boxmodel;
+  box-sizing: $boxmodel;
+}
+
+// CSS3 Content Columns
+@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
+  -webkit-column-count: $column-count;
+  -moz-column-count: $column-count;
+  column-count: $column-count;
+  -webkit-column-gap: $column-gap;
+  -moz-column-gap: $column-gap;
+  column-gap: $column-gap;
+}
+
+// Placeholder text
+@mixin placeholder($color: $input-color-placeholder) {
+  // Firefox
+  &::-moz-placeholder {
+    color: $color;
+    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+  }
+
+  &:-ms-input-placeholder {
+    color: $color;
+  } // Internet Explorer 10+
+
+  &::-webkit-input-placeholder {
+    color: $color;
+  } // Safari and Chrome
+}
+
+// Transformations
+@mixin scale($ratio...) {
+  -webkit-transform: scale($ratio);
+  -ms-transform: scale($ratio); // IE9 only
+  -o-transform: scale($ratio);
+  transform: scale($ratio);
+}
+
+@mixin scaleX($ratio) {
+  -webkit-transform: scaleX($ratio);
+  -ms-transform: scaleX($ratio); // IE9 only
+  -o-transform: scaleX($ratio);
+  transform: scaleX($ratio);
+}
+
+@mixin scaleY($ratio) {
+  -webkit-transform: scaleY($ratio);
+  -ms-transform: scaleY($ratio); // IE9 only
+  -o-transform: scaleY($ratio);
+  transform: scaleY($ratio);
+}
+
+@mixin skew($x, $y) {
+  -webkit-transform: skewX($x) skewY($y);
+  -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
+  -o-transform: skewX($x) skewY($y);
+  transform: skewX($x) skewY($y);
+}
+
+@mixin translate($x, $y) {
+  -webkit-transform: translate($x, $y);
+  -ms-transform: translate($x, $y); // IE9 only
+  -o-transform: translate($x, $y);
+  transform: translate($x, $y);
+}
+
+@mixin translate3d($x, $y, $z) {
+  -webkit-transform: translate3d($x, $y, $z);
+  transform: translate3d($x, $y, $z);
+}
+
+@mixin rotate($degrees) {
+  -webkit-transform: rotate($degrees);
+  -ms-transform: rotate($degrees); // IE9 only
+  -o-transform: rotate($degrees);
+  transform: rotate($degrees);
+}
+
+@mixin rotateX($degrees) {
+  -webkit-transform: rotateX($degrees);
+  -ms-transform: rotateX($degrees); // IE9 only
+  -o-transform: rotateX($degrees);
+  transform: rotateX($degrees);
+}
+
+@mixin rotateY($degrees) {
+  -webkit-transform: rotateY($degrees);
+  -ms-transform: rotateY($degrees); // IE9 only
+  -o-transform: rotateY($degrees);
+  transform: rotateY($degrees);
+}
+
+@mixin perspective($perspective) {
+  -webkit-perspective: $perspective;
+  -moz-perspective: $perspective;
+  perspective: $perspective;
+}
+
+@mixin perspective-origin($perspective) {
+  -webkit-perspective-origin: $perspective;
+  -moz-perspective-origin: $perspective;
+  perspective-origin: $perspective;
+}
+
+@mixin transform-origin($origin) {
+  -webkit-transform-origin: $origin;
+  -moz-transform-origin: $origin;
+  -ms-transform-origin: $origin; // IE9 only
+  transform-origin: $origin;
+}
+
+// Transitions
+@mixin transition($transition...) {
+  -webkit-transition: $transition;
+  -o-transition: $transition;
+  transition: $transition;
+}
+
+@mixin transition-property($transition-property...) {
+  -webkit-transition-property: $transition-property;
+  transition-property: $transition-property;
+}
+
+@mixin transition-delay($transition-delay) {
+  -webkit-transition-delay: $transition-delay;
+  transition-delay: $transition-delay;
+}
+
+@mixin transition-duration($transition-duration...) {
+  -webkit-transition-duration: $transition-duration;
+  transition-duration: $transition-duration;
+}
+
+@mixin transition-timing-function($timing-function) {
+  -webkit-transition-timing-function: $timing-function;
+  transition-timing-function: $timing-function;
+}
+
+@mixin transition-transform($transition...) {
+  -webkit-transition: -webkit-transform $transition;
+  -moz-transition: -moz-transform $transition;
+  -o-transition: -o-transform $transition;
+  transition: transform $transition;
+}
+
+// User select
+// For selecting text on the page
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+  -moz-user-select: $select;
+  -ms-user-select: $select; // IE10+
+  user-select: $select;
+}

package/styles/utility/_mixins.scss

@@ -3,29 +3,24 @@
 		@media (max-width: 767px) {
 			@content;
 		}
-	}
-	@else if $class == sm {
+	} @else if $class == sm {
 		@media (min-width: 768px) {
 			@content;
 		}
-	}
-	@else if $class == md {
+	} @else if $class == md {
 		@media (min-width: 992px) {
 			@content;
 		}
-	}
-	@else if $class == lg {
+	} @else if $class == lg {
 		@media (min-width: 1200px) {
 			@content;
 		}
-	}
-	@else if $class == xl {
+	} @else if $class == xl {
 		@media (min-width: 1400px) {
 			@content;
 		}
-	}
-	@else {
-		@warn "Breakpoint mixin supports: xs, sm, md, lg, xl";
+	} @else {
+		@warn 'Breakpoint mixin supports: xs, sm, md, lg, xl';
 	}
 }
 
@@ -43,3 +38,9 @@
 		fill: $color;
 	}
 }
+
+@mixin stroke-hover($color) {
+	&:hover {
+		stroke: $color;
+	}
+}

package/styles/utility/_utilities.scss

@@ -46,8 +46,8 @@
 
 .flex-row {
 	display: flex;
-	justify-content: space-between;
 	flex-direction: column;
+	justify-content: space-between;
 	padding: 1em 0;
 	@include breakpoint(sm) {
 		flex-direction: row;
@@ -60,3 +60,14 @@
 		}
 	}
 }
+
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}

package/svgo.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeTitle: true,
+          convertColors: { shorthex: false },
+          removeViewBox: false,
+        },
+      },
+    },
+  ],
+};

package/test/components/Accordion.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Accordion from '../../components/Accordion';
+
+describe('Accordion', () => {
+  it('Should render okay', () => {
+    const { getByTestId } = render(
+        <Accordion title="Title">Content</Accordion>
+    );
+    expect(getByTestId('accordion')).toBeTruthy();
+  });
+});

package/test/components/ErrorUI.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ErrorUI from '../../components/Error/ErrorUI';
+
+
+describe('ErrorUI', () => {
+  it('renders a list of errors in HTML', () => {
+    const code = '404';
+    const type = 'Bad thing happened';
+    const message = [
+      { contentTitle: 'Not found', content: 'test' },
+      { contentTitle: 'Image not found', content: 'test number 2' },
+    ];
+    const { debug, container } = render(
+      <ErrorUI type={type} code={code} message={message} />
+    );
+    expect(container.querySelector('.page-error')).toBeTruthy()
+    expect(container.querySelector('.collapsible-details')).toBeTruthy()
+    expect(container.querySelectorAll('.items li').length).toBe(2)
+  });
+
+  it('renders a string instead of an array', () => {
+    const code = '404';
+    const type = 'Bad thing happened';
+    const message = 'Not found';
+    const { getByText, container } = render(
+      <ErrorUI type={type} code={code} message={message} />
+    );
+    expect(container.querySelector('.page-error')).toBeTruthy()
+    expect(container.querySelector('.collapsible-details')).toBeTruthy()
+    expect(getByText(/not found/i)).toBeTruthy()
+  });
+});

package/test/components/FooterUI.test.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import ReactTestUtils from 'react-dom/test-utils';
+import { expect } from 'chai';
+import FooterUI from '../../components/Footer/FooterUI';
+
+class Wrapper extends Component {
+  render() {
+    return this.props.children;
+  }
+}
+
+describe('FooterUI', () => {
+  it('renders the footer HTML', () => {
+    // Native elements and functional stateless react components don't have public instances and
+    // cannot be used with renderIntoDocument. React has a separate package install for a shallow
+    // renderer that allows this. Otherwise, you need a wrapper when testing presentational components.
+    const component = ReactTestUtils.renderIntoDocument(
+      <Wrapper>
+        <FooterUI />
+      </Wrapper>
+    );
+    const footer = ReactTestUtils.findRenderedDOMComponentWithTag(
+      component,
+      'footer'
+    );
+    const footerNode = ReactDOM.findDOMNode(footer);
+    expect(ReactTestUtils.isDOMComponent(footerNode)).to.be.true;
+  });
+});
+
+describe('renders the footer properly in the non-authenticated experience', () => {
+  it('renders by default the non-authenticated experience', () => {
+    const component = ReactTestUtils.renderIntoDocument(
+      <Wrapper>
+        <FooterUI />
+      </Wrapper>
+    );
+    const isNotFullWidth = ReactTestUtils.scryRenderedDOMComponentsWithClass(
+      component,
+      'responsive-container'
+    )[1];
+    const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
+    expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
+  });
+
+  it('explicitly renders the non-authenticated experience', () => {
+    const component = ReactTestUtils.renderIntoDocument(
+      <Wrapper>
+        <FooterUI isFullWidth={false} />
+      </Wrapper>
+    );
+    const isNotFullWidth = ReactTestUtils.scryRenderedDOMComponentsWithClass(
+      component,
+      'responsive-container'
+    )[1];
+    const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
+    expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
+  });
+});

package/test/components/HeaderUI.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { waitFor, render } from '@testing-library/react';
+import moxios from 'moxios';
+
+import HeaderUI from '../../components/Header/HeaderUI';
+
+// TODO: look into creating better tests for qpp-style
+describe.skip('HeaderUI', () => {
+  beforeEach(() => {
+    moxios.install();
+  });
+
+  afterEach(() => {
+    moxios.uninstall();
+  });
+
+  it('renders a header', async () => {
+    moxios.stubRequest('http://localhost:3000/config/header', {
+      status: 200,
+      responseText: JSON.stringify({
+        data: {
+          content: [
+            {
+              name: 'Test Header Menu',
+              subtitle: 'The test menu item',
+            },
+          ],
+        },
+      }),
+    });
+    const { container, getByText } = render(<HeaderUI />);
+    await waitFor(() => expect(container.querySelector('nav')).toBeDefined());
+    await waitFor(() => expect(getByText('Test Header Menu')).toBeDefined());
+  });
+});

package/test/components/Infotip.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act, Simulate } from 'react-dom/test-utils';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import Infotip from '../../components/Infotip';
+
+describe('Infotip', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('renders an svg icon for tooltip anchor', () => {
+    act(() => {
+      ReactDOM.render(<Infotip label="tooltip text" />, container);
+    });
+    const svg = container.querySelector('svg');
+    expect(svg).to.be.ok;
+  });
+
+  it('renders white icon when lightIcon prop is true', () => {
+    act(() => {
+      ReactDOM.render(<Infotip lightIcon label="tooltip text" />, container);
+    });
+    const paths = container.querySelectorAll('path');
+    expect(paths[1].getAttribute('fill')).to.equal('#FFF');
+    expect(paths[2].getAttribute('fill')).to.equal('#0073C8');
+  });
+
+  it('overrides "touchstart" events for button', () => {
+    act(() => {
+      ReactDOM.render(<Infotip label="tooltip text" />, container);
+    });
+    const button = container.querySelector('button');
+    const stopPropagation = spy();
+    act(() => {
+      Simulate.touchStart(button, { stopPropagation });
+    })
+    expect(stopPropagation.called).to.be.true;
+  });
+
+  it('uses "touchend" event on button to prevent default and toggle focus', () => {
+    act(() => {
+      ReactDOM.render(<Infotip label="tooltip text" />, container);
+    });
+    const button = container.querySelector('button');
+    const preventDefault = spy();
+    const focus = spy(button, 'focus');
+    const blur = spy(button, 'blur');
+    act(() => {
+      Simulate.touchEnd(button, {
+        preventDefault,
+      });
+    })
+    expect(preventDefault.calledOnce).to.be.true;
+    expect(button.focus.calledOnce).to.be.true;
+    expect(button.blur.calledOnce).to.be.false;
+    act(() => {
+      Simulate.touchEnd(button, {
+        preventDefault,
+        currentTarget: {
+          focus,
+          blur,
+        },
+      });
+    })
+    expect(preventDefault.calledTwice).to.be.true;
+    expect(focus.calledOnce).to.be.true;
+    expect(blur.calledOnce).to.be.true;
+  });
+});

package/test/components/SideNavUI.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import jwt from 'jsonwebtoken';
+
+import { SideNavUI } from '../../components/SideNav/UI';
+
+describe('SideNavUI', () => {
+  it('renders the sidebar HTML', () => {
+    const token = jwt.sign(
+      {
+        exp: Math.floor(Date.now() / 1000) + 60 * 60,
+        data: {
+          firstName: 'Bobby',
+        },
+      },
+      'secret'
+    );
+    document.cookie = `qpp_auth_token=${token}`;
+
+    const { container } = render(<SideNavUI svgIcons="" />);
+    expect(container.querySelector('aside')).toBeDefined();
+  });
+});

package/test/index.test.js

@@ -0,0 +1,8 @@
+'use strict';
+import QPPStyle from '../index.js';
+
+describe('QPPStyle', () => {
+  test('should be an object', () => {
+    expect(typeof QPPStyle).toBe('object');
+  });
+});