fix(buttons): disable danger styling if disabled

packages/buttons/src/views/Button.js

@@ -40,7 +40,7 @@ const StyledButton = styled.button.attrs({
   }) =>
     classNames(ButtonStyles['c-btn'], {
       // Danger styling
-      [ButtonStyles['c-btn--danger']]: danger,
+      [ButtonStyles['c-btn--danger']]: !disabled && danger,
 
       // Styles
       [ButtonStyles['c-btn--primary']]: primary,

packages/buttons/src/views/Button.spec.js

@@ -22,6 +22,12 @@ describe('Button', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('renders correct combination of danger and disabled styling if provided', () => {
+    const wrapper = mount(<Button danger disabled />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it('renders stretched styling if provided', () => {
     const wrapper = mount(<Button stretched />);
 

packages/buttons/src/views/__snapshots__/Button.spec.js.snap

@@ -340,6 +340,37 @@ exports[`Button Types renders primary styling if provided 1`] = `
 </Button>
 `;
 
+exports[`Button renders correct combination of danger and disabled styling if provided 1`] = `
+<Button
+  danger={true}
+  disabled={true}
+>
+  <KeyboardFocusContainer>
+    <Button__StyledButton
+      danger={true}
+      disabled={true}
+      focused={false}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      tabIndex={0}
+    >
+      <button
+        className="c-btn is-disabled "
+        data-garden-id="buttons.button"
+        data-garden-version="version"
+        disabled={true}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        tabIndex={0}
+        type="button"
+      />
+    </Button__StyledButton>
+  </KeyboardFocusContainer>
+</Button>
+`;
+
 exports[`Button renders danger styling if provided 1`] = `
 <Button
   danger={true}