New Lightbulb Example: Class Components, State and advanced Styles (A…

…utoprefixer)

src/components/molecules/Lightbulb/Lightbulb.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div`
+  background-color: darkblue;
+  padding: 70px;
+`;
+
+const Bulp = styled.div`
+  border-radius: 50%;
+  width: 200px;
+  height: 200px;
+  background-color: ${({ isOn, color }) => (isOn ? color : 'gray')};
+  box-shadow: 
+    inset -3px 2px 40px -2px white,
+    0 0 80px 10px ${({ isOn, color }) => (isOn ? color : 'transparent')};
+  transition: all .3s;
+  margin: 0 auto;
+  opacity: .9;
+`;
+
+const Socket = styled.div`
+  position: relative;
+  background: linear-gradient(
+    to bottom,
+    #999,
+    #999 50%,
+    #666 50%,
+    #666
+  );
+  background-size: 100% 25px;
+  width: 110px;
+  height: 70px;
+  margin: -15px auto 0;
+`;
+
+const Connector = styled.div`
+  background-color: #333;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin: -30px auto 0;
+`;
+
+export default class Lightbulb extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOn: false,
+    };
+  }
+
+  static propTypes = {
+    /** The color of the lightbulb */
+    color: PropTypes.string,
+  };
+
+  toggle = () => {
+    this.setState({ isOn: !this.state.isOn });
+  };
+
+  static defaultProps = {
+    color: '#f8e897',
+  };
+
+  render() {
+    return (
+      <Wrapper>
+        <Bulp onClick={this.toggle} color={this.props.color} isOn={this.state.isOn} />
+        <Socket />
+        <Connector />
+      </Wrapper>
+    );
+  }
+}

src/components/molecules/Lightbulb/Lightbulb.md

@@ -0,0 +1,20 @@
+## Lightbulb Example
+### Default Lightbulb (White)
+Please click on the bulb to turn it on an off.
+
+    <Lightbulb />
+
+### Yellow Lightbulb 
+Please click on the bulb to turn it on an off.
+
+    <Lightbulb 
+      color="green"
+    />
+
+### Red Lightbulb
+Please click on the bulb to turn it on an off.
+
+    <Lightbulb 
+      color="red"
+    />
+

src/components/molecules/Lightbulb/Lightbulb.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Lightbulb from './Lightbulb';
+
+it('renders default Lightbulb snapshot', () => {
+  const tree = renderer.create(<Lightbulb />).toJSON();
+  expect(tree).toMatchStyledComponentsSnapshot();
+});
+
+it('renders yellow Lightbulb snapshot', () => {
+  const tree = renderer.create(<Lightbulb color="yellow" />).toJSON();
+  expect(tree).toMatchStyledComponentsSnapshot();
+});
+
+it('renders red Lightbulb snapshot', () => {
+  const tree = renderer.create(<Lightbulb color="red" />).toJSON();
+  expect(tree).toMatchStyledComponentsSnapshot();
+});

src/components/molecules/Lightbulb/__snapshots__/Lightbulb.test.js.snap

@@ -0,0 +1,157 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders default Lightbulb snapshot 1`] = `
+.drUSaD {
+  background-color: darkblue;
+  padding: 70px;
+}
+
+.bDtkyv {
+  border-radius: 50%;
+  width: 200px;
+  height: 200px;
+  background-color: gray;
+  box-shadow: inset -3px 2px 40px -2px white,    0 0 80px 10px transparent;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+  margin: 0 auto;
+  opacity: .9;
+}
+
+.cOKrhy {
+  position: relative;
+  background: linear-gradient(    to bottom,    #999,    #999 50%,    #666 50%,    #666  );
+  background-size: 100% 25px;
+  width: 110px;
+  height: 70px;
+  margin: -15px auto 0;
+}
+
+.dHEbFS {
+  background-color: #333;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin: -30px auto 0;
+}
+
+<div
+  className="sc-bdVaJa drUSaD"
+>
+  <div
+    className="sc-bwzfXH bDtkyv"
+    color="#f8e897"
+    onClick={[Function]}
+  />
+  <div
+    className="sc-htpNat cOKrhy"
+  />
+  <div
+    className="sc-bxivhb dHEbFS"
+  />
+</div>
+`;
+
+exports[`renders red Lightbulb snapshot 1`] = `
+.drUSaD {
+  background-color: darkblue;
+  padding: 70px;
+}
+
+.bDtkyv {
+  border-radius: 50%;
+  width: 200px;
+  height: 200px;
+  background-color: gray;
+  box-shadow: inset -3px 2px 40px -2px white,    0 0 80px 10px transparent;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+  margin: 0 auto;
+  opacity: .9;
+}
+
+.cOKrhy {
+  position: relative;
+  background: linear-gradient(    to bottom,    #999,    #999 50%,    #666 50%,    #666  );
+  background-size: 100% 25px;
+  width: 110px;
+  height: 70px;
+  margin: -15px auto 0;
+}
+
+.dHEbFS {
+  background-color: #333;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin: -30px auto 0;
+}
+
+<div
+  className="sc-bdVaJa drUSaD"
+>
+  <div
+    className="sc-bwzfXH bDtkyv"
+    color="red"
+    onClick={[Function]}
+  />
+  <div
+    className="sc-htpNat cOKrhy"
+  />
+  <div
+    className="sc-bxivhb dHEbFS"
+  />
+</div>
+`;
+
+exports[`renders yellow Lightbulb snapshot 1`] = `
+.drUSaD {
+  background-color: darkblue;
+  padding: 70px;
+}
+
+.bDtkyv {
+  border-radius: 50%;
+  width: 200px;
+  height: 200px;
+  background-color: gray;
+  box-shadow: inset -3px 2px 40px -2px white,    0 0 80px 10px transparent;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+  margin: 0 auto;
+  opacity: .9;
+}
+
+.cOKrhy {
+  position: relative;
+  background: linear-gradient(    to bottom,    #999,    #999 50%,    #666 50%,    #666  );
+  background-size: 100% 25px;
+  width: 110px;
+  height: 70px;
+  margin: -15px auto 0;
+}
+
+.dHEbFS {
+  background-color: #333;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin: -30px auto 0;
+}
+
+<div
+  className="sc-bdVaJa drUSaD"
+>
+  <div
+    className="sc-bwzfXH bDtkyv"
+    color="yellow"
+    onClick={[Function]}
+  />
+  <div
+    className="sc-htpNat cOKrhy"
+  />
+  <div
+    className="sc-bxivhb dHEbFS"
+  />
+</div>
+`;

src/components/organisms/ServiceTeaser/ServiceTeaser.js

@@ -7,13 +7,17 @@ const Wrapper = styled.div`
 `;
 
 const Headline = styled.h3`
-  font-size: 20px;
+  font-size: 50px;
 `;
 
+const clickHandler = () => {
+  alert('hello');
+};
+
 const ServiceTeaser = ({ href, image, title, children }) =>
   <Wrapper>
     <img src={image} alt="" />
-    <Headline>{title}</Headline>
+    <Headline onMouseOver={clickHandler}>{title}</Headline>
     <p>{children}</p>
   </Wrapper>;
 

src/components/organisms/ServiceTeaser/__snapshots__/ServiceTeaser.test.js.snap

@@ -5,8 +5,8 @@ exports[`renders ServiceTeaser snapshot 1`] = `
   color: red;
 }
 
-.kabNnl {
-  font-size: 20px;
+.hoFYxk {
+  font-size: 50px;
 }
 
 <div
@@ -17,7 +17,8 @@ exports[`renders ServiceTeaser snapshot 1`] = `
     src="https://unsplash.it/300/200?image=957"
   />
   <h3
-    className="sc-bwzfXH kabNnl"
+    className="sc-bwzfXH hoFYxk"
+    onMouseOver={[Function]}
   >
     Haus
   </h3>