fix(core-react): add custom class support (#196)

wework · Aug 15, 2019 · cd5cfb1 · cd5cfb1
1 parent ae7e7ea
commit cd5cfb1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/packages/core-react/src/components/Button/button.test.js b/packages/core-react/src/components/Button/button.test.js
@@ -8,4 +8,11 @@ describe('Button', () => {
  const wrapper = mount(<Button>hello world</Button>);
  expect(wrapper.find('.ray-button--primary').length).toBe(1);
  });
+
+ test('it supports a custom class', () => {
+ const wrapper = mount(
+ <Button className="some-custom-class">hello world</Button>
+ );
+ expect(wrapper.find('.ray-button.some-custom-class').length).toBe(1);
+ });
 });
diff --git a/packages/core-react/src/components/Button/index.js b/packages/core-react/src/components/Button/index.js
@@ -9,15 +9,21 @@ export default function Button({
  compact,
  danger,
  disabled,
+ className,
  ...props
 }) {
  return (
  <Tag
  {...props}
- className={clsx('ray-button', `ray-button--${type}`, {
- 'ray-button--compact': compact,
- 'ray-button--danger': danger
- })}
+ className={clsx(
+ 'ray-button',
+ `ray-button--${type}`,
+ {
+ 'ray-button--compact': compact,
+ 'ray-button--danger': danger
+ },
+ className
+ )}
  disabled={disabled}
  >
  {children}
@@ -31,7 +37,8 @@ Button.propTypes = {
  danger: PropTypes.bool,
  children: PropTypes.node,
  Tag: PropTypes.oneOf(['button', 'a']),
- disabled: PropTypes.bool
+ disabled: PropTypes.bool,
+ className: PropTypes.string
 };
 
 Button.defaultProps = {

diff --git a/packages/core-react/src/components/Card/index.js b/packages/core-react/src/components/Card/index.js
@@ -2,9 +2,9 @@ import React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
-export default function Card({ heading, body, img, row }) {
+export default function Card({ heading, body, img, row, className }) {
  return (
- <div className={clsx('ray-card', { 'ray-card--row': row })}>
+ <div className={clsx('ray-card', { 'ray-card--row': row }, className)}>
  <div className="ray-card__image ray-image ray-image--16by9">{img}</div>
  <div className="ray-card__content">
  <div className="ray-card__heading">{heading}</div>
@@ -18,5 +18,6 @@ Card.propTypes = {
  heading: PropTypes.node,
  body: PropTypes.node,
  img: PropTypes.node,
- row: PropTypes.bool
+ row: PropTypes.bool,
+ className: PropTypes.string
 };