From cc8b94e333fb123ccfa25e09b8d6d8f0186080ee Mon Sep 17 00:00:00 2001 From: Heet Vachhani Date: Fri, 4 Mar 2016 17:02:00 -0600 Subject: [PATCH] [Docs][Card]Document card subcomponent porperties Added properties description for card subcomponents. --- src/card/card-actions.jsx | 15 +++++++++++++ src/card/card-header.jsx | 47 +++++++++++++++++++++++++++++++++++++++ src/card/card-media.jsx | 31 ++++++++++++++++++++++++++ src/card/card-text.jsx | 15 +++++++++++++ src/card/card-title.jsx | 39 ++++++++++++++++++++++++++++++++ src/card/card.jsx | 6 ++--- 6 files changed, 150 insertions(+), 3 deletions(-) diff --git a/src/card/card-actions.jsx b/src/card/card-actions.jsx index 000d770c60997d..200c5da9534148 100644 --- a/src/card/card-actions.jsx +++ b/src/card/card-actions.jsx @@ -16,9 +16,24 @@ function getStyles() { const CardActions = React.createClass({ propTypes: { + /** + * If true, a click on this card component expands the card. + */ actAsExpander: React.PropTypes.bool, + + /** + * Can be used to render elements inside the Card Action. + */ children: React.PropTypes.node, + + /** + * If true, this card component is expandable. + */ expandable: React.PropTypes.bool, + + /** + * If true, this card component will include a button to expand the card. + */ showExpandableButton: React.PropTypes.bool, /** diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx index 2572057982e807..6a728ef0aac2d1 100644 --- a/src/card/card-header.jsx +++ b/src/card/card-header.jsx @@ -38,22 +38,69 @@ function getStyles(props, state) { const CardHeader = React.createClass({ propTypes: { + /** + * If true, a click on this card component expands the card. + */ actAsExpander: React.PropTypes.bool, + + /** + * This is the [Avatar](/#/components/avatar) element to be displayed on the Card Header. + */ avatar: React.PropTypes.node, + + /** + * Can be used to render elements inside the Card Header. + */ children: React.PropTypes.node, + + /** + * If true, this card component is expandable. + */ expandable: React.PropTypes.bool, + + /** + * If true, this card component will include a button to expand the card. + */ showExpandableButton: React.PropTypes.bool, /** * Override the inline-styles of the root element. */ style: React.PropTypes.object, + + /** + * Can be used to render a subtitle in Card Header. + */ subtitle: React.PropTypes.node, + + /** + * Override the subtitle color. + */ subtitleColor: React.PropTypes.string, + + /** + * Override the inline-styles of the subtitle. + */ subtitleStyle: React.PropTypes.object, + + /** + * Override the inline-styles of the text. + */ textStyle: React.PropTypes.object, + + /** + * Can be used to render a title in Card Header. + */ title: React.PropTypes.node, + + /** + * Override the title color. + */ titleColor: React.PropTypes.string, + + /** + * Override the inline-styles of the title. + */ titleStyle: React.PropTypes.object, }, diff --git a/src/card/card-media.jsx b/src/card/card-media.jsx index e029c7aaeb7a21..4c70f432083811 100644 --- a/src/card/card-media.jsx +++ b/src/card/card-media.jsx @@ -41,13 +41,44 @@ function getStyles(props, state) { const CardMedia = React.createClass({ propTypes: { + /** + * If true, a click on this card component expands the card. + */ actAsExpander: React.PropTypes.bool, + + /** + * Can be used to render elements inside the Card Media. + */ children: React.PropTypes.node, + + /** + * If true, this card component is expandable. + */ expandable: React.PropTypes.bool, + + /** + * Override the inline-styles of the Card Media. + */ mediaStyle: React.PropTypes.object, + + /** + * Can be used to render overlay element in Card Media. + */ overlay: React.PropTypes.node, + + /** + * Override the inline-styles of the overlay container. + */ overlayContainerStyle: React.PropTypes.object, + + /** + * Override the inline-styles of the overlay content. + */ overlayContentStyle: React.PropTypes.object, + + /** + * Override the inline-styles of the overlay element. + */ overlayStyle: React.PropTypes.object, /** diff --git a/src/card/card-text.jsx b/src/card/card-text.jsx index 631226e3ad5022..9243b4e76e178b 100644 --- a/src/card/card-text.jsx +++ b/src/card/card-text.jsx @@ -18,9 +18,24 @@ function getStyles(props, state) { const CardText = React.createClass({ propTypes: { + /** + * If true, a click on this card component expands the card. + */ actAsExpander: React.PropTypes.bool, + + /** + * Can be used to render elements inside the Card Text. + */ children: React.PropTypes.node, + + /** + * Override the CardText color. + */ color: React.PropTypes.string, + + /** + * If true, this card component is expandable. + */ expandable: React.PropTypes.bool, /** diff --git a/src/card/card-title.jsx b/src/card/card-title.jsx index e48b28f8fa28ba..221dbfa486792a 100644 --- a/src/card/card-title.jsx +++ b/src/card/card-title.jsx @@ -26,20 +26,59 @@ function getStyles(props, state) { const CardTitle = React.createClass({ propTypes: { + /** + * If true, a click on this card component expands the card. + */ actAsExpander: React.PropTypes.bool, + + /** + * Can be used to render elements inside the Card Title. + */ children: React.PropTypes.node, + + /** + * If true, this card component is expandable. + */ expandable: React.PropTypes.bool, + + /** + * If true, this card component will include a button to expand the card. + */ showExpandableButton: React.PropTypes.bool, /** * Override the inline-styles of the root element. */ style: React.PropTypes.object, + + /** + * Can be used to render a subtitle in the Card Title. + */ subtitle: React.PropTypes.node, + + /** + * Override the subtitle color. + */ subtitleColor: React.PropTypes.string, + + /** + * Override the inline-styles of the subtitle. + */ subtitleStyle: React.PropTypes.object, + + /** + * Can be used to render a title in the Card Title. + */ title: React.PropTypes.node, + + /** + * Override the title color. + */ titleColor: React.PropTypes.string, + + /** + * Override the inline-styles of the title. + */ titleStyle: React.PropTypes.object, }, diff --git a/src/card/card.jsx b/src/card/card.jsx index 7fb1b83c6c36e8..27cfa5cd597d29 100644 --- a/src/card/card.jsx +++ b/src/card/card.jsx @@ -6,7 +6,7 @@ const Card = React.createClass({ propTypes: { /** - * Whether a click on this card component expands the card. Can be set on any child of the Card component. + * If true, a click on this card component expands the card. Can be set on any child of the `Card` component. */ actAsExpander: React.PropTypes.bool, @@ -16,7 +16,7 @@ const Card = React.createClass({ children: React.PropTypes.node, /** - * Whether this card component is expandable. Can be set on any child of the Card component. + * If true, this card component is expandable. Can be set on any child of the `Card` component. */ expandable: React.PropTypes.bool, @@ -40,7 +40,7 @@ const Card = React.createClass({ onExpandChange: React.PropTypes.func, /** - * Whether this card component include a button to expand the card. `CardTitle`, + * If true, this card component will include a button to expand the card. `CardTitle`, * `CardHeader` and `CardActions` implement `showExpandableButton`. Any child component * of `Card` can implements `showExpandableButton` or forwards the property to a child * component supporting it.