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

@@ -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,
 };

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();

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>
+`;