From 9a602d7c80abdb8e5bb8acd88d11237e82df9da2 Mon Sep 17 00:00:00 2001
From: Christophe Rosset <tophe@topheman.com>
Date: Tue, 24 Apr 2018 09:34:27 +0200
Subject: [PATCH] refactor(*): apply remainingProps to components

---
 src/components/CodeBlock.js                    | 16 ++++++----------
 src/components/Footer.js                       | 16 ++++++++++------
 src/components/Gravatar.js                     |  4 ++--
 src/components/Header.js                       | 13 +++++++++++--
 src/components/KeywordsList.js                 | 10 ++++------
 src/components/Loader.js                       |  4 ++--
 src/components/MainDrawer.js                   |  9 +++++++--
 src/components/Markdown.js                     |  5 +++--
 src/components/Package/DependenciesTab.js      | 13 +++----------
 src/components/Package/InfosContents.js        | 17 ++++++++---------
 src/components/Package/NotFound.js             | 10 ++++------
 src/components/Package/Package.js              | 10 ++++------
 src/components/Package/PackageJsonTab.js       | 10 ++++------
 src/components/Package/Readme.js               | 18 ++++++++++++++----
 src/components/Package/StatsContents.js        | 11 +++++++----
 src/components/Package/VersionsTab.js          | 13 ++++---------
 .../Package/__tests__/NotFound.spec.js         |  2 +-
 src/components/RetryButton.js                  | 11 ++++++++---
 .../SearchResults/SearchResultItem.js          | 16 +++++++++++++---
 src/components/SearchResults/SearchResults.js  |  6 +++---
 src/components/Sparkline.js                    | 12 ++----------
 src/components/TwitterButton.js                |  6 +++---
 src/components/__tests__/CodeBlock.spec.js     | 12 ++++++++++--
 src/components/__tests__/Footer.spec.js        |  6 +++++-
 src/components/__tests__/Gravatar.spec.js      |  6 +++++-
 src/components/__tests__/Header.spec.js        | 11 +++++++++--
 src/components/__tests__/KeywordsList.spec.js  |  6 +++++-
 src/components/__tests__/TwitterButton.spec.js |  9 +++++++--
 28 files changed, 164 insertions(+), 118 deletions(-)

diff --git a/src/components/CodeBlock.js b/src/components/CodeBlock.js
index 7f1d19d..1a5f116 100644
--- a/src/components/CodeBlock.js
+++ b/src/components/CodeBlock.js
@@ -15,16 +15,16 @@ class CodeBlock extends PureComponent {
     highlightBlock(this.codeEl);
   }
   render() {
-    const { className, style } = this.props;
+    const { value, language } = this.props;
     return (
-      <pre className={className} style={style}>
+      <pre {...this.props}>
         <code
           ref={ref => {
             this.codeEl = ref;
           }}
-          className={`language-${this.props.language}`}
+          className={`language-${language}`}
         >
-          {this.props.value}
+          {value}
         </code>
       </pre>
     );
@@ -33,14 +33,10 @@ class CodeBlock extends PureComponent {
 
 CodeBlock.propTypes = {
   value: PropTypes.string.isRequired,
-  language: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.object
+  language: PropTypes.string
 };
 CodeBlock.defaultProps = {
-  language: "",
-  className: undefined,
-  style: undefined
+  language: ""
 };
 
 export default CodeBlock;
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 62fe03a..16e9c54 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -15,8 +15,14 @@ const styles = {
   }
 };
 
-const Footer = ({ classes, fromFullYear, toFullYear, className, style }) => (
-  <footer className={classNames(classes.root, className)} style={style}>
+const Footer = ({
+  classes,
+  fromFullYear,
+  toFullYear,
+  className,
+  ...remainingProps
+}) => (
+  <footer className={classNames(classes.root, className)} {...remainingProps}>
     <p>
       ©{fromFullYear === toFullYear
         ? toFullYear
@@ -45,13 +51,11 @@ Footer.propTypes = {
   toFullYear: PropTypes.number,
   fromFullYear: PropTypes.number.isRequired,
   classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
+  className: PropTypes.string
 };
 Footer.defaultProps = {
   toFullYear: new Date().getFullYear(),
-  className: undefined,
-  style: undefined
+  className: undefined
 };
 
 export default withStyles(styles)(Footer);
diff --git a/src/components/Gravatar.js b/src/components/Gravatar.js
index d6f73ea..9c48e6a 100644
--- a/src/components/Gravatar.js
+++ b/src/components/Gravatar.js
@@ -4,13 +4,13 @@ import Avatar from "material-ui/Avatar";
 
 import md5 from "js-md5";
 
-const Gravatar = ({ email, size, ...props }) => (
+const Gravatar = ({ email, size, ...remainingProps }) => (
   <Avatar
     src={`https://s.gravatar.com/avatar/${md5(email)}${
       size ? `?s=${size}` : ""
     }`}
     alt="avatar"
-    {...props}
+    {...remainingProps}
   />
 );
 
diff --git a/src/components/Header.js b/src/components/Header.js
index 47dd520..a6edf0e 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -56,10 +56,19 @@ const styles = theme => ({
 });
 
 const Header = props => {
-  const { classes, drawerOpen, toggleDrawer, className, style } = props;
+  const {
+    classes,
+    drawerOpen,
+    toggleDrawer,
+    className,
+    ...remainingProps
+  } = props;
   return (
     <Fragment>
-      <header className={classNames(classes.root, className)} style={style}>
+      <header
+        className={classNames(classes.root, className)}
+        {...remainingProps}
+      >
         <AppBar position="absolute">
           <Toolbar>
             <IconButton
diff --git a/src/components/KeywordsList.js b/src/components/KeywordsList.js
index fa1f70b..d373724 100644
--- a/src/components/KeywordsList.js
+++ b/src/components/KeywordsList.js
@@ -38,10 +38,10 @@ const styles = {
   }
 };
 
-const KeywordsList = ({ keywords, classes, className, style }) => {
+const KeywordsList = ({ keywords, classes, className, ...remainingProps }) => {
   if (keywords && keywords.length > 0) {
     return (
-      <div className={classNames(classes.root, className)} style={style}>
+      <div className={classNames(classes.root, className)} {...remainingProps}>
         <LocalOfferIcon />
         {keywords.map((keyword, index) => (
           <Link
@@ -60,14 +60,12 @@ const KeywordsList = ({ keywords, classes, className, style }) => {
 KeywordsList.propTypes = {
   classes: PropTypes.object.isRequired,
   keywords: PropTypes.array,
-  className: PropTypes.string,
-  style: PropTypes.object
+  className: PropTypes.string
 };
 
 KeywordsList.defaultProps = {
   keywords: [],
-  className: undefined,
-  style: undefined
+  className: undefined
 };
 
 export default withStyles(styles)(KeywordsList);
diff --git a/src/components/Loader.js b/src/components/Loader.js
index 6fb1a19..c34b8fc 100644
--- a/src/components/Loader.js
+++ b/src/components/Loader.js
@@ -40,7 +40,7 @@ CustomLoader.defaultProps = {
   message: "Loading"
 };
 
-const Loader = ({ message, classes, overrideClasses, ...props }) => {
+const Loader = ({ message, classes, overrideClasses, ...remainingProps }) => {
   const loaderClasses = {
     ...classes,
     ...overrideClasses
@@ -48,7 +48,7 @@ const Loader = ({ message, classes, overrideClasses, ...props }) => {
   return (
     <Waiting
       loader={<CustomLoader message={message} classes={loaderClasses} />}
-      {...props}
+      {...remainingProps}
     />
   );
 };
diff --git a/src/components/MainDrawer.js b/src/components/MainDrawer.js
index c8c5925..a6194d5 100644
--- a/src/components/MainDrawer.js
+++ b/src/components/MainDrawer.js
@@ -29,7 +29,7 @@ const styles = {
   }
 };
 
-const MainDrawer = ({ classes, anchor, open, onClose }) => {
+const MainDrawer = ({ classes, anchor, open, onClose, ...remainingProps }) => {
   const sideList = (
     <div
       className={
@@ -85,7 +85,12 @@ const MainDrawer = ({ classes, anchor, open, onClose }) => {
   );
 
   return (
-    <MuiDrawer anchor={anchor} open={open} onClose={onClose}>
+    <MuiDrawer
+      anchor={anchor}
+      open={open}
+      onClose={onClose}
+      {...remainingProps}
+    >
       <div
         tabIndex={0}
         role="button"
diff --git a/src/components/Markdown.js b/src/components/Markdown.js
index 7cdafe0..e223320 100644
--- a/src/components/Markdown.js
+++ b/src/components/Markdown.js
@@ -116,9 +116,9 @@ LinkRenderer.defaultProps = {
 
 /** Markdown component */
 
-const Markdown = ({ repository, ...props }) => (
+const Markdown = ({ repository, source, ...remainingProps }) => (
   <ReactMarkdown
-    {...props}
+    source={source}
     renderers={{
       code: CodeBlock,
       heading: HeadingRenderer,
@@ -127,6 +127,7 @@ const Markdown = ({ repository, ...props }) => (
     escapeHtml={false}
     transformLinkUri={makeTransformLinkUri({ repository })}
     transformImageUri={makeTransformImageUri({ repository })}
+    {...remainingProps}
   />
 );
 Markdown.propTypes = {
diff --git a/src/components/Package/DependenciesTab.js b/src/components/Package/DependenciesTab.js
index 34f8766..6e0e355 100644
--- a/src/components/Package/DependenciesTab.js
+++ b/src/components/Package/DependenciesTab.js
@@ -47,8 +47,7 @@ const DependenciesTab = ({
   version,
   packageInfos,
   classes,
-  className,
-  style
+  ...remainingProps
 }) => {
   const dependencies =
     (packageInfos &&
@@ -77,7 +76,7 @@ const DependenciesTab = ({
     [`Peer Dependencies`]: peerDependencies
   };
   return (
-    <div className={className} style={style}>
+    <div {...remainingProps}>
       <ExpansionPanel>
         <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
           <Typography>Dependencies ({dependencies.length})</Typography>
@@ -111,13 +110,7 @@ const DependenciesTab = ({
 DependenciesTab.propTypes = {
   version: PropTypes.string.isRequired,
   packageInfos: PropTypes.object.isRequired,
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
-};
-DependenciesTab.defaultProps = {
-  className: undefined,
-  style: undefined
+  classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(DependenciesTab);
diff --git a/src/components/Package/InfosContents.js b/src/components/Package/InfosContents.js
index 3b527e1..b0d20e3 100644
--- a/src/components/Package/InfosContents.js
+++ b/src/components/Package/InfosContents.js
@@ -31,7 +31,12 @@ const styles = {
   maintainers: {}
 };
 
-const InfosContent = ({ packageInfos, version, classes, className, style }) => {
+const InfosContent = ({
+  packageInfos,
+  version,
+  classes,
+  ...remainingProps
+}) => {
   const licenseInfos = extractLicenseInfos(packageInfos, version);
   const homepage = extractUrl(
     safeExtractVersion(packageInfos, version).homepage
@@ -47,7 +52,7 @@ const InfosContent = ({ packageInfos, version, classes, className, style }) => {
       relativeDate(new Date(packageInfos.time[version]))) ||
     undefined;
   return (
-    <div className={className} style={style}>
+    <div {...remainingProps}>
       {datePublishedRelative && (
         <div>
           <strong>v{version}</strong> published <i>{datePublishedRelative}</i>
@@ -106,13 +111,7 @@ const InfosContent = ({ packageInfos, version, classes, className, style }) => {
 InfosContent.propTypes = {
   packageInfos: PropTypes.object.isRequired,
   version: PropTypes.string.isRequired,
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
-};
-InfosContent.defaultProps = {
-  className: undefined,
-  style: undefined
+  classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(InfosContent);
diff --git a/src/components/Package/NotFound.js b/src/components/Package/NotFound.js
index 3f13f09..33e14f0 100644
--- a/src/components/Package/NotFound.js
+++ b/src/components/Package/NotFound.js
@@ -15,8 +15,8 @@ const styles = {
   }
 };
 
-const NotFound = ({ classes, packageName, className, style }) => (
-  <div className={classNames(classes.root, className)} style={style}>
+const NotFound = ({ classes, packageName, className, ...remainingProps }) => (
+  <div className={classNames(classes.root, className)} {...remainingProps}>
     <h2>Not Found</h2>
     <p>Package &quot;{packageName}&quot; not found</p>
     <p>
@@ -30,12 +30,10 @@ const NotFound = ({ classes, packageName, className, style }) => (
 NotFound.propTypes = {
   packageName: PropTypes.string.isRequired,
   classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
+  className: PropTypes.string
 };
 NotFound.defaultProps = {
-  className: undefined,
-  style: undefined
+  className: undefined
 };
 
 export default withStyles(styles)(NotFound);
diff --git a/src/components/Package/Package.js b/src/components/Package/Package.js
index 6c27cfb..3a194a8 100644
--- a/src/components/Package/Package.js
+++ b/src/components/Package/Package.js
@@ -88,9 +88,9 @@ const Package = ({
   loadRegistryInfos,
   classes,
   className,
-  style
+  ...remainingProps
 }) => (
-  <section className={classNames(classes.root, className)} style={style}>
+  <section className={classNames(classes.root, className)} {...remainingProps}>
     <header className={`${classes.blocks} ${classes.areaHeader}`}>
       <Title
         scope={scope}
@@ -242,16 +242,14 @@ Package.propTypes = {
   loadApiInfos: PropTypes.func.isRequired,
   loadRegistryInfos: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
+  className: PropTypes.string
 };
 Package.defaultProps = {
   scope: undefined,
   version: undefined,
   packageInfos: undefined,
   downloads: undefined,
-  className: undefined,
-  style: undefined
+  className: undefined
 };
 
 export default withStyles(styles)(Package);
diff --git a/src/components/Package/PackageJsonTab.js b/src/components/Package/PackageJsonTab.js
index 4b6b1aa..2e1e1c5 100644
--- a/src/components/Package/PackageJsonTab.js
+++ b/src/components/Package/PackageJsonTab.js
@@ -33,7 +33,7 @@ const styles = theme => ({
   }
 });
 
-const PackageJson = ({ value, classes, className, style }) => {
+const PackageJson = ({ value, classes, className, ...remainingProps }) => {
   const { version } = value;
   const formattedValue = JSON.stringify(
     value,
@@ -42,7 +42,7 @@ const PackageJson = ({ value, classes, className, style }) => {
     "  "
   );
   return (
-    <div className={classNames(classes.root, className)} style={style}>
+    <div className={classNames(classes.root, className)} {...remainingProps}>
       <ExpansionPanel>
         <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
           <Typography className={classes.heading}>
@@ -63,12 +63,10 @@ const PackageJson = ({ value, classes, className, style }) => {
 PackageJson.propTypes = {
   value: PropTypes.object.isRequired,
   classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
+  className: PropTypes.string
 };
 PackageJson.defaultProps = {
-  className: undefined,
-  style: undefined
+  className: undefined
 };
 
 export default withStyles(styles)(PackageJson);
diff --git a/src/components/Package/Readme.js b/src/components/Package/Readme.js
index 328cf36..1f10255 100644
--- a/src/components/Package/Readme.js
+++ b/src/components/Package/Readme.js
@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "material-ui/styles";
+import classNames from "classnames";
 
 import Markdown from "../Markdown";
 
@@ -45,22 +46,31 @@ const styles = theme => ({
   }
 });
 
-const Readme = ({ classes, source, repository }) => (
+const Readme = ({
+  classes,
+  source,
+  repository,
+  className,
+  ...remainingProps
+}) => (
   <Markdown
     source={source}
     repository={repository}
-    className={`Readme-markdown__root ${classes.markdown}`}
+    className={classNames("Readme-markdown__root", classes.markdown, className)}
+    {...remainingProps}
   />
 );
 
 Readme.propTypes = {
   classes: PropTypes.object.isRequired,
   source: PropTypes.string,
-  repository: PropTypes.object
+  repository: PropTypes.object,
+  className: PropTypes.string
 };
 Readme.defaultProps = {
   source: "",
-  repository: {}
+  repository: {},
+  className: undefined
 };
 
 export default withStyles(styles)(Readme);
diff --git a/src/components/Package/StatsContents.js b/src/components/Package/StatsContents.js
index c4de330..93b0fcb 100644
--- a/src/components/Package/StatsContents.js
+++ b/src/components/Package/StatsContents.js
@@ -18,8 +18,6 @@ const styles = {
 class StatsContents extends Component {
   static propTypes = {
     downloads: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    style: PropTypes.object,
     classes: PropTypes.object.isRequired,
     theme: PropTypes.object.isRequired
   };
@@ -54,11 +52,16 @@ class StatsContents extends Component {
   }
   render() {
     const data = yearDownloadsToWeaks(this.props.downloads.downloads);
-    const { className, style, theme, classes } = this.props;
+    const {
+      theme,
+      classes,
+      downloads: _omitDownloads, // remove this from props to prevent form flowing down
+      ...remainingProps
+    } = this.props;
     const { from, to, downloads } = this.state;
     const lastWeekDownloadsCount = data[data.length - 1].value;
     return (
-      <div className={className} style={style}>
+      <div {...remainingProps}>
         <div className={classes.root}>
           <Typography variant="subheading" className={classes.label}>
             {downloads
diff --git a/src/components/Package/VersionsTab.js b/src/components/Package/VersionsTab.js
index 6b8b558..84bc2e4 100644
--- a/src/components/Package/VersionsTab.js
+++ b/src/components/Package/VersionsTab.js
@@ -70,13 +70,12 @@ const VersionsTab = ({
   version: currentVersion,
   packageInfos,
   classes,
-  className,
-  style
+  ...remainingProps
 }) => {
   const distTags = Object.entries(packageInfos["dist-tags"]);
   const versions = Object.keys(packageInfos.versions).reverse();
   return (
-    <div className={className} style={style}>
+    <div {...remainingProps}>
       <ExpansionPanel>
         <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
           <Typography className={classes.heading}>
@@ -150,14 +149,10 @@ VersionsTab.propTypes = {
   name: PropTypes.string.isRequired,
   version: PropTypes.string.isRequired,
   packageInfos: PropTypes.object.isRequired,
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
+  classes: PropTypes.object.isRequired
 };
 VersionsTab.defaultProps = {
-  scope: undefined,
-  className: undefined,
-  style: undefined
+  scope: undefined
 };
 
 export default withStyles(styles)(VersionsTab);
diff --git a/src/components/Package/__tests__/NotFound.spec.js b/src/components/Package/__tests__/NotFound.spec.js
index f05b118..1e01c2f 100644
--- a/src/components/Package/__tests__/NotFound.spec.js
+++ b/src/components/Package/__tests__/NotFound.spec.js
@@ -5,7 +5,7 @@ import NotFound from "../NotFound";
 
 describe("/components/NotFound", () => {
   describe("render", () => {
-    it("should pass down className and style", () => {
+    it("should pass down remainingProps", () => {
       const { container } = render(
         <NotFound
           packageName="foo"
diff --git a/src/components/RetryButton.js b/src/components/RetryButton.js
index 49d7a85..1eb769d 100644
--- a/src/components/RetryButton.js
+++ b/src/components/RetryButton.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import classNames from "classnames";
 
 import { withStyles } from "material-ui/styles";
 import Button from "material-ui/Button";
@@ -17,8 +18,8 @@ const styles = theme => ({
   }
 });
 
-const RetryButton = ({ onClick, classes }) => (
-  <div className={classes.root}>
+const RetryButton = ({ onClick, classes, className, ...remainingProps }) => (
+  <div className={classNames(classes.root, className)} {...remainingProps}>
     <Button variant="raised" color="primary" onClick={onClick}>
       <RefreshIcon /> Retry
     </Button>
@@ -27,7 +28,11 @@ const RetryButton = ({ onClick, classes }) => (
 
 RetryButton.propTypes = {
   onClick: PropTypes.func.isRequired,
-  classes: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string
+};
+RetryButton.defaultProps = {
+  className: undefined
 };
 
 export default withStyles(styles)(RetryButton);
diff --git a/src/components/SearchResults/SearchResultItem.js b/src/components/SearchResults/SearchResultItem.js
index e32aba5..abe8545 100644
--- a/src/components/SearchResults/SearchResultItem.js
+++ b/src/components/SearchResults/SearchResultItem.js
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 import { withStyles } from "material-ui/styles";
 import relativeDate from "relative-date";
+import classNames from "classnames";
 
 import KeywordsList from "../KeywordsList";
 import Gravatar from "../Gravatar";
@@ -41,8 +42,13 @@ const styles = {
   }
 };
 
-const SearchResultItem = ({ package: packageInfos, classes }) => (
-  <div className={classes.root}>
+const SearchResultItem = ({
+  package: packageInfos,
+  classes,
+  className,
+  ...remainingProps
+}) => (
+  <div className={classNames(classes.root, className)} {...remainingProps}>
     <span>
       <div className={classes.heading}>
         <Link
@@ -80,7 +86,11 @@ const SearchResultItem = ({ package: packageInfos, classes }) => (
 
 SearchResultItem.propTypes = {
   classes: PropTypes.object.isRequired,
-  package: PropTypes.object.isRequired
+  package: PropTypes.object.isRequired,
+  className: PropTypes.string
+};
+SearchResultItem.defaultProps = {
+  className: undefined
 };
 
 export default withStyles(styles)(SearchResultItem);
diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js
index d0e6c27..7aef9c7 100644
--- a/src/components/SearchResults/SearchResults.js
+++ b/src/components/SearchResults/SearchResults.js
@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
 
 import SearchResultItem from "./SearchResultItem";
 
-const SearchResults = ({ results, total, ...props }) => (
-  <div {...props}>
+const SearchResults = ({ results, total, ...remainingProps }) => (
+  <div {...remainingProps}>
     {results.map(result => (
-      <SearchResultItem key={result.package.name} {...result} />
+      <SearchResultItem key={result.package.name} package={result.package} />
     ))}
     {results.length === 0 && (
       <div style={{ textAlign: "center" }}>No Results</div>
diff --git a/src/components/Sparkline.js b/src/components/Sparkline.js
index d97150d..22e20a7 100644
--- a/src/components/Sparkline.js
+++ b/src/components/Sparkline.js
@@ -21,18 +21,14 @@ export default class Sparkline extends Component {
     height: PropTypes.number.isRequired,
     strokeWidth: PropTypes.number.isRequired,
     onMouseMove: PropTypes.func,
-    onMouseOut: PropTypes.func,
-    className: PropTypes.string,
-    style: PropTypes.object
+    onMouseOut: PropTypes.func
   };
   static defaultProps = {
     width: 100,
     height: 30,
     strokeWidth: 3,
     onMouseMove: undefined,
-    onMouseOut: undefined,
-    className: undefined,
-    style: undefined
+    onMouseOut: undefined
   };
   componentDidMount() {
     this.init(); // only init on mount
@@ -52,8 +48,6 @@ export default class Sparkline extends Component {
       width,
       height,
       strokeWidth,
-      className,
-      style,
       ...remainingProps
     } = this.props;
     return (
@@ -61,8 +55,6 @@ export default class Sparkline extends Component {
         ref={node => {
           this.node = node;
         }}
-        className={className}
-        style={style}
         width={width}
         height={height}
         strokeWidth={strokeWidth}
diff --git a/src/components/TwitterButton.js b/src/components/TwitterButton.js
index 34891bc..8d2ee55 100644
--- a/src/components/TwitterButton.js
+++ b/src/components/TwitterButton.js
@@ -28,8 +28,8 @@ const TwitterButton = props => {
     via,
     related,
     buttonTitle,
-    className,
-    style
+    style,
+    ...remainingProps
   } = props;
   const params = [
     `size=${size}`,
@@ -63,8 +63,8 @@ const TwitterButton = props => {
       title={buttonTitle}
       style={mergedStyles}
       scrolling="no"
-      className={className}
       src={`https://platform.twitter.com/widgets/tweet_button.html?${params}`}
+      {...remainingProps}
     />
   );
 };
diff --git a/src/components/__tests__/CodeBlock.spec.js b/src/components/__tests__/CodeBlock.spec.js
index 330c565..c30d838 100644
--- a/src/components/__tests__/CodeBlock.spec.js
+++ b/src/components/__tests__/CodeBlock.spec.js
@@ -5,12 +5,20 @@ import CodeBlock from "../CodeBlock";
 
 describe("/components/CodeBlock", () => {
   describe("render", () => {
-    it("should pass down className and style", () => {
+    it("should pass down remaining props", () => {
       const { container } = render(
-        <CodeBlock value="" className="hello-world" style={{ color: "red" }} />
+        <CodeBlock
+          value=""
+          className="hello-world"
+          style={{ color: "red" }}
+          data-infos="Hello world"
+        />
       );
       expect(container.firstChild).toHaveClass("hello-world");
       expect(container.firstChild.style.color).toBe("red");
+      expect(container.firstChild.getAttribute("data-infos")).toBe(
+        "Hello world"
+      );
     });
     it("should set className on <code> element according to props.language", () => {
       const { container } = render(<CodeBlock value="" language="js" />);
diff --git a/src/components/__tests__/Footer.spec.js b/src/components/__tests__/Footer.spec.js
index d2bd1a4..26ea457 100644
--- a/src/components/__tests__/Footer.spec.js
+++ b/src/components/__tests__/Footer.spec.js
@@ -5,17 +5,21 @@ import Footer from "../Footer";
 
 describe("/components/Footer", () => {
   describe("render", () => {
-    it("should pass down className and style", () => {
+    it("should pass down remainingProps", () => {
       const { container } = render(
         <Footer
           fromFullYear={2018}
           toFullYear={2018}
           className="hello-world"
           style={{ color: "red" }}
+          data-infos="Hello world"
         />
       );
       expect(container.firstChild).toHaveClass("hello-world");
       expect(container.firstChild.style.color).toBe("red");
+      expect(container.firstChild.getAttribute("data-infos")).toBe(
+        "Hello world"
+      );
     });
   });
 });
diff --git a/src/components/__tests__/Gravatar.spec.js b/src/components/__tests__/Gravatar.spec.js
index ce19461..d03b902 100644
--- a/src/components/__tests__/Gravatar.spec.js
+++ b/src/components/__tests__/Gravatar.spec.js
@@ -5,16 +5,20 @@ import Gravatar from "../Gravatar";
 
 describe("/components/Footer", () => {
   describe("render", () => {
-    it("should pass down className and style", () => {
+    it("should pass down remainingProps", () => {
       const { container } = render(
         <Gravatar
           email="tophe@topheman.com"
           className="hello-world"
           style={{ color: "red" }}
+          data-infos="Hello world"
         />
       );
       expect(container.firstChild).toHaveClass("hello-world");
       expect(container.firstChild.style.color).toBe("red");
+      expect(container.firstChild.getAttribute("data-infos")).toBe(
+        "Hello world"
+      );
     });
     it("should render the correct img according to email", () => {
       const { getByAltText } = render(
diff --git a/src/components/__tests__/Header.spec.js b/src/components/__tests__/Header.spec.js
index 2dda2fb..de2492a 100644
--- a/src/components/__tests__/Header.spec.js
+++ b/src/components/__tests__/Header.spec.js
@@ -5,12 +5,19 @@ import Header from "../Header";
 
 describe("/components/Header", () => {
   describe("render", () => {
-    it("should pass down className and style", () => {
+    it("should pass down remainingProps", () => {
       const { container } = renderWithRouter(
-        <Header className="hello-world" style={{ color: "red" }} />
+        <Header
+          className="hello-world"
+          style={{ color: "red" }}
+          data-infos="Hello world"
+        />
       );
       expect(container.firstChild).toHaveClass("hello-world");
       expect(container.firstChild.style.color).toBe("red");
+      expect(container.firstChild.getAttribute("data-infos")).toBe(
+        "Hello world"
+      );
     });
   });
 });
diff --git a/src/components/__tests__/KeywordsList.spec.js b/src/components/__tests__/KeywordsList.spec.js
index 2c88f78..48cd85f 100644
--- a/src/components/__tests__/KeywordsList.spec.js
+++ b/src/components/__tests__/KeywordsList.spec.js
@@ -5,16 +5,20 @@ import KeywordsList from "../KeywordsList";
 
 describe("/components/KeywordsList", () => {
   describe("render", () => {
-    it("should pass down className and style", () => {
+    it("should pass down remainingProps", () => {
       const { container } = renderWithRouter(
         <KeywordsList
           keywords={["foo", "bar"]}
           className="hello-world"
           style={{ color: "red" }}
+          data-infos="Hello world"
         />
       );
       expect(container.firstChild).toHaveClass("hello-world");
       expect(container.firstChild.style.color).toBe("red");
+      expect(container.firstChild.getAttribute("data-infos")).toBe(
+        "Hello world"
+      );
     });
     // @todo test links to keywords
   });
diff --git a/src/components/__tests__/TwitterButton.spec.js b/src/components/__tests__/TwitterButton.spec.js
index 68064bc..30066ed 100644
--- a/src/components/__tests__/TwitterButton.spec.js
+++ b/src/components/__tests__/TwitterButton.spec.js
@@ -35,12 +35,17 @@ describe("/components/TwitterButton", () => {
       );
       expect(toJSON(wrapper)).toMatchSnapshot();
     });
-    it("should pass down className and style", () => {
+    it("should pass down remainingProps", () => {
       const wrapper = mount(
-        <TwitterButton className="hello-world" style={{ color: "red" }} />
+        <TwitterButton
+          className="hello-world"
+          style={{ color: "red" }}
+          data-infos="Hello world"
+        />
       );
       expect(wrapper.find("iframe").prop("className")).toContain("hello-world");
       expect(wrapper.find("iframe").prop("style").color).toBe("red");
+      expect(wrapper.find("iframe").prop("data-infos")).toBe("Hello world");
     });
   });
 });