From b1bcf2ed9be1da97d69041cf222a40d2aa8602d4 Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Wed, 6 May 2020 15:40:09 +0200
Subject: [PATCH] Adding tabIndex prop to Buttons component (#7694)

* tabindex

* Added a test for tabIndex.

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
---
 app/javascript/crayons/Button/Button.jsx              |  4 ++++
 .../crayons/Button/__tests__/Button.test.jsx          |  5 +++++
 .../__tests__/__snapshots__/Button.test.jsx.snap      | 11 +++++++++++
 3 files changed, 20 insertions(+)

diff --git a/app/javascript/crayons/Button/Button.jsx b/app/javascript/crayons/Button/Button.jsx
index 135e45566..c1e849835 100644
--- a/app/javascript/crayons/Button/Button.jsx
+++ b/app/javascript/crayons/Button/Button.jsx
@@ -56,6 +56,7 @@ export const Button = ({
   onMouseOut,
   onFocus,
   onBlur,
+  tabIndex,
 }) => {
   const ComponentName = tagName;
   const Icon = icon;
@@ -81,6 +82,7 @@ export const Button = ({
       onMouseOut={onMouseOut}
       onFocus={onFocus}
       onBlur={onBlur}
+      tabIndex={tabIndex}
       {...otherProps}
     >
       {contentType !== 'text' && contentType !== 'icon-right' && Icon && (
@@ -111,6 +113,7 @@ Button.defaultProps = {
   onMouseOut: undefined,
   onFocus: undefined,
   onBlur: undefined,
+  tabIndex: undefined,
 };
 
 Button.propTypes = {
@@ -146,4 +149,5 @@ Button.propTypes = {
   onMouseOut: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
+  tabIndex: PropTypes.number,
 };
diff --git a/app/javascript/crayons/Button/__tests__/Button.test.jsx b/app/javascript/crayons/Button/__tests__/Button.test.jsx
index fad607eb2..ff603cd89 100644
--- a/app/javascript/crayons/Button/__tests__/Button.test.jsx
+++ b/app/javascript/crayons/Button/__tests__/Button.test.jsx
@@ -9,6 +9,11 @@ describe('<Button /> component', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should render with a tabIndex', () => {
+    const tree = render(<Button tabIndex="0">Hello world!</Button>);
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should render a secondary button when using the variant "secondary"', () => {
     const tree = render(<Button variant="secondary">Hello world!</Button>);
     expect(tree).toMatchSnapshot();
diff --git a/app/javascript/crayons/Button/__tests__/__snapshots__/Button.test.jsx.snap b/app/javascript/crayons/Button/__tests__/__snapshots__/Button.test.jsx.snap
index 6915d04d0..dd5f730e6 100644
--- a/app/javascript/crayons/Button/__tests__/__snapshots__/Button.test.jsx.snap
+++ b/app/javascript/crayons/Button/__tests__/__snapshots__/Button.test.jsx.snap
@@ -127,3 +127,14 @@ exports[`<Button /> component should render an outlined button when using the va
   Hello world!
 </button>
 `;
+
+exports[`<Button /> component should render with a tabIndex 1`] = `
+<button
+  class="crayons-btn"
+  disabled={false}
+  tabIndex="0"
+  type="button"
+>
+  Hello world!
+</button>
+`;