Merge 665d594 into 2ea25b5

textkernel · Apr 30, 2019 · fd8cd95 · fd8cd95
2 parents 2ea25b5 + 665d594
commit fd8cd95
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 4 deletions.
diff --git a/src/components/Alert/__tests__/__snapshots__/Alert.spec.js.snap b/src/components/Alert/__tests__/__snapshots__/Alert.spec.js.snap
@@ -47,6 +47,7 @@ exports[`<Alert> that renders an alert should have a button that works 1`] = `
       <Button
         context="link"
         disabled={false}
+        href={null}
         isBlock={false}
         isInline={false}
         onClick={[MockFunction]}

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -11,9 +11,13 @@ const { block } = bem({
 });
 
 const Button = props => {
-    const { children, context, disabled, isBlock, isInline, type, ...rest } = props;
+    const { children, context, disabled, isBlock, isInline, type, href, ...rest } = props;
 
-    return (
+    return href ? (
+        <a {...rest} {...block(props)} hfer={href}>
+            {children}
+        </a>
+    ) : (
         <button {...rest} {...block(props)} type={type} disabled={disabled}>
             {children}
         </button>
@@ -38,7 +42,9 @@ Button.propTypes = {
     /** Should button be disabled or not */
     disabled: PropTypes.bool,
     /** Type of the button */
-    type: PropTypes.oneOf(['submit', 'button'])
+    type: PropTypes.oneOf(['submit', 'button']),
+    /** Providing an href will render an <a> element, styled as a button. */
+    href: PropTypes.string
 };
 
 Button.defaultProps = {
@@ -47,7 +53,8 @@ Button.defaultProps = {
     isBlock: false,
     isInline: false,
     disabled: false,
-    type: 'button'
+    type: 'button',
+    href: null
 };
 
 export default Button;
diff --git a/src/components/Button/__tests__/Button.spec.js b/src/components/Button/__tests__/Button.spec.js
@@ -6,6 +6,7 @@ describe('<Button> that renders a button', () => {
     it('should render default button correctly', () => {
         const wrapper = mount(<Button>Click me</Button>);
         expect(toJson(wrapper)).toMatchSnapshot();
+        expect(wrapper.find('button')).toHaveLength(1);
     });
     it('should add classes when props are changed', () => {
         const wrapper = mount(
@@ -35,4 +36,10 @@ describe('<Button> that renders a button', () => {
         buttonWrapper.simulate('mouseover');
         expect(onMouseOverMock).toHaveBeenCalled();
     });
+    it('should render an ancor element if href is defined', () => {
+        const wrapper = mount(<Button href="/">Click me</Button>);
+        expect(toJson(wrapper)).toMatchSnapshot();
+        expect(wrapper.find('button')).toHaveLength(0);
+        expect(wrapper.find('a')).toHaveLength(1);
+    });
 });
diff --git a/src/components/Button/__tests__/__snapshots__/Button.spec.js.snap b/src/components/Button/__tests__/__snapshots__/Button.spec.js.snap
@@ -4,6 +4,7 @@ exports[`<Button> that renders a button should add classes when props are change
 <Button
   context="primary"
   disabled={false}
+  href={null}
   isBlock={true}
   isInline={false}
   size="large"
@@ -22,10 +23,31 @@ exports[`<Button> that renders a button should add classes when props are change
 </Button>
 `;
 
+exports[`<Button> that renders a button should render an ancor element if href is defined 1`] = `
+<Button
+  context="neutral"
+  disabled={false}
+  href="/"
+  isBlock={false}
+  isInline={false}
+  size="normal"
+  type="button"
+>
+  <a
+    className="Button Button--context Button--context_neutral Button--size Button--size_normal"
+    hfer="/"
+    size="normal"
+  >
+    Click me
+  </a>
+</Button>
+`;
+
 exports[`<Button> that renders a button should render default button correctly 1`] = `
 <Button
   context="neutral"
   disabled={false}
+  href={null}
   isBlock={false}
   isInline={false}
   size="normal"

diff --git a/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.spec.js.snap b/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.spec.js.snap
@@ -12,6 +12,7 @@ exports[`<ButtonGroup> that renders a button should add classes when props are c
       className="ButtonGroup__button ButtonGroup__button--size ButtonGroup__button--size_large ButtonGroup__button--isBlock"
       context="neutral"
       disabled={false}
+      href={null}
       isBlock={false}
       isInline={false}
       key=".0"
@@ -31,6 +32,7 @@ exports[`<ButtonGroup> that renders a button should add classes when props are c
       className="ButtonGroup__button ButtonGroup__button--size ButtonGroup__button--size_large ButtonGroup__button--isBlock"
       context="neutral"
       disabled={false}
+      href={null}
       isBlock={false}
       isInline={false}
       key=".1"
@@ -62,6 +64,7 @@ exports[`<ButtonGroup> that renders a button should render default button correc
       className="ButtonGroup__button ButtonGroup__button--size ButtonGroup__button--size_normal"
       context="neutral"
       disabled={false}
+      href={null}
       isBlock={false}
       isInline={false}
       key=".0"
@@ -81,6 +84,7 @@ exports[`<ButtonGroup> that renders a button should render default button correc
       className="ButtonGroup__button ButtonGroup__button--size ButtonGroup__button--size_normal"
       context="neutral"
       disabled={false}
+      href={null}
       isBlock={false}
       isInline={false}
       key=".1"

diff --git a/stories/Button.js b/stories/Button.js
@@ -17,6 +17,7 @@ storiesOf('Button', module)
             onClick={e => {
                 console.log('Clicked button', e);
             }}
+            href={text('Href to be rendere for links', '')}
         >
             {text('Button label', 'Click me!')}
         </Button>