From ef83f8b26405c1537213eb5c1d3df59754999ed5 Mon Sep 17 00:00:00 2001 From: David Daniel Date: Sat, 25 Feb 2017 23:30:08 -0800 Subject: [PATCH 1/8] example work --- src/ViewData/ViewData.js | 95 +++++++++++++++++++++++++++++++++++++++ stories/ViewData.story.js | 23 ++++++++++ 2 files changed, 118 insertions(+) create mode 100644 src/ViewData/ViewData.js create mode 100644 stories/ViewData.story.js diff --git a/src/ViewData/ViewData.js b/src/ViewData/ViewData.js new file mode 100644 index 00000000..f22fa242 --- /dev/null +++ b/src/ViewData/ViewData.js @@ -0,0 +1,95 @@ +import React, { Component } from 'react'; +import fetch from 'isomorphic-fetch'; //eslint-disable-line +// import { whereBy } from 'ramda'; + +// function makeYearData(data) { +// const yearData = []; +// data.forEach((month) => { +// for (let i = 0; i < month.length; i++) { +// yearData.push(month[i]); +// } +// }); +// return yearData; +// } + +const splitForYear = date => date.split('-')[0]; + +const filterByYear = (transactions) => { + const dataByYear = {}; + transactions.forEach((t) => { + const year = splitForYear(t.tran_date); + const yearToUpdate = dataByYear[year]; + if (yearToUpdate) { + dataByYear[year].push(t); + } else { + dataByYear[year] = [t]; + } + }); + return dataByYear; +}; + + +function reduceData(year, data) { + return data[year] && data[year].reduce((acc, item) => acc + item.amount, 0); +} + +export default class ViewData extends Component { + + static defaultProps = {} + + static propTypes = {} + + constructor(props) { + super(props); + this.state = { + data: null, + display: null, + }; + } + + componentDidMount() { + fetch('http://54.213.83.132/hackoregon/http/current_candidate_transactions_in/5591/') + .then((response) => { + if (response.ok) { + return response.json(); + } + return response; + }) + .then(json => filterByYear(json)) + .then(data => this.setState({ data })); + } + + renderData = data => ( +
+
{data.filer}
+

+ {data.tran_date} | {data.contributor_payee} | {data.amount} +

+
+) + + renderYear = year => this.setState({ display: this.state.data[year] }); + getYears = () => Object.keys(this.state.data); + + render() { + let mappedData; + if (this.state.data) { + mappedData = this.getYears().map(year => reduceData(year, this.state.data)); + // console.log(mappedData); + } + + return ( +
+ +

Totals

+ + {this.state.display && (this.renderData(this.state.display) || 'Loading...')} +
+ ); + } + +} diff --git a/stories/ViewData.story.js b/stories/ViewData.story.js new file mode 100644 index 00000000..22973823 --- /dev/null +++ b/stories/ViewData.story.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { storiesOf, action } from '@kadira/storybook'; +import { ViewData } from '../src'; + +const displayName = ViewData.displayName || 'ViewData'; +const title = 'Simple usage'; +const description = ` + This is some basic usage with the button with providing a label to show the text. + Clicking should trigger an action.`; + +const demoCode = () => ( + +); + +const propDocs = { inline: true, propTables: [ViewData] }; + +export default () => storiesOf(displayName, module) + .addWithInfo( + title, + description, + demoCode, + propDocs, + ); \ No newline at end of file From 8732416deb465766d65fd6b9bc3aaf63814a8693 Mon Sep 17 00:00:00 2001 From: Xaiana Date: Tue, 11 Apr 2017 18:23:04 -0700 Subject: [PATCH 2/8] created radio button --- src/Radio/Radio.js | 65 +++++++++++++++++++ .../Radio/Radio.styles.css | 0 src/Radio/Radio.test.js | 0 {stories => src/stories}/BarChart.story.js | 0 {stories => src/stories}/Button.story.js | 0 .../stories}/DropdownMenu.story.js | 0 {stories => src/stories}/Editable.story.js | 0 {stories => src/stories}/Header.story.js | 0 src/stories/LeafletMap.story.js | 0 {stories => src/stories}/Pie.story.js | 0 src/stories/Radio.story.js | 3 + {stories => src/stories}/Slider.story.js | 0 {stories => src/stories}/StoryCard.story.js | 0 {stories => src/stories}/StoryFooter.story.js | 0 {stories => src/stories}/StoryLink.story.js | 0 {stories => src/stories}/ViewData.story.js | 0 {stories => src/stories}/Welcome.js | 0 {stories => src/stories}/index.js | 4 +- {stories => src/stories}/shared.js | 0 stories/Radio.story.js | 23 +++++++ 20 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 src/Radio/Radio.js rename stories/LeafletMap.story.js => src/Radio/Radio.styles.css (100%) create mode 100644 src/Radio/Radio.test.js rename {stories => src/stories}/BarChart.story.js (100%) rename {stories => src/stories}/Button.story.js (100%) rename {stories => src/stories}/DropdownMenu.story.js (100%) rename {stories => src/stories}/Editable.story.js (100%) rename {stories => src/stories}/Header.story.js (100%) create mode 100644 src/stories/LeafletMap.story.js rename {stories => src/stories}/Pie.story.js (100%) create mode 100644 src/stories/Radio.story.js rename {stories => src/stories}/Slider.story.js (100%) rename {stories => src/stories}/StoryCard.story.js (100%) rename {stories => src/stories}/StoryFooter.story.js (100%) rename {stories => src/stories}/StoryLink.story.js (100%) rename {stories => src/stories}/ViewData.story.js (100%) rename {stories => src/stories}/Welcome.js (100%) rename {stories => src/stories}/index.js (93%) rename {stories => src/stories}/shared.js (100%) create mode 100644 stories/Radio.story.js diff --git a/src/Radio/Radio.js b/src/Radio/Radio.js new file mode 100644 index 00000000..dc0c6d02 --- /dev/null +++ b/src/Radio/Radio.js @@ -0,0 +1,65 @@ +import React from 'react'; +import classNames from 'classnames/bind'; +import styles from './Radio.styles.css'; + +class Radio extends React.Component { + + constructor(props) { + super(props); + this.checkIt = this.checkIt.bind(this); + this.unCheckIt = this.unCheckIt.bind(this); + this.handleChange = this.handleChange.bind(this); + this.state = { + checked:false + }; + } + + checkIt() { + this.setState({ + checked:true + }); + } + + unCheckIt() { + this.setState({ + checked:false + }); + } + + handleChange(evt) { + if(this.state.checked !== evt.target.checked) { + this.setState({ + checked:evt.target.checked + }); + } + } + + render() { + return ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ ) + } +} + +Radio.propTypes = { + +} + +Radio.defaultProps = { + +} + +export default Radio; diff --git a/stories/LeafletMap.story.js b/src/Radio/Radio.styles.css similarity index 100% rename from stories/LeafletMap.story.js rename to src/Radio/Radio.styles.css diff --git a/src/Radio/Radio.test.js b/src/Radio/Radio.test.js new file mode 100644 index 00000000..e69de29b diff --git a/stories/BarChart.story.js b/src/stories/BarChart.story.js similarity index 100% rename from stories/BarChart.story.js rename to src/stories/BarChart.story.js diff --git a/stories/Button.story.js b/src/stories/Button.story.js similarity index 100% rename from stories/Button.story.js rename to src/stories/Button.story.js diff --git a/stories/DropdownMenu.story.js b/src/stories/DropdownMenu.story.js similarity index 100% rename from stories/DropdownMenu.story.js rename to src/stories/DropdownMenu.story.js diff --git a/stories/Editable.story.js b/src/stories/Editable.story.js similarity index 100% rename from stories/Editable.story.js rename to src/stories/Editable.story.js diff --git a/stories/Header.story.js b/src/stories/Header.story.js similarity index 100% rename from stories/Header.story.js rename to src/stories/Header.story.js diff --git a/src/stories/LeafletMap.story.js b/src/stories/LeafletMap.story.js new file mode 100644 index 00000000..e69de29b diff --git a/stories/Pie.story.js b/src/stories/Pie.story.js similarity index 100% rename from stories/Pie.story.js rename to src/stories/Pie.story.js diff --git a/src/stories/Radio.story.js b/src/stories/Radio.story.js new file mode 100644 index 00000000..c3d39159 --- /dev/null +++ b/src/stories/Radio.story.js @@ -0,0 +1,3 @@ +import React from 'react'; +import { storiesOf, action } from '@kadira/storybook'; +import { Radio } from '../src'; diff --git a/stories/Slider.story.js b/src/stories/Slider.story.js similarity index 100% rename from stories/Slider.story.js rename to src/stories/Slider.story.js diff --git a/stories/StoryCard.story.js b/src/stories/StoryCard.story.js similarity index 100% rename from stories/StoryCard.story.js rename to src/stories/StoryCard.story.js diff --git a/stories/StoryFooter.story.js b/src/stories/StoryFooter.story.js similarity index 100% rename from stories/StoryFooter.story.js rename to src/stories/StoryFooter.story.js diff --git a/stories/StoryLink.story.js b/src/stories/StoryLink.story.js similarity index 100% rename from stories/StoryLink.story.js rename to src/stories/StoryLink.story.js diff --git a/stories/ViewData.story.js b/src/stories/ViewData.story.js similarity index 100% rename from stories/ViewData.story.js rename to src/stories/ViewData.story.js diff --git a/stories/Welcome.js b/src/stories/Welcome.js similarity index 100% rename from stories/Welcome.js rename to src/stories/Welcome.js diff --git a/stories/index.js b/src/stories/index.js similarity index 93% rename from stories/index.js rename to src/stories/index.js index 46bcedfa..5ce41e49 100644 --- a/stories/index.js +++ b/src/stories/index.js @@ -11,6 +11,7 @@ import barChartStory from './BarChart.story'; import dropdownStory from './DropdownMenu.story'; import headerStory from './Header.story'; import Welcome from './Welcome'; +import radioStory from './Radio.story'; import '../src/global.styles.css'; @@ -30,4 +31,5 @@ storycardStory(); pieStory(); barChartStory(); sliderStory(); -dropdownStory(); \ No newline at end of file +dropdownStory(); +radioStory(); diff --git a/stories/shared.js b/src/stories/shared.js similarity index 100% rename from stories/shared.js rename to src/stories/shared.js diff --git a/stories/Radio.story.js b/stories/Radio.story.js new file mode 100644 index 00000000..7e6ca873 --- /dev/null +++ b/stories/Radio.story.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { storiesOf, action } from '@kadira/storybook'; +import { Radio } from '../src'; + +const displayName = Radio.displayName || 'Radio'; +const title = 'Simple usage'; +const description = ` + This is some basic usage with the button with providing a label to show the text. + Clicking should trigger an action.`; + +const demoCode = () => ( + Hello Radio +); + +const propDocs = { inline: true, propTables: [Radio] }; + +export default () => storiesOf(displayName, module) + .addWithInfo( + title, + description, + demoCode, + propDocs, + ); From 5debcfe8eaf70f59a8bc44af45967f4839eb7c58 Mon Sep 17 00:00:00 2001 From: Xaiana Date: Tue, 11 Apr 2017 18:36:38 -0700 Subject: [PATCH 3/8] updated radio --- src/Radio/Radio.js | 44 +++++++++---------- src/index.js | 4 +- src/stories/Radio.story.js | 3 -- {src/stories => stories}/BarChart.story.js | 0 {src/stories => stories}/Button.story.js | 0 .../stories => stories}/DropdownMenu.story.js | 0 {src/stories => stories}/Editable.story.js | 0 {src/stories => stories}/Header.story.js | 0 {src/stories => stories}/LeafletMap.story.js | 0 {src/stories => stories}/Pie.story.js | 0 {src/stories => stories}/Slider.story.js | 0 {src/stories => stories}/StoryCard.story.js | 0 {src/stories => stories}/StoryFooter.story.js | 0 {src/stories => stories}/StoryLink.story.js | 0 {src/stories => stories}/ViewData.story.js | 0 {src/stories => stories}/Welcome.js | 0 {src/stories => stories}/index.js | 0 {src/stories => stories}/shared.js | 0 18 files changed, 24 insertions(+), 27 deletions(-) delete mode 100644 src/stories/Radio.story.js rename {src/stories => stories}/BarChart.story.js (100%) rename {src/stories => stories}/Button.story.js (100%) rename {src/stories => stories}/DropdownMenu.story.js (100%) rename {src/stories => stories}/Editable.story.js (100%) rename {src/stories => stories}/Header.story.js (100%) rename {src/stories => stories}/LeafletMap.story.js (100%) rename {src/stories => stories}/Pie.story.js (100%) rename {src/stories => stories}/Slider.story.js (100%) rename {src/stories => stories}/StoryCard.story.js (100%) rename {src/stories => stories}/StoryFooter.story.js (100%) rename {src/stories => stories}/StoryLink.story.js (100%) rename {src/stories => stories}/ViewData.story.js (100%) rename {src/stories => stories}/Welcome.js (100%) rename {src/stories => stories}/index.js (100%) rename {src/stories => stories}/shared.js (100%) diff --git a/src/Radio/Radio.js b/src/Radio/Radio.js index dc0c6d02..4735e042 100644 --- a/src/Radio/Radio.js +++ b/src/Radio/Radio.js @@ -6,49 +6,48 @@ class Radio extends React.Component { constructor(props) { super(props); - this.checkIt = this.checkIt.bind(this); - this.unCheckIt = this.unCheckIt.bind(this); this.handleChange = this.handleChange.bind(this); + this.handleFormSubmit = this.handleFormSubmit.bind(this); this.state = { - checked:false + checked: false }; } - checkIt() { - this.setState({ - checked:true - }); - } - - unCheckIt() { + handleChange(evt) { this.setState({ - checked:false + checked: evt.target.value }); } - handleChange(evt) { - if(this.state.checked !== evt.target.checked) { - this.setState({ - checked:evt.target.checked - }); - } + handleFormSubmit(evt) { + console.log('You have selected:', this.state.checked); + evt.preventDefault(); } render() { return ( -
+
- +
- +
- +
- +
+
) } @@ -61,5 +60,4 @@ Radio.propTypes = { Radio.defaultProps = { } - export default Radio; diff --git a/src/index.js b/src/index.js index d4593458..2c03fb36 100644 --- a/src/index.js +++ b/src/index.js @@ -9,6 +9,7 @@ import Slider from './Slider/Slider'; import Header from './Navigation/Header'; import Nav from './Navigation/Nav'; import NavRouterLink from './Navigation/NavRouterLink'; +import Radio from './Radio/Radio'; export { BarChart, @@ -22,4 +23,5 @@ export { StoryCard, Nav, NavRouterLink, -}; \ No newline at end of file + Radio +}; diff --git a/src/stories/Radio.story.js b/src/stories/Radio.story.js deleted file mode 100644 index c3d39159..00000000 --- a/src/stories/Radio.story.js +++ /dev/null @@ -1,3 +0,0 @@ -import React from 'react'; -import { storiesOf, action } from '@kadira/storybook'; -import { Radio } from '../src'; diff --git a/src/stories/BarChart.story.js b/stories/BarChart.story.js similarity index 100% rename from src/stories/BarChart.story.js rename to stories/BarChart.story.js diff --git a/src/stories/Button.story.js b/stories/Button.story.js similarity index 100% rename from src/stories/Button.story.js rename to stories/Button.story.js diff --git a/src/stories/DropdownMenu.story.js b/stories/DropdownMenu.story.js similarity index 100% rename from src/stories/DropdownMenu.story.js rename to stories/DropdownMenu.story.js diff --git a/src/stories/Editable.story.js b/stories/Editable.story.js similarity index 100% rename from src/stories/Editable.story.js rename to stories/Editable.story.js diff --git a/src/stories/Header.story.js b/stories/Header.story.js similarity index 100% rename from src/stories/Header.story.js rename to stories/Header.story.js diff --git a/src/stories/LeafletMap.story.js b/stories/LeafletMap.story.js similarity index 100% rename from src/stories/LeafletMap.story.js rename to stories/LeafletMap.story.js diff --git a/src/stories/Pie.story.js b/stories/Pie.story.js similarity index 100% rename from src/stories/Pie.story.js rename to stories/Pie.story.js diff --git a/src/stories/Slider.story.js b/stories/Slider.story.js similarity index 100% rename from src/stories/Slider.story.js rename to stories/Slider.story.js diff --git a/src/stories/StoryCard.story.js b/stories/StoryCard.story.js similarity index 100% rename from src/stories/StoryCard.story.js rename to stories/StoryCard.story.js diff --git a/src/stories/StoryFooter.story.js b/stories/StoryFooter.story.js similarity index 100% rename from src/stories/StoryFooter.story.js rename to stories/StoryFooter.story.js diff --git a/src/stories/StoryLink.story.js b/stories/StoryLink.story.js similarity index 100% rename from src/stories/StoryLink.story.js rename to stories/StoryLink.story.js diff --git a/src/stories/ViewData.story.js b/stories/ViewData.story.js similarity index 100% rename from src/stories/ViewData.story.js rename to stories/ViewData.story.js diff --git a/src/stories/Welcome.js b/stories/Welcome.js similarity index 100% rename from src/stories/Welcome.js rename to stories/Welcome.js diff --git a/src/stories/index.js b/stories/index.js similarity index 100% rename from src/stories/index.js rename to stories/index.js diff --git a/src/stories/shared.js b/stories/shared.js similarity index 100% rename from src/stories/shared.js rename to stories/shared.js From 64a5006d9dae90fa937fcf4ea91472c85f58b38c Mon Sep 17 00:00:00 2001 From: Xaiana Date: Sat, 15 Apr 2017 16:19:31 -0700 Subject: [PATCH 4/8] using React-Select and React-Radio-Button --- src/Radio/Radio.js | 90 ++++++++++++++++---------------------- src/Radio/Radio.styles.css | 9 ++++ stories/Radio.story.js | 55 +++++++++++++++++++++-- 3 files changed, 98 insertions(+), 56 deletions(-) diff --git a/src/Radio/Radio.js b/src/Radio/Radio.js index 4735e042..be3d728b 100644 --- a/src/Radio/Radio.js +++ b/src/Radio/Radio.js @@ -1,63 +1,47 @@ import React from 'react'; import classNames from 'classnames/bind'; +import { RadioGroup, RadioButton } from 'react-radio-buttons'; import styles from './Radio.styles.css'; - -class Radio extends React.Component { - - constructor(props) { - super(props); - this.handleChange = this.handleChange.bind(this); - this.handleFormSubmit = this.handleFormSubmit.bind(this); - this.state = { - checked: false - }; - } - - handleChange(evt) { - this.setState({ - checked: evt.target.value - }); - } - - handleFormSubmit(evt) { - console.log('You have selected:', this.state.checked); - evt.preventDefault(); - } - - render() { - return ( -
-
- -
-
- -
-
- -
-
- -
- -
- ) - } -} +import Select from 'react-select'; + +const cx = classNames.bind(styles); + +const className = cx({ base: true }); + +const Radio = ({ options, onChange, value, clearable, searchable, disabled, isOptionUnique, isValidNewOption, onNewOptionCreator, onNewOptionClick,shouldKeyDownEventCreateNewOptions }) => ( + +); Radio.propTypes = { - + onChange: PropTypes.func.isRequired, + options: PropTypes.array.isRequired, + value: PropTypes.string.isRequired, + clearable: PropTypes.bool, + searchable: PropTypes.bool, + disabled: PropTypes.bool, + isOptionUnique: PropTypes.func.isRequired, + isValidNewOption: PropTypes.func.isRequired, + onNewOptionCreator: PropTypes.func.isRequired, + onNewOptionClick: PropTypes.func.isRequired, + shouldKeyDownEventCreateNewOptions: PropTypes.func.isRequired, } Radio.defaultProps = { - + clearable: false, + searchable: true, + disabled: false, } export default Radio; diff --git a/src/Radio/Radio.styles.css b/src/Radio/Radio.styles.css index e69de29b..15a46931 100644 --- a/src/Radio/Radio.styles.css +++ b/src/Radio/Radio.styles.css @@ -0,0 +1,9 @@ +.base { + border: 1px solid #eee; + border-radius: 3px; + background-color: #FFFFFF; + cursor: pointer; + font-size: 15px; + padding: 3px 10px; + margin: 10px; +} diff --git a/stories/Radio.story.js b/stories/Radio.story.js index 7e6ca873..4db8ab7d 100644 --- a/stories/Radio.story.js +++ b/stories/Radio.story.js @@ -8,9 +8,58 @@ const description = ` This is some basic usage with the button with providing a label to show the text. Clicking should trigger an action.`; -const demoCode = () => ( - Hello Radio -); +const demoCode = () => { + class DemoRadio extends React.Component { + constructor(props) { + super(props); + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.state = { + checked: false + }; + } + + handleChange(evt) { + this.setState({ + checked: evt.target.value + }); + } + + handleSubmit(evt) { + console.log('You have selected:', this.state.checked); + evt.preventDefault(); + } + + render() { + return ( +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ ) + } + } + +} const propDocs = { inline: true, propTables: [Radio] }; From f3dfc7613ab814444ed8debf58758ca531f2c70b Mon Sep 17 00:00:00 2001 From: Xaiana Date: Tue, 18 Apr 2017 18:15:08 -0700 Subject: [PATCH 5/8] tried mu29 React-Radio-Buttons --- .storybook/webpack.config.js | 19 +- assets/react-select.min.css | 1 + dist/index.js | 908 +++++++++++++++++--------------- lib/AreaChart/AreaChart.js | 75 ++- lib/AreaChart/AreaChart.test.js | 40 ++ lib/Dropdown/Dropdown.js | 3 +- lib/Hero/Hero.css | 11 +- lib/Navigation/Header.css | 5 +- lib/Navigation/Nav.css | 28 +- lib/Navigation/Nav.js | 9 +- lib/Scatterplot/Scatterplot.js | 29 + lib/constants.css | 67 +++ lib/global.styles.css | 200 +------ lib/index.js | 7 +- package.json | 11 +- src/Dropdown/Dropdown.js | 3 +- src/Hero/Hero.css | 11 +- src/Icon/Icon.js | 2 +- src/LeafletMap/LeafletMap.js | 14 +- src/Navigation/Header.css | 5 +- src/Navigation/Nav.css | 28 +- src/Navigation/Nav.js | 7 +- src/Radio/Radio.js | 6 +- src/StamenMap/StamenMap.test.js | 49 -- src/constants.css | 67 +++ src/global.styles.css | 200 +------ stories/Header.story.js | 2 +- stories/Radio.story.js | 47 +- stories/index.js | 4 +- yarn.lock | 370 +++++++------ 30 files changed, 1121 insertions(+), 1107 deletions(-) create mode 100644 assets/react-select.min.css create mode 100644 lib/AreaChart/AreaChart.test.js create mode 100644 lib/Scatterplot/Scatterplot.js create mode 100644 lib/constants.css delete mode 100644 src/StamenMap/StamenMap.test.js create mode 100644 src/constants.css diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 7355b3ed..0b6a65b8 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -1,13 +1,24 @@ +/* eslint-disable import/no-extraneous-dependencies */ + const path = require('path'); +const isProd = process.env.NODE_ENV === 'production'; +const className = isProd ? '[hash:base64:5]' : '[name]__[local]-[hash:base64:5]'; + module.exports = { module: { loaders: [ { test: /\.css$/, - exclude: [path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, '../src/assets')], - loader: 'style-loader!css-loader?modules&importLoaders=0&localIdentName=[hash:base64:5]', + exclude: [path.resolve(__dirname, 'node_modules'), /assets\/.*\.css$/], + loader: `style-loader!css-loader?modules&importLoaders=1&localIdentName=${className}!postcss-loader`, + }, + { + test: /assets\/.*\.css$/, + // exclude: [path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, '../src/assets')], + loader: 'style-loader!css-loader!postcss-loader', }, + { test: /\.(png|svg|jpg|jpeg|gif)$/, loader: 'url-loader', @@ -16,6 +27,10 @@ module.exports = { emitFile: true, }, }, + ], }, + postcss: () => [ + require('autoprefixer'), + ], }; diff --git a/assets/react-select.min.css b/assets/react-select.min.css new file mode 100644 index 00000000..cfb7baee --- /dev/null +++ b/assets/react-select.min.css @@ -0,0 +1 @@ +.Select,.Select-control{position:relative}.Select-control,.Select-input>input{width:100%;cursor:default;outline:0}.Select-arrow-zone,.Select-clear-zone,.Select-loading-zone{text-align:center;cursor:pointer}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled>.Select-control{background-color:#f9f9f9}.Select.is-disabled>.Select-control:hover{box-shadow:none}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none;opacity:.35}.Select-control{background-color:#fff;border-radius:4px;border:1px solid #ccc;color:#333;display:table;border-spacing:0;border-collapse:separate;height:36px;overflow:hidden}.is-searchable.is-focused:not(.is-open)>.Select-control,.is-searchable.is-open>.Select-control{cursor:text}.Select-control:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.Select-control .Select-input:focus{outline:0}.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.is-open>.Select-control .Select-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.is-focused:not(.is-open)>.Select-control{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}.Select--single>.Select-control .Select-value,.Select-placeholder{bottom:0;color:#aaa;left:0;line-height:34px;padding-left:10px;padding-right:10px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.has-value.Select--single>.Select-control .Select-value .Select-value-label,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{color:#333}.has-value.Select--single>.Select-control .Select-value a.Select-value-label,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label{cursor:pointer;text-decoration:none}.has-value.Select--single>.Select-control .Select-value a.Select-value-label:focus,.has-value.Select--single>.Select-control .Select-value a.Select-value-label:hover,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:focus,.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:hover{color:#007eff;outline:0;text-decoration:underline}.Select-input{height:34px;padding-left:10px;padding-right:10px;vertical-align:middle}.Select-input>input{background:none;border:0;box-shadow:none;display:inline-block;font-family:inherit;font-size:inherit;margin:0;line-height:14px;padding:8px 0 12px;-webkit-appearance:none}.Select-loading,.Select-loading-zone{width:16px;position:relative;vertical-align:middle}.is-focused .Select-input>input{cursor:text}.has-value.is-pseudo-focused .Select-input{opacity:0}.Select-control:not(.is-searchable)>.Select-input{outline:0}.Select-loading-zone{display:table-cell}.Select-loading{-webkit-animation:Select-animation-spin .4s infinite linear;-o-animation:Select-animation-spin .4s infinite linear;animation:Select-animation-spin .4s infinite linear;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #ccc;border-right-color:#333;display:inline-block}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn .2s;-o-animation:Select-animation-fadeIn .2s;animation:Select-animation-fadeIn .2s;color:#999;display:table-cell;position:relative;vertical-align:middle;width:17px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:18px;line-height:1}.Select--multi .Select-clear-zone{width:17px}.Select-arrow-zone{display:table-cell;position:relative;vertical-align:middle;width:25px;padding-right:5px}.Select--multi .Select-multi-value-wrapper,.Select-arrow{display:inline-block}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;height:0;width:0;position:relative}.Select-arrow-zone:hover>.Select-arrow,.is-open .Select-arrow{border-top-color:#666}.Select .Select-aria-only{display:inline-block;height:1px;width:1px;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;float:left}.Select-noresults,.Select-option{box-sizing:border-box;display:block;padding:8px 10px}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:#fff;border:1px solid #ccc;border-top-color:#e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option{background-color:#fff;color:#666;cursor:pointer}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.Select-option.is-selected{background-color:#f5faff;background-color:rgba(0,126,255,.04);color:#333}.Select-option.is-focused{background-color:#ebf5ff;background-color:rgba(0,126,255,.08);color:#333}.Select-option.is-disabled{color:#ccc;cursor:default}.Select-noresults{color:#999;cursor:default}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0}.Select--multi.has-value .Select-input{margin-left:5px}.Select--multi .Select-value{background-color:#ebf5ff;background-color:rgba(0,126,255,.08);border-radius:2px;border:1px solid #c2e0ff;border:1px solid rgba(0,126,255,.24);color:#007eff;display:inline-block;font-size:.9em;line-height:1.4;margin-left:5px;margin-top:5px;vertical-align:top}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle}.Select--multi .Select-value-label{border-bottom-right-radius:2px;border-top-right-radius:2px;cursor:default;padding:2px 5px}.Select--multi a.Select-value-label{color:#007eff;cursor:pointer;text-decoration:none}.Select--multi a.Select-value-label:hover{text-decoration:underline}.Select--multi .Select-value-icon{cursor:pointer;border-bottom-left-radius:2px;border-top-left-radius:2px;border-right:1px solid #c2e0ff;border-right:1px solid rgba(0,126,255,.24);padding:1px 5px 3px}.Select--multi .Select-value-icon:focus,.Select--multi .Select-value-icon:hover{background-color:#d8eafd;background-color:rgba(0,113,230,.08);color:#0071e6}.Select--multi .Select-value-icon:active{background-color:#c2e0ff;background-color:rgba(0,126,255,.24)}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:#333}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3}.Select--multi.is-disabled .Select-value-icon:active,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:hover{background-color:#fcfcfc}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}} \ No newline at end of file diff --git a/dist/index.js b/dist/index.js index f8a17eac..e3ce8b33 100644 --- a/dist/index.js +++ b/dist/index.js @@ -82,7 +82,7 @@ return /******/ (function(modules) { // webpackBootstrap Object.defineProperty(exports, "__esModule", { value: true }); - exports.isClient = exports.Icon = exports.Dropdown = exports.StamenMap = exports.LeafletMap = exports.RechartsPie = exports.NavRouterLink = exports.Nav = exports.Header = exports.ScrollToTop = exports.Footer = exports.Slider = exports.Pie = exports.ChartData = exports.Chart = exports.StoryCard = exports.Button = exports.Sankey = exports.BarChart = exports.AreaChart = undefined; + exports.isClient = exports.Scatterplot = exports.Icon = exports.Dropdown = exports.StamenMap = exports.LeafletMap = exports.RechartsPie = exports.NavRouterLink = exports.Nav = exports.Header = exports.ScrollToTop = exports.Footer = exports.Slider = exports.Pie = exports.ChartData = exports.Chart = exports.StoryCard = exports.Button = exports.Sankey = exports.BarChart = exports.AreaChart = undefined; var _AreaChart2 = __webpack_require__(1); @@ -136,23 +136,23 @@ return /******/ (function(modules) { // webpackBootstrap var _Nav3 = _interopRequireDefault(_Nav2); - var _NavRouterLink2 = __webpack_require__(1050); + var _NavRouterLink2 = __webpack_require__(1051); var _NavRouterLink3 = _interopRequireDefault(_NavRouterLink2); - var _RechartsPie2 = __webpack_require__(1057); + var _RechartsPie2 = __webpack_require__(1058); var _RechartsPie3 = _interopRequireDefault(_RechartsPie2); - var _LeafletMap2 = __webpack_require__(1058); + var _LeafletMap2 = __webpack_require__(1059); var _LeafletMap3 = _interopRequireDefault(_LeafletMap2); - var _StamenMap2 = __webpack_require__(1142); + var _StamenMap2 = __webpack_require__(1143); var _StamenMap3 = _interopRequireDefault(_StamenMap2); - var _Dropdown2 = __webpack_require__(1143); + var _Dropdown2 = __webpack_require__(1144); var _Dropdown3 = _interopRequireDefault(_Dropdown2); @@ -160,6 +160,10 @@ return /******/ (function(modules) { // webpackBootstrap var _Icon3 = _interopRequireDefault(_Icon2); + var _Scatterplot2 = __webpack_require__(1161); + + var _Scatterplot3 = _interopRequireDefault(_Scatterplot2); + var _isClient2 = __webpack_require__(729); var _isClient3 = _interopRequireDefault(_isClient2); @@ -185,6 +189,7 @@ return /******/ (function(modules) { // webpackBootstrap exports.StamenMap = _StamenMap3.default; exports.Dropdown = _Dropdown3.default; exports.Icon = _Icon3.default; + exports.Scatterplot = _Scatterplot3.default; // export utils as well for broader use @@ -209,43 +214,60 @@ return /******/ (function(modules) { // webpackBootstrap function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var StackedAreaChart = function StackedAreaChart(_ref) { - var data = _ref.data; + var data = _ref.data, + colors = _ref.colors; + + var gradients = []; + var lines = []; + + var myKeys = Object.keys(data[0]); + myKeys.forEach(function (key, index) { + if (key !== 'name') { + lines.push(_react2.default.createElement(_recharts.Area, { + type: 'monotone', + key: '' + myKeys[index], + dataKey: '' + myKeys[index], + stroke: colors[index], + fillOpacity: 1, + fill: 'url(#color' + index + ')' + })); + gradients.push(_react2.default.createElement( + 'linearGradient', + { + key: 'color' + index, + id: 'color' + index, + x1: '0', y1: '0', x2: '0', y2: '1' + }, + _react2.default.createElement('stop', { offset: '5%', stopColor: colors[index], stopOpacity: 0.8 }), + _react2.default.createElement('stop', { offset: '95%', stopColor: colors[index], stopOpacity: 0.1 }) + )); + } + }); + return _react2.default.createElement( - _recharts.AreaChart, - { layout: 'horizontal', width: 730, height: 250, data: data }, + 'div', + { style: { display: 'flex', justifyContent: 'space-around', margin: 'auto' } }, _react2.default.createElement( - 'defs', - null, - _react2.default.createElement( - 'linearGradient', - { id: 'colorAa', x1: '0', y1: '0', x2: '0', y2: '1' }, - _react2.default.createElement('stop', { offset: '5%', stopColor: '#8884d8', stopOpacity: 0.8 }), - _react2.default.createElement('stop', { offset: '95%', stopColor: '#8884d8', stopOpacity: 0 }) - ), + _recharts.AreaChart, + { width: 730, height: 250, data: data }, + _react2.default.createElement(_recharts.Legend, { layout: 'vertical', iconType: 'square', verticalAlign: 'top', align: 'left' }), _react2.default.createElement( - 'linearGradient', - { id: 'colorBb', x1: '0', y1: '0', x2: '0', y2: '1' }, - _react2.default.createElement('stop', { offset: '5%', stopColor: '#82ca9d', stopOpacity: 0.8 }), - _react2.default.createElement('stop', { offset: '95%', stopColor: '#82ca9d', stopOpacity: 0 }) + 'defs', + null, + gradients ), - _react2.default.createElement( - 'linearGradient', - { id: 'colorCc', x1: '0', y1: '0', x2: '0', y2: '1' }, - _react2.default.createElement('stop', { offset: '5%', stopColor: '#1f78b4', stopOpacity: 0.8 }), - _react2.default.createElement('stop', { offset: '95%', stopColor: '#1f78b4', stopOpacity: 0 }) - ) - ), - _react2.default.createElement(_recharts.XAxis, { dataKey: 'name' }), - _react2.default.createElement(_recharts.YAxis, null), - _react2.default.createElement(_recharts.CartesianGrid, { strokeDasharray: '3 3' }), - _react2.default.createElement(_recharts.Area, { type: 'monotone', dataKey: 'aa', stroke: '#8884d8', fillOpacity: 1, fill: 'url(#colorAa)' }), - _react2.default.createElement(_recharts.Area, { type: 'monotone', dataKey: 'bb', stroke: '#82ca9d', fillOpacity: 1, fill: 'url(#colorBb)' }), - _react2.default.createElement(_recharts.Area, { type: 'monotone', dataKey: 'cc', stroke: '#1f78b4', fillOpacity: 1, fill: 'url(#colorCc)' }) + _react2.default.createElement(_recharts.XAxis, { dataKey: 'name' }), + _react2.default.createElement(_recharts.YAxis, null), + _react2.default.createElement(_recharts.CartesianGrid, { strokeDasharray: '3 3' }), + _react2.default.createElement(_recharts.Tooltip, null), + lines + ) ); }; StackedAreaChart.propTypes = { - data: _react.PropTypes.arrayOf(_react.PropTypes.object) + data: _react.PropTypes.arrayOf(_react.PropTypes.object).isRequired, + colors: _react.PropTypes.arrayOf(_react.PropTypes.string).isRequired }; exports.default = StackedAreaChart; @@ -645,7 +667,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 6 */ -[1160, 7], +[1162, 7], /* 7 */ /***/ function(module, exports) { @@ -3692,11 +3714,11 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 36 */ -[1161, 37, 45, 41], +[1163, 37, 45, 41], /* 37 */ -[1162, 38, 40, 44, 41], +[1164, 38, 40, 44, 41], /* 38 */ -[1163, 39], +[1165, 39], /* 39 */ /***/ function(module, exports) { @@ -3706,9 +3728,9 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 40 */ -[1164, 41, 42, 43], +[1166, 41, 42, 43], /* 41 */ -[1165, 42], +[1167, 42], /* 42 */ /***/ function(module, exports) { @@ -3722,9 +3744,9 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 43 */ -[1166, 39, 34], +[1168, 39, 34], /* 44 */ -[1167, 39], +[1169, 39], /* 45 */ /***/ function(module, exports) { @@ -3795,7 +3817,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 49 */ -[1168, 50], +[1170, 50], /* 50 */ /***/ function(module, exports) { @@ -62081,27 +62103,27 @@ return /******/ (function(modules) { // webpackBootstrap /* 766 */ 35, /* 767 */ -[1168, 768], +[1170, 768], /* 768 */ 50, /* 769 */ -[1161, 770, 778, 774], +[1163, 770, 778, 774], /* 770 */ -[1162, 771, 773, 777, 774], +[1164, 771, 773, 777, 774], /* 771 */ -[1163, 772], +[1165, 772], /* 772 */ 39, /* 773 */ -[1164, 774, 775, 776], +[1166, 774, 775, 776], /* 774 */ -[1165, 775], +[1167, 775], /* 775 */ 42, /* 776 */ -[1166, 772, 765], +[1168, 772, 765], /* 777 */ -[1167, 772], +[1169, 772], /* 778 */ 45, /* 779 */ @@ -65908,7 +65930,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, /* 875 */ -[1160, 860], +[1162, 860], /* 876 */ /***/ function(module, exports, __webpack_require__) { @@ -84459,7 +84481,11 @@ return /******/ (function(modules) { // webpackBootstrap var Icon = function Icon(_ref) { var className = _ref.className, handleClick = _ref.handleClick; - return _react2.default.createElement('i', { onClick: handleClick, className: className }); + return _react2.default.createElement( + 'span', + null, + _react2.default.createElement('i', { onClick: handleClick, className: className }) + ); }; Icon.propTypes = { @@ -84529,11 +84555,11 @@ return /******/ (function(modules) { // webpackBootstrap var _Nav2 = _interopRequireDefault(_Nav); - var _LogoAnimated = __webpack_require__(1053); + var _LogoAnimated = __webpack_require__(1054); var _LogoAnimated2 = _interopRequireDefault(_LogoAnimated); - var _Header = __webpack_require__(1055); + var _Header = __webpack_require__(1056); var _Header2 = _interopRequireDefault(_Header); @@ -84619,7 +84645,7 @@ return /******/ (function(modules) { // webpackBootstrap var _NavSubMenu2 = _interopRequireDefault(_NavSubMenu); - var _NavRouterLink = __webpack_require__(1050); + var _NavRouterLink = __webpack_require__(1051); var _NavRouterLink2 = _interopRequireDefault(_NavRouterLink); @@ -84627,6 +84653,10 @@ return /******/ (function(modules) { // webpackBootstrap var _Nav2 = _interopRequireDefault(_Nav); + var _Icon = __webpack_require__(1042); + + var _Icon2 = _interopRequireDefault(_Icon); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -84638,7 +84668,7 @@ return /******/ (function(modules) { // webpackBootstrap var defaultMenu = [{ name: 'Collections', path: '/collections', - nestedMenu: [{ name: 'Budget', path: '/collections/budget' }, { name: 'Emergency Response', path: '/collections/emergency' }, { name: 'Housing', path: '/collections/housing' }, { name: 'Homlessness', path: '/collections/homlessness' }, { name: 'Transportation', path: '/collections/transportation' }, { name: 'Past Projects', path: '/collections/past-projects' }] + nestedMenu: [{ name: 'Budget', path: '/collections/budget' }, { name: 'Emergency Response', path: '/collections/emergency' }, { name: 'Housing', path: '/collections/housing' }, { name: 'Homelessness', path: '/collections/homlessness' }, { name: 'Transportation', path: '/collections/transportation' }, { name: 'Past Projects', path: '/collections/past-projects' }] }, { name: 'About', path: '/about' }]; var Nav = function (_Component) { @@ -84685,7 +84715,8 @@ return /******/ (function(modules) { // webpackBootstrap _react2.default.createElement( 'a', null, - item.name + item.name, + _react2.default.createElement(_Icon2.default, { className: 'fa fa-angle-down' }) ) ) // eslint-disable-line : _react2.default.createElement(_NavRouterLink2.default, { @@ -84796,16 +84827,43 @@ return /******/ (function(modules) { // webpackBootstrap exports = module.exports = __webpack_require__(658)(undefined); // imports - + exports.i(__webpack_require__(1050), undefined); // module - exports.push([module.id, ".Nav {\n position: relative;\n}\n\n.Nav ul {\n display: flex;\n padding: 1rem;\n list-style: none;\n align-items: center;\n justify-content: center;\n}\n\n.Nav ul li {\n flex: 1 1 100%;\n}\n\n.Nav a {\n color: rgba(255,255,255,.65);\n flex: 1;\n display: block;\n font-family: 'Rubik', sans-serif;\n font-size: 1.25rem;\n border: none;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 1rem;\n text-align: center;\n}\n\n.hidden {\n visibility: hidden;\n opacity: 0\n}\n\n.visible {\n visibility: visible!important;\n opacity: 1!important;\n margin-top: 10px;\n}\n\n.nestedMenu a {\n padding: 5px 0px;\n color: #EE495C;\n text-align: left;\n font-size: 16px;\n}\n\n.nestedMenu {\n border: 1px solid #AAA4AB;\n position: absolute;\n margin-top: 0px;\n left: 50%;\n transform: translateX(-50%);\n width: 200px;\n background-color: #fff;\n padding: 20px;\n transition: all .5s cubic-bezier(0.42, 0, 0.14, 1);\n}\n\n.nestedMenu::after {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -24px;\n border-width: 12px;\n border-style: solid;\n border-color: transparent transparent #fff transparent;\n}\n\n.Nav > a:nth-child(1):hover > div {\n /*composes: visible;*/\n\n}\n\n\n@media all and (max-width:640px) {\n\n .Nav {\n transition: all .2s linear;\n }\n\n .Nav.open {\n opacity: 1;\n }\n\n .Nav.closed {\n opacity: 0;\n pointer-events: none;\n }\n\n .Nav {\n position: absolute;\n z-index: 1;\n height: 100%;\n width: 100%;\n margin: 0 !important;\n padding: 0 !important;\n top: 0;\n left: 0;\n background-color: rgba(34,15,37,1);\n }\n\n .Nav ul {\n display: block;\n position: relative;\n list-style: none;\n margin: 0;\n padding-top: 80px;\n }\n\n .Nav ul li {\n color: #ffffff;\n display: block;\n text-align: center;\n text-decoration: none;\n transition: all .25s ease-in-out;\n margin: 0;\n padding: 0;\n flex: none;\n }\n\n}\n", ""]); + exports.push([module.id, ".Nav {\n position: relative;\n}\n\n.Nav ul {\n display: flex;\n padding: 1rem;\n list-style: none;\n align-items: center;\n justify-content: center;\n}\n\n.Nav ul li {\n flex: 1 1 100%;\n}\n\n.Nav ul li span i { margin-left: 10px; }\n\n.Nav a {\n color: rgba(255,255,255,.65);\n flex: 1;\n display: block;\n font-family: 'Rubik', sans-serif;\n font-size: 1.25rem;\n border: none;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 1rem;\n text-align: center;\n}\n\n@media " + __webpack_require__(1050).locals["desktop"] + " {\n\n.hidden {\n visibility: hidden;\n opacity: 0;\n}\n\n.visible {\n visibility: visible;\n opacity: 1;\n margin-top: 10px;\n}\n\n.nestedMenu a {\n color: rgba(238,73,92,1);\n padding: 5px 0px;\n text-align: left;\n font-size: 16px;\n}\n\n.nestedMenu {\n position: absolute;\n z-index: 999;\n margin-top: 0px;\n width: 200px;\n background-color: #fff;\n padding: 20px;\n transition: all .5s cubic-bezier(0.42, 0, 0.14, 1);\n}\n\n.nestedMenu::after {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -24px;\n border-width: 12px;\n border-style: solid;\n border-color: transparent transparent #fff transparent;\n}\n\n.Nav > a:nth-child(1):hover > div {\n /*composes: visible;*/\n\n}\n\n}\n\n\n\n\n@media " + __webpack_require__(1050).locals["small"] + " {\n\n .Nav {\n transition: all .2s linear;\n }\n\n .Nav.visible {\n opacity: 1;\n }\n\n .Nav.hidden {\n opacity: 0;\n pointer-events: none;\n }\n\n .Nav {\n position: absolute;\n z-index: 1;\n height: 100%;\n width: 100%;\n margin: 0 !important;\n padding: 0 !important;\n top: 0;\n left: 0;\n background-color: rgba(34,15,37,1);\n }\n\n .Nav ul {\n display: block;\n position: relative;\n list-style: none;\n margin: 0;\n padding-top: 80px;\n }\n\n .Nav ul li {\n color: #ffffff;\n display: block;\n text-align: center;\n text-decoration: none;\n transition: all .25s ease-in-out;\n margin: 0;\n padding: 0;\n flex: none;\n }\n\n}\n", ""]); // exports - + exports.locals = { + "small": "" + __webpack_require__(1050).locals["small"] + "", + "desktop": "" + __webpack_require__(1050).locals["desktop"] + "" + }; /***/ }, /* 1050 */ +/***/ function(module, exports, __webpack_require__) { + + exports = module.exports = __webpack_require__(658)(undefined); + // imports + + + // module + exports.push([module.id, "/* Color */\n\n.primary-color {\n color: rgba(34,15,37,1);\n fill: rgba(34,15,37,1);\n}\n\n.primary-background-color {\n background-color: rgba(34,15,37,1);\n}\n\n.secondary-color {\n color: rgba(238,73,92,1);\n fill: rgba(238,73,92,1);\n}\n\n.tertiary-color {\n color: rgba(114,99,113,1);\n fill: rgba(114,99,113,1);\n}\n\n.medium-color {\n color: rgba(170,164,171,1);\n fill: rgba(170,164,171,1);\n}\n\n.subdued-color {\n color: rgba(243,242,243,1);\n fill: rgba(243,242,243,1);\n}\n\n/* Phone Breakpoint */\n\n@media screen and (max-width: 640px) {\n\n}\n\n\n/* Tablet Portrait Breakpoint */\n\n@media screen and (min-width: 641px) and (max-width:768px) {\n\n}\n\n\n/* Tablet Landscape Breakpoint */\n\n@media screen and (min-width:769px) and (max-width: 1024) {\n\n}\n\n\n/* Desktop Breakpoint */\n\n@media screen and (min-width:1025px) {\n\n}\n", ""]); + + // exports + exports.locals = { + "small": "(max-width: 640px)", + "desktop": "(min-width: 641px)", + "primary": "rgba(34,15,37,1)", + "secondary": "rgba(238,73,92,1)", + "tertiary": "rgba(114,99,113,1)", + "medium": "rgba(170,164,171,1)", + "subdued": "rgba(243,242,243,1)", + "offwhite": "rgba(255,254,254,1)", + "midnight": "rgba(0,23,50,1)" + }; + +/***/ }, +/* 1051 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -84822,7 +84880,7 @@ return /******/ (function(modules) { // webpackBootstrap var _reactRouter = __webpack_require__(674); - var _NavRouterLink = __webpack_require__(1051); + var _NavRouterLink = __webpack_require__(1052); var _NavRouterLink2 = _interopRequireDefault(_NavRouterLink); @@ -84865,13 +84923,13 @@ return /******/ (function(modules) { // webpackBootstrap exports.default = NavRouterLink; /***/ }, -/* 1051 */ +/* 1052 */ /***/ function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a