From 14609b92ebaf56f58dcf302ea33624f22449d4c3 Mon Sep 17 00:00:00 2001
From: FlorentDinet <15898440+FlorentDinet@users.noreply.github.com>
Date: Thu, 23 Dec 2021 15:49:17 +0100
Subject: [PATCH] docs(list): updated documentations
---
.vscode/tasks.json | 20 +++++---
.vscode/tasks.json.old | 15 ++++++
.../stories/generated/List/Demos.stories.tsx | 1 +
.../src/stories/generated/List/paddings.tsx | 1 +
.../content/product/components/list/index.mdx | 40 ++++++++++++++--
.../components/list/react/clickable.tsx | 17 +++++++
.../components/list/react/paddings.tsx | 46 +++++++++++++++++++
7 files changed, 130 insertions(+), 10 deletions(-)
create mode 100644 .vscode/tasks.json.old
create mode 120000 packages/lumx-react/src/stories/generated/List/paddings.tsx
create mode 100644 packages/site-demo/content/product/components/list/react/clickable.tsx
create mode 100644 packages/site-demo/content/product/components/list/react/paddings.tsx
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index c772190d4..1a54875cf 100644
--- a/.vscode/tasks.json
+++ b/.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
+ }
}
]
}
diff --git a/.vscode/tasks.json.old b/.vscode/tasks.json.old
new file mode 100644
index 000000000..c772190d4
--- /dev/null
+++ b/.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}"]
+ }
+ ]
+}
diff --git a/packages/lumx-react/src/stories/generated/List/Demos.stories.tsx b/packages/lumx-react/src/stories/generated/List/Demos.stories.tsx
index 41a2088df..1442d052d 100644
--- a/packages/lumx-react/src/stories/generated/List/Demos.stories.tsx
+++ b/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';
diff --git a/packages/lumx-react/src/stories/generated/List/paddings.tsx b/packages/lumx-react/src/stories/generated/List/paddings.tsx
new file mode 120000
index 000000000..ac06ddc55
--- /dev/null
+++ b/packages/lumx-react/src/stories/generated/List/paddings.tsx
@@ -0,0 +1 @@
+../../../../../site-demo/content/product/components/list/react/paddings.tsx
\ No newline at end of file
diff --git a/packages/site-demo/content/product/components/list/index.mdx b/packages/site-demo/content/product/components/list/index.mdx
index 3b3cbc83c..7917b569a 100644
--- a/packages/site-demo/content/product/components/list/index.mdx
+++ b/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).
-## Regular
+### Regular
+Regular list item have a minimum height of `52px`.
+Use this size for single line list items.
-## Big
+### Big
+Big list item have a minimum height of `72px`.
+Use this size for two lines list items.
-## 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.
+## Item padding
+Horizontal padding has 2 sizes: `big` and `huge`.
+By default there is no horizontal padding.
+
+
+
+## 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.
+
+
+
### List properties
diff --git a/packages/site-demo/content/product/components/list/react/clickable.tsx b/packages/site-demo/content/product/components/list/react/clickable.tsx
new file mode 100644
index 000000000..93082f4b3
--- /dev/null
+++ b/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 = () => (
+
+ Clickable list item
+
+ Disabled clickable list item
+
+
+ Highlighted clickable list item
+
+
+ Selected clickable list item
+
+
+);
diff --git a/packages/site-demo/content/product/components/list/react/paddings.tsx b/packages/site-demo/content/product/components/list/react/paddings.tsx
new file mode 100644
index 000000000..90efd0354
--- /dev/null
+++ b/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 = () => (
+
+
+ Default
+
+
+
+ Two-line item
+
+
+
+ Secondary text
+
+
+
+
+ Big padding
+
+
+
+ Two-line item
+
+
+
+ Secondary text
+
+
+
+
+ Huge padding
+
+
+
+ Two-line item
+
+
+
+ Secondary text
+
+
+
+