stuff

Author: StoneT2000

components/Button/index.tsx

@@ -7,7 +7,7 @@ type ButtonProps = {
   className?: string,
   type?: string,
   size?: string,
-  children: React.ReactNode
+  children?: React.ReactNode
 }
 
 /* Default Button is medium sized */

components/Input/index.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import classnames from 'classnames';
+
+import "./styles.less";
+
+type InputProps = {
+  className?: string,
+  type?: string,
+  size?: string,
+  children?: React.ReactNode
+}
+
+/* Default Button is medium sized */
+export const Input = ({ className, type, size, children }: InputProps) => {
+  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(" "));
+  }
+  return (
+    <button className={classes}>
+      <span>{children}</span>
+    </button>
+  );
+};

components/Input/styles.less

@@ -0,0 +1,53 @@
+@import "../../styles/vars.less";
+.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);
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acmucsd/components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "ACM Components, an extension of Ant Design",
   "main": "/lib/index.js",
   "scripts": {

stories/input.stories.tsx

@@ -0,0 +1,15 @@
+import { storiesOf } from "@storybook/react";
+import * as React from "react";
+import 'antd/dist/antd.css';
+import { Input as AntdInput } from "antd";
+
+storiesOf("Input", module).add("All", () => (
+  <div className="storycontainer">
+    <div className="story-module spaced" style={{backgroundColor:'rgba(10,190,240, 0.25)'}}>
+      <div style={{width: '500px', marginLeft: '50px'}}>
+        <h3>Input</h3>
+        <AntdInput />
+      </div>
+    </div>
+  </div>
+));