Revamp core components storybook doc(pt. 4)

packages/core/src/List.js

@@ -58,7 +58,7 @@ function List({
 }
 
 List.propTypes = {
-    variant: PropTypes.oneOf(Object.values(LIST_VARIANTS)),
+    variant: PropTypes.oneOf(LIST_VARIANTS),
     /** `<Section>` prop */
     title: PropTypes.string,
     /** `<Section>` prop */

packages/core/src/SearchInput.js

@@ -25,7 +25,7 @@ export const BEM = {
 class SearchInput extends Component {
     static propTypes = {
         /**
-         * Use `inputProps` to inject props to the underlying <input>
+         * Use this to inject props to the underlying `<input>`.
          */
         inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
         placeholder: PropTypes.string,

packages/core/src/mixins/__tests__/closable.test.js

@@ -85,7 +85,7 @@ it('intercepts event propagation if instructed', () => {
             <ClosableFoo closable={{ stopEventPropagation: true }} />
         </div>
     );
-    wrapper.find('div#foo').simulate('click');
+    wrapper.find('div.gyp-closable').simulate('click');
     expect(handleClick).not.toHaveBeenCalled();
 
     wrapper = mount(
@@ -94,7 +94,7 @@ it('intercepts event propagation if instructed', () => {
         </div>
     );
 
-    wrapper.find('div#foo').simulate('click');
+    wrapper.find('div.gyp-closable').simulate('click');
     expect(handleClick).toHaveBeenCalled();
 });
 

packages/core/src/mixins/closable.js

@@ -131,14 +131,17 @@ const closable = ({
             } = this.props;
 
             return (
-                <div
-                    role="presentation"
-                    className={ROOT_BEM.toString()}
-                    onClick={this.handleOuterLayerClick}>
+                <>
+                    <div
+                        role="presentation"
+                        className={ROOT_BEM.toString()}
+                        onClick={this.handleOuterLayerClick}
+                    />
                     <WrappedComponent
                         onInsideClick={this.handleInsideClick}
-                        {...otherProps} />
-                </div>
+                        {...otherProps}
+                    />
+                </>
             );
         }
     }

packages/storybook/examples/core/List.stories.js

@@ -0,0 +1,138 @@
+import React from 'react';
+
+import List from '@ichef/gypcrete/src/List';
+import ListRow from '@ichef/gypcrete/src/ListRow';
+
+import Avatar from '@ichef/gypcrete/src/Avatar';
+import Button from '@ichef/gypcrete/src/Button';
+import Icon from '@ichef/gypcrete/src/Icon';
+import IconButton from '@ichef/gypcrete/src/IconButton';
+import Section from '@ichef/gypcrete/src/Section';
+import TextInput from '@ichef/gypcrete/src/TextInput';
+import TextLabel from '@ichef/gypcrete/src/TextLabel';
+
+import DebugBox from 'utils/DebugBox';
+
+export default {
+    title: '@ichef/gypcrete|List',
+    component: List,
+    subcomponents: { ListRow, Section },
+};
+
+export function NormalList() {
+    return (
+        <DebugBox width="30rem">
+            <List variant="normal" title="List title" desc="Help text here">
+                <ListRow>
+                    <Avatar alt="iCHEF" src="https://api.adorable.io/avatars/285/hello@ichef.tw" />
+                    <TextLabel basic="Hello World" />
+                </ListRow>
+
+                <ListRow>
+                    <TextLabel icon="tickets" basic="Hello World" />
+                </ListRow>
+
+                <ListRow
+                    desc="Row help message"
+                    status="error"
+                    errorMsg="Row error message">
+                    <TextLabel
+                        bold
+                        icon="tickets"
+                        basic="Hello World"
+                        aside="Component aside"
+                        status={null} />
+                    <IconButton icon="edit" />
+                    <IconButton tinted icon="drag" />
+                </ListRow>
+
+                <ListRow highlight>
+                    <TextLabel
+                        icon="tickets"
+                        basic="Highlighted row"
+                        aside="Component aside" />
+                    <IconButton icon="edit" />
+                    <IconButton tinted icon="drag" />
+                </ListRow>
+                <ListRow>
+                    <TextLabel icon="tickets" basic="Row 3" />
+                    <IconButton icon="edit" />
+                    <IconButton tinted icon="drag" />
+                </ListRow>
+                <ListRow>
+                    <Button
+                        icon="add"
+                        basic="Add row" />
+                </ListRow>
+            </List>
+        </DebugBox>
+    );
+}
+
+export function SettingList() {
+    return (
+        <DebugBox width="30rem">
+            <List variant="setting" title="List title" desc="Help text here">
+                <ListRow>
+                    <TextLabel basic="Hello World" />
+                </ListRow>
+                <ListRow>
+                    <TextLabel basic="Row 2" />
+                    <TextInput value="Value" />
+                    <Icon type="row-padding" />
+                </ListRow>
+                <ListRow>
+                    <Button
+                        icon="add"
+                        basic="Add row" />
+                </ListRow>
+            </List>
+        </DebugBox>
+    );
+}
+
+export function NestedList() {
+    const nestedList2nd = (
+        <List>
+            <ListRow>
+                <TextLabel icon="inventory-item" basic="Nested A" />
+            </ListRow>
+            <ListRow>
+                <TextLabel icon="inventory-item" basic="Nested B" />
+            </ListRow>
+            <ListRow>
+                <TextLabel icon="inventory-item" basic="Nested C" />
+            </ListRow>
+        </List>
+    );
+
+    const nestedList1st = (
+        <List>
+            <ListRow>
+                <TextLabel icon="printer" basic="3rd nested I" />
+            </ListRow>
+            <ListRow nestedList={nestedList2nd}>
+                <TextLabel icon="printer" basic="3rd nested II" />
+            </ListRow>
+            <ListRow>
+                <TextLabel icon="printer" basic="3rd nested III" />
+            </ListRow>
+        </List>
+    );
+
+    return (
+        <DebugBox width="30rem">
+            <List variant="normal" title="List title" desc="Help text here">
+                <ListRow>
+                    <TextLabel icon="tickets" basic="Hello World" />
+                </ListRow>
+                <ListRow nestedList={nestedList1st}>
+                    <TextLabel icon="tickets" basic="Row 2" />
+                </ListRow>
+                <ListRow>
+                    <TextLabel icon="tickets" basic="Row 3" />
+                </ListRow>
+            </List>
+        </DebugBox>
+    );
+}