Merge pull request #311 from iCHEF/feature/list_with_top_area

Add 'topArea' to <List>
iCHEF · Jan 28, 2021 · ace5362 · ace5362
2 parents dd7a5e5 + 3cf49aa
commit ace5362
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
     - `<TextLabel>`
     - `<ListRow>`
 - [Core] Add new icons: `takeout` (#283), `more` (#287)
+- [Core] Add `topArea` prop to `<List>`. (#311)
 
 ## [4.3.0]
 

diff --git a/packages/core/src/List.js b/packages/core/src/List.js
@@ -14,6 +14,7 @@ const ROOT_BEM = icBEM(COMPONENT_NAME);
 export const BEM = {
   root: ROOT_BEM,
   body: ROOT_BEM.element('body'),
+  topArea: ROOT_BEM.element('top-area'),
 };
 
 const NORMAL = 'normal';
@@ -25,6 +26,7 @@ export const TYPE_SYMBOL = Symbol('List');
 
 function List({
   variant,
+  topArea,
   // <Section> props
   title,
   desc,
@@ -52,6 +54,12 @@ function List({
             verticalSpacing={spacing || !!title}
             {...otherProps}
           >
+            {topArea && (
+              <div className={BEM.topArea.toString()}>
+                {topArea}
+              </div>
+            )}
+
             <ul className={BEM.body.toString()}>
               {children}
             </ul>
@@ -64,6 +72,8 @@ function List({
 
 List.propTypes = {
   variant: PropTypes.oneOf(LIST_VARIANTS),
+  topArea: PropTypes.node,
+
   /** `<Section>` prop */
   title: PropTypes.node,
 
@@ -76,6 +86,7 @@ List.propTypes = {
 
 List.defaultProps = {
   variant: NORMAL,
+  topArea: undefined,
   title: undefined,
   desc: undefined,
   titleSize: undefined,

diff --git a/packages/core/src/styles/List.scss b/packages/core/src/styles/List.scss
@@ -11,6 +11,10 @@ $component: #{$prefix}-list;
         margin: 0;
     }
 
+    &__top-area {
+        margin: rem($list-top-area-margin-top) rem($section-horizontal-padding) rem($list-top-area-margin-bottom);
+    }
+
     // --------------------
     //  Variants
     // --------------------

diff --git a/packages/core/src/styles/ListRow.scss b/packages/core/src/styles/ListRow.scss
@@ -74,6 +74,12 @@ $component: #{$prefix}-list-row;
             }
         }
     }
+
+    .#{$prefix}-list__top-area + .#{$prefix}-list__body li:first-of-type &__body {
+        box-shadow:
+            inset 0 1px 0 $c-row-divider,
+            inset 0 -1px 0 $c-row-divider;
+    }
 }
 
 .#{$component} + .#{$component}__nested-list-wrapper {

diff --git a/packages/core/src/styles/_variables.scss b/packages/core/src/styles/_variables.scss
@@ -79,6 +79,9 @@ $section-horizontal-padding: 16px;
 $list-border-radius: 8px;
 $list-nested-indent: 16px;
 
+$list-top-area-margin-top: 8px;
+$list-top-area-margin-bottom: 16px;
+
 $list-row-padding-horizontal: 16px;
 $list-row-padding-vertical: 4px;
 

diff --git a/packages/storybook/examples/core/List.stories.js b/packages/storybook/examples/core/List.stories.js
@@ -210,3 +210,28 @@ export function ListWithLongTextAndTitleRightButton() {
     </List>
   );
 }
+
+export function ListWithTopArea() {
+  const topAreaContent = (
+    <div>
+      Tips: this list has a top area for free content.
+    </div>
+  );
+
+  return (
+    <List
+      title="List with Top Area"
+      topArea={topAreaContent}
+    >
+      <ListRow>
+        <TextLabel basic="Hello World" />
+      </ListRow>
+      <ListRow>
+        <TextLabel basic="Row 2" />
+      </ListRow>
+      <ListRow>
+        <TextLabel basic="Row 3" />
+      </ListRow>
+    </List>
+  );
+}