Add disable button (#19)

Author: jpbarela

src/Button/__snapshots__/index.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`Button renders with button style 1`] = `
 <div>
   <button
-    class="button-0-2-1 button-d4-0-2-7"
+    class="button-0-2-1 button-d6-0-2-10 common-0-2-2 common-d7-0-2-11"
     type="button"
   >
     Press Me
@@ -14,7 +14,7 @@ exports[`Button renders with button style 1`] = `
 exports[`Button renders with link style 1`] = `
 <div>
   <button
-    class="link-0-2-2 link-d3-0-2-6"
+    class="button-0-2-1 button-d3-0-2-7 common-0-2-2 common-d4-0-2-8"
     type="button"
   >
     Click Me
@@ -25,7 +25,7 @@ exports[`Button renders with link style 1`] = `
 exports[`Button renders with no style 1`] = `
 <div>
   <button
-    class="button-0-2-1 button-d0-0-2-3"
+    class="button-0-2-1 button-d0-0-2-4 common-0-2-2 common-d1-0-2-5"
     type="button"
   >
     Press Me

src/Button/index.js

@@ -5,48 +5,85 @@ import { createUseStyles, useTheme } from "react-jss";
 type ButtonProps = {
   onClick?: () => void,
   name: string,
-  style?: string,
+  disabled?: boolean,
+  type?: string,
 };
 
 export type ButtonStyleProps = {
   color?: string,
+  margin?: string,
+  marginRight?: string,
+  marginLeft?: string,
+  marginTop?: string,
+  marginBottom?: string,
 };
 export function Button({
   onClick,
   name,
+  disabled,
   color,
-  style,
+  margin,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  marginTop,
+  type,
 }: ButtonProps & ButtonStyleProps): React.Node {
   const theme = useTheme();
-  const classes = useButtonStyles({ color });
+  const classes = useButtonStyles({
+    color,
+    disabled,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+  });
 
   return (
-    <button type="button" onClick={onClick} className={style && classes[style]}>
+    <button
+      type="button"
+      onClick={onClick}
+      className={[type && classes[type], classes.common].join(" ")}
+      disabled={disabled}
+    >
       {name}
     </button>
   );
 }
 
 Button.defaultProps = {
-  style: "button",
+  type: "button",
 };
 
 export const useButtonStyles: (ButtonStyleProps) => {
   button: string,
+  common: string,
   link: string,
 } = createUseStyles((theme) => {
   return {
     button: {
       background: theme.button.primary,
-      borderRadius: "10px",
+      borderRadius: "0.75rem",
       borderStyle: "none",
       color: ({ color }) => color || theme.button.color,
+      opacity: ({ disabled }) => (disabled ? 0.5 : 1),
+    },
+    common: {
+      fontSize: "1rem",
+      margin: ({ margin }) => margin,
+      marginLeft: ({ marginLeft }) => marginLeft,
+      marginRight: ({ marginRight }) => marginRight,
+      marginTop: ({ marginTop }) => marginTop,
+      marginBottom: ({ marginBottom }) => marginBottom,
     },
     link: {
       border: 0,
       background: "inherit",
       textDecoration: "underline",
       color: ({ color }) => color || theme.button.primary,
+      opacity: ({ disabled }) => (disabled ? 0.5 : 1),
+      padding: 0,
     },
   };
 });

src/Form/index.jsx

@@ -39,6 +39,7 @@ type InputLayoutProps = {
 
 type SubmitProps = {
   name: string,
+  disabled?: boolean,
   testID?: string,
 };
 
@@ -191,17 +192,32 @@ export function SelectInput({
 
 export function SubmitInput({
   name,
+  disabled,
   color,
+  margin,
+  marginRight,
+  marginLeft,
+  marginTop,
+  marginBottom,
   testID,
 }: SubmitProps & ButtonStyleProps): React.Node {
-  const classes = useButtonStyles({ color });
+  const classes = useButtonStyles({
+    color,
+    disabled,
+    margin,
+    marginRight,
+    marginLeft,
+    marginTop,
+    marginBottom,
+  });
 
   return (
     <input
       type="submit"
       value={name}
-      className={classes.button}
+      className={[classes.button, classes.common].join(" ")}
       data-testid={testID}
+      disabled={disabled}
     />
   );
 }

src/Layout/index.js

@@ -11,20 +11,22 @@ export type LayoutProps = {
 
 type RowType = {
   justifyContent: FlexAlignType,
+  alignItems: FlexAlignType,
   backgroundColor?: string,
   children?: React.Node,
   className?: string,
 };
 
 export function Row({
+  alignItems,
   justifyContent,
   backgroundColor,
   children,
   className,
   height,
   width,
 }: RowType & LayoutProps): React.Node {
-  const classes = useRowStyles({ backgroundColor, justifyContent });
+  const classes = useRowStyles({ alignItems, backgroundColor, justifyContent });
   const layoutClasses = useLayoutStyles({ height, width });
 
   return (
@@ -39,13 +41,15 @@ export function Row({
 }
 
 Row.defaultProps = {
+  alignItems: "start",
   justifyContent: "space-between",
 };
 
 const useRowStyles = createUseStyles({
   row: {
     display: "flex",
-    padding: "5px 0",
+    padding: "0.375rem 0",
+    alignItems: ({ alignItems }: { alignItems: FlexAlignType }) => alignItems,
     justifyContent: ({ justifyContent }: { justifyContent: FlexAlignType }) =>
       justifyContent,
     backgroundColor: ({ backgroundColor }: { backgroundColor: string }) =>

stories/Button/Button.stories.mdx

@@ -20,11 +20,19 @@ and more traditional web link.
 
 export const Template = (args) => (
   <div>
-    <Row justifyContent="start">
+    <Row justifyContent="start" alignItems="center">
       This is a normal button <Button {...args} />
     </Row>
     <Row justifyContent="start">
-      This a link button <Button {...args} style="link" />
+      This a link button{" "}
+      <Button
+        {...args}
+        type="link"
+        marginLeft="0.5rem"
+        marginRight="0"
+        marginTop="0"
+        marginBottom="0"
+      />
     </Row>
   </div>
 );

stories/Form/Form.stories.mdx

@@ -38,7 +38,7 @@ export const Template = (args) => (
       />
     </Row>
     <Row>
-      <SubmitInput name="Submit" />
+      <SubmitInput name="Submit" disabled={true} />
     </Row>
   </Form>
 );