feat(Button): adds type prop

Closes #277
innovaccer · Aug 21, 2020 · 7584eef · 7584eef
1 parent c1e4bcd
commit 7584eef
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 7 deletions.
diff --git a/core/components/atoms/button/Button.tsx b/core/components/atoms/button/Button.tsx
@@ -4,13 +4,16 @@ import Icon from '@/components/atoms/icon';
 import classNames from 'classnames';
 import { BaseProps } from '@/utils/types';
 
+export type ButtonType = 'button' | 'submit' | 'reset';
 export type Appearance = 'basic' | 'primary' | 'success' | 'alert' | 'transparent';
-
 export type Size = 'tiny' | 'regular' | 'large';
-
 export type Alignment = 'left' | 'right';
 
 export interface ButtonProps extends BaseProps {
+  /**
+   * Type of `Button`
+   */
+  type?: ButtonType;
   /**
    * The size of `Button`
    * @default "regular"
@@ -65,18 +68,19 @@ export interface ButtonProps extends BaseProps {
   onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
-const sizeMapping = {
+const sizeMapping: Record<Size, number> = {
   tiny: 12,
   regular: 16,
   large: 20,
 };
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
-    appearance = 'basic',
     size = 'regular',
-    iconAlign = 'left',
-    tabIndex = 0,
+    appearance,
+    iconAlign,
+    tabIndex,
+    type,
     children,
     icon,
     expanded,
@@ -107,7 +111,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
   });
 
   return (
-    <button ref={ref} className={buttonClass} disabled={disabled || loading} tabIndex={tabIndex} {...rest} >
+    <button ref={ref} type={type} className={buttonClass} disabled={disabled || loading} tabIndex={tabIndex} {...rest} >
       {loading && (
         <span className={spinnerClass}>
           <Spinner size="small" appearance={(appearance === 'basic' || appearance === 'transparent') ? 'secondary' : 'white'} />
@@ -128,5 +132,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
 });
 
 Button.displayName = 'Button';
+Button.defaultProps = {
+  appearance: 'basic',
+  size: 'regular',
+  iconAlign: 'left',
+  tabIndex: 0
+};
 
 export default Button;
diff --git a/core/components/atoms/button/__stories__/index.story.tsx b/core/components/atoms/button/__stories__/index.story.tsx
@@ -5,6 +5,12 @@ import Button from '../Button';
 
 // CSF format story
 export const all = () => {
+  const type = select(
+    'type',
+    ['button', 'submit', 'reset'],
+    undefined
+  );
+
   const appearance = select(
     'appearance',
     ['basic', 'primary', 'success', 'alert', 'transparent'],
@@ -53,6 +59,7 @@ export const all = () => {
       onClick={action('button-clicked')}
       onMouseEnter={action('mouse-enter')}
       onMouseLeave={action('mouse-leave')}
+      type={type}
       appearance={appearance}
       size={size}
       expanded={expanded}

diff --git a/core/components/atoms/button/__tests__/Button.test.tsx b/core/components/atoms/button/__tests__/Button.test.tsx
@@ -4,11 +4,35 @@ import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/u
 import Button, { ButtonProps as Props } from '../Button';
 
 const BooleanValue = [true, false];
+const buttonType = ['button', 'submit', 'reset'];
 const icon = 'events';
 const iconAlign = ['left', 'right'];
 const size = ['tiny', 'regular', 'large'];
 const appearance = ['basic', 'primary', 'success', 'alert', 'transparent'];
 
+describe('Button component', () => {
+  const mapper: Record<string, any> = {
+    type: valueHelper(buttonType, { required: true, iterate: true }),
+  };
+
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const tree = shallow(
+        <Button
+          {...attr}
+        >
+          Button
+        </Button >
+      );
+      expect(tree).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
 describe('Button component', () => {
   const mapper: Record<string, any> = {
     appearance: valueHelper(appearance, { required: true, iterate: true }),

diff --git a/core/components/atoms/dropdown/DropdownButton.tsx b/core/components/atoms/dropdown/DropdownButton.tsx
@@ -86,6 +86,7 @@ const DropdownButton = React.forwardRef<HTMLButtonElement, DropdownButtonProps>(
   return (
     <button
       ref={ref}
+      type="button"
       value={children}
       className={buttonClass}
       disabled={disabled}