Merge pull request #754 from lumapps/docs/list

docs(list): updated documentations

.vscode/tasks.json

@@ -1,15 +1,23 @@
 {
     // See https://go.microsoft.com/fwlink/?LinkId=733558
     // for the documentation about the tasks.json format
-    "version": "0.1.0",
+    "version": "2.0.0",
     "tasks": [
         {
+            "label": "prettier eslint",
+            "type": "shell",
             "command": "node",
-            "isShellCommand": true,
-            "showOutput": "always",
-            "isBuildCommand": true,
-            "taskName": "prettier eslint",
-            "args": ["./node_modules/.bin/prettier-eslint", "--write", "--prettier-last", "${file}"]
+            "args": [
+                "./node_modules/.bin/prettier-eslint",
+                "--write",
+                "--prettier-last",
+                "${file}"
+            ],
+            "problemMatcher": [],
+            "group": {
+                "_id": "build",
+                "isDefault": false
+            }
         }
     ]
 }

.vscode/tasks.json.old

@@ -0,0 +1,15 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "0.1.0",
+    "tasks": [
+        {
+            "command": "node",
+            "isShellCommand": true,
+            "showOutput": "always",
+            "isBuildCommand": true,
+            "taskName": "prettier eslint",
+            "args": ["./node_modules/.bin/prettier-eslint", "--write", "--prettier-last", "${file}"]
+        }
+    ]
+}

packages/lumx-react/src/stories/generated/List/Demos.stories.tsx

@@ -5,5 +5,6 @@ export default { title: 'LumX components/list/List Demos' };
 
 export { App as Big } from './big';
 export { App as Huge } from './huge';
+export { App as Paddings } from './paddings';
 export { App as Regular } from './regular';
 export { App as Tiny } from './tiny';

packages/lumx-react/src/stories/generated/List/paddings.tsx

@@ -0,0 +1 @@
+../../../../../site-demo/content/product/components/list/react/paddings.tsx

packages/site-demo/content/product/components/list/index.mdx

@@ -2,22 +2,54 @@
 
 **Lists group items vertically.**
 
-## Tiny
+## Sizes
+
+Lists come in 4 sizes: `tiny`, `regular`, `big` and `huge`.
+
+`tiny`, `regular` and `big` list items have specific **minimum heights** and a `8px` vertical padding.
+Favor those 3 sizes for lists with list items with consistent heights.
+
+`huge` list items have a `16px` vertical padding.
+Use this size for any other cases.
+
+
+### Tiny
+Tiny list item have a minimum height of `36px`.
+Use this size for dense lists with single ine items like menus made of [dropdown](../dropdown).
 
 <DemoBlock demo="tiny" />
 
-## Regular
+### Regular
+Regular list item have a minimum height of `52px`.
+Use this size for single line list items.
 
 <DemoBlock demo="regular" />
 
-## Big
+### Big
+Big list item have a minimum height of `72px`.
+Use this size for two lines list items.
 
 <DemoBlock demo="big" />
 
-## Huge
+### Huge
+Huge list item have a vertical padding of `16px`.
+Use this size for list items that have more than two lines of content.
 
 <DemoBlock demo="huge" />
 
+## Item padding
+Horizontal padding has 2 sizes: `big` and `huge`.
+By default there is no horizontal padding.
+
+<DemoBlock demo="paddings" />
+
+## Clickable
+List items can be clickable.
+Clickable list items can then be disabled, highlighted or selected. 
+Use clickable list items when users need to select one or more options in a list.
+
+<DemoBlock demo="clickable" />
+
 ### List properties
 
 <PropTable component="List" />

packages/site-demo/content/product/components/list/react/clickable.tsx

@@ -0,0 +1,17 @@
+import { List, ListItem, ListSubheader, Size } from '@lumx/react';
+import React from 'react';
+
+export const App = () => (
+    <List>
+        <ListItem linkProps={{ href: '#' }}>Clickable list item</ListItem>
+        <ListItem linkProps={{ href: '#' }} isDisabled>
+            Disabled clickable list item
+        </ListItem>
+        <ListItem linkProps={{ href: '#' }} isHighlighted>
+            Highlighted clickable list item
+        </ListItem>
+        <ListItem linkProps={{ href: '#' }} isSelected>
+            Selected clickable list item
+        </ListItem>
+    </List>
+);

packages/site-demo/content/product/components/list/react/paddings.tsx

@@ -0,0 +1,46 @@
+import { List, ListItem, ListSubheader, Size } from '@lumx/react';
+import React from 'react';
+
+export const App = () => (
+    <div>
+        <List>
+            <ListSubheader>Default</ListSubheader>
+
+            <ListItem size={Size.big} className="lumx-color-background-dark-L6">
+                <div>
+                    <span>Two-line item</span>
+                </div>
+
+                <div>
+                    <span className="lumx-color-font-dark-L2">Secondary text</span>
+                </div>
+            </ListItem>
+        </List>
+        <List itemPadding={Size.big}>
+            <ListSubheader>Big padding</ListSubheader>
+
+            <ListItem size={Size.big} className="lumx-color-background-dark-L6">
+                <div>
+                    <span>Two-line item</span>
+                </div>
+
+                <div>
+                    <span className="lumx-color-font-dark-L2">Secondary text</span>
+                </div>
+            </ListItem>
+        </List>
+        <List itemPadding={Size.huge}>
+            <ListSubheader>Huge padding</ListSubheader>
+
+            <ListItem size={Size.big} className="lumx-color-background-dark-L6">
+                <div>
+                    <span>Two-line item</span>
+                </div>
+
+                <div>
+                    <span className="lumx-color-font-dark-L2">Secondary text</span>
+                </div>
+            </ListItem>
+        </List>
+    </div>
+);