@redocly/theme 0.1.6 → 0.1.9

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 (405) hide show
  1. package/Footer/Footer.d.ts +3 -0
  2. package/Footer/Footer.js +35 -0
  3. package/Footer/FooterColumn.d.ts +7 -0
  4. package/Footer/FooterColumn.js +39 -0
  5. package/Footer/FooterColumns.d.ts +7 -0
  6. package/Footer/FooterColumns.js +44 -0
  7. package/Footer/FooterCopyright.d.ts +5 -0
  8. package/Footer/FooterCopyright.js +30 -0
  9. package/Footer/index.d.ts +4 -0
  10. package/Footer/index.js +20 -0
  11. package/JsonViewer/JsonViewer.js +1 -1
  12. package/JsonViewer/index.d.ts +1 -0
  13. package/JsonViewer/index.js +1 -0
  14. package/Layout/PageLayout.d.ts +6 -0
  15. package/Layout/PageLayout.js +31 -0
  16. package/Layout/RootLayout.d.ts +7 -0
  17. package/Layout/RootLayout.js +32 -0
  18. package/Layout/index.d.ts +2 -0
  19. package/Layout/index.js +18 -0
  20. package/Logo/Logo.d.ts +1 -6
  21. package/Logo/index.d.ts +1 -0
  22. package/Logo/index.js +17 -0
  23. package/Markdown/Admonition.d.ts +9 -0
  24. package/Markdown/Admonition.js +39 -0
  25. package/Markdown/CodeSample/CodeSample.d.ts +8 -0
  26. package/Markdown/CodeSample/CodeSample.js +30 -0
  27. package/Markdown/CodeSample/index.d.ts +3 -0
  28. package/Markdown/CodeSample/index.js +19 -0
  29. package/Markdown/CodeSample/styled.d.ts +5 -0
  30. package/Markdown/CodeSample/styled.js +109 -0
  31. package/Markdown/CodeSample/types.d.ts +9 -0
  32. package/Markdown/CodeSample/types.js +2 -0
  33. package/Markdown/ContentWrapper.d.ts +5 -0
  34. package/Markdown/ContentWrapper.js +21 -0
  35. package/Markdown/Heading.d.ts +5 -0
  36. package/Markdown/Heading.js +23 -0
  37. package/Markdown/MarkdownLayout.d.ts +7 -0
  38. package/Markdown/MarkdownLayout.js +23 -0
  39. package/Markdown/Mermaid.d.ts +6 -0
  40. package/Markdown/Mermaid.js +19 -0
  41. package/Markdown/PageWrapper.d.ts +3 -0
  42. package/Markdown/PageWrapper.js +15 -0
  43. package/Markdown/StyledMarkdown.d.ts +8 -0
  44. package/Markdown/StyledMarkdown.js +54 -0
  45. package/Markdown/Tabs/Tab.d.ts +8 -0
  46. package/Markdown/Tabs/Tab.js +35 -0
  47. package/Markdown/Tabs/Tabs.d.ts +10 -0
  48. package/Markdown/Tabs/Tabs.js +43 -0
  49. package/Markdown/Tabs/index.d.ts +2 -0
  50. package/Markdown/Tabs/index.js +18 -0
  51. package/Markdown/index.d.ts +9 -0
  52. package/Markdown/index.js +25 -0
  53. package/Navbar/Navbar.d.ts +2 -1
  54. package/Navbar/Navbar.js +9 -3
  55. package/Navbar/NavbarItem.d.ts +1 -1
  56. package/Navbar/NavbarItem.js +3 -3
  57. package/Navbar/NavbarMenu.d.ts +1 -1
  58. package/Navbar/NavbarMenu.js +8 -4
  59. package/OperationBadge/OperationBadge.d.ts +5 -0
  60. package/OperationBadge/OperationBadge.js +15 -0
  61. package/OperationBadge/index.d.ts +1 -0
  62. package/OperationBadge/index.js +17 -0
  63. package/PageNavigation/NextPageLink.d.ts +2 -0
  64. package/PageNavigation/NextPageLink.js +25 -0
  65. package/PageNavigation/PageNavigation.d.ts +2 -0
  66. package/PageNavigation/PageNavigation.js +31 -0
  67. package/PageNavigation/PreviousPageLink.d.ts +2 -0
  68. package/PageNavigation/PreviousPageLink.js +25 -0
  69. package/Panel/CodePanel.js +6 -6
  70. package/Panel/ContentPanel.js +4 -4
  71. package/Panel/Panel.d.ts +1 -1
  72. package/Panel/Panel.js +3 -3
  73. package/Panel/PanelComponent.d.ts +1 -1
  74. package/Panel/PanelComponent.js +3 -3
  75. package/Panel/index.d.ts +1 -0
  76. package/Panel/index.js +1 -0
  77. package/Search/Autocomplete.d.ts +13 -0
  78. package/Search/Autocomplete.js +79 -0
  79. package/Search/ClearIcon.d.ts +2 -0
  80. package/Search/ClearIcon.js +29 -0
  81. package/Search/Input.d.ts +3 -0
  82. package/Search/Input.js +15 -0
  83. package/Search/Parameters.d.ts +7 -0
  84. package/Search/Parameters.js +42 -0
  85. package/Search/Popover.d.ts +3 -0
  86. package/Search/Popover.js +15 -0
  87. package/Search/Search.d.ts +2 -0
  88. package/Search/Search.js +39 -0
  89. package/Search/SearchIcon.d.ts +2 -0
  90. package/Search/SearchIcon.js +29 -0
  91. package/Search/SearchItem.d.ts +7 -0
  92. package/Search/SearchItem.js +47 -0
  93. package/Search/index.d.ts +9 -0
  94. package/Search/index.js +25 -0
  95. package/Search/utils.d.ts +2 -0
  96. package/Search/utils.js +21 -0
  97. package/Sidebar/ApiCallItem.d.ts +8 -0
  98. package/Sidebar/ApiCallItem.js +35 -0
  99. package/Sidebar/ArrowBack.d.ts +4 -0
  100. package/Sidebar/ArrowBack.js +29 -0
  101. package/Sidebar/BackButton.d.ts +6 -0
  102. package/Sidebar/BackButton.js +31 -0
  103. package/Sidebar/Drilldown.d.ts +8 -0
  104. package/Sidebar/Drilldown.js +46 -0
  105. package/Sidebar/DrilldownMenu.d.ts +3 -0
  106. package/Sidebar/DrilldownMenu.js +55 -0
  107. package/Sidebar/DrilldownMenuItem.d.ts +3 -0
  108. package/Sidebar/DrilldownMenuItem.js +32 -0
  109. package/Sidebar/ExternalIcon.d.ts +4 -0
  110. package/Sidebar/ExternalIcon.js +29 -0
  111. package/Sidebar/Menu.d.ts +3 -0
  112. package/Sidebar/Menu.js +15 -0
  113. package/Sidebar/MenuContainer.d.ts +1 -0
  114. package/Sidebar/MenuContainer.js +13 -0
  115. package/Sidebar/MenuGroup.d.ts +9 -0
  116. package/Sidebar/MenuGroup.js +37 -0
  117. package/Sidebar/MenuItem.d.ts +3 -0
  118. package/Sidebar/MenuItem.js +34 -0
  119. package/Sidebar/MenuItemLabel.d.ts +5 -0
  120. package/Sidebar/MenuItemLabel.js +19 -0
  121. package/Sidebar/MenuLink.d.ts +5 -0
  122. package/Sidebar/MenuLink.js +16 -0
  123. package/Sidebar/MenuLinkItem.d.ts +3 -0
  124. package/Sidebar/MenuLinkItem.js +31 -0
  125. package/Sidebar/MobileSidebarButton.d.ts +5 -0
  126. package/Sidebar/MobileSidebarButton.js +21 -0
  127. package/Sidebar/Separator.d.ts +3 -0
  128. package/Sidebar/Separator.js +32 -0
  129. package/Sidebar/SeparatorItem.d.ts +5 -0
  130. package/Sidebar/SeparatorItem.js +14 -0
  131. package/Sidebar/SeparatorLine.d.ts +3 -0
  132. package/Sidebar/SeparatorLine.js +15 -0
  133. package/Sidebar/Sidebar.d.ts +8 -0
  134. package/Sidebar/Sidebar.js +24 -0
  135. package/Sidebar/SidebarLayout.d.ts +7 -0
  136. package/Sidebar/SidebarLayout.js +36 -0
  137. package/Sidebar/index.d.ts +19 -0
  138. package/Sidebar/index.js +35 -0
  139. package/Sidebar/types/DrilldownMenuProps.d.ts +6 -0
  140. package/Sidebar/types/DrilldownMenuProps.js +2 -0
  141. package/Sidebar/types/ItemState.d.ts +8 -0
  142. package/Sidebar/types/ItemState.js +2 -0
  143. package/Sidebar/types/MenuItemProps.d.ts +5 -0
  144. package/Sidebar/types/MenuItemProps.js +2 -0
  145. package/Sidebar/types/MenuStyle.d.ts +3 -0
  146. package/Sidebar/types/MenuStyle.js +8 -0
  147. package/Sidebar/types/NavItem.d.ts +26 -0
  148. package/Sidebar/types/NavItem.js +2 -0
  149. package/Sidebar/types/index.d.ts +5 -0
  150. package/Sidebar/types/index.js +21 -0
  151. package/SourceCode/SourceCode.js +2 -2
  152. package/TableOfContent/TableOfContent.d.ts +9 -0
  153. package/TableOfContent/TableOfContent.js +65 -0
  154. package/TableOfContent/index.d.ts +1 -0
  155. package/TableOfContent/index.js +17 -0
  156. package/globalStyle.js +1 -1
  157. package/hooks/index.d.ts +4 -0
  158. package/hooks/index.js +4 -0
  159. package/hooks/useActiveHeading.d.ts +2 -0
  160. package/hooks/useActiveHeading.js +34 -0
  161. package/hooks/useActiveSectionId.d.ts +3 -0
  162. package/hooks/useActiveSectionId.js +48 -0
  163. package/hooks/useFullHeight.d.ts +2 -0
  164. package/hooks/useFullHeight.js +47 -0
  165. package/hooks/useMobileMenu.d.ts +2 -0
  166. package/hooks/useMobileMenu.js +13 -0
  167. package/hooks/useNavbarHeight.d.ts +3 -0
  168. package/hooks/useNavbarHeight.js +20 -0
  169. package/icons/ShelfIcon/ShelfIcon.js +2 -2
  170. package/index.d.ts +2 -0
  171. package/index.js +2 -0
  172. package/mocks/hooks/usePageData.d.ts +5 -0
  173. package/mocks/hooks/usePageData.js +7 -0
  174. package/mocks/models.d.ts +3 -0
  175. package/mocks/models.js +2 -0
  176. package/mocks/search.d.ts +22 -0
  177. package/mocks/search.js +13 -0
  178. package/mocks/types/index.d.ts +1 -0
  179. package/mocks/types/index.js +2 -0
  180. package/mocks/usePreloadHistory.d.ts +3 -0
  181. package/mocks/usePreloadHistory.js +12 -0
  182. package/package.json +5 -2
  183. package/src/Button/Button.stories.tsx +1 -1
  184. package/src/Button/__tests__/Button.test.tsx +1 -1
  185. package/src/CodeBlock/__tests__/CodeBlock.test.tsx +1 -1
  186. package/src/CopyButton/CopyButton.stories.tsx +1 -1
  187. package/src/CopyButton/CopyButton.tsx +1 -1
  188. package/src/CopyButton/CopyButtonWrapper.tsx +4 -4
  189. package/src/CopyButton/__tests__/CopyButton.test.tsx +1 -1
  190. package/src/CopyButton/__tests__/CopyButtonWrapper.test.tsx +2 -1
  191. package/src/Footer/Footer.tsx +34 -0
  192. package/src/Footer/FooterColumn.tsx +62 -0
  193. package/src/Footer/FooterColumns.tsx +51 -0
  194. package/src/Footer/FooterCopyright.tsx +26 -0
  195. package/src/Footer/index.ts +4 -0
  196. package/src/Headings/Headings.stories.tsx +1 -1
  197. package/src/Headings/Headings.ts +1 -1
  198. package/src/Headings/__tests__/Headings.test.tsx +1 -1
  199. package/src/JsonViewer/JsonViewer.stories.tsx +1 -1
  200. package/src/JsonViewer/JsonViewer.tsx +6 -7
  201. package/src/JsonViewer/__tests__/JsonViewer.test.tsx +2 -1
  202. package/src/JsonViewer/index.ts +1 -0
  203. package/src/Layout/PageLayout.tsx +34 -0
  204. package/src/Layout/RootLayout.tsx +24 -0
  205. package/src/Layout/index.ts +2 -0
  206. package/src/Logo/Logo.tsx +1 -7
  207. package/src/Logo/index.ts +1 -0
  208. package/src/Markdown/Admonition.tsx +64 -0
  209. package/src/Markdown/CodeSample/CodeSample.tsx +39 -0
  210. package/src/Markdown/CodeSample/index.ts +3 -0
  211. package/src/Markdown/CodeSample/styled.ts +289 -0
  212. package/src/Markdown/CodeSample/types.ts +40 -0
  213. package/src/Markdown/ContentWrapper.tsx +20 -0
  214. package/src/Markdown/Heading.tsx +35 -0
  215. package/src/Markdown/MarkdownLayout.tsx +25 -0
  216. package/src/Markdown/Mermaid.tsx +23 -0
  217. package/src/Markdown/PageWrapper.tsx +9 -0
  218. package/src/Markdown/StyledMarkdown.tsx +312 -0
  219. package/src/Markdown/Tabs/Tab.tsx +37 -0
  220. package/src/Markdown/Tabs/Tabs.tsx +45 -0
  221. package/src/Markdown/Tabs/index.ts +2 -0
  222. package/src/Markdown/index.ts +9 -0
  223. package/src/Navbar/Navbar.stories.tsx +3 -13
  224. package/src/Navbar/Navbar.tsx +20 -26
  225. package/src/Navbar/NavbarItem.tsx +2 -2
  226. package/src/Navbar/NavbarMenu.tsx +6 -6
  227. package/src/OperationBadge/OperationBadge.stories.tsx +35 -0
  228. package/src/OperationBadge/OperationBadge.ts +59 -0
  229. package/src/OperationBadge/__tests__/OperationBadge.test.tsx +59 -0
  230. package/src/OperationBadge/__tests__/__snapshots__/OperationBadge.test.tsx.snap +651 -0
  231. package/src/OperationBadge/index.ts +1 -0
  232. package/src/PageNavigation/NextPageLink.tsx +22 -0
  233. package/src/PageNavigation/PageNavigation.tsx +20 -0
  234. package/src/PageNavigation/PreviousPageLink.tsx +22 -0
  235. package/src/Panel/CodePanel.stories.tsx +1 -2
  236. package/src/Panel/CodePanel.ts +8 -7
  237. package/src/Panel/ContentPanel.stories.tsx +1 -2
  238. package/src/Panel/ContentPanel.ts +5 -6
  239. package/src/Panel/Panel.stories.tsx +1 -3
  240. package/src/Panel/Panel.ts +3 -3
  241. package/src/Panel/PanelComponent.tsx +4 -5
  242. package/src/Panel/__tests__/CodePanel.test.tsx +1 -1
  243. package/src/Panel/__tests__/ContentPanel.test.tsx +1 -1
  244. package/src/Panel/__tests__/Panel.test.tsx +1 -2
  245. package/src/Panel/__tests__/__snapshots__/CodePanel.test.tsx.snap +8 -8
  246. package/src/Panel/__tests__/__snapshots__/ContentPanel.test.tsx.snap +22 -22
  247. package/src/Panel/__tests__/__snapshots__/Panel.test.tsx.snap +16 -16
  248. package/src/Panel/index.ts +1 -0
  249. package/src/SamplesPanelControls/SamplesControlButton.stories.tsx +1 -1
  250. package/src/SamplesPanelControls/SamplesPanelControls.ts +1 -1
  251. package/src/Search/Autocomplete.tsx +128 -0
  252. package/src/Search/ClearIcon.tsx +31 -0
  253. package/src/Search/Input.tsx +19 -0
  254. package/src/Search/Parameters.tsx +62 -0
  255. package/src/Search/Popover.tsx +20 -0
  256. package/src/Search/Search.tsx +52 -0
  257. package/src/Search/SearchIcon.tsx +32 -0
  258. package/src/Search/SearchItem.tsx +85 -0
  259. package/src/Search/index.ts +9 -0
  260. package/src/Search/utils.tsx +19 -0
  261. package/src/Sidebar/ApiCallItem.tsx +33 -0
  262. package/src/Sidebar/ArrowBack.tsx +22 -0
  263. package/src/Sidebar/BackButton.tsx +44 -0
  264. package/src/Sidebar/Drilldown.tsx +46 -0
  265. package/src/Sidebar/DrilldownMenu.tsx +58 -0
  266. package/src/Sidebar/DrilldownMenuItem.tsx +40 -0
  267. package/src/Sidebar/ExternalIcon.tsx +37 -0
  268. package/src/Sidebar/Menu.tsx +11 -0
  269. package/src/Sidebar/MenuContainer.tsx +8 -0
  270. package/src/Sidebar/MenuGroup.tsx +55 -0
  271. package/src/Sidebar/MenuItem.tsx +25 -0
  272. package/src/Sidebar/MenuItemLabel.tsx +41 -0
  273. package/src/Sidebar/MenuLink.tsx +14 -0
  274. package/src/Sidebar/MenuLinkItem.tsx +24 -0
  275. package/src/Sidebar/MobileSidebarButton.tsx +44 -0
  276. package/src/Sidebar/Separator.tsx +17 -0
  277. package/src/Sidebar/SeparatorItem.tsx +14 -0
  278. package/src/Sidebar/SeparatorLine.tsx +9 -0
  279. package/src/Sidebar/Sidebar.tsx +54 -0
  280. package/src/Sidebar/SidebarLayout.tsx +30 -0
  281. package/src/Sidebar/index.ts +19 -0
  282. package/src/Sidebar/types/DrilldownMenuProps.ts +7 -0
  283. package/src/Sidebar/types/ItemState.ts +9 -0
  284. package/src/Sidebar/types/MenuItemProps.ts +6 -0
  285. package/src/Sidebar/types/MenuStyle.ts +4 -0
  286. package/src/Sidebar/types/NavItem.ts +27 -0
  287. package/src/Sidebar/types/index.ts +5 -0
  288. package/src/SidebarLogo/SidebarLogo.stories.tsx +1 -1
  289. package/src/SidebarLogo/__tests__/SidebarLogo.test.tsx +1 -1
  290. package/src/SourceCode/SourceCode.stories.tsx +1 -1
  291. package/src/SourceCode/SourceCode.tsx +7 -3
  292. package/src/SourceCode/__tests__/SourceCode.test.tsx +2 -1
  293. package/src/TableOfContent/TableOfContent.stories.tsx +39 -0
  294. package/src/TableOfContent/TableOfContent.tsx +112 -0
  295. package/src/TableOfContent/index.ts +1 -0
  296. package/src/Tooltip/Tooltip.stories.tsx +1 -1
  297. package/src/Tooltip/Tooltip.tsx +1 -1
  298. package/src/Tooltip/__tests__/Tooltip.test.tsx +1 -1
  299. package/src/globalStyle.ts +10 -73
  300. package/src/hooks/index.ts +4 -0
  301. package/src/hooks/useActiveHeading.ts +46 -0
  302. package/src/hooks/useActiveSectionId.ts +53 -0
  303. package/src/hooks/useFullHeight.ts +47 -0
  304. package/src/hooks/useMobileMenu.ts +11 -0
  305. package/src/hooks/useNavbarHeight.ts +24 -0
  306. package/src/icons/ShelfIcon/ShelfIcon.stories.tsx +1 -1
  307. package/src/icons/ShelfIcon/ShelfIcon.tsx +1 -1
  308. package/src/icons/ShelfIcon/__tests__/ShelfIcon.test.tsx +1 -1
  309. package/src/index.ts +2 -0
  310. package/src/mocks/hooks/usePageData.ts +8 -0
  311. package/src/mocks/models.ts +3 -0
  312. package/src/mocks/search.ts +31 -0
  313. package/src/mocks/types/index.ts +1 -0
  314. package/src/mocks/usePreloadHistory.ts +9 -0
  315. package/src/types/portal/index.d.ts +6 -0
  316. package/src/types/portal/src/client/app/Sidebar/types.d.ts +50 -0
  317. package/src/types/portal/src/client/app/media-css.d.ts +7 -0
  318. package/src/types/portal/src/client/styling/default.d.ts +407 -0
  319. package/src/types/portal/src/client/styling/index.d.ts +14 -0
  320. package/src/types/portal/src/client/styling/resolve.d.ts +1 -0
  321. package/src/types/portal/src/server/constants.d.ts +11 -0
  322. package/src/types/portal/src/server/plugins/markdown/types.d.ts +28 -0
  323. package/src/types/portal/src/server/plugins/nav-utils.d.ts +19 -0
  324. package/src/types/portal/src/server/plugins/portal-config/types.d.ts +23 -0
  325. package/src/types/portal/src/server/plugins/sidebars/index.d.ts +16 -0
  326. package/src/types/portal/src/server/plugins/versions/index.d.ts +15 -0
  327. package/src/types/portal/src/server/plugins/versions/types.d.ts +23 -0
  328. package/src/types/portal/src/server/plugins/versions/utils.d.ts +10 -0
  329. package/src/types/portal/src/server/store.d.ts +101 -0
  330. package/src/types/portal/src/server/utils/async.d.ts +5 -0
  331. package/src/types/portal/src/server/utils/crypto.d.ts +3 -0
  332. package/src/types/portal/src/server/utils/fs.d.ts +3 -0
  333. package/src/types/portal/src/server/utils/index.d.ts +6 -0
  334. package/src/types/portal/src/server/utils/paths.d.ts +16 -0
  335. package/src/types/portal/src/server/utils/reporter/formatter.d.ts +11 -0
  336. package/src/types/portal/src/server/utils/reporter/reporter.d.ts +17 -0
  337. package/src/types/portal/src/server/utils/watcher.d.ts +16 -0
  338. package/src/types/portal/src/server/utils/yaml.d.ts +1 -0
  339. package/src/types/portal/src/shared/constants.d.ts +8 -0
  340. package/src/types/portal/src/shared/types.d.ts +77 -0
  341. package/src/types/portal/src/shared/urls.d.ts +7 -0
  342. package/src/types/portal/src/shared/utils.d.ts +10 -0
  343. package/src/ui/AlertIcon.tsx +110 -0
  344. package/src/ui/Arrow.tsx +36 -0
  345. package/src/ui/Background.tsx +16 -0
  346. package/src/ui/Box.tsx +39 -0
  347. package/src/ui/Button.tsx +19 -0
  348. package/src/ui/Dropdown.tsx +132 -0
  349. package/src/ui/Flex.tsx +21 -0
  350. package/src/ui/Jumbotron.tsx +57 -0
  351. package/src/ui/Tiles/ThinTile.tsx +151 -0
  352. package/src/ui/Tiles/TileHeader.ts +13 -0
  353. package/src/ui/Tiles/TileText.tsx +12 -0
  354. package/src/ui/Tiles/WideTile.tsx +138 -0
  355. package/src/ui/Tiles/index.ts +4 -0
  356. package/src/ui/Typography.tsx +167 -0
  357. package/src/ui/UniversalLink.tsx +100 -0
  358. package/src/ui/index.tsx +17 -0
  359. package/src/utils/__tests__/ClipboardService.test.ts +1 -1
  360. package/src/utils/__tests__/css-variables.test.ts +1 -1
  361. package/src/utils/__tests__/highlight.test.ts +1 -1
  362. package/src/utils/__tests__/jsonToHtml.test.ts +1 -1
  363. package/src/utils/__tests__/media-css.test.ts +1 -1
  364. package/src/utils/__tests__/theme-helpers.test.ts +1 -1
  365. package/src/utils/getNavbarElement.ts +10 -0
  366. package/src/utils/isUrl.ts +42 -0
  367. package/src/utils/replaceHashInColor.ts +3 -0
  368. package/ui/AlertIcon.d.ts +9 -0
  369. package/ui/AlertIcon.js +45 -0
  370. package/ui/Arrow.d.ts +7 -0
  371. package/ui/Arrow.js +42 -0
  372. package/ui/Background.d.ts +7 -0
  373. package/ui/Background.js +16 -0
  374. package/ui/Box.d.ts +6 -0
  375. package/ui/Box.js +16 -0
  376. package/ui/Button.d.ts +7 -0
  377. package/ui/Button.js +27 -0
  378. package/ui/Dropdown.d.ts +8 -0
  379. package/ui/Dropdown.js +55 -0
  380. package/ui/Flex.d.ts +10 -0
  381. package/ui/Flex.js +31 -0
  382. package/ui/Jumbotron.d.ts +18 -0
  383. package/ui/Jumbotron.js +44 -0
  384. package/ui/Tiles/ThinTile.d.ts +21 -0
  385. package/ui/Tiles/ThinTile.js +98 -0
  386. package/ui/Tiles/TileHeader.d.ts +5 -0
  387. package/ui/Tiles/TileHeader.js +15 -0
  388. package/ui/Tiles/TileText.d.ts +5 -0
  389. package/ui/Tiles/TileText.js +15 -0
  390. package/ui/Tiles/WideTile.d.ts +7 -0
  391. package/ui/Tiles/WideTile.js +93 -0
  392. package/ui/Tiles/index.d.ts +4 -0
  393. package/ui/Tiles/index.js +20 -0
  394. package/ui/Typography.d.ts +110 -0
  395. package/ui/Typography.js +137 -0
  396. package/ui/UniversalLink.d.ts +17 -0
  397. package/ui/UniversalLink.js +62 -0
  398. package/ui/index.d.ts +14 -0
  399. package/ui/index.js +34 -0
  400. package/utils/getNavbarElement.d.ts +1 -0
  401. package/utils/getNavbarElement.js +14 -0
  402. package/utils/isUrl.d.ts +12 -0
  403. package/utils/isUrl.js +36 -0
  404. package/utils/replaceHashInColor.d.ts +1 -0
  405. package/utils/replaceHashInColor.js +7 -0
package/src/OperationBadge/__tests__/__snapshots__/OperationBadge.test.tsx.snap ADDED
@@ -0,0 +1,651 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`OperationBadge renders basic 1`] = `
4
+ .c0 {
5
+ display: inline-block;
6
+ font-size: var(--http-badge-menu-font-size);
7
+ font-family: var(--http-badge-font-family);
8
+ font-weight: var(--http-badge-font-weight);
9
+ line-height: var(--http-badge-menu-line-height);
10
+ color: var(--http-badge-color);
11
+ background-color: #333;
12
+ border-radius: var(--http-badge-border-radius);
13
+ width: 36px;
14
+ height: 14px;
15
+ text-transform: uppercase;
16
+ text-align: center;
17
+ margin-right: 6px;
18
+ }
19
+
20
+ .c0.get {
21
+ background-color: var(--color-http-get);
22
+ }
23
+
24
+ .c0.post {
25
+ background-color: var(--color-http-post);
26
+ }
27
+
28
+ .c0.put {
29
+ background-color: var(--color-http-put);
30
+ }
31
+
32
+ .c0.options {
33
+ background-color: var(--color-http-options);
34
+ }
35
+
36
+ .c0.patch {
37
+ background-color: var(--color-http-patch);
38
+ }
39
+
40
+ .c0.delete {
41
+ background-color: var(--color-http-delete);
42
+ }
43
+
44
+ .c0.basic {
45
+ background-color: var(--color-http-basic);
46
+ }
47
+
48
+ .c0.link {
49
+ background-color: var(--color-http-link);
50
+ }
51
+
52
+ .c0.head {
53
+ background-color: var(--color-http-head);
54
+ }
55
+
56
+ .c0.hook {
57
+ background-color: var(--color-http-hook);
58
+ }
59
+
60
+ <span
61
+ class="c0 operation-type basic"
62
+ type="basic"
63
+ >
64
+ basic
65
+ </span>
66
+ `;
67
+
68
+ exports[`OperationBadge renders delete 1`] = `
69
+ .c0 {
70
+ display: inline-block;
71
+ font-size: var(--http-badge-menu-font-size);
72
+ font-family: var(--http-badge-font-family);
73
+ font-weight: var(--http-badge-font-weight);
74
+ line-height: var(--http-badge-menu-line-height);
75
+ color: var(--http-badge-color);
76
+ background-color: #333;
77
+ border-radius: var(--http-badge-border-radius);
78
+ width: 36px;
79
+ height: 14px;
80
+ text-transform: uppercase;
81
+ text-align: center;
82
+ margin-right: 6px;
83
+ }
84
+
85
+ .c0.get {
86
+ background-color: var(--color-http-get);
87
+ }
88
+
89
+ .c0.post {
90
+ background-color: var(--color-http-post);
91
+ }
92
+
93
+ .c0.put {
94
+ background-color: var(--color-http-put);
95
+ }
96
+
97
+ .c0.options {
98
+ background-color: var(--color-http-options);
99
+ }
100
+
101
+ .c0.patch {
102
+ background-color: var(--color-http-patch);
103
+ }
104
+
105
+ .c0.delete {
106
+ background-color: var(--color-http-delete);
107
+ }
108
+
109
+ .c0.basic {
110
+ background-color: var(--color-http-basic);
111
+ }
112
+
113
+ .c0.link {
114
+ background-color: var(--color-http-link);
115
+ }
116
+
117
+ .c0.head {
118
+ background-color: var(--color-http-head);
119
+ }
120
+
121
+ .c0.hook {
122
+ background-color: var(--color-http-hook);
123
+ }
124
+
125
+ <span
126
+ class="c0 operation-type delete"
127
+ type="delete"
128
+ >
129
+ delete
130
+ </span>
131
+ `;
132
+
133
+ exports[`OperationBadge renders get 1`] = `
134
+ .c0 {
135
+ display: inline-block;
136
+ font-size: var(--http-badge-menu-font-size);
137
+ font-family: var(--http-badge-font-family);
138
+ font-weight: var(--http-badge-font-weight);
139
+ line-height: var(--http-badge-menu-line-height);
140
+ color: var(--http-badge-color);
141
+ background-color: #333;
142
+ border-radius: var(--http-badge-border-radius);
143
+ width: 36px;
144
+ height: 14px;
145
+ text-transform: uppercase;
146
+ text-align: center;
147
+ margin-right: 6px;
148
+ }
149
+
150
+ .c0.get {
151
+ background-color: var(--color-http-get);
152
+ }
153
+
154
+ .c0.post {
155
+ background-color: var(--color-http-post);
156
+ }
157
+
158
+ .c0.put {
159
+ background-color: var(--color-http-put);
160
+ }
161
+
162
+ .c0.options {
163
+ background-color: var(--color-http-options);
164
+ }
165
+
166
+ .c0.patch {
167
+ background-color: var(--color-http-patch);
168
+ }
169
+
170
+ .c0.delete {
171
+ background-color: var(--color-http-delete);
172
+ }
173
+
174
+ .c0.basic {
175
+ background-color: var(--color-http-basic);
176
+ }
177
+
178
+ .c0.link {
179
+ background-color: var(--color-http-link);
180
+ }
181
+
182
+ .c0.head {
183
+ background-color: var(--color-http-head);
184
+ }
185
+
186
+ .c0.hook {
187
+ background-color: var(--color-http-hook);
188
+ }
189
+
190
+ <span
191
+ class="c0 operation-type get"
192
+ type="get"
193
+ >
194
+ get
195
+ </span>
196
+ `;
197
+
198
+ exports[`OperationBadge renders head 1`] = `
199
+ .c0 {
200
+ display: inline-block;
201
+ font-size: var(--http-badge-menu-font-size);
202
+ font-family: var(--http-badge-font-family);
203
+ font-weight: var(--http-badge-font-weight);
204
+ line-height: var(--http-badge-menu-line-height);
205
+ color: var(--http-badge-color);
206
+ background-color: #333;
207
+ border-radius: var(--http-badge-border-radius);
208
+ width: 36px;
209
+ height: 14px;
210
+ text-transform: uppercase;
211
+ text-align: center;
212
+ margin-right: 6px;
213
+ }
214
+
215
+ .c0.get {
216
+ background-color: var(--color-http-get);
217
+ }
218
+
219
+ .c0.post {
220
+ background-color: var(--color-http-post);
221
+ }
222
+
223
+ .c0.put {
224
+ background-color: var(--color-http-put);
225
+ }
226
+
227
+ .c0.options {
228
+ background-color: var(--color-http-options);
229
+ }
230
+
231
+ .c0.patch {
232
+ background-color: var(--color-http-patch);
233
+ }
234
+
235
+ .c0.delete {
236
+ background-color: var(--color-http-delete);
237
+ }
238
+
239
+ .c0.basic {
240
+ background-color: var(--color-http-basic);
241
+ }
242
+
243
+ .c0.link {
244
+ background-color: var(--color-http-link);
245
+ }
246
+
247
+ .c0.head {
248
+ background-color: var(--color-http-head);
249
+ }
250
+
251
+ .c0.hook {
252
+ background-color: var(--color-http-hook);
253
+ }
254
+
255
+ <span
256
+ class="c0 operation-type head"
257
+ type="head"
258
+ >
259
+ head
260
+ </span>
261
+ `;
262
+
263
+ exports[`OperationBadge renders hook 1`] = `
264
+ .c0 {
265
+ display: inline-block;
266
+ font-size: var(--http-badge-menu-font-size);
267
+ font-family: var(--http-badge-font-family);
268
+ font-weight: var(--http-badge-font-weight);
269
+ line-height: var(--http-badge-menu-line-height);
270
+ color: var(--http-badge-color);
271
+ background-color: #333;
272
+ border-radius: var(--http-badge-border-radius);
273
+ width: 36px;
274
+ height: 14px;
275
+ text-transform: uppercase;
276
+ text-align: center;
277
+ margin-right: 6px;
278
+ }
279
+
280
+ .c0.get {
281
+ background-color: var(--color-http-get);
282
+ }
283
+
284
+ .c0.post {
285
+ background-color: var(--color-http-post);
286
+ }
287
+
288
+ .c0.put {
289
+ background-color: var(--color-http-put);
290
+ }
291
+
292
+ .c0.options {
293
+ background-color: var(--color-http-options);
294
+ }
295
+
296
+ .c0.patch {
297
+ background-color: var(--color-http-patch);
298
+ }
299
+
300
+ .c0.delete {
301
+ background-color: var(--color-http-delete);
302
+ }
303
+
304
+ .c0.basic {
305
+ background-color: var(--color-http-basic);
306
+ }
307
+
308
+ .c0.link {
309
+ background-color: var(--color-http-link);
310
+ }
311
+
312
+ .c0.head {
313
+ background-color: var(--color-http-head);
314
+ }
315
+
316
+ .c0.hook {
317
+ background-color: var(--color-http-hook);
318
+ }
319
+
320
+ <span
321
+ class="c0 operation-type hook"
322
+ type="hook"
323
+ >
324
+ hook
325
+ </span>
326
+ `;
327
+
328
+ exports[`OperationBadge renders link 1`] = `
329
+ .c0 {
330
+ display: inline-block;
331
+ font-size: var(--http-badge-menu-font-size);
332
+ font-family: var(--http-badge-font-family);
333
+ font-weight: var(--http-badge-font-weight);
334
+ line-height: var(--http-badge-menu-line-height);
335
+ color: var(--http-badge-color);
336
+ background-color: #333;
337
+ border-radius: var(--http-badge-border-radius);
338
+ width: 36px;
339
+ height: 14px;
340
+ text-transform: uppercase;
341
+ text-align: center;
342
+ margin-right: 6px;
343
+ }
344
+
345
+ .c0.get {
346
+ background-color: var(--color-http-get);
347
+ }
348
+
349
+ .c0.post {
350
+ background-color: var(--color-http-post);
351
+ }
352
+
353
+ .c0.put {
354
+ background-color: var(--color-http-put);
355
+ }
356
+
357
+ .c0.options {
358
+ background-color: var(--color-http-options);
359
+ }
360
+
361
+ .c0.patch {
362
+ background-color: var(--color-http-patch);
363
+ }
364
+
365
+ .c0.delete {
366
+ background-color: var(--color-http-delete);
367
+ }
368
+
369
+ .c0.basic {
370
+ background-color: var(--color-http-basic);
371
+ }
372
+
373
+ .c0.link {
374
+ background-color: var(--color-http-link);
375
+ }
376
+
377
+ .c0.head {
378
+ background-color: var(--color-http-head);
379
+ }
380
+
381
+ .c0.hook {
382
+ background-color: var(--color-http-hook);
383
+ }
384
+
385
+ <span
386
+ class="c0 operation-type link"
387
+ type="link"
388
+ >
389
+ link
390
+ </span>
391
+ `;
392
+
393
+ exports[`OperationBadge renders options 1`] = `
394
+ .c0 {
395
+ display: inline-block;
396
+ font-size: var(--http-badge-menu-font-size);
397
+ font-family: var(--http-badge-font-family);
398
+ font-weight: var(--http-badge-font-weight);
399
+ line-height: var(--http-badge-menu-line-height);
400
+ color: var(--http-badge-color);
401
+ background-color: #333;
402
+ border-radius: var(--http-badge-border-radius);
403
+ width: 36px;
404
+ height: 14px;
405
+ text-transform: uppercase;
406
+ text-align: center;
407
+ margin-right: 6px;
408
+ }
409
+
410
+ .c0.get {
411
+ background-color: var(--color-http-get);
412
+ }
413
+
414
+ .c0.post {
415
+ background-color: var(--color-http-post);
416
+ }
417
+
418
+ .c0.put {
419
+ background-color: var(--color-http-put);
420
+ }
421
+
422
+ .c0.options {
423
+ background-color: var(--color-http-options);
424
+ }
425
+
426
+ .c0.patch {
427
+ background-color: var(--color-http-patch);
428
+ }
429
+
430
+ .c0.delete {
431
+ background-color: var(--color-http-delete);
432
+ }
433
+
434
+ .c0.basic {
435
+ background-color: var(--color-http-basic);
436
+ }
437
+
438
+ .c0.link {
439
+ background-color: var(--color-http-link);
440
+ }
441
+
442
+ .c0.head {
443
+ background-color: var(--color-http-head);
444
+ }
445
+
446
+ .c0.hook {
447
+ background-color: var(--color-http-hook);
448
+ }
449
+
450
+ <span
451
+ class="c0 operation-type options"
452
+ type="options"
453
+ >
454
+ options
455
+ </span>
456
+ `;
457
+
458
+ exports[`OperationBadge renders patch 1`] = `
459
+ .c0 {
460
+ display: inline-block;
461
+ font-size: var(--http-badge-menu-font-size);
462
+ font-family: var(--http-badge-font-family);
463
+ font-weight: var(--http-badge-font-weight);
464
+ line-height: var(--http-badge-menu-line-height);
465
+ color: var(--http-badge-color);
466
+ background-color: #333;
467
+ border-radius: var(--http-badge-border-radius);
468
+ width: 36px;
469
+ height: 14px;
470
+ text-transform: uppercase;
471
+ text-align: center;
472
+ margin-right: 6px;
473
+ }
474
+
475
+ .c0.get {
476
+ background-color: var(--color-http-get);
477
+ }
478
+
479
+ .c0.post {
480
+ background-color: var(--color-http-post);
481
+ }
482
+
483
+ .c0.put {
484
+ background-color: var(--color-http-put);
485
+ }
486
+
487
+ .c0.options {
488
+ background-color: var(--color-http-options);
489
+ }
490
+
491
+ .c0.patch {
492
+ background-color: var(--color-http-patch);
493
+ }
494
+
495
+ .c0.delete {
496
+ background-color: var(--color-http-delete);
497
+ }
498
+
499
+ .c0.basic {
500
+ background-color: var(--color-http-basic);
501
+ }
502
+
503
+ .c0.link {
504
+ background-color: var(--color-http-link);
505
+ }
506
+
507
+ .c0.head {
508
+ background-color: var(--color-http-head);
509
+ }
510
+
511
+ .c0.hook {
512
+ background-color: var(--color-http-hook);
513
+ }
514
+
515
+ <span
516
+ class="c0 operation-type patch"
517
+ type="patch"
518
+ >
519
+ patch
520
+ </span>
521
+ `;
522
+
523
+ exports[`OperationBadge renders post 1`] = `
524
+ .c0 {
525
+ display: inline-block;
526
+ font-size: var(--http-badge-menu-font-size);
527
+ font-family: var(--http-badge-font-family);
528
+ font-weight: var(--http-badge-font-weight);
529
+ line-height: var(--http-badge-menu-line-height);
530
+ color: var(--http-badge-color);
531
+ background-color: #333;
532
+ border-radius: var(--http-badge-border-radius);
533
+ width: 36px;
534
+ height: 14px;
535
+ text-transform: uppercase;
536
+ text-align: center;
537
+ margin-right: 6px;
538
+ }
539
+
540
+ .c0.get {
541
+ background-color: var(--color-http-get);
542
+ }
543
+
544
+ .c0.post {
545
+ background-color: var(--color-http-post);
546
+ }
547
+
548
+ .c0.put {
549
+ background-color: var(--color-http-put);
550
+ }
551
+
552
+ .c0.options {
553
+ background-color: var(--color-http-options);
554
+ }
555
+
556
+ .c0.patch {
557
+ background-color: var(--color-http-patch);
558
+ }
559
+
560
+ .c0.delete {
561
+ background-color: var(--color-http-delete);
562
+ }
563
+
564
+ .c0.basic {
565
+ background-color: var(--color-http-basic);
566
+ }
567
+
568
+ .c0.link {
569
+ background-color: var(--color-http-link);
570
+ }
571
+
572
+ .c0.head {
573
+ background-color: var(--color-http-head);
574
+ }
575
+
576
+ .c0.hook {
577
+ background-color: var(--color-http-hook);
578
+ }
579
+
580
+ <span
581
+ class="c0 operation-type post"
582
+ type="post"
583
+ >
584
+ post
585
+ </span>
586
+ `;
587
+
588
+ exports[`OperationBadge renders put 1`] = `
589
+ .c0 {
590
+ display: inline-block;
591
+ font-size: var(--http-badge-menu-font-size);
592
+ font-family: var(--http-badge-font-family);
593
+ font-weight: var(--http-badge-font-weight);
594
+ line-height: var(--http-badge-menu-line-height);
595
+ color: var(--http-badge-color);
596
+ background-color: #333;
597
+ border-radius: var(--http-badge-border-radius);
598
+ width: 36px;
599
+ height: 14px;
600
+ text-transform: uppercase;
601
+ text-align: center;
602
+ margin-right: 6px;
603
+ }
604
+
605
+ .c0.get {
606
+ background-color: var(--color-http-get);
607
+ }
608
+
609
+ .c0.post {
610
+ background-color: var(--color-http-post);
611
+ }
612
+
613
+ .c0.put {
614
+ background-color: var(--color-http-put);
615
+ }
616
+
617
+ .c0.options {
618
+ background-color: var(--color-http-options);
619
+ }
620
+
621
+ .c0.patch {
622
+ background-color: var(--color-http-patch);
623
+ }
624
+
625
+ .c0.delete {
626
+ background-color: var(--color-http-delete);
627
+ }
628
+
629
+ .c0.basic {
630
+ background-color: var(--color-http-basic);
631
+ }
632
+
633
+ .c0.link {
634
+ background-color: var(--color-http-link);
635
+ }
636
+
637
+ .c0.head {
638
+ background-color: var(--color-http-head);
639
+ }
640
+
641
+ .c0.hook {
642
+ background-color: var(--color-http-hook);
643
+ }
644
+
645
+ <span
646
+ class="c0 operation-type put"
647
+ type="put"
648
+ >
649
+ put
650
+ </span>
651
+ `;
package/src/OperationBadge/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './OperationBadge';
package/src/PageNavigation/NextPageLink.tsx ADDED
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+
3
+ import type { ResolvedNavLinkItem } from '@theme/types/portal';
4
+ import { usePageData } from '@portal/hooks/usePageData';
5
+ import { Button } from '@theme/ui';
6
+
7
+ interface NextPageType {
8
+ nextPage: ResolvedNavLinkItem | null;
9
+ }
10
+
11
+ export function NextPageLink(): JSX.Element {
12
+ const { nextPage }: NextPageType = usePageData();
13
+ if (!nextPage) {
14
+ return <div>&nbsp;</div>;
15
+ }
16
+
17
+ return (
18
+ <Button variant="outlined" size="large" to={nextPage.link}>
19
+ Next to {nextPage.label}
20
+ </Button>
21
+ );
22
+ }
package/src/PageNavigation/PageNavigation.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+
4
+ import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
5
+ import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
6
+
7
+ export function PageNavigation(): JSX.Element {
8
+ return (
9
+ <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
10
+ <PreviousPageLink />
11
+ <NextPageLink />
12
+ </PageNavigationWrapper>
13
+ );
14
+ }
15
+
16
+ const PageNavigationWrapper = styled.div`
17
+ display: flex;
18
+ justify-content: space-between;
19
+ margin: 25px 0px;
20
+ `;
package/src/PageNavigation/PreviousPageLink.tsx ADDED
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+
3
+ import type { ResolvedNavLinkItem } from '@theme/types/portal';
4
+ import { usePageData } from '@portal/hooks/usePageData';
5
+ import { Button } from '@theme/ui';
6
+
7
+ interface PreviousPageType {
8
+ prevPage: ResolvedNavLinkItem | null;
9
+ }
10
+
11
+ export function PreviousPageLink(): JSX.Element {
12
+ const { prevPage }: PreviousPageType = usePageData();
13
+ if (!prevPage) {
14
+ return <div>&nbsp;</div>;
15
+ }
16
+
17
+ return (
18
+ <Button variant="outlined" size="large" to={prevPage.link}>
19
+ Back to {prevPage.label}
20
+ </Button>
21
+ );
22
+ }
package/src/Panel/CodePanel.stories.tsx CHANGED
@@ -1,8 +1,7 @@
1
1
  import React, { JSXElementConstructor } from 'react';
2
2
  import { ComponentStory, ComponentMeta } from '@storybook/react';
3
3
 
4
- import { CodePanel } from './CodePanel';
5
- import { PanelComponentProps } from './PanelComponent';
4
+ import { PanelComponentProps, CodePanel } from '@theme/Panel';
6
5
 
7
6
  export default {
8
7
  title: 'Components/Panels/CodePanel',