qpp-style 0.0.8 → 0.0.10

package/styles/components/sidebar/_sidebar.scss

@@ -1,141 +0,0 @@
-/*
-General sidebar styles
- */
-
-.sidebar {
-	background: $color-slate;
-	box-shadow: 4px 0 10px 0 transparentize($color-black, 0.7);
-	color: $color-white;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	overflow: hidden;
-	position: relative;
-	transition: width 0.6s ease-in-out;
-	width: $side-nav-expanded-width;
-
-	a {
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: none;
-		}
-
-		&.unstyled {
-			color: inherit;
-		}
-	}
-
-	hr {
-		border-top: 1px solid transparentize($color-white, 0.8);
-		height: 1px;
-		margin: 25px $side-nav-horizontal-padding;
-		width: auto;
-	}
-
-	ul {
-		line-height: 1.7;
-		list-style-type: none;
-		margin: 0;
-		padding: 2px 0;
-	}
-
-	svg {
-		position: relative;
-	}
-
-	.SVGInline {
-		display: none;
-	}
-
-	&.closed {
-		width: $side-nav-closed-width;
-	}
-
-	.alt-style {
-		background: $color-slate-dark;
-
-		.alt-style-header {
-			background: $color-slate;
-			padding-bottom: 25px;
-		}
-
-		.alt-style-nav {
-			padding-bottom: 25px;
-		}
-	}
-
-	/* Sidebar content */
-
-	.sidebar-content {
-		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
-		overflow-x: hidden;
-		transition: overflow-x 0.6s;
-
-		.label {
-			@include typography('Rubik', 20px, 26px, $color-white);
-			display: block;
-			font-weight: normal;
-			padding: 30px 25px 20px;
-			text-align: left;
-			white-space: inherit;
-		}
-
-		.level-one-nav {
-			background-color: $color-slate;
-		}
-	}
-
-	/* Sidebar chart */
-
-	.chart-title {
-		align-items: center;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-
-		p {
-			margin: 0;
-		}
-
-		.title {
-			@include typography('Rubik', 16px, 22px, $color-white);
-			text-transform: uppercase;
-		}
-
-		.disclaimer {
-			@include typography(
-				'Rubik',
-				14px,
-				20px,
-				transparentize($color-white, 0.2)
-			);
-			align-items: center;
-			display: flex;
-			padding: 5px 0 10px;
-
-			svg {
-				height: 20px;
-				width: 20px;
-			}
-
-			.left-icon {
-				fill: transparentize($color-white, 0.2);
-				margin-right: 10px;
-			}
-
-			.right-icon {
-				fill: $color-teal-light;
-				margin-left: 10px;
-			}
-		}
-
-		.timestamp {
-			@include typography('Rubik', 13px, 20px, $color-white);
-			padding: 5px 0 20px;
-			text-transform: uppercase;
-		}
-	}
-}

package/test/components/Tooltip.test.js

@@ -1,147 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-dom/test-utils';
-import { expect } from 'chai';
-import Tooltip from '../../components/Tooltip';
-import positionTip, {
-  positionTriangle,
-} from '../../components/Tooltip/position';
-
-class Wrapper extends Component {
-  render() {
-    return this.props.children;
-  }
-}
-
-describe('Tooltip', () => {
-  it('renders children into document', () => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <Wrapper>
-        <Tooltip label="tooltip text">
-          <button>Tooltip Button</button>
-        </Tooltip>
-      </Wrapper>
-    );
-    const tooltipButton = ReactTestUtils.findRenderedDOMComponentWithTag(
-      component,
-      'button'
-    );
-    const node = ReactDOM.findDOMNode(tooltipButton);
-    expect(ReactTestUtils.isDOMComponent(node)).to.be.true;
-  });
-
-  it('tooltip is not rendered until activted', () => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <Wrapper>
-        <Tooltip label="tooltip text">
-          <button>Tooltip Button</button>
-        </Tooltip>
-      </Wrapper>
-    );
-    const tooltip = document.body.querySelector('div[data-reach-tooltip]');
-    expect(tooltip).to.equal(null);
-  });
-
-  it('renders a tooltip when activated', () => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <Wrapper>
-        <Tooltip DEBUG_STYLE label="tooltip text">
-          <button>Tooltip Button</button>
-        </Tooltip>
-      </Wrapper>
-    );
-    const tooltip = document.body.querySelector('div[data-reach-tooltip]');
-    expect(tooltip).not.to.equal(null);
-  });
-
-  describe('position', () => {
-    it('returns empty object if triggerRect or tooltipRect are falsy', () => {
-      const position = positionTip();
-      expect(position).to.deep.equal({});
-    });
-
-    it('calculates tooltip position above trigger', () => {
-      const triggerRect = {
-        x: 100,
-        y: 100,
-        width: 16,
-        height: 16,
-        top: 100,
-        right: 116,
-        bottom: 116,
-        left: 100,
-      };
-      const tooltipRect = {
-        width: 130,
-        height: 50,
-      };
-      const position = positionTip(triggerRect, tooltipRect);
-      expect(position).to.deep.equal({
-        left: '43px',
-        top: '38px',
-      });
-    });
-
-    it('calculates tooltip position below trigger', () => {
-      const triggerRect = {
-        x: 100,
-        y: 40,
-        width: 16,
-        height: 16,
-        top: 40,
-        right: 116,
-        bottom: 56,
-        left: 100,
-      };
-      const tooltipRect = {
-        width: 130,
-        height: 50,
-      };
-      const position = positionTip(triggerRect, tooltipRect);
-      expect(position).to.deep.equal({
-        left: '43px',
-        top: '68px',
-      });
-    });
-
-    it('calculates triangle tip position above trigger', () => {
-      const triggerRect = {
-        x: 100,
-        y: 100,
-        width: 16,
-        height: 16,
-        top: 100,
-        right: 116,
-        bottom: 116,
-        left: 100,
-      };
-      const tooltipRect = {
-        width: 130,
-        height: 50,
-      };
-      const positionCSS = positionTriangle(triggerRect, tooltipRect);
-      expect(positionCSS).to.match(/border-top: 8px solid;/);
-      expect(positionCSS).to.match(/top: 88px;/);
-    });
-
-    it('calculates triangle tip position below trigger', () => {
-      const triggerRect = {
-        x: 100,
-        y: 40,
-        width: 16,
-        height: 16,
-        top: 40,
-        right: 116,
-        bottom: 56,
-        left: 100,
-      };
-      const tooltipRect = {
-        width: 130,
-        height: 50,
-      };
-      const positionCSS = positionTriangle(triggerRect, tooltipRect);
-      expect(positionCSS).to.match(/border-bottom: 8px solid;/);
-      expect(positionCSS).to.match(/top: 60px;/);
-    });
-  });
-});