Toggle stories added

zoltantothcom · zoltantothcom · commit 3e37d9101992 · 2019-02-18T12:55:49.000-05:00
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { Route, Link } from 'react-router-dom';
-import ToggleButton from './ToggleButton';
+import Toggle from './Toggle';
 import Title from './Title';
 
 const StyledHeader = styled.div`
@@ -53,8 +53,8 @@ const Header = () => (
     </StyledLinkContainer>
 
     <StyledSettingsContainer>
-      <Route exact path="/" render={() => <ToggleButton control="js" />} />
-      <ToggleButton control="mode" />
+      <Route exact path="/" render={() => <Toggle control="js" />} />
+      <Toggle control="mode" />
     </StyledSettingsContainer>
 
     <Title />
diff --git a/src/components/Toggle.jsx b/src/components/Toggle.jsx
@@ -6,23 +6,23 @@ import { connect } from 'react-redux';
 import { toggle } from '../actions';
 import SVG from './Svg';
 
-const StyledToggleButton = styled.button`
-  background-color: #2e2e2e;
-  border: 1px solid #555555;
+const StyledToggle = styled.button`
+  background-color: ${props => props.theme.background};
+  border: 1px solid ${props => props.theme.buttonBackground};
   border-radius: 50%;
-  color: #999999;
+  color: ${props => props.theme.buttonBackgroundHover};
   cursor: pointer;
   height: 2.5rem;
   margin: 0 0 0 1rem;
   outline: 0;
   width: 2.5rem;
 
   &:hover {
-    background-color: #484848;
+    background-color: ${props => props.theme.buttonBackground};
 
     & svg,
     & g {
-      fill: #ffffff;
+      fill: ${props => props.theme.buttonColorHover};
     }
   }
 
@@ -32,29 +32,29 @@ const StyledToggleButton = styled.button`
 
     & svg,
     & g {
-      fill: #ffffff;
+      fill: ${props => props.theme.buttonColorHover};
     }
   }
 
   &.light {
-    background-color: #ffffff;
-    border-color: #d8d8d8;
+    background-color: ${props => props.theme.buttonColorHover};
+    border-color: ${props => props.theme.buttonBorderHover};
 
     & svg,
     & g {
-      fill: #a8a8a8;
+      fill: ${props => props.theme.buttonBorder};
     }
 
     &:hover {
       & svg,
       & g {
-        fill: #707070;
+        fill: ${props => props.theme.buttonBorder};
       }
     }
   }
 `;
 
-const ToggleButton = props => {
+const Toggle = props => {
   const { toggle, control, js, mode } = props;
 
   let isActive, isLightMode;
@@ -64,16 +64,13 @@ const ToggleButton = props => {
   if (!isActive && mode === 'light') isLightMode = 'light';
 
   return (
-    <StyledToggleButton
-      onClick={() => toggle(control)}
-      className={classnames(isActive, isLightMode)}
-    >
+    <StyledToggle onClick={() => toggle(control)} className={classnames(isActive, isLightMode)}>
       <SVG control={control} />
-    </StyledToggleButton>
+    </StyledToggle>
   );
 };
 
-ToggleButton.propTypes = {
+Toggle.propTypes = {
   toggle: PropTypes.func.isRequired,
   control: PropTypes.string.isRequired,
   mode: PropTypes.string.isRequired,
@@ -90,4 +87,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(ToggleButton);
+)(Toggle);
diff --git a/stories/Toggle.stories.js b/stories/Toggle.stories.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import Provider from './Provider.js';
+import { storiesOf } from '@storybook/react';
+import Toggle from '../src/components/Toggle';
+import store from '../src/store';
+
+const withProvider = story => <Provider store={store}>{story()}</Provider>;
+
+storiesOf('Toggle', module)
+  .addDecorator(withProvider)
+
+  .add('js', () => <Toggle control="js" />)
+  .add('mode', () => <Toggle control="mode" />);
