Show bigger avatar when twoLine prop active for List component and add Bordered prop

recipes/src/components/List/List.stories.tsx

@@ -60,6 +60,7 @@ WithMetaIconsAndGraphic.args = {
 export const WithImgAsGraphic = Template.bind({});
 WithImgAsGraphic.args = {
   avatarList: true,
+  twoLine: true,
   items: items.map(item => ({
     ...item,
     img: SAMPLE

recipes/src/components/List/index.tsx

@@ -19,28 +19,32 @@ export interface ListProps extends RMWCListProps {
   items: Item[],
   className?: string,
   listItemClassName?: string,
-  style?: CSSProperties
+  style?: CSSProperties,
+  bordered?: boolean,
 }
 
 const AvatarGraphic: FunctionComponent<{
   img?: string,
 }> = ({ img }) => (
-  <div style={{
-    width: 48,
-    height: 24,
-    backgroundImage: `url(${img || SAMPLE})`,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center'
-  }}></div>
+  <div 
+    className="cbk-list__item__avatar"
+    style={{
+      backgroundImage: `url(${img || SAMPLE})`
+    }}
+  ></div>
 );
 
-export const List: FunctionComponent<ListProps> = ({ items, className, listItemClassName, avatarList, ...props }) => {
+export const List: FunctionComponent<ListProps> = ({ items, className, listItemClassName, avatarList, bordered, ...props }) => {
   return (
     <RMWCList
       {...props}
       avatarList={avatarList}
-      twoLine={items.some(item => item.secondaryText)}
-      className={cx('cbk-list', className)}
+      twoLine={items.some(item => item.secondaryText) || props.twoLine}
+      className={cx(
+        'cbk-list',
+        {'cbk-list--bordered': bordered},
+        className
+      )}
     >
       {
         items.map(({img, ...item}, i) => {

recipes/src/components/List/styles.scss

@@ -1,6 +1,11 @@
 @import 'styles/_variables.scss';
 
 .cbk-list.mdc-list {
+  &.cbk-list--bordered {
+    .cbk-list__item:not(:last-child) {
+      border-bottom: 1px solid $grey-300;
+    }
+  }
   .mdc-list-item {
     font-family: $font-family-text;
     font-weight: 400;
@@ -17,6 +22,18 @@
     &__secondary-text {
       font-style: italic;
     }
-    
+    .cbk-list__item__avatar {
+      width: 48px;
+      height: 24px;
+      background-size: cover;
+      background-position: center;
+    }
+  }
+  &.mdc-list--two-line.mdc-list--avatar-list {
+    .mdc-list-item__graphic, 
+    .cbk-list__item__avatar {
+      width: 60px;
+      height: 40px;
+    }
   }
 }