Merge pull request #14 from materialr/feature/extra-props

feat: add extra props that are passed in

package.json

@@ -29,8 +29,8 @@
   "homepage": "https://github.com/materialr/card#readme",
   "dependencies": {
     "@material/card": "^0.35.0",
-    "@materialr/button": "^2.0.2",
-    "@materialr/icon-toggle": "^2.0.1",
+    "@materialr/button": "^2.1.0",
+    "@materialr/icon-toggle": "^2.1.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.3.2"

src/action-button.jsx

@@ -16,12 +16,14 @@ const ActionButton = ({
   disabled,
   onClick,
   ripple,
+  ...props
 }) => (
   <Button
     className={getClassNames(className)}
     disabled={disabled}
     onClick={onClick}
     ripple={ripple}
+    {...props}
   >
     {children}
   </Button>

src/action-button.test.jsx

@@ -60,3 +60,16 @@ test('ActionButton > Renders all props', () => {
   expect(actualOnClick).toEqual(expectedOnClick);
   expect(actualRipple).toEqual(expectedRipple);
 });
+
+test('ActionButton > Adds extra properties that are passed in', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <ActionButton data-qa={DATA_QA}>{CHILDREN}</ActionButton>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/action-buttons.jsx

@@ -7,8 +7,8 @@ const getClassNames = className => classnames({
   [className]: !!className,
 });
 
-const ActionButtons = ({ children, className }) => (
-  <div className={getClassNames(className)}>
+const ActionButtons = ({ children, className, ...props }) => (
+  <div className={getClassNames(className)} {...props}>
     {children}
   </div>
 );

src/action-buttons.test.jsx

@@ -41,3 +41,16 @@ test('ActionButtons > Renders children', () => {
 
   expect(actual).toEqual(expected);
 });
+
+test('ActionButtons > Adds extra properties that are passed in', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <ActionButtons data-qa={DATA_QA}>{CHILDREN}</ActionButtons>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toEqual(expected);
+});

src/action-icon-toggle.jsx

@@ -18,6 +18,7 @@ const ActionIconToggle = ({
   labelOff,
   labelOn,
   onChange,
+  ...props
 }) => (
   <IconToggle
     className={getClassNames(className)}
@@ -27,6 +28,7 @@ const ActionIconToggle = ({
     labelOff={labelOff}
     labelOn={labelOn}
     onChange={onChange}
+    {...props}
   />
 );
 

src/action-icon-toggle.test.jsx

@@ -79,3 +79,23 @@ test('ActionIconToggle > Renders all props', () => {
   expect(actualIconOff).toEqual(expectedIconOff);
   expect(actualIconOn).toEqual(expectedIconOn);
 });
+
+test('ActionIconToggle > Adds extra properties that are passed in', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <ActionIconToggle
+      data-qa={DATA_QA}
+      iconOff={ICON_OFF}
+      iconOn={ICON_ON}
+      labelOff={LABEL_OFF}
+      labelOn={LABEL_ON}
+      onChange={ON_CHANGE}
+    />,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/action-icon.jsx

@@ -9,8 +9,16 @@ const getClassNames = className => classnames({
   [className]: !!className,
 });
 
-const ActionIcon = ({ className, icon, title }) => (
-  <i className={getClassNames(className)} role="button" tabIndex="0" title={title}>{icon}</i>
+const ActionIcon = ({ className, icon, title, ...props }) => (
+  <i
+    className={getClassNames(className)}
+    role="button"
+    tabIndex="0"
+    title={title}
+    {...props}
+  >
+    {icon}
+  </i>
 );
 
 ActionIcon.propTypes = {

src/action-icon.test.jsx

@@ -46,3 +46,16 @@ test('ActionIcon > Renders children', () => {
   expect(actualIcon).toEqual(expectedIcon);
   expect(actualTitle).toEqual(expectedTitle);
 });
+
+test('ActionIcon > Adds extra properties that are passed in', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <ActionIcon data-qa={DATA_QA} icon={ICON} />,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/action-icons.jsx

@@ -7,8 +7,8 @@ const getClassNames = className => classnames({
   [className]: !!className,
 });
 
-const ActionIcons = ({ children, className }) => (
-  <div className={getClassNames(className)}>
+const ActionIcons = ({ children, className, ...props }) => (
+  <div className={getClassNames(className)} {...props}>
     {children}
   </div>
 );

src/action-icons.test.jsx

@@ -41,3 +41,16 @@ test('ActionIcons > Renders children', () => {
 
   expect(actual).toEqual(expected);
 });
+
+test('ActionIcons > Adds extra properties that are passed in', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <ActionIcons data-qa={DATA_QA}>{CHILDREN}</ActionIcons>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/actions.jsx

@@ -8,8 +8,8 @@ const getClassNames = (className, fullBleed) => classnames({
   [className]: !!className,
 });
 
-const Actions = ({ children, className, fullBleed }) => (
-  <div className={getClassNames(className, fullBleed)}>{children}</div>
+const Actions = ({ children, className, fullBleed, ...props }) => (
+  <div className={getClassNames(className, fullBleed)} {...props}>{children}</div>
 );
 
 Actions.propTypes = {

src/actions.test.jsx

@@ -41,3 +41,16 @@ test('Actions > Renders children', () => {
 
   expect(actual).toEqual(expected);
 });
+
+test('Actions > Adds extra properties that are passed in', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <Actions data-qa={DATA_QA}>{CHILDREN}</Actions>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/card.jsx

@@ -10,8 +10,8 @@ const getClassName = (className, outlined) => classnames({
   [className]: !!className,
 });
 
-const Card = ({ children, className, outlined }) => (
-  <div className={getClassName(className, outlined)}>{children}</div>
+const Card = ({ children, className, outlined, ...props }) => (
+  <div className={getClassName(className, outlined)} {...props}>{children}</div>
 );
 
 Card.propTypes = {

src/card.test.jsx

@@ -35,3 +35,16 @@ test('Card > Renders children', () => {
 
   expect(actual).toEqual(expected);
 });
+
+test('Card > Renders default className', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <Card data-qa={DATA_QA}>{CHILDREN}</Card>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/media-content.jsx

@@ -7,8 +7,8 @@ const getClassNames = className => classnames({
   [className]: !!className,
 });
 
-const MediaContent = ({ children, className }) => (
-  <div className={getClassNames(className)}>{children}</div>
+const MediaContent = ({ children, className, ...props }) => (
+  <div className={getClassNames(className)} {...props}>{children}</div>
 );
 
 MediaContent.propTypes = {

src/media-content.test.jsx

@@ -41,3 +41,16 @@ test('MediaContent > Renders children', () => {
 
   expect(actual).toEqual(expected);
 });
+
+test('MediaContent > Adds extra properties that are passed in', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <MediaContent data-qa={DATA_QA}>{CHILDREN}</MediaContent>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/media.jsx

@@ -12,8 +12,8 @@ const getClassNames = (aspectRatio, className) => classnames({
   [className]: !!className,
 });
 
-const Media = ({ aspectRatio, children, className }) => (
-  <div className={getClassNames(aspectRatio, className)}>{children}</div>
+const Media = ({ aspectRatio, children, className, ...props }) => (
+  <div className={getClassNames(aspectRatio, className)} {...props}>{children}</div>
 );
 
 Media.propTypes = {

src/media.test.jsx

@@ -65,3 +65,16 @@ test('Media > Renders children', () => {
 
   expect(actual).toEqual(expected);
 });
+
+test('Media > Adds extra props that are passed in', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <Media data-qa={DATA_QA}>{CHILDREN}</Media>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});