feat(ArticleCard): refactor props

carbon-design-system · May 16, 2019 · 81861fa · 81861fa
1 parent c5d302a
commit 81861fa
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/example/src/pages/components/ArticleCard.mdx b/packages/example/src/pages/components/ArticleCard.mdx
@@ -51,7 +51,7 @@ import { Row, Column, ArticleCard, PageDescription } from 'gatsby-theme-carbon';
       author="Josh Black"
       date="April 29, 2019"
       readTime="Read time: 5 min"
-      dark
+      color="dark"
       href="https://www.ibm.com"
       >
 
@@ -65,7 +65,7 @@ import { Row, Column, ArticleCard, PageDescription } from 'gatsby-theme-carbon';
       author="Josh Black"
       date="April 29, 2019"
       readTime="Read time: 5 min"
-      dark
+      color="dark"
       href="https://www.ibm.com"
       actionIcon="arrowRight"
       >
@@ -80,7 +80,7 @@ import { Row, Column, ArticleCard, PageDescription } from 'gatsby-theme-carbon';
       author="Josh Black"
       date="April 29, 2019"
       readTime="Read time: 5 min"
-      dark
+      color="dark"
       disabled
       >
 

diff --git a/packages/gatsby-theme-carbon/src/components/ArticleCard/ArticleCard.js b/packages/gatsby-theme-carbon/src/components/ArticleCard/ArticleCard.js
@@ -45,9 +45,9 @@ export default class ArticleCard extends React.Component {
     actionIcon: PropTypes.string,
 
     /**
-     * Use for dark card
+     * set to "dark" for dark background card
      */
-    dark: PropTypes.bool,
+    color: PropTypes.string,
 
     /**
      * Use for disabled card
@@ -61,7 +61,7 @@ export default class ArticleCard extends React.Component {
   };
 
   static defaultProps = {
-    dark: false,
+    color: 'light',
     disabled: false,
     actionIcon: '',
   };
@@ -74,7 +74,7 @@ export default class ArticleCard extends React.Component {
       author,
       date,
       readTime,
-      dark,
+      color,
       disabled,
       actionIcon,
       className,
@@ -88,7 +88,7 @@ export default class ArticleCard extends React.Component {
     const ArticleCardClassNames = classnames([`${prefix}--article-card`], {
       [className]: className,
       [`${prefix}--article-card--disabled`]: disabled,
-      [`${prefix}--article-card--dark`]: dark,
+      [`${prefix}--article-card--dark`]: color === 'dark',
     });
 
     const aspectRatioClassNames = classnames(