);
@@ -42,13 +85,25 @@ const ListItem = ({
ListItem.displayName = 'List.Item';
ListItem.propTypes = {
+ /** Set to true if list item is a button that will trigger an action */
+ action: PropTypes.bool,
+ /** Props to pass to the action button */
+ buttonProps: PropTypes.object,
/** Node(s) to render within the component */
children: PropTypes.node,
/** CSS class(es) to add to the element */
className: PropTypes.string,
- /** Set to **true** to set state of the list item to "selected". */
+ /** Internal use only */
+ hasByline: PropTypes.bool,
+ /** Internal use only */
+ navigation: PropTypes.bool,
+ /** Interal use only */
+ partialNavigation: PropTypes.bool,
+ /** Set to **true** if list item is currently selected (only supported for links) */
selected: PropTypes.bool,
- /** Callback function when user clicks on the component*/
+ /** URL to navigate to if list item is a link */
+ url: PropTypes.string,
+ /** Callback function when user clicks on the component (not supported for links) */
onClick: PropTypes.func
};
diff --git a/src/List/_ListSelection.js b/src/List/_ListSelection.js
new file mode 100644
index 000000000..2d1c29d24
--- /dev/null
+++ b/src/List/_ListSelection.js
@@ -0,0 +1,40 @@
+import Checkbox from '../Forms/Checkbox';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const ListSelection = ({
+ className,
+ children,
+ onChange,
+ ...props
+}) => {
+
+ const ListSelectionClasses = classnames(
+ 'fd-form-item',
+ 'fd-list__form-item',
+ className
+ );
+
+ return (
+ <>
+
+
+
+ {children}
+
+ );
+};
+
+ListSelection.displayName = 'List.Selection';
+
+ListSelection.propTypes = {
+ /** Node(s) to render within the component */
+ children: PropTypes.node,
+ /** CSS class(es) to add to the element */
+ className: PropTypes.string,
+ /** Callback function when the change event fires on the Checkbox component */
+ onChange: PropTypes.func
+};
+
+export default ListSelection;
diff --git a/src/List/_ListText.js b/src/List/_ListText.js
index 8c6eedacf..7bf4bca9b 100644
--- a/src/List/_ListText.js
+++ b/src/List/_ListText.js
@@ -3,19 +3,27 @@ import PropTypes from 'prop-types';
import React from 'react';
const ListText = ({
- className,
children,
+ className,
+ left,
noWrap,
+ right,
secondary,
...props
}) => {
- const type = secondary ? 'secondary' : 'title';
+ let type = 'title';
+
+ if (secondary) {
+ type = 'secondary';
+ }
const listTextClasses = classnames(
- [`fd-list__${type}`],
{
- [`fd-list__${type}--no-wrap`]: noWrap
+ [`fd-list__${type}`]: !left && !right,
+ [`fd-list__${type}--no-wrap`]: noWrap,
+ 'fd-list__byline-left': left,
+ 'fd-list__byline-right': right
},
className
);
@@ -35,8 +43,12 @@ ListText.propTypes = {
children: PropTypes.node,
/** CSS class(es) to add to the element */
className: PropTypes.string,
+ /** Set to **true** if there are two bylines to left align the text. */
+ left: PropTypes.bool,
/** Text is wrapped by default, set to **true** to prevent the text from wrapping */
noWrap: PropTypes.bool,
+ /** Set to **true** if there are two bylines to right align the text. */
+ right: PropTypes.bool,
/** Set to **true** to right align the text in the list */
secondary: PropTypes.bool
};
diff --git a/src/List/__stories__/List.stories.js b/src/List/__stories__/List.stories.js
index c40abcf3a..3ad6f4ff4 100644
--- a/src/List/__stories__/List.stories.js
+++ b/src/List/__stories__/List.stories.js
@@ -189,6 +189,116 @@ export const dev = () => (
);
+export const byline = () => (
+
+ List Header
+
+ List Item 1
+ Byline
+
+
+ List Item 2
+ Byline
+
+
+ List Item 3
+ Byline
+
+
+ List Item 4
+
+ Left byline
+ Right byline
+
+
+ List Footer
+
+);
+
+export const selection = () => (
+
+ List Header
+
+
+ List Item 1
+
+
+
+
+ List Item 2
+
+
+
+
+ List Item 3
+
+
+
+
+ List Item 4
+
+
+ List Footer
+
+);
+
+export const partialNavigation = () => (
+
+ List Header
+
+ List Item 1
+
+
+ List Item 2
+
+
+ List Item 3
+
+
+ List Item 4
+
+ List Footer
+
+);
+
+export const navigationList = () => (
+
+ List Header
+
+ List Item 1
+
+
+ List Item 2
+
+
+ List Item 3
+
+
+ List Item 4
+
+ List Footer
+
+);
+
+export const actionList = () => (
+
+ List Header
+
+ List Item 1
+
+
+ List Item 2
+
+
+ List Item 3
+
+
+ List Item 4
+
+ List Footer
+
+);
+
dev.story = {
parameters: { docs: { disable: true } }
};
diff --git a/src/List/__stories__/__snapshots__/List.visual.storyshot b/src/List/__stories__/__snapshots__/List.visual.storyshot
index ff8873daa..4b3d4d8df 100644
--- a/src/List/__stories__/__snapshots__/List.visual.storyshot
+++ b/src/List/__stories__/__snapshots__/List.visual.storyshot
@@ -9,10 +9,8 @@ exports[`Storyshots Visual List 1`] = `
className="fd-list"
>