From af1c3a2a063db32eb6b0f973ca666ce0d2910b4b Mon Sep 17 00:00:00 2001
From: Kenneth <kenneth.ng.5226@outlook.com>
Date: Fri, 1 Jan 2021 16:40:12 +0000
Subject: [PATCH] Add rounded prop to Form.Input

---
 .../components/__test__/__snapshots__/input.test.js.snap  | 8 ++++++++
 src/components/form/components/__test__/input.test.js     | 4 ++++
 src/components/form/components/input.js                   | 4 ++++
 3 files changed, 16 insertions(+)

diff --git a/src/components/form/components/__test__/__snapshots__/input.test.js.snap b/src/components/form/components/__test__/__snapshots__/input.test.js.snap
index dc20c288..38f4b4b7 100644
--- a/src/components/form/components/__test__/__snapshots__/input.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/input.test.js.snap
@@ -19,6 +19,14 @@ exports[`Input component Should be large and readOnly 1`] = `
 />
 `;
 
+exports[`Input component Should be rounded 1`] = `
+<input
+  className="input is-rounded"
+  readOnly={false}
+  type="text"
+/>
+`;
+
 exports[`Input component Should be type email and a with success colors 1`] = `
 <input
   className="input is-success"
diff --git a/src/components/form/components/__test__/input.test.js b/src/components/form/components/__test__/input.test.js
index 91d7f74e..837f8f1c 100644
--- a/src/components/form/components/__test__/input.test.js
+++ b/src/components/form/components/__test__/input.test.js
@@ -38,4 +38,8 @@ describe('Input component', () => {
     const component = renderer.create(<Input hovered focused />);
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should be rounded', () => {
+    const component = renderer.create(<Input rounded />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/form/components/input.js b/src/components/form/components/input.js
index 898d71a4..4234c97a 100644
--- a/src/components/form/components/input.js
+++ b/src/components/form/components/input.js
@@ -14,6 +14,7 @@ const Input = ({
   readOnly,
   isStatic,
   hovered,
+  rounded,
   focused,
   name,
   ...props
@@ -27,6 +28,7 @@ const Input = ({
       'is-static': isStatic,
       'is-hovered': hovered,
       'is-focused': focused,
+      'is-rounded': rounded,
       [`is-${size}`]: size,
       [`is-${color}`]: color,
     })}
@@ -43,6 +45,7 @@ Input.propTypes = {
   isStatic: PropTypes.bool,
   focused: PropTypes.bool,
   hovered: PropTypes.bool,
+  rounded: PropTypes.bool,
   /**
    * The name of the input field Commonly used for [multi-input handling](https://reactjs.org/docs/forms.html#handling-multiple-inputs)
    */
@@ -60,6 +63,7 @@ Input.defaultProps = {
   isStatic: false,
   focused: false,
   hovered: false,
+  rounded: false,
   name: undefined,
 };