feat(list): add bordered style

Author: akai

src/components/List/List.tsx

@@ -9,7 +9,7 @@ export type ListProps = {
 export const List: React.FC<ListProps> = (props) => {
   const { bordered = false, className, children } = props;
   return (
-    <div className={clsx('List', { bordered }, className)} role="list">
+    <div className={clsx('List', { 'List--bordered': bordered }, className)} role="list">
       {children}
     </div>
   );

src/components/List/style.less

@@ -1,13 +1,18 @@
 .List {
-  background: var(--white);
+  background: @list-bg;
+
+  &--bordered {
+    border: @list-border-width solid @list-border-color;
+    border-radius: @list-border-radius;
+  }
 }
 
 .ListItem {
   display: flex;
   align-items: center;
-  padding: 10px 15px;
-  border-top: 1px solid var(--gray-7);
-  color: var(--gray-1);
+  padding: @list-item-padding;
+  border-top: @list-border-width solid @list-border-color;
+  color: @list-item-color;
   transition: 0.3s;
 
   &:first-child {
@@ -16,8 +21,8 @@
 }
 
 a.ListItem:hover {
-  background: var(--light-2);
-  color: var(--brand-1);
+  background: @list-item-hover-bg;
+  color: @list-item-hover-color;
   cursor: pointer;
 }
 

src/styles/var.less

@@ -115,6 +115,17 @@
 @btn-float-box-shadow: var(--shadow-4);
 @btn-float-color: var(--brand-1);
 
+// List
+@list-bg: var(--white);
+@list-border-width: @border-width;
+@list-border-color: var(--gray-7);
+@list-border-radius: 2px;
+
+@list-item-padding: 10px 15px;
+@list-item-color: var(--gray-1);
+@list-item-hover-bg: var(--light-2);
+@list-item-hover-color: var(--brand-1);
+
 // Navbar
 @navbar-height: 44px;
 @navbar-padding: 0 6px;

storybook/stories/List.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { List, ListItem, ListProps, ListItemProps } from '../../src';
+import '../../src/styles/index.less';
+
+export default {
+  title: 'List',
+  component: List,
+  argTypes: {
+    bordered: { control: 'boolean' },
+  },
+} as Meta;
+
+export const Empty: Story<ListProps> = (args) => <List {...args} />;
+
+export const ManyItems = (args: ListProps) => {
+  return (
+    <List {...args}>
+      <ListItem content="item-1" />
+      <ListItem content="item-2" />
+      <ListItem content="item-3" />
+    </List>
+  );
+};