feat(StructuredList): toggle styles based on experimental feature flag (

carbon-design-system#1528)
joshblack · Nov 12, 2018 · a72bc33 · a72bc33
1 parent f860286
commit a72bc33
Showing 1 changed file with 54 additions and 54 deletions.
diff --git 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',
-    () => (
-      <StructuredListWrapper selection border>
-        <StructuredListHead>
-          <StructuredListRow head>
-            <StructuredListCell head>{''}</StructuredListCell>
-            <StructuredListCell head>ColumnA</StructuredListCell>
-            <StructuredListCell head>ColumnB</StructuredListCell>
-            <StructuredListCell head>ColumnC</StructuredListCell>
-          </StructuredListRow>
-        </StructuredListHead>
-        <StructuredListBody>
-          <StructuredListRow label htmlFor="row-1">
-            <StructuredListInput
-              id="row-1"
-              value="row-1"
-              title="row-1"
-              name="row-1"
-              defaultChecked
-            />
-            <StructuredListCell>
-              <Icon
-                className="bx--structured-list-svg"
-                icon={iconCheckmarkSolid}
-                description="select an option"
-              />
-            </StructuredListCell>
-            <StructuredListCell>Row 1</StructuredListCell>
-            <StructuredListCell>Row 1</StructuredListCell>
-            <StructuredListCell>
-              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.
-            </StructuredListCell>
-          </StructuredListRow>
-          <StructuredListRow label htmlFor="row-2">
+    () => {
+      const emptyStructuredListHeadCell = (
+        <StructuredListCell head>{''}</StructuredListCell>
+      );
+      const structuredListHeadColumns = [
+        <StructuredListCell head>ColumnA</StructuredListCell>,
+        <StructuredListCell head>ColumnB</StructuredListCell>,
+        <StructuredListCell head>ColumnC</StructuredListCell>,
+      ];
+      const structuredListBodyRowGenerator = numRows => {
+        const checkbox = i => (
+          <>
             <StructuredListInput
-              id="row-2"
-              value="row-2"
-              title="row-2"
-              name="row-1"
+              id={`row-${i}`}
+              value={`row-${i}`}
+              title={`row-${i}`}
+              name="row-0"
+              defaultChecked={!i || null}
             />
             <StructuredListCell>
               <Icon
@@ -108,23 +85,46 @@ storiesOf('StructuredList', module)
                 description="select an option"
               />
             </StructuredListCell>
-            <StructuredListCell>Row 2</StructuredListCell>
-            <StructuredListCell>Row 2</StructuredListCell>
-            <StructuredListCell>
-              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.
-            </StructuredListCell>
+          </>
+        );
+        const structuredListBodyColumns = i => [
+          <StructuredListCell>Row {i}</StructuredListCell>,
+          <StructuredListCell>Row {i}</StructuredListCell>,
+          <StructuredListCell>
+            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.
+          </StructuredListCell>,
+        ];
+        return Array.apply(null, Array(numRows)).map((n, i) => (
+          <StructuredListRow label htmlFor={`row-${i}`}>
+            {componentsX
+              ? [...structuredListBodyColumns(i), checkbox(i)]
+              : [checkbox(i), ...structuredListBodyColumns(i)]}
           </StructuredListRow>
-        </StructuredListBody>
-      </StructuredListWrapper>
-    ),
+        ));
+      };
+      return (
+        <StructuredListWrapper selection border>
+          <StructuredListHead>
+            <StructuredListRow head>
+              {componentsX
+                ? [...structuredListHeadColumns, emptyStructuredListHeadCell]
+                : [emptyStructuredListHeadCell, ...structuredListHeadColumns]}
+            </StructuredListRow>
+          </StructuredListHead>
+          <StructuredListBody>
+            {structuredListBodyRowGenerator(4)}
+          </StructuredListBody>
+        </StructuredListWrapper>
+      );
+    },
     {
       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.
+      `,
       },
     }
   )