diff --git a/src/components/StructuredList/StructuredList-story.js b/src/components/StructuredList/StructuredList-story.js
index 4dc6f253a9f2..99cc231d05c3 100644
--- a/src/components/StructuredList/StructuredList-story.js
+++ b/src/components/StructuredList/StructuredList-story.js
@@ -1,6 +1,5 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
-
import { iconCheckmarkSolid } from 'carbon-icons';
import Icon from '../Icon';
import {
@@ -12,6 +11,7 @@ import {
StructuredListCell,
} from '../StructuredList';
import StructuredListSkeleton from '../StructuredList/StructuredList.Skeleton';
+import { componentsX } from '../../internal/FeatureFlags';
storiesOf('StructuredList', module)
.add(
@@ -59,47 +59,24 @@ storiesOf('StructuredList', module)
)
.add(
'Selection',
- () => (
-
-
-
- {''}
- ColumnA
- ColumnB
- ColumnC
-
-
-
-
-
-
-
-
- Row 1
- Row 1
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
- magna, finibus id tortor sed, aliquet bibendum augue. Aenean
- posuere sem vel euismod dignissim. Nulla ut cursus dolor.
- Pellentesque vulputate nisl a porttitor interdum.
-
-
-
+ () => {
+ const emptyStructuredListHeadCell = (
+ {''}
+ );
+ const structuredListHeadColumns = [
+ ColumnA,
+ ColumnB,
+ ColumnC,
+ ];
+ const structuredListBodyRowGenerator = numRows => {
+ const checkbox = i => (
+ <>
- Row 2
- Row 2
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
- magna, finibus id tortor sed, aliquet bibendum augue. Aenean
- posuere sem vel euismod dignissim. Nulla ut cursus dolor.
- Pellentesque vulputate nisl a porttitor interdum.
-
+ >
+ );
+ const structuredListBodyColumns = i => [
+ Row {i},
+ Row {i},
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+ magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+ sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+ vulputate nisl a porttitor interdum.
+ ,
+ ];
+ return Array.apply(null, Array(numRows)).map((n, i) => (
+
+ {componentsX
+ ? [...structuredListBodyColumns(i), checkbox(i)]
+ : [checkbox(i), ...structuredListBodyColumns(i)]}
-
-
- ),
+ ));
+ };
+ return (
+
+
+
+ {componentsX
+ ? [...structuredListHeadColumns, emptyStructuredListHeadCell]
+ : [emptyStructuredListHeadCell, ...structuredListHeadColumns]}
+
+
+
+ {structuredListBodyRowGenerator(4)}
+
+
+ );
+ },
{
info: {
text: `
- Structured Lists with selection allow a row of list content to be selected.
- `,
+ Structured Lists with selection allow a row of list content to be selected.
+ `,
},
}
)