@mich8060/unified-design-system 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (454) hide show
  1. package/LICENSE +21 -0
  2. package/README.lib.md +103 -0
  3. package/README.md +265 -0
  4. package/dist/LICENSE +21 -0
  5. package/dist/README.md +103 -0
  6. package/dist/package.json +49 -0
  7. package/dist/styles.css +20544 -0
  8. package/dist/uds-components.es.js +67031 -0
  9. package/dist/uds-components.es.js.map +1 -0
  10. package/dist/uds-components.umd.js +67048 -0
  11. package/dist/uds-components.umd.js.map +1 -0
  12. package/package.json +158 -0
  13. package/src/styles/_typography.scss +932 -0
  14. package/src/styles/_utilities.scss +3738 -0
  15. package/src/styles/_variables.scss +620 -0
  16. package/src/styles/prism-custom.css +204 -0
  17. package/src/styles/prism-custom.scss +205 -0
  18. package/src/styles/tokens.css +1463 -0
  19. package/src/styles/tokens.scss +1116 -0
  20. package/src/ui/Accordion/Accordion.ai.md +69 -0
  21. package/src/ui/Accordion/Accordion.scss +87 -0
  22. package/src/ui/Accordion/Accordion.spec.ts +25 -0
  23. package/src/ui/Accordion/Accordion.stories.tsx +46 -0
  24. package/src/ui/Accordion/Accordion.test.tsx +54 -0
  25. package/src/ui/Accordion/Accordion.tsx +73 -0
  26. package/src/ui/Accordion/Accordion.types.ts +15 -0
  27. package/src/ui/Accordion/index.js +1 -0
  28. package/src/ui/ActionMenu/ActionMenu.ai.md +106 -0
  29. package/src/ui/ActionMenu/ActionMenu.jsx +437 -0
  30. package/src/ui/ActionMenu/ActionMenu.scss +252 -0
  31. package/src/ui/ActionMenu/ActionMenu.spec.ts +12 -0
  32. package/src/ui/ActionMenu/ActionMenu.stories.jsx +14 -0
  33. package/src/ui/ActionMenu/ActionMenu.stories.tsx +124 -0
  34. package/src/ui/ActionMenu/ActionMenu.test.tsx +1 -0
  35. package/src/ui/ActionMenu/ActionMenu.tsx +6 -0
  36. package/src/ui/ActionMenu/ActionMenu.types.ts +3 -0
  37. package/src/ui/ActionMenu/index.js +1 -0
  38. package/src/ui/Avatar/Avatar.ai.md +54 -0
  39. package/src/ui/Avatar/Avatar.jsx +49 -0
  40. package/src/ui/Avatar/Avatar.scss +87 -0
  41. package/src/ui/Avatar/Avatar.spec.ts +12 -0
  42. package/src/ui/Avatar/Avatar.stories.jsx +14 -0
  43. package/src/ui/Avatar/Avatar.stories.tsx +14 -0
  44. package/src/ui/Avatar/Avatar.test.tsx +1 -0
  45. package/src/ui/Avatar/Avatar.tsx +6 -0
  46. package/src/ui/Avatar/Avatar.types.ts +3 -0
  47. package/src/ui/Avatar/index.js +1 -0
  48. package/src/ui/Badge/Badge.ai.md +37 -0
  49. package/src/ui/Badge/Badge.jsx +64 -0
  50. package/src/ui/Badge/Badge.scss +84 -0
  51. package/src/ui/Badge/Badge.spec.ts +12 -0
  52. package/src/ui/Badge/Badge.stories.jsx +14 -0
  53. package/src/ui/Badge/Badge.stories.tsx +14 -0
  54. package/src/ui/Badge/Badge.test.tsx +1 -0
  55. package/src/ui/Badge/Badge.tsx +6 -0
  56. package/src/ui/Badge/Badge.types.ts +3 -0
  57. package/src/ui/Badge/index.js +1 -0
  58. package/src/ui/Branding/Branding.ai.md +81 -0
  59. package/src/ui/Branding/Branding.jsx +127 -0
  60. package/src/ui/Branding/Branding.scss +57 -0
  61. package/src/ui/Branding/Branding.spec.ts +12 -0
  62. package/src/ui/Branding/Branding.stories.jsx +14 -0
  63. package/src/ui/Branding/Branding.stories.tsx +14 -0
  64. package/src/ui/Branding/Branding.test.tsx +1 -0
  65. package/src/ui/Branding/Branding.tsx +6 -0
  66. package/src/ui/Branding/Branding.types.ts +3 -0
  67. package/src/ui/Branding/index.js +1 -0
  68. package/src/ui/Breadcrumb/Breadcrumb.ai.md +50 -0
  69. package/src/ui/Breadcrumb/Breadcrumb.jsx +167 -0
  70. package/src/ui/Breadcrumb/Breadcrumb.scss +46 -0
  71. package/src/ui/Breadcrumb/Breadcrumb.spec.ts +12 -0
  72. package/src/ui/Breadcrumb/Breadcrumb.stories.jsx +26 -0
  73. package/src/ui/Breadcrumb/Breadcrumb.stories.tsx +14 -0
  74. package/src/ui/Breadcrumb/Breadcrumb.test.tsx +1 -0
  75. package/src/ui/Breadcrumb/Breadcrumb.tsx +6 -0
  76. package/src/ui/Breadcrumb/Breadcrumb.types.ts +3 -0
  77. package/src/ui/Breadcrumb/index.js +2 -0
  78. package/src/ui/Button/Button.ai.md +122 -0
  79. package/src/ui/Button/Button.figma.tsx +49 -0
  80. package/src/ui/Button/Button.scss +188 -0
  81. package/src/ui/Button/Button.spec.ts +52 -0
  82. package/src/ui/Button/Button.stories.tsx +199 -0
  83. package/src/ui/Button/Button.test.tsx +85 -0
  84. package/src/ui/Button/Button.tsx +131 -0
  85. package/src/ui/Button/Button.types.ts +32 -0
  86. package/src/ui/Button/index.js +1 -0
  87. package/src/ui/Calendar/Calendar.ai.md +151 -0
  88. package/src/ui/Calendar/Calendar.jsx +504 -0
  89. package/src/ui/Calendar/Calendar.scss +451 -0
  90. package/src/ui/Calendar/Calendar.spec.ts +12 -0
  91. package/src/ui/Calendar/Calendar.stories.jsx +14 -0
  92. package/src/ui/Calendar/Calendar.stories.tsx +14 -0
  93. package/src/ui/Calendar/Calendar.test.tsx +1 -0
  94. package/src/ui/Calendar/Calendar.tsx +6 -0
  95. package/src/ui/Calendar/Calendar.types.ts +3 -0
  96. package/src/ui/Calendar/index.js +1 -0
  97. package/src/ui/Card/Card.ai.md +41 -0
  98. package/src/ui/Card/Card.jsx +25 -0
  99. package/src/ui/Card/Card.scss +47 -0
  100. package/src/ui/Card/Card.spec.ts +12 -0
  101. package/src/ui/Card/Card.stories.jsx +28 -0
  102. package/src/ui/Card/Card.stories.tsx +14 -0
  103. package/src/ui/Card/Card.test.tsx +1 -0
  104. package/src/ui/Card/Card.tsx +6 -0
  105. package/src/ui/Card/Card.types.ts +3 -0
  106. package/src/ui/Card/index.js +1 -0
  107. package/src/ui/Checkbox/Checkbox.ai.md +50 -0
  108. package/src/ui/Checkbox/Checkbox.jsx +73 -0
  109. package/src/ui/Checkbox/Checkbox.scss +115 -0
  110. package/src/ui/Checkbox/Checkbox.spec.ts +12 -0
  111. package/src/ui/Checkbox/Checkbox.stories.jsx +14 -0
  112. package/src/ui/Checkbox/Checkbox.stories.tsx +14 -0
  113. package/src/ui/Checkbox/Checkbox.test.tsx +1 -0
  114. package/src/ui/Checkbox/Checkbox.tsx +6 -0
  115. package/src/ui/Checkbox/Checkbox.types.ts +3 -0
  116. package/src/ui/Checkbox/index.js +1 -0
  117. package/src/ui/Chip/Chip.ai.md +43 -0
  118. package/src/ui/Chip/Chip.jsx +102 -0
  119. package/src/ui/Chip/Chip.scss +118 -0
  120. package/src/ui/Chip/Chip.spec.ts +12 -0
  121. package/src/ui/Chip/Chip.stories.jsx +14 -0
  122. package/src/ui/Chip/Chip.stories.tsx +14 -0
  123. package/src/ui/Chip/Chip.test.tsx +1 -0
  124. package/src/ui/Chip/Chip.tsx +6 -0
  125. package/src/ui/Chip/Chip.types.ts +3 -0
  126. package/src/ui/Chip/index.js +1 -0
  127. package/src/ui/Datepicker/Datepicker.ai.md +45 -0
  128. package/src/ui/Datepicker/Datepicker.jsx +330 -0
  129. package/src/ui/Datepicker/Datepicker.scss +206 -0
  130. package/src/ui/Datepicker/Datepicker.spec.ts +12 -0
  131. package/src/ui/Datepicker/Datepicker.stories.jsx +14 -0
  132. package/src/ui/Datepicker/Datepicker.stories.tsx +14 -0
  133. package/src/ui/Datepicker/Datepicker.test.tsx +1 -0
  134. package/src/ui/Datepicker/Datepicker.tsx +6 -0
  135. package/src/ui/Datepicker/Datepicker.types.ts +3 -0
  136. package/src/ui/Datepicker/index.js +2 -0
  137. package/src/ui/Divider/Divider.ai.md +34 -0
  138. package/src/ui/Divider/Divider.jsx +89 -0
  139. package/src/ui/Divider/Divider.scss +116 -0
  140. package/src/ui/Divider/Divider.spec.ts +12 -0
  141. package/src/ui/Divider/Divider.stories.jsx +14 -0
  142. package/src/ui/Divider/Divider.stories.tsx +14 -0
  143. package/src/ui/Divider/Divider.test.tsx +1 -0
  144. package/src/ui/Divider/Divider.tsx +6 -0
  145. package/src/ui/Divider/Divider.types.ts +3 -0
  146. package/src/ui/Divider/index.js +1 -0
  147. package/src/ui/DotStatus/DotStatus.ai.md +36 -0
  148. package/src/ui/DotStatus/DotStatus.jsx +64 -0
  149. package/src/ui/DotStatus/DotStatus.scss +87 -0
  150. package/src/ui/DotStatus/DotStatus.spec.ts +12 -0
  151. package/src/ui/DotStatus/DotStatus.stories.jsx +14 -0
  152. package/src/ui/DotStatus/DotStatus.stories.tsx +14 -0
  153. package/src/ui/DotStatus/DotStatus.test.tsx +1 -0
  154. package/src/ui/DotStatus/DotStatus.tsx +6 -0
  155. package/src/ui/DotStatus/DotStatus.types.ts +3 -0
  156. package/src/ui/DotStatus/index.js +1 -0
  157. package/src/ui/Dropdown/Dropdown.ai.md +118 -0
  158. package/src/ui/Dropdown/Dropdown.scss +129 -0
  159. package/src/ui/Dropdown/Dropdown.spec.ts +54 -0
  160. package/src/ui/Dropdown/Dropdown.stories.tsx +59 -0
  161. package/src/ui/Dropdown/Dropdown.test.tsx +37 -0
  162. package/src/ui/Dropdown/Dropdown.tsx +119 -0
  163. package/src/ui/Dropdown/Dropdown.types.ts +25 -0
  164. package/src/ui/Dropdown/index.js +1 -0
  165. package/src/ui/EventCard/EventCard.ai.md +101 -0
  166. package/src/ui/EventCard/EventCard.jsx +92 -0
  167. package/src/ui/EventCard/EventCard.scss +186 -0
  168. package/src/ui/EventCard/EventCard.spec.ts +12 -0
  169. package/src/ui/EventCard/EventCard.stories.jsx +14 -0
  170. package/src/ui/EventCard/EventCard.stories.tsx +14 -0
  171. package/src/ui/EventCard/EventCard.test.tsx +1 -0
  172. package/src/ui/EventCard/EventCard.tsx +6 -0
  173. package/src/ui/EventCard/EventCard.types.ts +3 -0
  174. package/src/ui/EventCard/index.js +1 -0
  175. package/src/ui/Field/Field.ai.md +69 -0
  176. package/src/ui/Field/Field.jsx +89 -0
  177. package/src/ui/Field/Field.scss +76 -0
  178. package/src/ui/Field/Field.spec.ts +12 -0
  179. package/src/ui/Field/Field.stories.jsx +14 -0
  180. package/src/ui/Field/Field.stories.tsx +14 -0
  181. package/src/ui/Field/Field.test.tsx +1 -0
  182. package/src/ui/Field/Field.tsx +6 -0
  183. package/src/ui/Field/Field.types.ts +3 -0
  184. package/src/ui/Field/index.js +1 -0
  185. package/src/ui/FileUpload/FileUpload.ai.md +38 -0
  186. package/src/ui/FileUpload/FileUpload.figma.tsx +28 -0
  187. package/src/ui/FileUpload/FileUpload.jsx +153 -0
  188. package/src/ui/FileUpload/FileUpload.scss +78 -0
  189. package/src/ui/FileUpload/FileUpload.spec.ts +12 -0
  190. package/src/ui/FileUpload/FileUpload.stories.jsx +14 -0
  191. package/src/ui/FileUpload/FileUpload.stories.tsx +14 -0
  192. package/src/ui/FileUpload/FileUpload.test.tsx +1 -0
  193. package/src/ui/FileUpload/FileUpload.tsx +6 -0
  194. package/src/ui/FileUpload/FileUpload.types.ts +3 -0
  195. package/src/ui/FileUpload/index.js +2 -0
  196. package/src/ui/Flex/Flex.ai.md +130 -0
  197. package/src/ui/Flex/Flex.jsx +53 -0
  198. package/src/ui/Flex/Flex.scss +119 -0
  199. package/src/ui/Flex/Flex.spec.ts +12 -0
  200. package/src/ui/Flex/Flex.stories.jsx +14 -0
  201. package/src/ui/Flex/Flex.stories.tsx +14 -0
  202. package/src/ui/Flex/Flex.test.tsx +1 -0
  203. package/src/ui/Flex/Flex.tsx +6 -0
  204. package/src/ui/Flex/Flex.types.ts +3 -0
  205. package/src/ui/Flex/index.js +1 -0
  206. package/src/ui/Icon/Icon.ai.md +46 -0
  207. package/src/ui/Icon/Icon.figma.tsx +22 -0
  208. package/src/ui/Icon/Icon.jsx +47 -0
  209. package/src/ui/Icon/Icon.scss +1 -0
  210. package/src/ui/Icon/Icon.spec.ts +12 -0
  211. package/src/ui/Icon/Icon.stories.jsx +14 -0
  212. package/src/ui/Icon/Icon.stories.tsx +14 -0
  213. package/src/ui/Icon/Icon.test.tsx +1 -0
  214. package/src/ui/Icon/Icon.tsx +6 -0
  215. package/src/ui/Icon/Icon.types.ts +3 -0
  216. package/src/ui/Icon/index.js +1 -0
  217. package/src/ui/ImageAspect/ImageAspect.ai.md +37 -0
  218. package/src/ui/ImageAspect/ImageAspect.jsx +56 -0
  219. package/src/ui/ImageAspect/ImageAspect.scss +62 -0
  220. package/src/ui/ImageAspect/ImageAspect.spec.ts +12 -0
  221. package/src/ui/ImageAspect/ImageAspect.stories.jsx +14 -0
  222. package/src/ui/ImageAspect/ImageAspect.stories.tsx +14 -0
  223. package/src/ui/ImageAspect/ImageAspect.test.tsx +1 -0
  224. package/src/ui/ImageAspect/ImageAspect.tsx +6 -0
  225. package/src/ui/ImageAspect/ImageAspect.types.ts +3 -0
  226. package/src/ui/ImageAspect/index.js +1 -0
  227. package/src/ui/Input/Input.ai.md +89 -0
  228. package/src/ui/Input/Input.figma.tsx +35 -0
  229. package/src/ui/Input/Input.scss +126 -0
  230. package/src/ui/Input/Input.spec.ts +54 -0
  231. package/src/ui/Input/Input.stories.tsx +72 -0
  232. package/src/ui/Input/Input.test.tsx +70 -0
  233. package/src/ui/Input/Input.tsx +91 -0
  234. package/src/ui/Input/Input.types.ts +22 -0
  235. package/src/ui/Input/index.js +2 -0
  236. package/src/ui/Key/Key.ai.md +31 -0
  237. package/src/ui/Key/Key.jsx +37 -0
  238. package/src/ui/Key/Key.scss +31 -0
  239. package/src/ui/Key/Key.spec.ts +12 -0
  240. package/src/ui/Key/Key.stories.jsx +14 -0
  241. package/src/ui/Key/Key.stories.tsx +14 -0
  242. package/src/ui/Key/Key.test.tsx +1 -0
  243. package/src/ui/Key/Key.tsx +6 -0
  244. package/src/ui/Key/Key.types.ts +3 -0
  245. package/src/ui/Key/index.js +1 -0
  246. package/src/ui/Menu/Menu.jsx +232 -0
  247. package/src/ui/Menu/Menu.scss +370 -0
  248. package/src/ui/Menu/Menu.spec.ts +12 -0
  249. package/src/ui/Menu/Menu.stories.jsx +41 -0
  250. package/src/ui/Menu/Menu.stories.tsx +14 -0
  251. package/src/ui/Menu/Menu.test.tsx +1 -0
  252. package/src/ui/Menu/Menu.tsx +6 -0
  253. package/src/ui/Menu/Menu.types.ts +3 -0
  254. package/src/ui/Menu/index.js +1 -0
  255. package/src/ui/MicroCalendar/MicroCalendar.ai.md +35 -0
  256. package/src/ui/MicroCalendar/MicroCalendar.jsx +393 -0
  257. package/src/ui/MicroCalendar/MicroCalendar.scss +289 -0
  258. package/src/ui/MicroCalendar/MicroCalendar.spec.ts +12 -0
  259. package/src/ui/MicroCalendar/MicroCalendar.stories.jsx +14 -0
  260. package/src/ui/MicroCalendar/MicroCalendar.stories.tsx +14 -0
  261. package/src/ui/MicroCalendar/MicroCalendar.test.tsx +1 -0
  262. package/src/ui/MicroCalendar/MicroCalendar.tsx +6 -0
  263. package/src/ui/MicroCalendar/MicroCalendar.types.ts +3 -0
  264. package/src/ui/MicroCalendar/index.js +1 -0
  265. package/src/ui/Modal/Modal.ai.md +150 -0
  266. package/src/ui/Modal/Modal.jsx +173 -0
  267. package/src/ui/Modal/Modal.scss +179 -0
  268. package/src/ui/Modal/Modal.spec.ts +12 -0
  269. package/src/ui/Modal/Modal.stories.jsx +14 -0
  270. package/src/ui/Modal/Modal.stories.tsx +14 -0
  271. package/src/ui/Modal/Modal.test.tsx +1 -0
  272. package/src/ui/Modal/Modal.tsx +6 -0
  273. package/src/ui/Modal/Modal.types.ts +3 -0
  274. package/src/ui/Modal/index.js +1 -0
  275. package/src/ui/Pagination/Pagination.ai.md +30 -0
  276. package/src/ui/Pagination/Pagination.jsx +237 -0
  277. package/src/ui/Pagination/Pagination.scss +182 -0
  278. package/src/ui/Pagination/Pagination.spec.ts +12 -0
  279. package/src/ui/Pagination/Pagination.stories.jsx +14 -0
  280. package/src/ui/Pagination/Pagination.stories.tsx +14 -0
  281. package/src/ui/Pagination/Pagination.test.tsx +1 -0
  282. package/src/ui/Pagination/Pagination.tsx +6 -0
  283. package/src/ui/Pagination/Pagination.types.ts +3 -0
  284. package/src/ui/Pagination/index.js +1 -0
  285. package/src/ui/PillToggle/PillToggle.ai.md +44 -0
  286. package/src/ui/PillToggle/PillToggle.jsx +56 -0
  287. package/src/ui/PillToggle/PillToggle.scss +84 -0
  288. package/src/ui/PillToggle/PillToggle.spec.ts +12 -0
  289. package/src/ui/PillToggle/PillToggle.stories.jsx +14 -0
  290. package/src/ui/PillToggle/PillToggle.stories.tsx +14 -0
  291. package/src/ui/PillToggle/PillToggle.test.tsx +1 -0
  292. package/src/ui/PillToggle/PillToggle.tsx +6 -0
  293. package/src/ui/PillToggle/PillToggle.types.ts +3 -0
  294. package/src/ui/PillToggle/index.js +1 -0
  295. package/src/ui/Playground/Playground.ai.md +96 -0
  296. package/src/ui/Playground/Playground.jsx +524 -0
  297. package/src/ui/Playground/Playground.scss +310 -0
  298. package/src/ui/Playground/Playground.spec.ts +12 -0
  299. package/src/ui/Playground/Playground.stories.jsx +14 -0
  300. package/src/ui/Playground/Playground.stories.tsx +14 -0
  301. package/src/ui/Playground/Playground.test.tsx +1 -0
  302. package/src/ui/Playground/Playground.tsx +6 -0
  303. package/src/ui/Playground/Playground.types.ts +3 -0
  304. package/src/ui/Playground/index.js +2 -0
  305. package/src/ui/ProgressCircle/ProgressCircle.ai.md +36 -0
  306. package/src/ui/ProgressCircle/ProgressCircle.jsx +147 -0
  307. package/src/ui/ProgressCircle/ProgressCircle.scss +143 -0
  308. package/src/ui/ProgressCircle/ProgressCircle.spec.ts +12 -0
  309. package/src/ui/ProgressCircle/ProgressCircle.stories.jsx +14 -0
  310. package/src/ui/ProgressCircle/ProgressCircle.stories.tsx +14 -0
  311. package/src/ui/ProgressCircle/ProgressCircle.test.tsx +1 -0
  312. package/src/ui/ProgressCircle/ProgressCircle.tsx +6 -0
  313. package/src/ui/ProgressCircle/ProgressCircle.types.ts +3 -0
  314. package/src/ui/ProgressCircle/index.js +1 -0
  315. package/src/ui/ProgressIndicator/ProgressIndicator.ai.md +27 -0
  316. package/src/ui/ProgressIndicator/ProgressIndicator.jsx +92 -0
  317. package/src/ui/ProgressIndicator/ProgressIndicator.scss +133 -0
  318. package/src/ui/ProgressIndicator/ProgressIndicator.spec.ts +12 -0
  319. package/src/ui/ProgressIndicator/ProgressIndicator.stories.jsx +14 -0
  320. package/src/ui/ProgressIndicator/ProgressIndicator.stories.tsx +14 -0
  321. package/src/ui/ProgressIndicator/ProgressIndicator.test.tsx +1 -0
  322. package/src/ui/ProgressIndicator/ProgressIndicator.tsx +6 -0
  323. package/src/ui/ProgressIndicator/ProgressIndicator.types.ts +3 -0
  324. package/src/ui/ProgressIndicator/index.js +1 -0
  325. package/src/ui/Radio/Radio.ai.md +53 -0
  326. package/src/ui/Radio/Radio.jsx +57 -0
  327. package/src/ui/Radio/Radio.scss +89 -0
  328. package/src/ui/Radio/Radio.spec.ts +12 -0
  329. package/src/ui/Radio/Radio.stories.jsx +14 -0
  330. package/src/ui/Radio/Radio.stories.tsx +14 -0
  331. package/src/ui/Radio/Radio.test.tsx +1 -0
  332. package/src/ui/Radio/Radio.tsx +6 -0
  333. package/src/ui/Radio/Radio.types.ts +3 -0
  334. package/src/ui/Radio/index.js +1 -0
  335. package/src/ui/Slider/Slider.ai.md +33 -0
  336. package/src/ui/Slider/Slider.jsx +283 -0
  337. package/src/ui/Slider/Slider.scss +156 -0
  338. package/src/ui/Slider/Slider.spec.ts +12 -0
  339. package/src/ui/Slider/Slider.stories.jsx +14 -0
  340. package/src/ui/Slider/Slider.stories.tsx +14 -0
  341. package/src/ui/Slider/Slider.test.tsx +1 -0
  342. package/src/ui/Slider/Slider.tsx +6 -0
  343. package/src/ui/Slider/Slider.types.ts +3 -0
  344. package/src/ui/Slider/index.js +1 -0
  345. package/src/ui/Status/Status.ai.md +36 -0
  346. package/src/ui/Status/Status.jsx +66 -0
  347. package/src/ui/Status/Status.scss +90 -0
  348. package/src/ui/Status/Status.spec.ts +12 -0
  349. package/src/ui/Status/Status.stories.jsx +14 -0
  350. package/src/ui/Status/Status.stories.tsx +14 -0
  351. package/src/ui/Status/Status.test.tsx +1 -0
  352. package/src/ui/Status/Status.tsx +6 -0
  353. package/src/ui/Status/Status.types.ts +3 -0
  354. package/src/ui/Status/index.js +1 -0
  355. package/src/ui/Steps/Steps.ai.md +56 -0
  356. package/src/ui/Steps/Steps.jsx +201 -0
  357. package/src/ui/Steps/Steps.scss +240 -0
  358. package/src/ui/Steps/Steps.spec.ts +12 -0
  359. package/src/ui/Steps/Steps.stories.jsx +14 -0
  360. package/src/ui/Steps/Steps.stories.tsx +14 -0
  361. package/src/ui/Steps/Steps.test.tsx +1 -0
  362. package/src/ui/Steps/Steps.tsx +6 -0
  363. package/src/ui/Steps/Steps.types.ts +3 -0
  364. package/src/ui/Steps/index.js +1 -0
  365. package/src/ui/Table/Table.ai.md +108 -0
  366. package/src/ui/Table/Table.jsx +143 -0
  367. package/src/ui/Table/Table.scss +90 -0
  368. package/src/ui/Table/Table.spec.ts +12 -0
  369. package/src/ui/Table/Table.stories.jsx +14 -0
  370. package/src/ui/Table/Table.stories.tsx +14 -0
  371. package/src/ui/Table/Table.test.tsx +1 -0
  372. package/src/ui/Table/Table.tsx +6 -0
  373. package/src/ui/Table/Table.types.ts +3 -0
  374. package/src/ui/Table/index.js +1 -0
  375. package/src/ui/Tabs/TabItem.jsx +80 -0
  376. package/src/ui/Tabs/Tabs.ai.md +52 -0
  377. package/src/ui/Tabs/Tabs.figma.tsx +30 -0
  378. package/src/ui/Tabs/Tabs.jsx +318 -0
  379. package/src/ui/Tabs/Tabs.scss +164 -0
  380. package/src/ui/Tabs/Tabs.spec.ts +12 -0
  381. package/src/ui/Tabs/Tabs.stories.jsx +18 -0
  382. package/src/ui/Tabs/Tabs.stories.tsx +14 -0
  383. package/src/ui/Tabs/Tabs.test.tsx +1 -0
  384. package/src/ui/Tabs/Tabs.tsx +6 -0
  385. package/src/ui/Tabs/Tabs.types.ts +3 -0
  386. package/src/ui/Tabs/index.js +3 -0
  387. package/src/ui/Tag/Tag.ai.md +59 -0
  388. package/src/ui/Tag/Tag.figma.tsx +29 -0
  389. package/src/ui/Tag/Tag.jsx +93 -0
  390. package/src/ui/Tag/Tag.scss +258 -0
  391. package/src/ui/Tag/Tag.spec.ts +12 -0
  392. package/src/ui/Tag/Tag.stories.jsx +14 -0
  393. package/src/ui/Tag/Tag.stories.tsx +14 -0
  394. package/src/ui/Tag/Tag.test.tsx +1 -0
  395. package/src/ui/Tag/Tag.tsx +6 -0
  396. package/src/ui/Tag/Tag.types.ts +3 -0
  397. package/src/ui/Tag/index.js +2 -0
  398. package/src/ui/Textarea/Textarea.ai.md +40 -0
  399. package/src/ui/Textarea/Textarea.figma.tsx +35 -0
  400. package/src/ui/Textarea/Textarea.jsx +68 -0
  401. package/src/ui/Textarea/Textarea.scss +71 -0
  402. package/src/ui/Textarea/Textarea.spec.ts +12 -0
  403. package/src/ui/Textarea/Textarea.stories.jsx +14 -0
  404. package/src/ui/Textarea/Textarea.stories.tsx +14 -0
  405. package/src/ui/Textarea/Textarea.test.tsx +1 -0
  406. package/src/ui/Textarea/Textarea.tsx +6 -0
  407. package/src/ui/Textarea/Textarea.types.ts +3 -0
  408. package/src/ui/Textarea/index.js +2 -0
  409. package/src/ui/Toast/Toast.ai.md +47 -0
  410. package/src/ui/Toast/Toast.jsx +75 -0
  411. package/src/ui/Toast/Toast.scss +132 -0
  412. package/src/ui/Toast/Toast.spec.ts +12 -0
  413. package/src/ui/Toast/Toast.stories.jsx +14 -0
  414. package/src/ui/Toast/Toast.stories.tsx +14 -0
  415. package/src/ui/Toast/Toast.test.tsx +1 -0
  416. package/src/ui/Toast/Toast.tsx +6 -0
  417. package/src/ui/Toast/Toast.types.ts +3 -0
  418. package/src/ui/Toast/index.js +2 -0
  419. package/src/ui/Toggle/Toggle.ai.md +37 -0
  420. package/src/ui/Toggle/Toggle.jsx +73 -0
  421. package/src/ui/Toggle/Toggle.scss +139 -0
  422. package/src/ui/Toggle/Toggle.spec.ts +12 -0
  423. package/src/ui/Toggle/Toggle.stories.jsx +14 -0
  424. package/src/ui/Toggle/Toggle.stories.tsx +14 -0
  425. package/src/ui/Toggle/Toggle.test.tsx +1 -0
  426. package/src/ui/Toggle/Toggle.tsx +6 -0
  427. package/src/ui/Toggle/Toggle.types.ts +3 -0
  428. package/src/ui/Toggle/index.js +1 -0
  429. package/src/ui/Tooltip/Tooltip.ai.md +33 -0
  430. package/src/ui/Tooltip/Tooltip.figma.tsx +24 -0
  431. package/src/ui/Tooltip/Tooltip.jsx +125 -0
  432. package/src/ui/Tooltip/Tooltip.scss +80 -0
  433. package/src/ui/Tooltip/Tooltip.spec.ts +12 -0
  434. package/src/ui/Tooltip/Tooltip.stories.jsx +14 -0
  435. package/src/ui/Tooltip/Tooltip.stories.tsx +14 -0
  436. package/src/ui/Tooltip/Tooltip.test.tsx +1 -0
  437. package/src/ui/Tooltip/Tooltip.tsx +6 -0
  438. package/src/ui/Tooltip/Tooltip.types.ts +3 -0
  439. package/src/ui/Tooltip/index.js +2 -0
  440. package/src/ui/UDS/UDS.jsx +52 -0
  441. package/src/ui/UDS/UDS.scss +49 -0
  442. package/src/ui/UDS/UDS.spec.ts +12 -0
  443. package/src/ui/UDS/UDS.stories.jsx +22 -0
  444. package/src/ui/UDS/UDS.stories.tsx +14 -0
  445. package/src/ui/UDS/UDS.test.tsx +1 -0
  446. package/src/ui/UDS/UDS.tsx +6 -0
  447. package/src/ui/UDS/UDS.types.ts +3 -0
  448. package/src/ui/UDS/index.js +1 -0
  449. package/src/ui/_spec/createMetaFromSpec.ts +35 -0
  450. package/src/ui/_spec/createStoryArgsFromSpec.ts +8 -0
  451. package/src/ui/_spec/generated/spec-props-reference.md +55 -0
  452. package/src/ui/_spec/specStorySync.test.ts +73 -0
  453. package/src/ui/_spec/types.ts +21 -0
  454. package/src/ui/index.js +66 -0
package/src/ui/Branding/Branding.ai.md ADDED
@@ -0,0 +1,81 @@
1
+ # Branding
2
+
3
+ Displays a single brand logo. Works like `<Icon name="House" />` — pass a `brand` prop and get the logo back.
4
+
5
+ ## When to Use
6
+ - Application header/sidebar branding
7
+ - Login pages, splash screens
8
+ - Multi-brand applications where the logo switches
9
+
10
+ ## Props
11
+
12
+ | Prop | Type | Default | Values | Description |
13
+ |------|------|---------|--------|-------------|
14
+ | `brand` | `string` | — | `"design-system"`, `"connect"`, `"comphealth"`, `"weatherby"`, `"modio"`, `"locumsmart"`, `"wireframe"` | Brand key |
15
+ | `symbol` | `boolean` | `false` | `true`, `false` | When true, renders the brand symbol/icon only instead of the full wordmark logo |
16
+ | `inherit` | `boolean` | `false` | — | When true, ignores `brand` and auto-reads from `data-brand` on `<html>` |
17
+ | `size` | `string` | `"default"` | `"small"` (24px symbol / 100×40 logo), `"default"` (32px symbol / 160×64 logo), `"large"` (48px symbol / 200×80 logo) | Size variant |
18
+ | `className` | `string` | `""` | — | Additional CSS classes |
19
+
20
+ ## Examples
21
+
22
+ ### Basic usage — full logo
23
+ ```jsx
24
+ <Branding brand="connect" />
25
+ <Branding brand="comphealth" size="large" />
26
+ ```
27
+
28
+ ### Symbol only
29
+ ```jsx
30
+ <Branding brand="connect" symbol />
31
+ <Branding brand="design-system" symbol size="small" />
32
+ <Branding brand="modio" symbol size="large" />
33
+ ```
34
+
35
+ ### Inherit active brand
36
+ ```jsx
37
+ <Branding inherit />
38
+ <Branding inherit symbol />
39
+ <Branding inherit size="small" />
40
+ ```
41
+
42
+ ### In app sidebar — collapsed symbol, expanded wordmark
43
+ ```jsx
44
+ <UDS.Sidebar>
45
+ <Branding inherit symbol /> {/* collapsed: icon */}
46
+ <Branding inherit symbol={false} /> {/* expanded: full logo */}
47
+ </UDS.Sidebar>
48
+ ```
49
+
50
+ ## Theming / Dark Mode
51
+
52
+ Brand logo colors are driven by CSS custom properties (`--uds-brands-*`) defined in `tokens.css`. The SVGs are rendered inline so the token values resolve at runtime. To support light/dark mode, override the brand tokens under a dark-mode selector:
53
+
54
+ ```css
55
+ /* Example: override brand colors for dark mode */
56
+ [data-mode="dark"] {
57
+ --uds-brands-ds-black: #ffffff;
58
+ --uds-brands-ds-purple: #a0aec0;
59
+ --uds-brands-connect-dark-blue: #4da6ff;
60
+ --uds-brands-connect-light-blue: #7cc4f0;
61
+ /* …override other brand tokens as needed */
62
+ }
63
+ ```
64
+
65
+ ### Token → Brand mapping
66
+
67
+ | Brand | Tokens |
68
+ |-------|--------|
69
+ | `design-system` | `--uds-brands-unified-black`, `--uds-brands-unified-gray` |
70
+ | `connect` | `--uds-brands-connect-dark-blue`, `--uds-brands-connect-light-blue` |
71
+ | `comphealth` | `--uds-brands-comphealth-orange`, `--uds-brands-comphealth-purple` |
72
+ | `locumsmart` | `--uds-brands-locumsmart-blue`, `--uds-brands-locumsmart-orange`, `--uds-brands-locumsmart-black` |
73
+ | `modio` | `--uds-brands-modio-blue`, `--uds-brands-modio-black` |
74
+ | `weatherby` | `--uds-brands-weatherby-red`, `--uds-brands-weatherby-teal` |
75
+ | `wireframe` | `--uds-brands-wireframe-black`, `--uds-brands-wireframe-blue`, `--uds-brands-wireframe-green`, `--uds-brands-wireframe-orange` |
76
+
77
+ ## Do's and Don'ts
78
+ - **Do** use `inherit` in app shells so the logo updates with the active brand
79
+ - **Do** use a specific `brand` prop when you need a fixed logo regardless of context
80
+ - **Don't** use both `brand` and `inherit` — `inherit` takes priority
81
+ - **Do** override `--uds-brands-*` tokens for dark mode — the logos will update automatically
package/src/ui/Branding/Branding.jsx ADDED
@@ -0,0 +1,127 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import "./Branding.scss";
3
+
4
+ import { ReactComponent as DesignSystemLogo } from "../../assets/svg/design-system.svg";
5
+ import { ReactComponent as ConnectLogo } from "../../assets/svg/connect.svg";
6
+ import { ReactComponent as CompHealthLogo } from "../../assets/svg/comphealth.svg";
7
+ import { ReactComponent as WeatherbyLogo } from "../../assets/svg/weatherby.svg";
8
+ import { ReactComponent as ModioLogo } from "../../assets/svg/modio.svg";
9
+ import { ReactComponent as LocumsmartLogo } from "../../assets/svg/locumsmart.svg";
10
+ import { ReactComponent as WireframeLogo } from "../../assets/svg/wireframe.svg";
11
+
12
+ import { ReactComponent as DesignSystemSymbol } from "../../assets/svg/design-system-symbol.svg";
13
+ import { ReactComponent as ConnectSymbol } from "../../assets/svg/connect-symbol.svg";
14
+ import { ReactComponent as CompHealthSymbol } from "../../assets/svg/comphealth-symbol.svg";
15
+ import { ReactComponent as WeatherbySymbol } from "../../assets/svg/weatherby-symbol.svg";
16
+ import { ReactComponent as ModioSymbol } from "../../assets/svg/modio-symbol.svg";
17
+ import { ReactComponent as LocumsmartSymbol } from "../../assets/svg/locumsmart-symbol.svg";
18
+ import { ReactComponent as WireframeSymbol } from "../../assets/svg/wireframe-symbol.svg";
19
+
20
+ const BASE_CLASS = "uds-branding";
21
+
22
+ /** Built-in brand key → inline SVG component mapping */
23
+ const BRAND_LOGOS = {
24
+ "design-system": { Component: DesignSystemLogo, alt: "Unified Design System" },
25
+ connect: { Component: ConnectLogo, alt: "CHG Connect" },
26
+ comphealth: { Component: CompHealthLogo, alt: "CompHealth" },
27
+ weatherby: { Component: WeatherbyLogo, alt: "Weatherby Healthcare" },
28
+ modio: { Component: ModioLogo, alt: "modio" },
29
+ locumsmart: { Component: LocumsmartLogo, alt: "Locumsmart" },
30
+ wireframe: { Component: WireframeLogo, alt: "Wireframe" },
31
+ };
32
+
33
+ /** Built-in brand key → symbol/icon SVG component mapping */
34
+ const BRAND_SYMBOLS = {
35
+ "design-system": { Component: DesignSystemSymbol, alt: "Unified Design System" },
36
+ connect: { Component: ConnectSymbol, alt: "CHG Connect" },
37
+ comphealth: { Component: CompHealthSymbol, alt: "CompHealth" },
38
+ weatherby: { Component: WeatherbySymbol, alt: "Weatherby Healthcare" },
39
+ modio: { Component: ModioSymbol, alt: "modio" },
40
+ locumsmart: { Component: LocumsmartSymbol, alt: "Locumsmart" },
41
+ wireframe: { Component: WireframeSymbol, alt: "Wireframe" },
42
+ };
43
+
44
+ /**
45
+ * Branding component — displays a single brand logo as inline SVG.
46
+ * Colors are driven by CSS custom properties (--uds-brands-*) so they
47
+ * can be themed for light / dark mode.
48
+ *
49
+ * Works like <Icon name="House" /> but for brand logos:
50
+ * <Branding brand="connect" />
51
+ *
52
+ * @param {string} brand - Brand key: "design-system" | "connect" | "comphealth" |
53
+ * "weatherby" | "modio" | "locumsmart" | "wireframe"
54
+ * @param {boolean} symbol - When true, renders only the brand symbol/icon instead
55
+ * of the full logo. Defaults to false (full logo).
56
+ * @param {boolean} inherit - When true, ignores `brand` prop and automatically uses
57
+ * the active brand from the `data-brand` attribute on <html>.
58
+ * @param {string} size - Size variant: "small" | "default" | "large"
59
+ * @param {string} className - Additional CSS classes
60
+ */
61
+ export default function Branding({
62
+ brand,
63
+ symbol = false,
64
+ inherit = false,
65
+ size = "default",
66
+ className = "",
67
+ ...props
68
+ }) {
69
+ const [activeBrand, setActiveBrand] = useState(null);
70
+
71
+ useEffect(() => {
72
+ if (!inherit) return;
73
+
74
+ const root = document.documentElement;
75
+ setActiveBrand(root.getAttribute("data-brand"));
76
+
77
+ const observer = new MutationObserver((mutations) => {
78
+ for (const mutation of mutations) {
79
+ if (
80
+ mutation.type === "attributes" &&
81
+ mutation.attributeName === "data-brand"
82
+ ) {
83
+ setActiveBrand(root.getAttribute("data-brand"));
84
+ }
85
+ }
86
+ });
87
+
88
+ observer.observe(root, {
89
+ attributes: true,
90
+ attributeFilter: ["data-brand"],
91
+ });
92
+ return () => observer.disconnect();
93
+ }, [inherit]);
94
+
95
+ const resolvedBrand = inherit ? activeBrand : brand;
96
+ const isSymbol = symbol;
97
+ const brandMap = isSymbol ? BRAND_SYMBOLS : BRAND_LOGOS;
98
+ const brandData = resolvedBrand && brandMap[resolvedBrand];
99
+
100
+ if (!brandData) {
101
+ if (resolvedBrand) {
102
+ console.warn(`Branding: "${resolvedBrand}" is not a recognized brand key.`);
103
+ }
104
+ return null;
105
+ }
106
+
107
+ const { Component: LogoComponent, alt } = brandData;
108
+
109
+ const classNames = [
110
+ BASE_CLASS,
111
+ `${BASE_CLASS}--${size}`,
112
+ isSymbol ? `${BASE_CLASS}--symbol` : "",
113
+ className,
114
+ ]
115
+ .filter(Boolean)
116
+ .join(" ");
117
+
118
+ return (
119
+ <div className={classNames} {...props}>
120
+ <LogoComponent
121
+ className={`${BASE_CLASS}__logo`}
122
+ role="img"
123
+ aria-label={alt}
124
+ />
125
+ </div>
126
+ );
127
+ }
package/src/ui/Branding/Branding.scss ADDED
@@ -0,0 +1,57 @@
1
+ @use "../../styles/typography" as *;
2
+
3
+ .uds-branding {
4
+ display: inline-flex;
5
+ align-items: center;
6
+
7
+ // Size variants — all maintain the 5:2 aspect ratio
8
+ &--small {
9
+ .uds-branding__logo {
10
+ width: 100px;
11
+ height: 40px;
12
+ }
13
+ }
14
+
15
+ &--default {
16
+ .uds-branding__logo {
17
+ width: 160px;
18
+ height: 64px;
19
+ }
20
+ }
21
+
22
+ &--large {
23
+ .uds-branding__logo {
24
+ width: 200px;
25
+ height: 80px;
26
+ }
27
+ }
28
+
29
+ &__logo {
30
+ display: block;
31
+ width: 160px;
32
+ height: 64px;
33
+ }
34
+
35
+ // Symbol-only variant — square aspect ratio
36
+ &--symbol {
37
+ &.uds-branding--small .uds-branding__logo {
38
+ width: 24px;
39
+ height: 24px;
40
+ }
41
+
42
+ &.uds-branding--default .uds-branding__logo {
43
+ width: 32px;
44
+ height: 32px;
45
+ }
46
+
47
+ &.uds-branding--large .uds-branding__logo {
48
+ width: 48px;
49
+ height: 48px;
50
+ }
51
+
52
+ .uds-branding__logo {
53
+ width: 32px;
54
+ height: 32px;
55
+ }
56
+ }
57
+ }
package/src/ui/Branding/Branding.spec.ts ADDED
@@ -0,0 +1,12 @@
1
+ export const BRANDING_DEFAULTS = {
2
+ className: "",
3
+ } as const;
4
+
5
+ export const BRANDING_STORY_SPEC = {
6
+ defaults: {
7
+ className: BRANDING_DEFAULTS.className,
8
+ },
9
+ stories: {
10
+ default: {},
11
+ },
12
+ } as const;
package/src/ui/Branding/Branding.stories.jsx ADDED
@@ -0,0 +1,14 @@
1
+ import Branding from "./Branding";
2
+
3
+ export default {
4
+ title: "Components/Branding",
5
+ component: Branding,
6
+ tags: ["autodocs"],
7
+ parameters: {
8
+ layout: "padded",
9
+ },
10
+ };
11
+
12
+ export const Default = {
13
+ args: {},
14
+ };
package/src/ui/Branding/Branding.stories.tsx ADDED
@@ -0,0 +1,14 @@
1
+ import Branding from "./Branding.jsx";
2
+
3
+ export default {
4
+ title: "Components/Branding",
5
+ component: Branding,
6
+ tags: ["autodocs"],
7
+ parameters: {
8
+ layout: "padded",
9
+ },
10
+ };
11
+
12
+ export const Default = {
13
+ args: {},
14
+ };
package/src/ui/Branding/Branding.test.tsx ADDED
@@ -0,0 +1 @@
1
+ export {};
package/src/ui/Branding/Branding.tsx ADDED
@@ -0,0 +1,6 @@
1
+ import type { ComponentType } from "react";
2
+ import LegacyBranding from "./Branding.jsx";
3
+
4
+ const Branding = LegacyBranding as ComponentType<any>;
5
+
6
+ export default Branding;
package/src/ui/Branding/Branding.types.ts ADDED
@@ -0,0 +1,3 @@
1
+ export interface BrandingProps {
2
+ className?: string;
3
+ }
package/src/ui/Branding/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from "./Branding";
package/src/ui/Breadcrumb/Breadcrumb.ai.md ADDED
@@ -0,0 +1,50 @@
1
+ # Breadcrumb
2
+
3
+ Navigation breadcrumb component that auto-generates based on the current route.
4
+
5
+ ## When to Use
6
+ - Page headers to show navigation hierarchy
7
+ - Inside `UDS.PageHeader` for route context
8
+ - Any multi-level navigation structure
9
+
10
+ ## Props
11
+
12
+ | Prop | Type | Default | Description |
13
+ |------|------|---------|-------------|
14
+ | `className` | `string` | `""` | Additional CSS classes |
15
+
16
+ ## Behavior
17
+ - Automatically reads the current route from React Router
18
+ - Maps route paths to labels via internal `breadcrumbRoutes` config
19
+ - Renders the last item as plain text (current page), others as links
20
+ - Always includes "Home" as the root link
21
+
22
+ ## Route Configuration
23
+
24
+ Routes are configured internally. To add new routes, update the `breadcrumbRoutes` array in `Breadcrumb.jsx`:
25
+
26
+ ```jsx
27
+ const breadcrumbRoutes = [
28
+ { path: "/", label: "Home" },
29
+ { path: "/app-shell", label: "Application" },
30
+ // Add new routes here
31
+ ];
32
+ ```
33
+
34
+ ## Examples
35
+
36
+ ```jsx
37
+ <Breadcrumb />
38
+ ```
39
+
40
+ ### In a page header
41
+ ```jsx
42
+ <UDS.PageHeader>
43
+ <Breadcrumb />
44
+ <h1>Page Title</h1>
45
+ </UDS.PageHeader>
46
+ ```
47
+
48
+ ## Note
49
+ - Must be used within a React Router `<Router>` context
50
+ - Auto-generates breadcrumb trail — no manual configuration needed per page
package/src/ui/Breadcrumb/Breadcrumb.jsx ADDED
@@ -0,0 +1,167 @@
1
+ import React from "react";
2
+ import { useLocation, Link } from "react-router-dom";
3
+ import "./Breadcrumb.scss";
4
+
5
+ // Foundations items
6
+ const FOUNDATIONS_ITEMS = [
7
+ { path: "/app-shell", label: "Application" },
8
+ { path: "/border-radius", label: "Border Radius" },
9
+ { path: "/colors", label: "Colors" },
10
+ { path: "/flex", label: "Flex Layout" },
11
+ { path: "/icons", label: "Icons" },
12
+ { path: "/shadows", label: "Shadows" },
13
+ { path: "/spacing", label: "Spacing" },
14
+ { path: "/figma-variables", label: "Design Tokens" },
15
+ { path: "/typography", label: "Typography" },
16
+ { path: "/utilities", label: "Utility Classes" },
17
+ { path: "/vertical-rhythm", label: "Vertical Rhythm" },
18
+ ];
19
+
20
+ // Components items
21
+ const COMPONENTS_ITEMS = [
22
+ { path: "/accordion", label: "Accordion" },
23
+ { path: "/action-menu", label: "Action Menu" },
24
+ { path: "/avatar", label: "Avatar" },
25
+ { path: "/badge", label: "Badge" },
26
+ { path: "/branding", label: "Branding" },
27
+ { path: "/breadcrumb", label: "Breadcrumb" },
28
+ { path: "/buttons", label: "Buttons" },
29
+ { path: "/calendar", label: "Calendar" },
30
+ { path: "/datepicker", label: "Datepicker" },
31
+ { path: "/checkbox", label: "Checkbox" },
32
+ { path: "/chip", label: "Chip" },
33
+ { path: "/divider", label: "Divider" },
34
+ { path: "/dot-status", label: "Dot Status" },
35
+ { path: "/dropdown", label: "Dropdown" },
36
+ { path: "/event-card", label: "Event Card" },
37
+ { path: "/field", label: "Field" },
38
+ { path: "/file-upload", label: "File Upload" },
39
+ { path: "/image-aspect", label: "Image Aspect" },
40
+ { path: "/input", label: "Text Input" },
41
+ { path: "/key", label: "Key" },
42
+ { path: "/pill-toggle", label: "Pill Toggle" },
43
+ { path: "/progress-indicator", label: "Progress Indicator" },
44
+ { path: "/progress-circle", label: "Progress Circle" },
45
+ { path: "/radio", label: "Radio" },
46
+ { path: "/slider", label: "Slider" },
47
+ { path: "/status", label: "Status" },
48
+ { path: "/steps", label: "Steps" },
49
+ { path: "/table", label: "Table" },
50
+ { path: "/tabs", label: "Tabs" },
51
+ { path: "/tag", label: "Tag" },
52
+ { path: "/textarea", label: "Textarea" },
53
+ { path: "/toast", label: "Toast" },
54
+ { path: "/toggle", label: "Toggle" },
55
+ { path: "/tooltip", label: "Tooltip" },
56
+ ];
57
+
58
+ // Patterns items
59
+ const PATTERNS_ITEMS = [
60
+ { path: "/menu", label: "Menu" },
61
+ ];
62
+
63
+ /**
64
+ * Breadcrumb component for page navigation
65
+ * @param {Array} items - Optional array of breadcrumb items (max 5). Each item should have { label: string, href?: string }
66
+ * If href is provided, the item will be a link. The last item is always the current page (no link).
67
+ */
68
+ export default function Breadcrumb({ items }) {
69
+ const location = useLocation();
70
+ const pathname = location.pathname;
71
+
72
+ // If custom items are provided, use them
73
+ if (items && items.length > 0) {
74
+ // Limit to 5 items
75
+ const displayItems = items.slice(0, 5);
76
+
77
+ return (
78
+ <nav className="breadcrumb" aria-label="Breadcrumb">
79
+ <ol className="breadcrumb__list">
80
+ {displayItems.map((item, index) => {
81
+ const isLast = index === displayItems.length - 1;
82
+ const isExternal = item.href && (item.href.startsWith("http://") || item.href.startsWith("https://"));
83
+
84
+ return (
85
+ <React.Fragment key={index}>
86
+ <li className={`breadcrumb__item ${isLast ? "breadcrumb__item--current" : ""}`}>
87
+ {item.href && !isLast ? (
88
+ isExternal ? (
89
+ <a href={item.href} className="breadcrumb__link" target="_blank" rel="noopener noreferrer">
90
+ <span className="breadcrumb__text">{item.label}</span>
91
+ </a>
92
+ ) : (
93
+ <Link to={item.href} className="breadcrumb__link">
94
+ <span className="breadcrumb__text">{item.label}</span>
95
+ </Link>
96
+ )
97
+ ) : (
98
+ <span className="breadcrumb__text">{item.label}</span>
99
+ )}
100
+ </li>
101
+ {!isLast && (
102
+ <li className="breadcrumb__item">
103
+ <span className="breadcrumb__separator" aria-hidden="true">
104
+ /
105
+ </span>
106
+ </li>
107
+ )}
108
+ </React.Fragment>
109
+ );
110
+ })}
111
+ </ol>
112
+ </nav>
113
+ );
114
+ }
115
+
116
+ // Default behavior: auto-generate from route
117
+ // Don't show breadcrumb on home page
118
+ if (pathname === "/") {
119
+ return null;
120
+ }
121
+
122
+ // Find the current item and determine its category
123
+ const allItems = [...FOUNDATIONS_ITEMS, ...COMPONENTS_ITEMS, ...PATTERNS_ITEMS];
124
+ const currentItem = allItems.find(
125
+ (item) => pathname === item.path || pathname.startsWith(item.path + "/"),
126
+ );
127
+
128
+ if (!currentItem) {
129
+ return null;
130
+ }
131
+
132
+ // Determine the category
133
+ let category = "Design System";
134
+ if (FOUNDATIONS_ITEMS.some((item) => item.path === currentItem.path)) {
135
+ category = "Foundations";
136
+ } else if (COMPONENTS_ITEMS.some((item) => item.path === currentItem.path)) {
137
+ category = "Components";
138
+ } else if (PATTERNS_ITEMS.some((item) => item.path === currentItem.path)) {
139
+ category = "Patterns";
140
+ }
141
+
142
+ return (
143
+ <nav className="breadcrumb" aria-label="Breadcrumb">
144
+ <ol className="breadcrumb__list">
145
+ <li className="breadcrumb__item">
146
+ <span className="breadcrumb__text">Unified Design System</span>
147
+ </li>
148
+ <li className="breadcrumb__item">
149
+ <span className="breadcrumb__separator" aria-hidden="true">
150
+ /
151
+ </span>
152
+ </li>
153
+ <li className="breadcrumb__item">
154
+ <span className="breadcrumb__text">{category}</span>
155
+ </li>
156
+ <li className="breadcrumb__item">
157
+ <span className="breadcrumb__separator" aria-hidden="true">
158
+ /
159
+ </span>
160
+ </li>
161
+ <li className="breadcrumb__item breadcrumb__item--current">
162
+ <span className="breadcrumb__text">{currentItem.label}</span>
163
+ </li>
164
+ </ol>
165
+ </nav>
166
+ );
167
+ }
package/src/ui/Breadcrumb/Breadcrumb.scss ADDED
@@ -0,0 +1,46 @@
1
+ @use "../../styles/typography" as *;
2
+
3
+ .breadcrumb {
4
+ @include uds-body-14;
5
+ color: var(--uds-text-primary);
6
+ margin-bottom: 0;
7
+ position: relative;
8
+ z-index: 1;
9
+
10
+ &__list {
11
+ display: flex;
12
+ align-items: center;
13
+ flex-wrap: wrap;
14
+ gap: var(--uds-gap-8);
15
+ list-style: none;
16
+ margin: 0;
17
+ padding: 0;
18
+ }
19
+
20
+ &__item {
21
+ display: flex;
22
+ align-items: center;
23
+ }
24
+
25
+ &__link {
26
+ color: var(--uds-text-link-secondary-default);
27
+ text-decoration: none;
28
+ transition: color 0.3s ease;
29
+
30
+ &:hover {
31
+ color: var(--uds-text-link-secondary-hover);
32
+ }
33
+ }
34
+
35
+ &__text {
36
+ }
37
+
38
+ &__item--current &__text {
39
+ @include uds-body-14-semibold;
40
+ }
41
+
42
+ &__separator {
43
+ color: var(--uds-text-secondary);
44
+ margin: 0;
45
+ }
46
+ }
package/src/ui/Breadcrumb/Breadcrumb.spec.ts ADDED
@@ -0,0 +1,12 @@
1
+ export const BREADCRUMB_DEFAULTS = {
2
+ className: "",
3
+ } as const;
4
+
5
+ export const BREADCRUMB_STORY_SPEC = {
6
+ defaults: {
7
+ className: BREADCRUMB_DEFAULTS.className,
8
+ },
9
+ stories: {
10
+ default: {},
11
+ },
12
+ } as const;
package/src/ui/Breadcrumb/Breadcrumb.stories.jsx ADDED
@@ -0,0 +1,26 @@
1
+ import React from "react";
2
+ import { MemoryRouter } from "react-router-dom";
3
+ import Breadcrumb from "./Breadcrumb";
4
+
5
+ export default {
6
+ title: "Components/Breadcrumb",
7
+ component: Breadcrumb,
8
+ tags: ["autodocs"],
9
+ decorators: [
10
+ (Story) => (
11
+ <MemoryRouter>
12
+ <Story />
13
+ </MemoryRouter>
14
+ ),
15
+ ],
16
+ };
17
+
18
+ export const Default = {
19
+ args: {
20
+ items: [
21
+ { label: "Home", href: "/" },
22
+ { label: "Components", href: "/components" },
23
+ { label: "Breadcrumb" },
24
+ ],
25
+ },
26
+ };
package/src/ui/Breadcrumb/Breadcrumb.stories.tsx ADDED
@@ -0,0 +1,14 @@
1
+ import Breadcrumb from "./Breadcrumb.jsx";
2
+
3
+ export default {
4
+ title: "Components/Breadcrumb",
5
+ component: Breadcrumb,
6
+ tags: ["autodocs"],
7
+ parameters: {
8
+ layout: "padded",
9
+ },
10
+ };
11
+
12
+ export const Default = {
13
+ args: {},
14
+ };
package/src/ui/Breadcrumb/Breadcrumb.test.tsx ADDED
@@ -0,0 +1 @@
1
+ export {};
package/src/ui/Breadcrumb/Breadcrumb.tsx ADDED
@@ -0,0 +1,6 @@
1
+ import type { ComponentType } from "react";
2
+ import LegacyBreadcrumb from "./Breadcrumb.jsx";
3
+
4
+ const Breadcrumb = LegacyBreadcrumb as ComponentType<any>;
5
+
6
+ export default Breadcrumb;
package/src/ui/Breadcrumb/Breadcrumb.types.ts ADDED
@@ -0,0 +1,3 @@
1
+ export interface BreadcrumbProps {
2
+ className?: string;
3
+ }
package/src/ui/Breadcrumb/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { default as Breadcrumb } from "./Breadcrumb";
2
+ export { default } from "./Breadcrumb";