use nice-color-palettes to generate palettes

src/App.js

@@ -1,3 +1,4 @@
+import palette from 'nice-color-palettes';
 import chroma from 'chroma-js';
 import React from 'react';
 import styled from 'styled-components';
@@ -185,12 +186,12 @@ Color.defaultProps = {
 }
 
 S.Color = styled(Color)`
-display: flex;
+	display: flex;
-flex-direction: column;
+	flex-direction: column;
-justify-content: stretch;
+	justify-content: stretch;
-align-items: stretch;
+	align-items: stretch;
 
-ul {
+	ul {
 		display: flex;
 		flex-direction: column;
 		justify-content: stretch;
@@ -199,28 +200,60 @@ ul {
 		list-style: none;
 		padding: 0;
 		margin: 0;
-}
+	}
 
-li {
+	li {
 		display: flex;
 		flex-direction: column;
 		justify-content: stretch;
 		align-items: stretch;
 		flex: 1 1 100%;
+	}
+`;
+
+class Palette extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			palette: palette[0],
+		}
+
+		this.randomizePalette = this.randomizePalette.bind(this);
+	}
+
+	randomizePalette() {
+		const newPalette = palette[Math.floor(Math.random() * palette.length)];
+		this.setState({palette: newPalette});
+	}
+
+	render() {
+		const colors = this.state.palette.map(color =>
+			<li key={color}>
+				<S.Color
+					className="color-list"
+					baseColor={color}
+				/>
+			</li>
+		);
+		return (
+			<article>
+				<button onClick={this.randomizePalette}>Random Palette</button>
+				<ul className={this.props.className}>
+					{colors}
+				</ul>
+			</article>
+		);
+	}
 }
+
+S.Palette = styled(Palette)`
+display: flex;
 `;
 
 function App() {
 	return (
 		<div className="App">
-			<S.Color
+			<S.Palette />
-				className="color-list"
-				baseColor="#dbdfac"
-			/>
-			<S.Color
-				className="color-list"
-				baseColor="#fb3640"
-			/>
 		</div>
 	);
 }