Create new List component

recipes/package.json

@@ -10,7 +10,7 @@
     "@rmwc/grid": "^6.0.14",
     "@rmwc/icon": "^6.0.14",
     "@rmwc/icon-button": "^6.0.14",
-    "@rmwc/list": "^6.0.14",
+    "@rmwc/list": "^6.1.3",
     "@rmwc/top-app-bar": "^6.0.14",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^24.0.15",

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import List, { ListProps } from './index';
+import { ListOnActionEventT } from '@rmwc/list';
+
+const items = new Array(10).fill({}).map((_, i) => ({
+  text: `list item ${i}`,
+  secondaryText: `this is a secondary text for list item ${i}`
+}));
+
+export default {
+  title: 'Components/List',
+  component: List,
+  argTypes: { onAction: {action: 'clicked'} },
+  args: {
+    items,
+    dense: false,
+    nonInteractive: false,
+    onAction: (e: ListOnActionEventT) => console.log(`clicked: ${e.detail.index}`)
+  }
+} as Meta;
+
+const Template: Story<ListProps> = (args) => <List {...args}/>
+
+export const BasicList = Template.bind({});
+
+export const SingleLine = Template.bind({});
+SingleLine.args = {
+  items: items.map(i => ({text: i.text}))
+}
+
+export const DisabledAndSelectedItems = Template.bind({});
+DisabledAndSelectedItems.args = {
+  items: [
+    {
+      ...items[0],
+      selected: true,
+      text: 'This item is selected'
+    },
+    {
+      ...items[1],
+      disabled: true,
+      text: 'This item is disabled'
+    },
+    ...items.slice(2)
+  ]
+}
+
+export const WithMetaIconsAndGraphic = Template.bind({});
+WithMetaIconsAndGraphic.args = {
+  items: items.map(item => ({
+    ...item,
+    graphic: 'star_border',
+    metaIcon: 'info'
+  }))
+}
+
+

recipes/src/components/List2/index.tsx

@@ -0,0 +1,39 @@
+import React, { FunctionComponent } from 'react';
+import cx from 'classnames';
+import {
+  List as RMWCList,
+  ListProps as RMWCListProps,
+  SimpleListItem,
+  SimpleListItemProps as ListItemProps
+} from '@rmwc/list';
+
+import '@rmwc/list/styles';
+import './styles.scss';
+
+export interface ListProps extends RMWCListProps {
+  items: ListItemProps[],
+  className?: string,
+  listItemClassName?: string
+}
+
+export const List: FunctionComponent<ListProps> = ({ items, ...props }) => {
+  return (
+    <RMWCList
+      twoLine={items.some(item => item.secondaryText)}
+      className={cx(props.className, 'cbk-list')}
+      {...props}
+    >
+      {
+        items.map((item, i) => (
+          <SimpleListItem
+            key={i}
+            className={cx(props.listItemClassName, 'cbk-list__item')}
+            { ...item }
+          />
+        ))
+      }
+    </RMWCList>
+  )
+};
+
+export default List;

recipes/src/components/List2/styles.scss

@@ -0,0 +1,22 @@
+@import 'styles/_variables.scss';
+
+.cbk-list.mdc-list {
+  .mdc-list-item {
+    font-family: $font-family-text;
+    font-weight: 400;
+    
+    &--selected,
+    &--activated {
+      background-color: $yellow;
+      color: $black;
+    }
+    
+    &__primary-text {
+      font-weight: 600;
+    }
+    &__secondary-text {
+      font-style: italic;
+    }
+    
+  }
+}

recipes/src/styles/app.scss

@@ -108,6 +108,10 @@
   -webkit-font-smoothing: antialiased;
 }
 
+:root {
+  --mdc-theme-primary: #eec71a;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -128,7 +132,6 @@ ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
-
 }
 
 h1 {