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. + `, }, } )