buttons

Author: StoneT2000

components/Button/index.tsx

@@ -7,15 +7,23 @@ type ButtonProps = {
   className?: string,
   type?: string,
   size?: string,
+  children: React.ReactNode
 }
 
 /* Default Button is medium sized */
-export const Button: React.FunctionComponent<ButtonProps> = ({ className, type, children }) => {
-  let classes = classnames("acm-btn", {"acm-btn-primary": type === "primary"});
+export const Button = ({ className, type, size, children }: ButtonProps) => {
+  let classes = classnames("acm-btn", 
+    {
+      "acm-btn-primary": type === "primary",
+      "acm-btn-outline": type === "outline",
+      "acm-btn-small": size === "small",
+      "acm-btn-medium": size === "medium",
+      "acm-btn-large": size === "large"
+    }
+  );
   if (className) {
     classes = classnames(classes, ...className.split(" "));
   }
-  console.log(classes);
   return (
     <button className={classes}>
       <span>{children}</span>

components/Button/styles.less

@@ -1,5 +1,53 @@
 @import "../../styles/vars.less";
-.acm-button {
-  background-color: rgb(51,56,68);
+.acm-btn {
+  background-color: @b1;
   color: @white;
+  text-align: center;
+  display: inline-block;
+  border-radius: 30px;
+  margin: 5px 0;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: 200ms;
+  line-height: 1.5;
+  outline: none;
+}
+.acm-btn-outline {
+  background-color: @white;
+  color: @b1;
+}
+.acm-btn:hover {
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
+}
+.acm-btn-primary:hover { 
+  background-color: @white;
+  color: @button-hover-color;
+  border: 2px solid @b1;
+  transform: translatey(-1px);
+}
+.acm-btn-outline:hover { 
+  border: 2px solid @white;
+  background-color: @b1;
+  color: @button-hover-color-dark;
+  transform: translatey(-1px);
+}
+.acm-btn-small {
+  width: 124px;
+  min-height: 35px;
+}
+.acm-btn-medium {
+  width: 220px;
+  min-height: 35px;
+}
+.acm-btn-large {
+  padding: 0 15px;
+  min-width: 300px;
+  min-height: 35px;
+}
+.acm-btn-large.acm-btn-primary:hover { 
+  opacity: 0.75;
+  background-color: @b1;
+  border: 2px solid @b1;
+  color: @white;
+  transform: translatey(-1px);
 }

stories/button.stories.tsx

@@ -1,15 +1,32 @@
 import { storiesOf } from "@storybook/react";
 import * as React from "react";
 import 'antd/dist/antd.css';
-import { Button } from "../";
+import { Button } from "../components/Button";
 
 storiesOf("Button", module).add("All", () => (
   <div className="storycontainer">
-    <div className="story-module spaced">
+    <div className="story-module spaced" style={{backgroundColor:'rgba(10,190,240, 0.25)'}}>
       <h3>Small Buttons</h3>
       <Button type="primary" size="small">
         CLICK ME
       </Button>
+      <Button type="outline" size="small">
+        CLICK ME
+      </Button>
+      <h3>Medium Buttons</h3>
+      <Button type="primary" size="medium">
+        CLICK ME
+      </Button>
+      <Button type="outline" size="small">
+        CLICK ME
+      </Button>
+      <h3>Large Buttons</h3>
+      <Button type="primary" size="large">
+        CLICK ME
+      </Button>
+      <Button type="outline" size="small">
+        CLICK ME
+      </Button>
     </div>
   </div>
 ));

styles/vars.less

@@ -1,5 +1,10 @@
 /** ACM COMPONENTS **/
+
 @white: white;
+@b1: #333;
+@button-hover-color: rgba(51, 51, 51, 0.75);
+@button-hover-color-dark: rgba(255, 255, 255, 0.75);
+@b2: #666;
 
 /** Screen break points **/
 @sm: 576px;
@@ -9,4 +14,4 @@
 
 /* Typography */
 @font: 'Montserrat', sans-serif;
-@body-font: 'Open Sans', sans-serif;
+@body-font: 'Open Sans', sans-serif;