docs(timeline): provide usage guidelines - INNO-1549

src/website/src/pages/ec/components/timeline/docs/usage.mdx

@@ -0,0 +1,79 @@
+---
+title: Usage
+order: 1
+---
+
+import { Paragraph, Anatomy, Link } from '@ecl/website-components';
+
+<Paragraph size="lead">
+  The timeline displays concurrent and/or sequential items visually on a time
+  axis.
+</Paragraph>
+
+## Anatomy
+
+<Anatomy
+  image="https://inno-ecl.s3.amazonaws.com/media/images/EC/Timeline/Timeline.jpg"
+  alt="Anatomy of timeline"
+  legend={{
+    items: [
+      {
+        color: '#404040',
+        label: 'Mandatory',
+      },
+      {
+        color: '#004494',
+        label: 'Optional',
+      },
+    ],
+  }}
+/>
+
+### Default
+
+| Elements  | Mandatory | Description                                                                                                                                 |
+| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| Title     | Yes       | Title of the item                                                                                                                           |
+| Timestamp | Yes       | Timestamp when the item happened (or is scheduled to)<br/><strong>Date format</strong>: DD/MM/YYYY.<br/><strong>Time format</strong>: HH:MM |
+| Details   | No        | A more detailed description. Can include text, links, media files                                                                           |
+
+### Conditional
+
+| Elements      | Mandatory | Description                                                                                                                                                                         |
+| ------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Expand button | Yes       | Button to display the full list of items in the timeline - to be used if there are <strong>over 12 items in the timeline</strong><br/><strong>Position</strong>: under the 3rd item |
+
+## Do's
+
+- **label each item** with a short, distinct and indicative title
+- **order** items sequentially
+- **always** display the **timestamp and title** for each item
+
+## Don'ts
+
+- don't use when there are **less than 3 items** - use list instead
+- don't use when **all the items start at the same time**
+- don't **place items in an order that isn't sequential**
+
+## When to use
+
+- when you want to present multiple consecutive items (events, occurrences, agendas, etc) visually
+
+## When not to use
+
+- don't use for **actions or to indicate steps** that need to be taken - use <Link to="/ec/components/list/usage/">ordered list</Link> instead
+
+## Notes
+
+### Design
+
+Make sure the correct **color scheme** is followed:
+
+- **Black** for heading, description, timestamp, title and details
+- **Blue** with underline for hyperlinks in items' details
+- **Yellow** for points on the vertical bar and show all button
+
+## Related components
+
+- <Link to="/ec/components/list/usage/">Ordered list</Link>
+- <Link to="/ec/components/list/usage/">Unordered list</Link>

src/website/src/pages/eu/components/timeline/docs/usage.mdx

@@ -0,0 +1,79 @@
+---
+title: Usage
+order: 1
+---
+
+import { Paragraph, Anatomy, Link } from '@ecl/website-components';
+
+<Paragraph size="lead">
+  The timeline displays concurrent and/or sequential items visually on a time
+  axis.
+</Paragraph>
+
+## Anatomy
+
+<Anatomy
+  image="https://inno-ecl.s3.amazonaws.com/media/images/EC/Timeline/Timeline.jpg"
+  alt="Anatomy of timeline"
+  legend={{
+    items: [
+      {
+        color: '#404040',
+        label: 'Mandatory',
+      },
+      {
+        color: '#004494',
+        label: 'Optional',
+      },
+    ],
+  }}
+/>
+
+### Default
+
+| Elements  | Mandatory | Description                                                                                                                                 |
+| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| Title     | Yes       | Title of the item                                                                                                                           |
+| Timestamp | Yes       | Timestamp when the item happened (or is scheduled to)<br/><strong>Date format</strong>: DD/MM/YYYY.<br/><strong>Time format</strong>: HH:MM |
+| Details   | No        | A more detailed description. Can include text, links, media files                                                                           |
+
+### Conditional
+
+| Elements      | Mandatory | Description                                                                                                                                                                         |
+| ------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Expand button | Yes       | Button to display the full list of items in the timeline - to be used if there are <strong>over 12 items in the timeline</strong><br/><strong>Position</strong>: under the 3rd item |
+
+## Do's
+
+- **label each item** with a short, distinct and indicative title
+- **order** items sequentially
+- **always** display the **timestamp and title** for each item
+
+## Don'ts
+
+- don't use when there are **less than 3 items** - use list instead
+- don't use when **all the items start at the same time**
+- don't **place items in an order that isn't sequential**
+
+## When to use
+
+- when you want to present multiple consecutive items (events, occurrences, agendas, etc) visually
+
+## When not to use
+
+- don't use for **actions or to indicate steps** that need to be taken - use <Link to="/eu/components/list/usage/">ordered list</Link> instead
+
+## Notes
+
+### Design
+
+Make sure the correct **color scheme** is followed:
+
+- **Black** for heading, description, timestamp, title and details
+- **Blue** with underline for hyperlinks in items' details
+- **Yellow** for points on the vertical bar and show all button
+
+## Related components
+
+- <Link to="/eu/components/list/usage/">Ordered list</Link>
+- <Link to="/eu/components/list/usage/">Unordered list</Link>