Add raised button

ocadotechnology · May 9, 2018 · a858a6e · a858a6e
1 parent a0cff35
commit a858a6e
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 2 deletions.
diff --git a/game_frontend/src/components/Button/__snapshots__/index.test.js.snap b/game_frontend/src/components/Button/__snapshots__/index.test.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> renders correctly 1`] = `
+.c0 {
+  background-color: #6b686b;
+  color: white;
+  border-radius: 200px;
+  border-width: 0px;
+  font-size: 14px;
+  margin: 8px;
+  padding: 4px 8px;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 64px;
+  height: 36px;
+  border: none;
+  outline: none;
+  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+.c0:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  border-radius: 200px;
+  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.c0:hover {
+  -webkit-filter: brightness(110%);
+  filter: brightness(110%);
+}
+
+.c0:hover:after {
+  opacity: 1;
+}
+
+.c0:active {
+  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
+  -webkit-filter: brightness(120%);
+  filter: brightness(120%);
+}
+
+<button
+  className="c0"
+/>
+`;
diff --git a/game_frontend/src/components/Button/index.js b/game_frontend/src/components/Button/index.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Button = styled.button`
+  background-color: ${props => props.primary ? '#f37300' : '#6b686b'};
+  color: ${props => props.primary ? 'black' : 'white'};
+  border-radius: 200px;
+  border-width: 0px;
+  font-size: 14px;
+  margin: 8px;
+  padding: 4px 8px;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 64px;
+  height: 36px;
+  border: none;
+  outline: none;
+  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+  transition: all 0.3s ease-in-out;
+
+  &:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: "";
+    border-radius: 200px;
+    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+  };
+
+  &:hover {
+    filter: brightness(110%);
+  }
+
+  &:hover:after {
+    opacity: 1;
+  }
+
+  &:active {
+    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
+    filter: brightness(120%);
+  }
+`
+
+export default Button
diff --git a/game_frontend/src/components/Button/index.test.js b/game_frontend/src/components/Button/index.test.js
@@ -0,0 +1,12 @@
+/* eslint-env jest */
+import React from 'react'
+import Button from 'components/Button'
+import { shallow } from 'enzyme'
+import toJson from 'enzyme-to-json'
+
+describe('<Button />', () => {
+  it('renders correctly', () => {
+    const tree = shallow(<Button />)
+    expect(toJson(tree)).toMatchSnapshot()
+  })
+})
diff --git a/game_frontend/src/containers/IDEMenu/__snapshots__/index.test.js.snap b/game_frontend/src/containers/IDEMenu/__snapshots__/index.test.js.snap
@@ -1,6 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<IDEMenu /> renders correctly 1`] = `
+.c1 {
+  background-color: #6b686b;
+  color: white;
+  border-radius: 200px;
+  border-width: 0px;
+  font-size: 14px;
+  margin: 8px;
+  padding: 4px 8px;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 64px;
+  height: 36px;
+  border: none;
+  outline: none;
+  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+.c1:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  border-radius: 200px;
+  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.c1:hover {
+  -webkit-filter: brightness(110%);
+  filter: brightness(110%);
+}
+
+.c1:hover:after {
+  opacity: 1;
+}
+
+.c1:active {
+  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
+  -webkit-filter: brightness(120%);
+  filter: brightness(120%);
+}
+
 .c0 {
   background-color: pink;
   grid-area: ide-menu;
@@ -10,6 +58,7 @@ exports[`<IDEMenu /> renders correctly 1`] = `
   className="c0"
 >
   <button
+    className="c1"
     id="post-code-button"
     onClick={undefined}
   >

diff --git a/game_frontend/src/containers/IDEMenu/index.js b/game_frontend/src/containers/IDEMenu/index.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { actions } from 'features/Editor'
+import Button from 'components/Button'
 
 const IDEMenuLayout = styled.nav`
   background-color: pink
@@ -13,9 +14,11 @@ export class IDEMenu extends Component {
   render () {
     return (
       <IDEMenuLayout>
-        <button
+        <Button
           id='post-code-button'
-          onClick={this.props.postCode} >Post Code</button>
+          onClick={this.props.postCode} >
+          Post Code
+        </Button>
       </IDEMenuLayout>
     )
   }