feat: add Timeline component (#1556)

* feat: add Timeline component

* wip

* upgrade storybook

* upgrade deps

* use node 20

.github/workflows/release.yml

@@ -14,7 +14,7 @@ jobs:
             - name: Setup Node.js
               uses: actions/setup-node@v4
               with:
-                  node-version: 18
+                  node-version: 20
 
             - name: Get node.js cache directory
               id: node-cache-dir

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
             - name: Setup Node.js
               uses: actions/setup-node@v4
               with:
-                  node-version: 18
+                  node-version: 20
 
             - name: Get node.js cache directory
               id: node-cache-dir

package.json

@@ -61,48 +61,48 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lapidist/styles": "^6.1.0",
+    "@lapidist/styles": "^6.2.0",
     "classnames": "^2.3.2",
     "react": "18.x",
     "react-dom": "18.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@lapidist/linting": "^3.9.23",
-    "@storybook/addon-a11y": "^7.2.1",
+    "@babel/core": "^7.23.2",
+    "@lapidist/linting": "^3.11.7",
+    "@storybook/addon-a11y": "^7.5.1",
     "@storybook/addon-backgrounds": "7.5.1",
     "@storybook/addon-controls": "7.5.1",
-    "@storybook/addon-docs": "^7.2.1",
+    "@storybook/addon-docs": "^7.5.1",
     "@storybook/addon-highlight": "7.5.1",
-    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-links": "^7.5.1",
     "@storybook/addon-measure": "7.5.1",
     "@storybook/addon-outline": "7.5.1",
     "@storybook/addon-toolbars": "7.5.1",
     "@storybook/addon-viewport": "7.5.1",
     "@storybook/addons": "7.5.1",
     "@storybook/api": "7.5.1",
-    "@storybook/blocks": "^7.2.1",
-    "@storybook/cli": "^7.2.1",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/cli": "^7.5.1",
     "@storybook/core-common": "7.5.1",
     "@storybook/node-logger": "7.5.1",
-    "@storybook/react-vite": "^7.2.1",
-    "@storybook/theming": "^7.2.1",
+    "@storybook/react-vite": "^7.5.1",
+    "@storybook/theming": "^7.5.1",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "^18.2.18",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.4",
-    "@vitest/coverage-v8": "^0.34.1",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "@vitejs/plugin-react": "^4.1.0",
+    "@vitest/coverage-v8": "^0.34.6",
     "axe-playwright": "^1.2.3",
     "babel-loader": "^9.1.3",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
-    "lint-staged": "^14.0.0",
-    "sass": "^1.64.2",
-    "storybook": "^7.2.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.9",
-    "vite-plugin-dts": "^3.5.1",
-    "vitest": "^0.34.1"
+    "lint-staged": "^15.0.2",
+    "sass": "^1.69.5",
+    "storybook": "^7.5.1",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "vite-plugin-dts": "^3.6.1",
+    "vitest": "^0.34.6"
   },
   "peerDependencies": {
     "react": "18.x",

src/components/Logo/Logo.mdx

@@ -14,7 +14,7 @@ import * as LogoStories from './Logo.stories.tsx';
 
 ## Controlling animation
 
-The `animation` prop controls the way the logo appears. There are two available gutters, defined as `fade` and `slide`.
+The `animation` prop controls the way the logo appears. There are two available animations, defined as `fade` and `slide`.
 
 ### Fade
 

src/components/Timeline/Timeline.mdx

@@ -0,0 +1,44 @@
+import { Meta, ArgsTable, Story, Source, Canvas } from '@storybook/blocks';
+import * as TimelineStories from './Timeline.stories.tsx';
+
+<Meta of={TimelineStories} />
+
+# Timeline
+
+> A primitive for displaying chronological data.
+
+## Example
+
+<Source dark />
+
+## Controlling font size
+
+The `size` prop controls font size. There are three available font sizes, defined as `small`, `medium` and `large`.
+
+### Small
+
+> The `small` size sets the font size to `--font-size-200`
+
+<Canvas>
+    <Story of={TimelineStories.SmallSize} />
+</Canvas>
+
+### Medium
+
+> The `medium` size sets the font size to `--font-size-300`
+
+<Canvas>
+    <Story of={TimelineStories.MediumSize} />
+</Canvas>
+
+### Large
+
+> The `large` size sets the font size to `--font-size-400`
+
+<Canvas>
+    <Story of={TimelineStories.LargeSize} />
+</Canvas>
+
+## Props
+
+<ArgsTable />