From 0d0b5ead86fd5e36b4d883915a91d93ef085673c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 10 Jul 2024 12:39:11 +0200
Subject: [PATCH 01/10] :paperclip: Remove unused storybook addons + other libs

---
 frontend/.storybook/main.js |   7 +-
 frontend/package.json       |   4 -
 frontend/yarn.lock          | 301 ++----------------------------------
 3 files changed, 13 insertions(+), 299 deletions(-)

diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
index a1b422ae6..e9546b1fd 100644
--- a/frontend/.storybook/main.js
+++ b/frontend/.storybook/main.js
@@ -2,12 +2,7 @@
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   staticDirs: ["../resources/public"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
-  ],
+  addons: ["@storybook/addon-essentials"],
   framework: {
     name: "@storybook/react-vite",
     options: {},
diff --git a/frontend/package.json b/frontend/package.json
index 2bbad53ed..50f2559a3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -42,13 +42,9 @@
   "devDependencies": {
     "@playwright/test": "1.44.1",
     "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-onboarding": "^1.0.11",
     "@storybook/blocks": "^7.6.17",
     "@storybook/react": "^7.6.17",
     "@storybook/react-vite": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
     "@types/node": "^20.11.20",
     "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 1eaae603b..983a02c96 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -26,7 +26,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2":
   version: 7.24.2
   resolution: "@babel/code-frame@npm:7.24.2"
   dependencies:
@@ -1428,7 +1428,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
   version: 7.24.5
   resolution: "@babel/runtime@npm:7.24.5"
   dependencies:
@@ -1981,19 +1981,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/types@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/types@npm:27.5.1"
-  dependencies:
-    "@types/istanbul-lib-coverage": "npm:^2.0.0"
-    "@types/istanbul-reports": "npm:^3.0.0"
-    "@types/node": "npm:*"
-    "@types/yargs": "npm:^16.0.0"
-    chalk: "npm:^4.0.0"
-  checksum: 10c0/4598b302398db0eb77168b75a6c58148ea02cc9b9f21c5d1bbe985c1c9257110a5653cf7b901c3cab87fba231e3fed83633687f1c0903b4bc6939ab2a8452504
-  languageName: node
-  linkType: hard
-
 "@jest/types@npm:^29.6.3":
   version: 29.6.3
   resolution: "@jest/types@npm:29.6.3"
@@ -3104,35 +3091,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:^7.6.17":
-  version: 7.6.19
-  resolution: "@storybook/addon-interactions@npm:7.6.19"
-  dependencies:
-    "@storybook/global": "npm:^5.0.0"
-    "@storybook/types": "npm:7.6.19"
-    jest-mock: "npm:^27.0.6"
-    polished: "npm:^4.2.2"
-    ts-dedent: "npm:^2.2.0"
-  checksum: 10c0/430d62298930b5e78398024de99f8f5d19ef22d7eda51015fa88e8ed3fafd2e003b0c8694a97192848ebf3e013ba363d96bf753ef1ff844e8129a9c47d41894c
-  languageName: node
-  linkType: hard
-
-"@storybook/addon-links@npm:^7.6.17":
-  version: 7.6.19
-  resolution: "@storybook/addon-links@npm:7.6.19"
-  dependencies:
-    "@storybook/csf": "npm:^0.1.2"
-    "@storybook/global": "npm:^5.0.0"
-    ts-dedent: "npm:^2.0.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    react:
-      optional: true
-  checksum: 10c0/c7f40095e8f00ed1dc9a6118b074d513e3a7dd77334e044d152b42ea5922a0fd26397bbcd45abaa2968a3b27a27b810af0e8039ab07ecee7043582fa2a14ca67
-  languageName: node
-  linkType: hard
-
 "@storybook/addon-measure@npm:7.6.19":
   version: 7.6.19
   resolution: "@storybook/addon-measure@npm:7.6.19"
@@ -3143,19 +3101,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-onboarding@npm:^1.0.11":
-  version: 1.0.11
-  resolution: "@storybook/addon-onboarding@npm:1.0.11"
-  dependencies:
-    "@storybook/telemetry": "npm:^7.1.0"
-    react-confetti: "npm:^6.1.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/ca3de3eb85fb6d04309dbc07c26956777c064bb5032fb99aca3e43361b0816ac4326183aac99204d795fdc2010aa69c4978353c70a42926e9da0819343fcd2a0
-  languageName: node
-  linkType: hard
-
 "@storybook/addon-outline@npm:7.6.19":
   version: 7.6.19
   resolution: "@storybook/addon-outline@npm:7.6.19"
@@ -3712,7 +3657,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/telemetry@npm:7.6.19, @storybook/telemetry@npm:^7.1.0":
+"@storybook/telemetry@npm:7.6.19":
   version: 7.6.19
   resolution: "@storybook/telemetry@npm:7.6.19"
   dependencies:
@@ -3728,17 +3673,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/testing-library@npm:^0.2.2":
-  version: 0.2.2
-  resolution: "@storybook/testing-library@npm:0.2.2"
-  dependencies:
-    "@testing-library/dom": "npm:^9.0.0"
-    "@testing-library/user-event": "npm:^14.4.0"
-    ts-dedent: "npm:^2.2.0"
-  checksum: 10c0/3179c74148c92267ea449068ce9fb00bf960dbf06654354de7869428415d16dc730a0d58b5adca7619d21e5a058ae0bf713e34c09be8bca574388ec0106c5068
-  languageName: node
-  linkType: hard
-
 "@storybook/theming@npm:7.6.19":
   version: 7.6.19
   resolution: "@storybook/theming@npm:7.6.19"
@@ -3766,31 +3700,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^9.0.0":
-  version: 9.3.4
-  resolution: "@testing-library/dom@npm:9.3.4"
-  dependencies:
-    "@babel/code-frame": "npm:^7.10.4"
-    "@babel/runtime": "npm:^7.12.5"
-    "@types/aria-query": "npm:^5.0.1"
-    aria-query: "npm:5.1.3"
-    chalk: "npm:^4.1.0"
-    dom-accessibility-api: "npm:^0.5.9"
-    lz-string: "npm:^1.5.0"
-    pretty-format: "npm:^27.0.2"
-  checksum: 10c0/147da340e8199d7f98f3a4ad8aa22ed55b914b83957efa5eb22bfea021a979ebe5a5182afa9c1e5b7a5f99a7f6744a5a4d9325ae46ec3b33b5a15aed8750d794
-  languageName: node
-  linkType: hard
-
-"@testing-library/user-event@npm:^14.4.0":
-  version: 14.5.2
-  resolution: "@testing-library/user-event@npm:14.5.2"
-  peerDependencies:
-    "@testing-library/dom": ">=7.21.4"
-  checksum: 10c0/68a0c2aa28a3c8e6eb05cafee29705438d7d8a9427423ce5064d44f19c29e89b5636de46dd2f28620fb10abba75c67130185bbc3aa23ac1163a227a5f36641e1
-  languageName: node
-  linkType: hard
-
 "@trysound/sax@npm:0.2.0":
   version: 0.2.0
   resolution: "@trysound/sax@npm:0.2.0"
@@ -3798,13 +3707,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/aria-query@npm:^5.0.1":
-  version: 5.0.4
-  resolution: "@types/aria-query@npm:5.0.4"
-  checksum: 10c0/dc667bc6a3acc7bba2bccf8c23d56cb1f2f4defaa704cfef595437107efaa972d3b3db9ec1d66bc2711bfc35086821edd32c302bffab36f2e79b97f312069f08
-  languageName: node
-  linkType: hard
-
 "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.5":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
@@ -4183,15 +4085,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:^16.0.0":
-  version: 16.0.9
-  resolution: "@types/yargs@npm:16.0.9"
-  dependencies:
-    "@types/yargs-parser": "npm:*"
-  checksum: 10c0/be24bd9a56c97ddb2964c1c18f5b9fe8271a50e100dc6945989901aae58f7ce6fb8f3a591c749a518401b6301358dbd1997e83c36138a297094feae7f9ac8211
-  languageName: node
-  linkType: hard
-
 "@types/yargs@npm:^17.0.8":
   version: 17.0.32
   resolution: "@types/yargs@npm:17.0.32"
@@ -4570,15 +4463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:5.1.3":
-  version: 5.1.3
-  resolution: "aria-query@npm:5.1.3"
-  dependencies:
-    deep-equal: "npm:^2.0.5"
-  checksum: 10c0/edcbc8044c4663d6f88f785e983e6784f98cb62b4ba1e9dd8d61b725d0203e4cfca38d676aee984c31f354103461102a3d583aa4fbe4fd0a89b679744f4e5faf
-  languageName: node
-  linkType: hard
-
 "arr-diff@npm:^4.0.0":
   version: 4.0.0
   resolution: "arr-diff@npm:4.0.0"
@@ -4618,7 +4502,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1":
+"array-buffer-byte-length@npm:^1.0.1":
   version: 1.0.1
   resolution: "array-buffer-byte-length@npm:1.0.1"
   dependencies:
@@ -6325,32 +6209,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-equal@npm:^2.0.5":
-  version: 2.2.3
-  resolution: "deep-equal@npm:2.2.3"
-  dependencies:
-    array-buffer-byte-length: "npm:^1.0.0"
-    call-bind: "npm:^1.0.5"
-    es-get-iterator: "npm:^1.1.3"
-    get-intrinsic: "npm:^1.2.2"
-    is-arguments: "npm:^1.1.1"
-    is-array-buffer: "npm:^3.0.2"
-    is-date-object: "npm:^1.0.5"
-    is-regex: "npm:^1.1.4"
-    is-shared-array-buffer: "npm:^1.0.2"
-    isarray: "npm:^2.0.5"
-    object-is: "npm:^1.1.5"
-    object-keys: "npm:^1.1.1"
-    object.assign: "npm:^4.1.4"
-    regexp.prototype.flags: "npm:^1.5.1"
-    side-channel: "npm:^1.0.4"
-    which-boxed-primitive: "npm:^1.0.2"
-    which-collection: "npm:^1.0.1"
-    which-typed-array: "npm:^1.1.13"
-  checksum: 10c0/a48244f90fa989f63ff5ef0cc6de1e4916b48ea0220a9c89a378561960814794a5800c600254482a2c8fd2e49d6c2e196131dc983976adb024c94a42dfe4949f
-  languageName: node
-  linkType: hard
-
 "default-browser-id@npm:3.0.0":
   version: 3.0.0
   resolution: "default-browser-id@npm:3.0.0"
@@ -6597,13 +6455,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-accessibility-api@npm:^0.5.9":
-  version: 0.5.16
-  resolution: "dom-accessibility-api@npm:0.5.16"
-  checksum: 10c0/b2c2eda4fae568977cdac27a9f0c001edf4f95a6a6191dfa611e3721db2478d1badc01db5bb4fa8a848aeee13e442a6c2a4386d65ec65a1436f24715a2f8d053
-  languageName: node
-  linkType: hard
-
 "dom-helpers@npm:^5.1.3":
   version: 5.2.1
   resolution: "dom-helpers@npm:5.2.1"
@@ -6932,23 +6783,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-get-iterator@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "es-get-iterator@npm:1.1.3"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.1.3"
-    has-symbols: "npm:^1.0.3"
-    is-arguments: "npm:^1.1.1"
-    is-map: "npm:^2.0.2"
-    is-set: "npm:^2.0.2"
-    is-string: "npm:^1.0.7"
-    isarray: "npm:^2.0.5"
-    stop-iteration-iterator: "npm:^1.0.0"
-  checksum: 10c0/ebd11effa79851ea75d7f079405f9d0dc185559fd65d986c6afea59a0ff2d46c2ed8675f19f03dce7429d7f6c14ff9aede8d121fbab78d75cfda6a263030bac0
-  languageName: node
-  linkType: hard
-
 "es-module-lexer@npm:^0.9.3":
   version: 0.9.3
   resolution: "es-module-lexer@npm:0.9.3"
@@ -7907,13 +7741,9 @@ __metadata:
   dependencies:
     "@playwright/test": "npm:1.44.1"
     "@storybook/addon-essentials": "npm:^7.6.17"
-    "@storybook/addon-interactions": "npm:^7.6.17"
-    "@storybook/addon-links": "npm:^7.6.17"
-    "@storybook/addon-onboarding": "npm:^1.0.11"
     "@storybook/blocks": "npm:^7.6.17"
     "@storybook/react": "npm:^7.6.17"
     "@storybook/react-vite": "npm:^7.6.17"
-    "@storybook/testing-library": "npm:^0.2.2"
     "@types/node": "npm:^20.11.20"
     autoprefixer: "npm:^10.4.19"
     compression: "npm:^1.7.4"
@@ -8164,7 +7994,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
+"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
   version: 1.2.4
   resolution: "get-intrinsic@npm:1.2.4"
   dependencies:
@@ -9014,7 +8844,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.7":
+"internal-slot@npm:^1.0.7":
   version: 1.0.7
   resolution: "internal-slot@npm:1.0.7"
   dependencies:
@@ -9098,7 +8928,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.1":
+"is-arguments@npm:^1.0.4":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
   dependencies:
@@ -9108,7 +8938,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-array-buffer@npm:^3.0.2, is-array-buffer@npm:^3.0.4":
+"is-array-buffer@npm:^3.0.4":
   version: 3.0.4
   resolution: "is-array-buffer@npm:3.0.4"
   dependencies:
@@ -9210,7 +9040,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.5":
+"is-date-object@npm:^1.0.1":
   version: 1.0.5
   resolution: "is-date-object@npm:1.0.5"
   dependencies:
@@ -9342,13 +9172,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-map@npm:^2.0.2, is-map@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-map@npm:2.0.3"
-  checksum: 10c0/2c4d431b74e00fdda7162cd8e4b763d6f6f217edf97d4f8538b94b8702b150610e2c64961340015fe8df5b1fcee33ccd2e9b62619c4a8a3a155f8de6d6d355fc
-  languageName: node
-  linkType: hard
-
 "is-nan@npm:^1.3.2":
   version: 1.3.2
   resolution: "is-nan@npm:1.3.2"
@@ -9468,13 +9291,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-set@npm:^2.0.2, is-set@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-set@npm:2.0.3"
-  checksum: 10c0/f73732e13f099b2dc879c2a12341cfc22ccaca8dd504e6edae26484bd5707a35d503fba5b4daad530a9b088ced1ae6c9d8200fd92e09b428fe14ea79ce8080b7
-  languageName: node
-  linkType: hard
-
 "is-shared-array-buffer@npm:^1.0.2, is-shared-array-buffer@npm:^1.0.3":
   version: 1.0.3
   resolution: "is-shared-array-buffer@npm:1.0.3"
@@ -9555,13 +9371,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakmap@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "is-weakmap@npm:2.0.2"
-  checksum: 10c0/443c35bb86d5e6cc5929cd9c75a4024bb0fff9586ed50b092f94e700b89c43a33b186b76dbc6d54f3d3d09ece689ab38dcdc1af6a482cbe79c0f2da0a17f1299
-  languageName: node
-  linkType: hard
-
 "is-weakref@npm:^1.0.2":
   version: 1.0.2
   resolution: "is-weakref@npm:1.0.2"
@@ -9571,16 +9380,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakset@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-weakset@npm:2.0.3"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    get-intrinsic: "npm:^1.2.4"
-  checksum: 10c0/8ad6141b6a400e7ce7c7442a13928c676d07b1f315ab77d9912920bf5f4170622f43126f111615788f26c3b1871158a6797c862233124507db0bcc33a9537d1a
-  languageName: node
-  linkType: hard
-
 "is-windows@npm:^1.0.1, is-windows@npm:^1.0.2":
   version: 1.0.2
   resolution: "is-windows@npm:1.0.2"
@@ -9711,16 +9510,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-mock@npm:^27.0.6":
-  version: 27.5.1
-  resolution: "jest-mock@npm:27.5.1"
-  dependencies:
-    "@jest/types": "npm:^27.5.1"
-    "@types/node": "npm:*"
-  checksum: 10c0/6ad58454b37ee3f726930b07efbf40a7c79d2d2d9c7b226708b4b550bc0904de93bcacf714105d11952a5c0bc855e5d59145c8c9dbbb4e69b46e7367abf53b52
-  languageName: node
-  linkType: hard
-
 "jest-regex-util@npm:^29.6.3":
   version: 29.6.3
   resolution: "jest-regex-util@npm:29.6.3"
@@ -10299,15 +10088,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "lz-string@npm:1.5.0"
-  bin:
-    lz-string: bin/bin.js
-  checksum: 10c0/36128e4de34791838abe979b19927c26e67201ca5acf00880377af7d765b38d1c60847e01c5ec61b1a260c48029084ab3893a3925fd6e48a04011364b089991b
-  languageName: node
-  linkType: hard
-
 "magic-string@npm:^0.27.0":
   version: 0.27.0
   resolution: "magic-string@npm:0.27.0"
@@ -12119,17 +11899,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^27.0.2":
-  version: 27.5.1
-  resolution: "pretty-format@npm:27.5.1"
-  dependencies:
-    ansi-regex: "npm:^5.0.1"
-    ansi-styles: "npm:^5.0.0"
-    react-is: "npm:^17.0.1"
-  checksum: 10c0/0cbda1031aa30c659e10921fa94e0dd3f903ecbbbe7184a729ad66f2b6e7f17891e8c7d7654c458fa4ccb1a411ffb695b4f17bbcd3fe075fabe181027c4040ed
-  languageName: node
-  linkType: hard
-
 "pretty-format@npm:^29.7.0":
   version: 29.7.0
   resolution: "pretty-format@npm:29.7.0"
@@ -12460,17 +12229,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-confetti@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "react-confetti@npm:6.1.0"
-  dependencies:
-    tween-functions: "npm:^1.2.0"
-  peerDependencies:
-    react: ^16.3.0 || ^17.0.1 || ^18.0.0
-  checksum: 10c0/5b4eb23eef564695f6db1d25b294ed31d5fa21ff4092c6a38e641f85cd10e3e0b50014366e3ac0f7cf772e73faaecd14614e5b11a5531336fa769dda8068ab59
-  languageName: node
-  linkType: hard
-
 "react-docgen-typescript@npm:^2.2.2":
   version: 2.2.2
   resolution: "react-docgen-typescript@npm:2.2.2"
@@ -12538,13 +12296,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^17.0.1":
-  version: 17.0.2
-  resolution: "react-is@npm:17.0.2"
-  checksum: 10c0/2bdb6b93fbb1820b024b496042cce405c57e2f85e777c9aabd55f9b26d145408f9f74f5934676ffdc46f3dcff656d78413a6e43968e7b3f92eea35b3052e9053
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^18.0.0":
   version: 18.3.1
   resolution: "react-is@npm:18.3.1"
@@ -12829,7 +12580,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.5.1, regexp.prototype.flags@npm:^1.5.2":
+"regexp.prototype.flags@npm:^1.5.2":
   version: 1.5.2
   resolution: "regexp.prototype.flags@npm:1.5.2"
   dependencies:
@@ -14089,15 +13840,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stop-iteration-iterator@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "stop-iteration-iterator@npm:1.0.0"
-  dependencies:
-    internal-slot: "npm:^1.0.4"
-  checksum: 10c0/c4158d6188aac510d9e92925b58709207bd94699e9c31186a040c80932a687f84a51356b5895e6dc72710aad83addb9411c22171832c9ae0e6e11b7d61b0dfb9
-  languageName: node
-  linkType: hard
-
 "store2@npm:^2.14.2":
   version: 2.14.3
   resolution: "store2@npm:2.14.3"
@@ -14823,7 +14565,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0":
+"ts-dedent@npm:^2.0.0":
   version: 2.2.0
   resolution: "ts-dedent@npm:2.2.0"
   checksum: 10c0/175adea838468cc2ff7d5e97f970dcb798bbcb623f29c6088cb21aa2880d207c5784be81ab1741f56b9ac37840cbaba0c0d79f7f8b67ffe61c02634cafa5c303
@@ -14851,13 +14593,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tween-functions@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "tween-functions@npm:1.2.0"
-  checksum: 10c0/7e59295b8b0ee4132ed2fe335f56a9db5c87056dad6b6fd3011be72239fd20398003ddb4403bc98ad9f5c94468890830f64016edbbde35581faf95b32cda8305
-  languageName: node
-  linkType: hard
-
 "type-detect@npm:^4.0.0, type-detect@npm:^4.0.8":
   version: 4.0.8
   resolution: "type-detect@npm:4.0.8"
@@ -15727,18 +15462,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-collection@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "which-collection@npm:1.0.2"
-  dependencies:
-    is-map: "npm:^2.0.3"
-    is-set: "npm:^2.0.3"
-    is-weakmap: "npm:^2.0.2"
-    is-weakset: "npm:^2.0.3"
-  checksum: 10c0/3345fde20964525a04cdf7c4a96821f85f0cc198f1b2ecb4576e08096746d129eb133571998fe121c77782ac8f21cbd67745a3d35ce100d26d4e684c142ea1f2
-  languageName: node
-  linkType: hard
-
 "which-module@npm:^1.0.0":
   version: 1.0.0
   resolution: "which-module@npm:1.0.0"
@@ -15746,7 +15469,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2":
+"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2":
   version: 1.1.15
   resolution: "which-typed-array@npm:1.1.15"
   dependencies:

From 508f4fcd3cf0d380fda420719490eb90682c6be9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 10 Jul 2024 13:31:56 +0200
Subject: [PATCH 02/10] :sparkles: Revamp Heading stories to display controls

---
 .../ui/ds/foundations/heading.stories.jsx     | 62 +++++++------------
 .../ui/ds/foundations/typography.stories.jsx  |  2 +
 2 files changed, 23 insertions(+), 41 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx b/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
index ac017b79f..67cdb3a98 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
@@ -1,54 +1,34 @@
 import * as React from "react";
 import Components from "@target/components";
+import { typographyIds } from "./typography.stories";
 
 const { Heading } = Components;
-const { StoryWrapper, StoryGridRow } = Components.storybook;
+const { StoryWrapper } = Components.storybook;
 
 export default {
-  title: "Foundations/Heading",
+  title: "Foundations/Typography/Heading",
   component: Components.Heading,
+  argTypes: {
+    level: {
+      options: [1, 2, 3, 4, 5, 6],
+      control: { type: "select" },
+    },
+    typography: {
+      options: typographyIds,
+      control: { type: "select" },
+    },
+  },
 };
 
-export const Levels = {
-  render: () => (
+export const AnyHeading = {
+  name: "Heading",
+  render: ({level, typography, ...args}) => (
     <StoryWrapper theme="default">
-      <StoryGridRow title={"1 / display"}>
-        <Heading level="1" typography="display">
-          h1 / display
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"2 / display"}>
-        <Heading level="2" typography="display">
-          h2 / display
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"3 / display"}>
-        <Heading level="3" typography="display">
-          h3 / display
-        </Heading>
-      </StoryGridRow>
-    </StoryWrapper>
-  ),
-};
-
-export const HeadingTypography = {
-  render: () => (
-    <StoryWrapper theme="default">
-      <StoryGridRow title={"1 / title-large"}>
-        <Heading level="1" typography="title-large">
-          h1 / title-large
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"1 / title-medium"}>
-        <Heading level="1" typography="title-medium">
-          h1 / title-medium
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"1 / code-font"}>
-        <Heading level="1" typography="code-font">
-          h1 / code-font
-        </Heading>
-      </StoryGridRow>
+      <Heading level={level} typography={typography} {...args}>Lorem ipsum</Heading>
     </StoryWrapper>
   ),
+  args: {
+    level: 1,
+    typography: "display",
+  }
 };
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
index 761a7076a..615d3729e 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
@@ -106,6 +106,8 @@ const typographyList = {
   },
 };
 
+export const typographyIds = Object.values(typographyList).map(x => x.id);
+
 export default {
   title: "Foundations/Typography",
   component: Components.StoryHeader,

From 54da6832f3acda27f833e561483a0a1b18801a26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 10 Jul 2024 13:34:09 +0200
Subject: [PATCH 03/10] :sparkles: Revamp Text stories to display controls +
 rename tag prop to as

---
 .../src/app/main/ui/ds/foundations/text.cljs  |  6 +-
 .../main/ui/ds/foundations/text.stories.jsx   | 62 +++++++------------
 2 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/foundations/text.cljs b/frontend/src/app/main/ui/ds/foundations/text.cljs
index 180ee703f..0372a0b0f 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/text.cljs
@@ -17,12 +17,12 @@
 
 (mf/defc text*
   {::mf/props :obj}
-  [{:keys [tag typography children class] :rest props}]
+  [{:keys [as typography children class] :rest props}]
 
   (assert (valid-typography? (dm/str typography))
           (dm/str typography " is an unknown typography"))
 
-  (let [tag (or tag "p")
+  (let [as (or as "p")
         class (dm/str (or class "") " " (stl/css-case :display-typography (= typography t/display)
                                                       :title-large-typography (= typography t/title-large)
                                                       :title-medium-typography (= typography t/title-medium)
@@ -35,5 +35,5 @@
                                                       :body-small-typography (= typography t/body-small)
                                                       :code-font-typography (= typography t/code-font)))
         props (mf/spread-props props {:class class})]
-    [:> tag props
+    [:> as props
      children]))
diff --git a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/text.stories.jsx
index 703522c3f..271a09960 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/text.stories.jsx
@@ -1,54 +1,40 @@
 import * as React from "react";
 import Components from "@target/components";
+import { typographyIds } from "./typography.stories";
 
 const { Text } = Components;
-const { StoryWrapper, StoryGridRow } = Components.storybook;
+const { StoryWrapper } = Components.storybook;
 
 export default {
-  title: "Foundations/Text",
-  component: Components.Text,
+  title: "Foundations/Typography/Text",
+  component: Text,
+  argTypes: {
+    typography: {
+      options: typographyIds,
+      control: { type: "select" },
+    }
+  }
 };
 
-export const TextTags = {
-  render: () => (
+export const Default = {
+  render: ({typography, ...args}) => (
     <StoryWrapper theme="default">
-      <StoryGridRow title={"p / title-large"}>
-        <Text tag="p" typography="title-large">
-          p / Title
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"span / title-large"}>
-        <Text tag="span" typography="title-large">
-          span / Title large
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"div / title-large"}>
-        <Text tag="div" typography="title-large">
-          div / Title large
-        </Text>
-      </StoryGridRow>
+      <Text typography={typography} {...args}>Lorem ipsum</Text>
     </StoryWrapper>
   ),
+  args: {
+    typography: "display"
+  }
 };
 
-export const TypographyParagraph = {
-  render: () => (
+export const CustomTag = {
+  render: ({typography, ...args}) => (
     <StoryWrapper theme="default">
-      <StoryGridRow title={"p / title-large"}>
-        <Text tag="p" typography="title-large">
-          p / Title large
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"p / title-medium"}>
-        <Text tag="p" typography="title-medium">
-          p / Title medium
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"p / code-font"}>
-        <Text tag="p" typography="code-font">
-          p / Code font
-        </Text>
-      </StoryGridRow>
+      <Text typography={typography} {...args}>Lorem ipsum</Text>
     </StoryWrapper>
   ),
-};
+  args: {
+    typography: "display",
+    as: "li"
+  }
+}

From 9d3a282c0a62b96b72d23b35df5c3f0f94189f8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 10 Jul 2024 14:09:49 +0200
Subject: [PATCH 04/10] :paperclip: Move typography-related components to their
 own folder

---
 frontend/src/app/main/ui/ds.cljs              |   4 +-
 .../ui/ds/foundations/typography.stories.jsx  | 137 ------------------
 .../foundations/{ => typography}/heading.cljs |   3 +-
 .../foundations/{ => typography}/heading.mdx  |   6 +-
 .../foundations/{ => typography}/heading.scss |   2 +-
 .../{ => typography}/heading.stories.jsx      |   4 +-
 .../ds/foundations/{ => typography}/text.cljs |   2 +-
 .../ds/foundations/{ => typography}/text.mdx  |   6 +-
 .../ds/foundations/{ => typography}/text.scss |   2 +-
 .../{ => typography}/text.stories.jsx         |   4 +-
 .../{ => typography}/typography.mdx           |  29 ++--
 11 files changed, 32 insertions(+), 167 deletions(-)
 delete mode 100644 frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
 rename frontend/src/app/main/ui/ds/foundations/{ => typography}/heading.cljs (97%)
 rename frontend/src/app/main/ui/ds/foundations/{ => typography}/heading.mdx (88%)
 rename frontend/src/app/main/ui/ds/foundations/{ => typography}/heading.scss (96%)
 rename frontend/src/app/main/ui/ds/foundations/{ => typography}/heading.stories.jsx (90%)
 rename frontend/src/app/main/ui/ds/foundations/{ => typography}/text.cljs (97%)
 rename frontend/src/app/main/ui/ds/foundations/{ => typography}/text.mdx (90%)
 rename frontend/src/app/main/ui/ds/foundations/{ => typography}/text.scss (96%)
 rename frontend/src/app/main/ui/ds/foundations/{ => typography}/text.stories.jsx (90%)
 rename frontend/src/app/main/ui/ds/foundations/{ => typography}/typography.mdx (73%)

diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs
index 14fde3f51..6143d4eb4 100644
--- a/frontend/src/app/main/ui/ds.cljs
+++ b/frontend/src/app/main/ui/ds.cljs
@@ -6,11 +6,11 @@
 
 (ns app.main.ui.ds
   (:require
-   [app.main.ui.ds.foundations.heading :refer [heading*]]
    [app.main.ui.ds.foundations.icon :refer [icon* icon-list]]
    [app.main.ui.ds.foundations.raw-svg :refer [raw-svg* raw-svg-list]]
-   [app.main.ui.ds.foundations.text :refer [text*]]
    [app.main.ui.ds.foundations.typography :refer [typography-list]]
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
+   [app.main.ui.ds.foundations.typography.text :refer [text*]]
    [app.main.ui.ds.storybook :as sb]))
 
 (def default
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
deleted file mode 100644
index 615d3729e..000000000
--- a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import * as React from "react";
-import Components from "@target/components";
-
-const { Heading } = Components;
-const { StoryWrapper, StoryHeader, StoryGridRow } = Components.storybook;
-
-const typographyList = {
-  display: {
-    name: "Display",
-    id: "display",
-    size: "36px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleLarge: {
-    name: "Title large",
-    id: "title-large",
-    size: "24px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleMedium: {
-    name: "Title medium",
-    id: "title-medium",
-    size: "20px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleSmall: {
-    name: "Title small",
-    id: "title-small",
-    size: "14px",
-    weight: "400",
-    line: "1.2",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  headlineLarge: {
-    name: "Headline large",
-    id: "headline-large",
-    size: "18px",
-    weight: "400",
-    line: "1.4",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  headlineMedium: {
-    name: "Headline medium",
-    id: "headline-medium",
-    size: "16px",
-    weight: "400",
-    line: "1.4",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  headlineSmall: {
-    name: "Headline small",
-    id: "headline-small",
-    size: "12px",
-    weight: "500",
-    line: "1.2",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  bodyLarge: {
-    name: "Body large",
-    id: "body-large",
-    size: "16px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  bodyMedium: {
-    name: "Body medium",
-    id: "body-medium",
-    size: "14px",
-    weight: "400",
-    line: "1.3",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  bodySmall: {
-    name: "Body small",
-    id: "body-small",
-    size: "12px",
-    weight: "400",
-    line: "1.3",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  codeFont: {
-    name: "Code font",
-    id: "code-font",
-    size: "12px",
-    weight: "400",
-    line: "1.2",
-    uppercase: false,
-    font: "Roboto Mono",
-  },
-};
-
-export const typographyIds = Object.values(typographyList).map(x => x.id);
-
-export default {
-  title: "Foundations/Typography",
-  component: Components.StoryHeader,
-};
-
-export const AllTypography = {
-  render: () => (
-    <StoryWrapper theme="default">
-      <StoryHeader>
-        <h1>All Typography</h1>
-        <p>Hover on a heading to see its ID</p>
-      </StoryHeader>
-      {Object.values(typographyList).map(
-        ({ id, name, size, weight, line, font }) => (
-          <StoryGridRow title={id} key={id}>
-            <Heading level="1" typography={id}>
-              {name} - {weight} - {size}/{line} {font}
-            </Heading>
-          </StoryGridRow>
-        ),
-      )}
-    </StoryWrapper>
-  ),
-  parameters: {
-    backgrounds: { disable: true },
-  },
-};
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.cljs b/frontend/src/app/main/ui/ds/foundations/typography/heading.cljs
similarity index 97%
rename from frontend/src/app/main/ui/ds/foundations/heading.cljs
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.cljs
index 59c8e3dde..374ae545f 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.cljs
@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.heading
+(ns app.main.ui.ds.foundations.typography.heading
   (:require-macros
    [app.common.data.macros :as dm]
    [app.main.style :as stl])
@@ -25,7 +25,6 @@
   (assert (or (valid-level? level)
               (nil? level))
           (dm/str "Invalid level: " level ". Valid numbers are 1 to 6."))
-
   (assert (valid-typography? (dm/str typography))
           (dm/str typography " is an unknown typography"))
 
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.mdx b/frontend/src/app/main/ui/ds/foundations/typography/heading.mdx
similarity index 88%
rename from frontend/src/app/main/ui/ds/foundations/heading.mdx
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.mdx
index 52e3bb120..ffda6ede4 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.mdx
@@ -11,7 +11,7 @@ This component will add a heading tag element to our code.
 
 This components accepts to props:
 
-- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.). 
+- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.).
 - `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
 
 You can check passed props to renderized components on hover `level / typography`;
@@ -28,8 +28,8 @@ Assuming the namespace of the typography is required as `t`:
 ```clj
 (ns app.main.ui.foo
   (:require
-   [app.main.ui.ds.foundations.heading :refer [heading*]]
-   [app.main.ui.ds.foundations.typography :as t]))
+   [app.main.ui.ds.foundations.typography :as t]
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]))
 ```
 
 You can now use the typography IDs defined in the namespace:
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.scss b/frontend/src/app/main/ui/ds/foundations/typography/heading.scss
similarity index 96%
rename from frontend/src/app/main/ui/ds/foundations/heading.scss
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.scss
index 1cd69b7bc..67c16bd36 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.scss
+++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.scss
@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
 // Copyright (c) KALEIDOS INC
-@use "../typography.scss" as t;
+@use "../../typography.scss" as t;
 
 .display-typography {
   @include t.use-typography("display");
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
similarity index 90%
rename from frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
index 67cdb3a98..28336b90f 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
@@ -1,9 +1,11 @@
 import * as React from "react";
 import Components from "@target/components";
-import { typographyIds } from "./typography.stories";
 
 const { Heading } = Components;
 const { StoryWrapper } = Components.storybook;
+const { typography } = Components.meta;
+
+const typographyIds = typography.sort();
 
 export default {
   title: "Foundations/Typography/Heading",
diff --git a/frontend/src/app/main/ui/ds/foundations/text.cljs b/frontend/src/app/main/ui/ds/foundations/typography/text.cljs
similarity index 97%
rename from frontend/src/app/main/ui/ds/foundations/text.cljs
rename to frontend/src/app/main/ui/ds/foundations/typography/text.cljs
index 0372a0b0f..e5e24907c 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.cljs
@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.text
+(ns app.main.ui.ds.foundations.typography.text
   (:require-macros
    [app.common.data.macros :as dm]
    [app.main.style :as stl])
diff --git a/frontend/src/app/main/ui/ds/foundations/text.mdx b/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
similarity index 90%
rename from frontend/src/app/main/ui/ds/foundations/text.mdx
rename to frontend/src/app/main/ui/ds/foundations/typography/text.mdx
index 0f526cf27..76c61a625 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
@@ -10,7 +10,7 @@ This component will add a text element to our code that will match the tag prop.
 
 This components accepts to props:
 
-- `tag` (default value: `p`) : Give a proper tag name (i.e. `p`, `span`, etc.). 
+- `tag` (default value: `p`) : Give a proper tag name (i.e. `p`, `span`, etc.).
 - `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
 
 You can check passed props to renderized components on hover `tag / typography`
@@ -28,8 +28,8 @@ Assuming the namespace of the typography is required as `t`:
 ```clj
 (ns app.main.ui.foo
   (:require
-   [app.main.ui.ds.foundations.text :refer [text*]]
-   [app.main.ui.ds.foundations.typography :as t]))
+   [app.main.ui.ds.foundations.typography :as t]
+   [app.main.ui.ds.foundations.typography.text :refer [text*]]))
 ```
 
 You can now use the typography IDs defined in the namespace:
diff --git a/frontend/src/app/main/ui/ds/foundations/text.scss b/frontend/src/app/main/ui/ds/foundations/typography/text.scss
similarity index 96%
rename from frontend/src/app/main/ui/ds/foundations/text.scss
rename to frontend/src/app/main/ui/ds/foundations/typography/text.scss
index 1cd69b7bc..67c16bd36 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.scss
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.scss
@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
 // Copyright (c) KALEIDOS INC
-@use "../typography.scss" as t;
+@use "../../typography.scss" as t;
 
 .display-typography {
   @include t.use-typography("display");
diff --git a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
similarity index 90%
rename from frontend/src/app/main/ui/ds/foundations/text.stories.jsx
rename to frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
index 271a09960..31cceaa5d 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
@@ -1,9 +1,11 @@
 import * as React from "react";
 import Components from "@target/components";
-import { typographyIds } from "./typography.stories";
 
 const { Text } = Components;
 const { StoryWrapper } = Components.storybook;
+const { typography } = Components.meta;
+
+const typographyIds = typography.sort();
 
 export default {
   title: "Foundations/Typography/Text",
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.mdx b/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx
similarity index 73%
rename from frontend/src/app/main/ui/ds/foundations/typography.mdx
rename to frontend/src/app/main/ui/ds/foundations/typography/typography.mdx
index e36d29271..a3fae5d15 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx
@@ -1,8 +1,7 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import * as TypographyStories from "./typography.stories";
+import { Canvas, Meta } from "@storybook/blocks";
 import Components from "@target/components";
 
-<Meta of={TypographyStories} />
+<Meta title="Foundations/Typography" />
 
 # Typography
 
@@ -19,7 +18,7 @@ This situation is something to be corrected in future improvements.
 Typographic colours are used in text elements such as headers
 and body and in the various components that make up the tool...
 
-The colours used in typography are the Foreground colours such 
+The colours used in typography are the Foreground colours such
 `--color-foreground-primary` or `--color-foreground-secondary`
 but different colours can be applied in specific component
 applications with their own styles, such as buttons.
@@ -55,7 +54,7 @@ for exceptions based on the size of the components.
 Hero style text for transitional pages (Login). If too large use large title in narrow windows.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Heading>
+  <Components.Text typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Text>
 </Canvas>
 
 ### Title large `title-large`
@@ -64,7 +63,7 @@ Page headers for main pages (dashboard, Profiles...). If too big use title
 (medium) in narrow windows.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Heading>
+  <Components.Text typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Text>
 </Canvas>
 
 ### Title medium `title-medium`
@@ -73,7 +72,7 @@ Default page title. Equivalent line height of 32px matches the height
 of buttons and other medium controls. Ideal for page header layout.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Title small `title-small`
@@ -81,7 +80,7 @@ of buttons and other medium controls. Ideal for page header layout.
 Uses the same size as body (large).
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Heading>
+  <Components.Text typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Headline
@@ -92,20 +91,20 @@ page titles (automated action titles, for example). Same line height as title (m
 ### Headline large `headline-large`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Headline medium `headline-medium`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 
 ### Headline small `headline-small`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Body
@@ -115,7 +114,7 @@ page titles (automated action titles, for example). Same line height as title (m
 Generic content.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Body medium `body-medium`
@@ -123,7 +122,7 @@ Generic content.
 Default UI font. Most commonly used for body text.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Text>
 </Canvas>
 
 
@@ -133,7 +132,7 @@ Small compact font with a line height of less than 16px.
 Use for single line scenarios, as the small size does not meet accessibility requirements.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Code font `code-font`
@@ -141,7 +140,7 @@ Use for single line scenarios, as the small size does not meet accessibility req
 Default style for rendering code blocks.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Heading>
+  <Components.Text typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Text>
 </Canvas>
 
 ## Fonts

From df858c2c7df639ed8cc84deae00c31e49aa5ce95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 10 Jul 2024 15:42:19 +0200
Subject: [PATCH 05/10] :paperclip: Move icon and raw-svg components to a
 common subdir

---
 frontend/src/app/main/ui/ds.cljs                              | 4 ++--
 frontend/src/app/main/ui/ds/foundations/{ => assets}/icon.clj | 2 +-
 .../src/app/main/ui/ds/foundations/{ => assets}/icon.cljs     | 4 ++--
 frontend/src/app/main/ui/ds/foundations/{ => assets}/icon.mdx | 2 +-
 .../src/app/main/ui/ds/foundations/{ => assets}/icon.scss     | 0
 .../app/main/ui/ds/foundations/{ => assets}/icon.stories.jsx  | 0
 .../src/app/main/ui/ds/foundations/{ => assets}/raw_svg.clj   | 2 +-
 .../src/app/main/ui/ds/foundations/{ => assets}/raw_svg.cljs  | 4 ++--
 .../src/app/main/ui/ds/foundations/{ => assets}/raw_svg.mdx   | 2 +-
 .../main/ui/ds/foundations/{ => assets}/raw_svg.stories.jsx   | 0
 frontend/src/app/main/ui/ds/foundations/typography.cljs       | 1 -
 11 files changed, 10 insertions(+), 11 deletions(-)
 rename frontend/src/app/main/ui/ds/foundations/{ => assets}/icon.clj (93%)
 rename frontend/src/app/main/ui/ds/foundations/{ => assets}/icon.cljs (99%)
 rename frontend/src/app/main/ui/ds/foundations/{ => assets}/icon.mdx (98%)
 rename frontend/src/app/main/ui/ds/foundations/{ => assets}/icon.scss (100%)
 rename frontend/src/app/main/ui/ds/foundations/{ => assets}/icon.stories.jsx (100%)
 rename frontend/src/app/main/ui/ds/foundations/{ => assets}/raw_svg.clj (93%)
 rename frontend/src/app/main/ui/ds/foundations/{ => assets}/raw_svg.cljs (90%)
 rename frontend/src/app/main/ui/ds/foundations/{ => assets}/raw_svg.mdx (91%)
 rename frontend/src/app/main/ui/ds/foundations/{ => assets}/raw_svg.stories.jsx (100%)

diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs
index 6143d4eb4..150048e7a 100644
--- a/frontend/src/app/main/ui/ds.cljs
+++ b/frontend/src/app/main/ui/ds.cljs
@@ -6,8 +6,8 @@
 
 (ns app.main.ui.ds
   (:require
-   [app.main.ui.ds.foundations.icon :refer [icon* icon-list]]
-   [app.main.ui.ds.foundations.raw-svg :refer [raw-svg* raw-svg-list]]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg* raw-svg-list]]
    [app.main.ui.ds.foundations.typography :refer [typography-list]]
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
diff --git a/frontend/src/app/main/ui/ds/foundations/icon.clj b/frontend/src/app/main/ui/ds/foundations/assets/icon.clj
similarity index 93%
rename from frontend/src/app/main/ui/ds/foundations/icon.clj
rename to frontend/src/app/main/ui/ds/foundations/assets/icon.clj
index 4f721c6d0..e51c10d35 100644
--- a/frontend/src/app/main/ui/ds/foundations/icon.clj
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.clj
@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.icon
+(ns app.main.ui.ds.foundations.assets.icon
   (:require
    [clojure.core :as c]
    [cuerdas.core :as str]
diff --git a/frontend/src/app/main/ui/ds/foundations/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
similarity index 99%
rename from frontend/src/app/main/ui/ds/foundations/icon.cljs
rename to frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
index f9aa7b402..fb901789c 100644
--- a/frontend/src/app/main/ui/ds/foundations/icon.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
@@ -4,12 +4,12 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.icon
+(ns app.main.ui.ds.foundations.assets.icon
   (:refer-clojure :exclude [mask])
   (:require-macros
    [app.common.data.macros :as dm]
    [app.main.style :as stl]
-   [app.main.ui.ds.foundations.icon :refer [collect-icons]])
+   [app.main.ui.ds.foundations.assets.icon :refer [collect-icons]])
   (:require
    [rumext.v2 :as mf]))
 
diff --git a/frontend/src/app/main/ui/ds/foundations/icon.mdx b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
similarity index 98%
rename from frontend/src/app/main/ui/ds/foundations/icon.mdx
rename to frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
index d83361d79..fc36208dc 100644
--- a/frontend/src/app/main/ui/ds/foundations/icon.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
@@ -41,7 +41,7 @@ Assuming the namespace is required as `i`:
 ```clj
 (ns app.main.ui.foo
   (:require
-   [app.main.ui.ds.foundations.icon :as i]))
+   [app.main.ui.ds.foundations.assets.icon :as i]))
 ```
 
 You can now use the icon IDs defined in the namespace:
diff --git a/frontend/src/app/main/ui/ds/foundations/icon.scss b/frontend/src/app/main/ui/ds/foundations/assets/icon.scss
similarity index 100%
rename from frontend/src/app/main/ui/ds/foundations/icon.scss
rename to frontend/src/app/main/ui/ds/foundations/assets/icon.scss
diff --git a/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
similarity index 100%
rename from frontend/src/app/main/ui/ds/foundations/icon.stories.jsx
rename to frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.clj b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj
similarity index 93%
rename from frontend/src/app/main/ui/ds/foundations/raw_svg.clj
rename to frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj
index 2ba5104ae..814702ef4 100644
--- a/frontend/src/app/main/ui/ds/foundations/raw_svg.clj
+++ b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj
@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.raw-svg
+(ns app.main.ui.ds.foundations.assets.raw-svg
   (:require
    [clojure.core :as c]
    [cuerdas.core :as str]
diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.cljs b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
similarity index 90%
rename from frontend/src/app/main/ui/ds/foundations/raw_svg.cljs
rename to frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
index c89201ace..f6e09ad9f 100644
--- a/frontend/src/app/main/ui/ds/foundations/raw_svg.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
@@ -4,11 +4,11 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.raw-svg
+(ns app.main.ui.ds.foundations.assets.raw-svg
   (:refer-clojure :exclude [mask])
   (:require-macros
    [app.common.data.macros :as dm]
-   [app.main.ui.ds.foundations.raw-svg :refer [collect-raw-svgs]])
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [collect-raw-svgs]])
   (:require
    [rumext.v2 :as mf]))
 
diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.mdx b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.mdx
similarity index 91%
rename from frontend/src/app/main/ui/ds/foundations/raw_svg.mdx
rename to frontend/src/app/main/ui/ds/foundations/assets/raw_svg.mdx
index c5eaed507..fcd5e2c09 100644
--- a/frontend/src/app/main/ui/ds/foundations/raw_svg.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.mdx
@@ -20,7 +20,7 @@ For convenience, asset IDs are available in the component namespace.
 ```clj
 (ns app.main.ui.foo
   (:require
-   [app.main.ui.ds.foundations.raw-svg :as svg]))
+   [app.main.ui.ds.foundations.assets.raw-svg :as svg]))
 ```
 
 ```clj
diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx
similarity index 100%
rename from frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx
rename to frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.cljs b/frontend/src/app/main/ui/ds/foundations/typography.cljs
index 9fd00b2c5..f52b0c583 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/typography.cljs
@@ -18,7 +18,6 @@
 (def ^:typography-id body-small "body-small")
 (def ^:typography-id code-font "code-font")
 
-
 (def typography-list #{display
                        title-large
                        title-medium

From d7ca4d49dc97c4caf63dca601d6f3c92f720d727 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 10 Jul 2024 15:53:27 +0200
Subject: [PATCH 06/10] :sparkles: Revamp icon stories

---
 .../ui/ds/foundations/assets/icon.stories.jsx | 41 ++++++++++++++-----
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
index 52bb1076c..4735b1d1f 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
@@ -6,15 +6,25 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
   Components.storybook;
 const { icons } = Components.meta;
 
-export default {
-  title: "Foundations/Icons",
-  component: Components.Icon,
-};
-
 const iconList = Object.entries(icons)
   .map(([_, value]) => value)
   .sort();
 
+export default {
+  title: "Foundations/Assets/Icon",
+  component: Components.Icon,
+  argTypes: {
+    icon: {
+      options: iconList,
+      control: { type: "select" }
+    },
+    size: {
+      options: ["m", "s"],
+      control: { type: "radio" }
+    }
+  }
+};
+
 export const AllIcons = {
   render: () => (
     <StoryWrapper theme="default">
@@ -41,17 +51,28 @@ export const AllIcons = {
 };
 
 export const Default = {
-  render: () => (
+  render: ({icon, ...args}) => (
     <StoryWrapper theme="default">
-      <Icon icon={icons.Pin} />
+      <Icon icon={icon} />
     </StoryWrapper>
   ),
+  args: {
+    icon: "pin",
+  },
+  parameters: {
+    controls: { exclude: "size" }
+  }
 };
 
-export const Small = {
-  render: () => (
+export const CustomSize = {
+  render: ({icon, size, ...args}) => (
     <StoryWrapper theme="default">
-      <Icon icon={icons.Pin} size="s" />
+      <Icon icon={icon} size={size} />
     </StoryWrapper>
   ),
+  args: {
+    icon: "pin",
+    size: "m",
+  }
 };
+

From 7e61acc4da1d2384477d8abdad0fae3860606c01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 10 Jul 2024 15:56:32 +0200
Subject: [PATCH 07/10] :lipstick: Update icon prop name

---
 .../main/ui/ds/foundations/assets/icon.cljs   |  4 +--
 .../main/ui/ds/foundations/assets/icon.mdx    |  6 ++--
 .../ui/ds/foundations/assets/icon.stories.jsx | 28 +++++++++++--------
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
index fb901789c..d1578d401 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
@@ -279,10 +279,10 @@
 
 (mf/defc icon*
   {::mf/props :obj}
-  [{:keys [icon size class] :rest props}]
+  [{:keys [id size class] :rest props}]
   (let [class (dm/str (or class "") " " (stl/css :icon))
         props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m})
         size-px (cond (= size "s") icon-size-s :else icon-size-m)
         offset (/ (- icon-size-m size-px) 2)]
     [:> "svg" props
-     [:use {:href (dm/str "#icon-" icon) :width size-px :height size-px :x offset :y offset}]]))
+     [:use {:href (dm/str "#icon-" id) :width size-px :height size-px :x offset :y offset}]]))
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
index fc36208dc..140b897a2 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
@@ -47,7 +47,7 @@ Assuming the namespace is required as `i`:
 You can now use the icon IDs defined in the namespace:
 
 ```clj
-[:> i/icon* {:icon i/pin}]
+[:> i/icon* {:id i/pin}]
 ```
 
 ### Customizing colors
@@ -59,7 +59,7 @@ If you need to override this behavior, you can use a `class` in the `<Icon>`
 component and set `color` to whatever value you prefer:
 
 ```clj
-[:> i/icon* {:icon i/add :class (stl/css :toolbar-icon)}]
+[:> i/icon* {:id i/add :class (stl/css :toolbar-icon)}]
 ```
 
 ```scss
@@ -74,7 +74,7 @@ By default, icons do not have any accessible text attached to them. You should
 add an `aria-label` attribute to set a proper text:
 
 ```clj
-[:> i/icon* {:icon i/add :aria-label (tr "foo.bar")}]
+[:> i/icon* {:id i/add :aria-label (tr "foo.bar")}]
 ```
 
 ## Usage guidelines for design
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
index 4735b1d1f..8cd62c291 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
@@ -14,7 +14,7 @@ export default {
   title: "Foundations/Assets/Icon",
   component: Components.Icon,
   argTypes: {
-    icon: {
+    id: {
       options: iconList,
       control: { type: "select" }
     },
@@ -25,12 +25,12 @@ export default {
   }
 };
 
-export const AllIcons = {
-  render: () => (
+export const All = {
+  render: ({size}) => (
     <StoryWrapper theme="default">
       <StoryHeader>
         <h1>All Icons</h1>
-        <p>Hover on an icon to see its ID</p>
+        <p>Hover on an icon to see its ID.</p>
       </StoryHeader>
       <StoryGrid>
         {iconList.map((iconId) => (
@@ -39,39 +39,43 @@ export const AllIcons = {
             key={iconId}
             style={{ color: "var(--color-accent-primary)" }}
           >
-            <Icon icon={iconId} />
+            <Icon id={iconId} size={size} />
           </StoryGridCell>
         ))}
       </StoryGrid>
     </StoryWrapper>
   ),
+  args: {
+    size: "m",
+  },
   parameters: {
+    controls: { exclude: ["id", "size"] },
     backgrounds: { disable: true },
   },
 };
 
 export const Default = {
-  render: ({icon, ...args}) => (
+  render: ({id, ...args}) => (
     <StoryWrapper theme="default">
-      <Icon icon={icon} />
+      <Icon id={id} {...args} />
     </StoryWrapper>
   ),
   args: {
-    icon: "pin",
+    id: "pin",
   },
   parameters: {
-    controls: { exclude: "size" }
+    controls: { exclude: ["size"] }
   }
 };
 
 export const CustomSize = {
-  render: ({icon, size, ...args}) => (
+  render: ({id, size, ...args}) => (
     <StoryWrapper theme="default">
-      <Icon icon={icon} size={size} />
+      <Icon id={id} size={size} {...args} />
     </StoryWrapper>
   ),
   args: {
-    icon: "pin",
+    id: "pin",
     size: "m",
   }
 };

From ba36023ae6674c2d22e739a7c216ce74d4a92b4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 10 Jul 2024 16:30:01 +0200
Subject: [PATCH 08/10] :sparkles: Revamp RawSvg stories and update prop name

---
 .../ui/ds/foundations/assets/icon.stories.jsx | 21 +++++-----
 .../ui/ds/foundations/assets/raw_svg.cljs     |  4 +-
 .../ds/foundations/assets/raw_svg.stories.jsx | 34 ++++++++++------
 .../typography/heading.stories.jsx            |  8 ++--
 .../foundations/typography/text.stories.jsx   | 40 ++++++++++---------
 5 files changed, 61 insertions(+), 46 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
index 8cd62c291..c6b93f266 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
@@ -16,17 +16,17 @@ export default {
   argTypes: {
     id: {
       options: iconList,
-      control: { type: "select" }
+      control: { type: "select" },
     },
     size: {
       options: ["m", "s"],
-      control: { type: "radio" }
-    }
-  }
+      control: { type: "radio" },
+    },
+  },
 };
 
 export const All = {
-  render: ({size}) => (
+  render: ({ size }) => (
     <StoryWrapper theme="default">
       <StoryHeader>
         <h1>All Icons</h1>
@@ -55,7 +55,7 @@ export const All = {
 };
 
 export const Default = {
-  render: ({id, ...args}) => (
+  render: ({ id, ...args }) => (
     <StoryWrapper theme="default">
       <Icon id={id} {...args} />
     </StoryWrapper>
@@ -64,12 +64,12 @@ export const Default = {
     id: "pin",
   },
   parameters: {
-    controls: { exclude: ["size"] }
-  }
+    controls: { exclude: ["size"] },
+  },
 };
 
 export const CustomSize = {
-  render: ({id, size, ...args}) => (
+  render: ({ id, size, ...args }) => (
     <StoryWrapper theme="default">
       <Icon id={id} size={size} {...args} />
     </StoryWrapper>
@@ -77,6 +77,5 @@ export const CustomSize = {
   args: {
     id: "pin",
     size: "m",
-  }
+  },
 };
-
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
index f6e09ad9f..afc691f1f 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
@@ -32,6 +32,6 @@
 
 (mf/defc raw-svg*
   {::mf/props :obj}
-  [{:keys [asset] :rest props}]
+  [{:keys [id] :rest props}]
   [:> "svg" props
-   [:use {:href (dm/str "#asset-" asset)}]])
+   [:use {:href (dm/str "#asset-" id)}]])
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx
index b73e6b56e..dcdf6e509 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx
@@ -6,41 +6,51 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
   Components.storybook;
 const { svgs } = Components.meta;
 
-export default {
-  title: "Foundations/RawSvg",
-  component: Components.RawSvg,
-};
-
 const assetList = Object.entries(svgs)
   .map(([_, value]) => value)
   .sort();
 
-export const AllAssets = {
-  render: () => (
+export default {
+  title: "Foundations/Assets/RawSvg",
+  component: Components.RawSvg,
+  argTypes: {
+    id: {
+      options: assetList,
+      control: { type: "select" },
+    },
+  },
+};
+
+export const All = {
+  render: ({}) => (
     <StoryWrapper theme="light">
       <StoryHeader>
-        <h1>All assets</h1>
-        <p>Hover on a asset to see its id.</p>
+        <h1>All SVG Assets</h1>
+        <p>Hover on an asset to see its ID.</p>
       </StoryHeader>
 
       <StoryGrid size="200">
         {assetList.map((x) => (
           <StoryGridCell key={x} title={x}>
-            <RawSvg asset={x} style={{ maxWidth: "100%" }} />
+            <RawSvg id={x} style={{ maxWidth: "100%" }} />
           </StoryGridCell>
         ))}
       </StoryGrid>
     </StoryWrapper>
   ),
   parameters: {
+    controls: { exclude: ["id"] },
     backgrounds: { values: [{ name: "debug", value: "#ccc" }] },
   },
 };
 
 export const Default = {
-  render: () => (
+  render: ({ id, ...args }) => (
     <StoryWrapper theme="default">
-      <RawSvg asset={svgs.BrandGitlab} width="200" />
+      <RawSvg id={id} {...args} width="200" />
     </StoryWrapper>
   ),
+  args: {
+    id: "brand-gitlab",
+  },
 };
diff --git a/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
index 28336b90f..30e592e88 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
@@ -24,13 +24,15 @@ export default {
 
 export const AnyHeading = {
   name: "Heading",
-  render: ({level, typography, ...args}) => (
+  render: ({ level, typography, ...args }) => (
     <StoryWrapper theme="default">
-      <Heading level={level} typography={typography} {...args}>Lorem ipsum</Heading>
+      <Heading level={level} typography={typography} {...args}>
+        Lorem ipsum
+      </Heading>
     </StoryWrapper>
   ),
   args: {
     level: 1,
     typography: "display",
-  }
+  },
 };
diff --git a/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
index 31cceaa5d..1eaec1b8e 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
@@ -14,29 +14,33 @@ export default {
     typography: {
       options: typographyIds,
       control: { type: "select" },
-    }
-  }
+    },
+  },
 };
 
 export const Default = {
-  render: ({typography, ...args}) => (
+  render: ({ typography, ...args }) => (
     <StoryWrapper theme="default">
-      <Text typography={typography} {...args}>Lorem ipsum</Text>
-    </StoryWrapper>
-  ),
-  args: {
-    typography: "display"
-  }
-};
-
-export const CustomTag = {
-  render: ({typography, ...args}) => (
-    <StoryWrapper theme="default">
-      <Text typography={typography} {...args}>Lorem ipsum</Text>
+      <Text typography={typography} {...args}>
+        Lorem ipsum
+      </Text>
     </StoryWrapper>
   ),
   args: {
     typography: "display",
-    as: "li"
-  }
-}
+  },
+};
+
+export const CustomTag = {
+  render: ({ typography, ...args }) => (
+    <StoryWrapper theme="default">
+      <Text typography={typography} {...args}>
+        Lorem ipsum
+      </Text>
+    </StoryWrapper>
+  ),
+  args: {
+    typography: "display",
+    as: "li",
+  },
+};

From b473b7905d42b66a6e301d96bcaff18a4508f6cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Thu, 11 Jul 2024 12:24:19 +0200
Subject: [PATCH 09/10] :bug: Fix Text docs re: accessibility

---
 .../src/app/main/ui/ds/foundations/typography/text.mdx   | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/foundations/typography/text.mdx b/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
index 76c61a625..52c97e52d 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
@@ -37,12 +37,3 @@ You can now use the typography IDs defined in the namespace:
 ```clj
 [:> text* {:typography t/title-large :tag "p"} "Welcome to Penpot"]
 ```
-
-## Accesibility
-
-There should only be one level 1 heading `<h1>` per page.
-
-Headings are used to navigate the page and must follow the `<h1>` -> `<h2>` -> `<h3>` -> `<h4>` -> `<h5>` ->  `<h6>` hierarchy.
-For example, do not skip levels in the `<h1>` -> `<h3>` hierarchy if there is no `<h2>` in between.
-
-We should not choose the heading level by its visual aspect.

From ba4732c5263c8994f5a4424d5db6063f9e8ce8bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Thu, 11 Jul 2024 12:42:26 +0200
Subject: [PATCH 10/10] :bug: Fix text component misbehaving when prop is empty
 string

---
 .../app/main/ui/ds/foundations/typography/text.cljs    |  2 +-
 .../src/app/main/ui/ds/foundations/typography/text.mdx | 10 +---------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/foundations/typography/text.cljs b/frontend/src/app/main/ui/ds/foundations/typography/text.cljs
index e5e24907c..6f9baa2dd 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography/text.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.cljs
@@ -22,7 +22,7 @@
   (assert (valid-typography? (dm/str typography))
           (dm/str typography " is an unknown typography"))
 
-  (let [as (or as "p")
+  (let [as (if (or (empty? as) (nil? as)) "p" as)
         class (dm/str (or class "") " " (stl/css-case :display-typography (= typography t/display)
                                                       :title-large-typography (= typography t/title-large)
                                                       :title-medium-typography (= typography t/title-medium)
diff --git a/frontend/src/app/main/ui/ds/foundations/typography/text.mdx b/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
index 52c97e52d..1abe72cc1 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
@@ -8,14 +8,6 @@ This component will add a text element to our code that will match the tag prop.
 
 ## Technical notes
 
-This components accepts to props:
-
-- `tag` (default value: `p`) : Give a proper tag name (i.e. `p`, `span`, etc.).
-- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
-
-You can check passed props to renderized components on hover `tag / typography`
-
-
 ### Using typography IDs
 
 There are typography ID definitions you can use in your code rather than typing the
@@ -35,5 +27,5 @@ Assuming the namespace of the typography is required as `t`:
 You can now use the typography IDs defined in the namespace:
 
 ```clj
-[:> text* {:typography t/title-large :tag "p"} "Welcome to Penpot"]
+[:> text* {:typography t/title-large :as "p"} "Welcome to Penpot"]
 ```