@madie/madie-design-system 1.0.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

@@ -0,0 +1,46 @@
+@mixin breakpoint($class) {
+	@if $class == xs {
+		@media (max-width: 767px) {
+			@content;
+		}
+	} @else if $class == sm {
+		@media (min-width: 768px) {
+			@content;
+		}
+	} @else if $class == md {
+		@media (min-width: 992px) {
+			@content;
+		}
+	} @else if $class == lg {
+		@media (min-width: 1200px) {
+			@content;
+		}
+	} @else if $class == xl {
+		@media (min-width: 1400px) {
+			@content;
+		}
+	} @else {
+		@warn 'Breakpoint mixin supports: xs, sm, md, lg, xl';
+	}
+}
+
+@mixin typography($family, $size, $lineHeight, $color) {
+	color: $color;
+	font-family: $family, sans-serif;
+	font-size: $size;
+	line-height: $lineHeight;
+	margin: 0;
+}
+
+@mixin hover($color) {
+	&:hover {
+		color: $color;
+		fill: $color;
+	}
+}
+
+@mixin stroke-hover($color) {
+	&:hover {
+		stroke: $color;
+	}
+}

package/styles/utility/_utilities.scss

@@ -0,0 +1,73 @@
+.is-hidden {
+	display: none !important;
+}
+
+.is-rotated-right {
+	transform: rotate(90deg);
+}
+
+.text-pad-both {
+	padding: 0 0.3em;
+}
+
+.text-pad-right {
+	padding: 0 0.3em 0 0;
+}
+
+.text-pad-left {
+	padding: 0 0 0 0.3em;
+}
+
+.graphic-spaced-both {
+	padding: 20px 0 40px;
+	@include breakpoint(sm) {
+		padding: 30px 0 40px;
+	}
+}
+
+.flex-centered-vertical {
+	display: flex;
+	flex-direction: column;
+
+	h2 {
+		margin-top: 0;
+	}
+	@include breakpoint(sm) {
+		// TODO: fix for any height
+		height: 288px;
+		justify-content: center;
+		margin-bottom: 3em;
+	}
+}
+
+.flex-centered-horizontal {
+	display: flex;
+}
+
+.flex-row {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding: 1em 0;
+	@include breakpoint(sm) {
+		flex-direction: row;
+	}
+
+	.panel,
+	.well {
+		@include breakpoint(sm) {
+			width: calc(50% - 10px);
+		}
+	}
+}
+
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}

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,90 @@
+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;
+  });
+
+  it('renders the footer HTML', () => {
+    const version = '1.2.3.4';
+    const component = ReactTestUtils.renderIntoDocument(
+      <Wrapper>
+        <FooterUI buildVersion={version} />
+      </Wrapper>
+    );
+    const buildVersion = ReactTestUtils.findRenderedDOMComponentWithClass(
+      component,
+      'build-version'
+    );
+    const buildVersionNode = ReactDOM.findDOMNode(buildVersion);
+    expect(ReactTestUtils.isDOMComponent(buildVersionNode)).to.be.true;
+    expect(buildVersion.textContent).to.equal(version);
+  });
+
+  it('renders the footer properly in the Authenticated experience', () => {
+    const component = ReactTestUtils.renderIntoDocument(
+      <Wrapper>
+        <FooterUI isFullWidth={true} />
+      </Wrapper>
+    );
+    const isFullWidth = ReactTestUtils.scryRenderedDOMComponentsWithClass(
+      component,
+      'container-full-width'
+    )[1];
+    const isFullWidthNode = ReactDOM.findDOMNode(isFullWidth);
+    expect(ReactTestUtils.isDOMComponent(isFullWidthNode)).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,45 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactTestUtils from 'react-dom/test-utils';
+import { waitFor, cleanup, fireEvent, render } from '@testing-library/react';
+import moxios from 'moxios';
+
+import HeaderUI from '../../components/Header/HeaderUI';
+
+describe('HeaderUI', () => {
+  beforeEach(() => {
+    moxios.install();
+  });
+
+  afterEach(() => {
+    moxios.uninstall();
+  });
+
+  it('renders a header', async () => {
+    window.location = {
+      origin: 'localhost:3000'
+    }
+    moxios.stubRequest(`${window.location.origin}/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());
+    expect(getByText('Test Header Menu')).toBeDefined();
+  });
+
+  it('renders a header with login menu', async () => {
+    const { container } = render(<HeaderUI isLoginEnabled={true} />);
+    await waitFor(() => expect(container.querySelector('nav')).toBeDefined());
+    expect(container.querySelector('.login')).toBeDefined();
+  });
+});

package/test/components/Infotip.test.js

@@ -0,0 +1,73 @@
+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('#04838A');
+  });
+
+  it('overrides "touchstart" events for button', () => {
+    act(() => {
+      ReactDOM.render(<Infotip label="tooltip text" />, container);
+    });
+    const button = container.querySelector('button');
+    const stopPropagation = spy();
+    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');
+    Simulate.touchEnd(button, {
+      preventDefault,
+    });
+    expect(preventDefault.calledOnce).to.be.true;
+    expect(button.focus.calledOnce).to.be.true;
+    expect(button.blur.calledOnce).to.be.false;
+    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;
+  });
+});