@covalent/components 0.0.0-COVALENT

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 (264) hide show
  1. package/.babelrc +10 -0
  2. package/.eslintrc.json +18 -0
  3. package/.storybook/main.js +34 -0
  4. package/.storybook/manager-head.html +62 -0
  5. package/.storybook/manager.js +1 -0
  6. package/.storybook/preview-head.html +20 -0
  7. package/.storybook/preview.js +20 -0
  8. package/README.md +179 -0
  9. package/component-config.json +313 -0
  10. package/index.html +288 -0
  11. package/jest.config.js +18 -0
  12. package/package.json +315 -0
  13. package/project.json +104 -0
  14. package/public/index.scss +1 -0
  15. package/public/reset.css +128 -0
  16. package/src/action-ribbon/_action-ribbon.theme.scss +90 -0
  17. package/src/action-ribbon/action-ribbon-base.ts +164 -0
  18. package/src/action-ribbon/action-ribbon.scss +20 -0
  19. package/src/action-ribbon/action-ribbon.spec.ts +11 -0
  20. package/src/action-ribbon/action-ribbon.stories.js +78 -0
  21. package/src/action-ribbon/action-ribbon.ts +26 -0
  22. package/src/alert/_alert.theme.scss +116 -0
  23. package/src/alert/alert-base.ts +175 -0
  24. package/src/alert/alert.scss +55 -0
  25. package/src/alert/alert.spec.ts +26 -0
  26. package/src/alert/alert.stories.js +76 -0
  27. package/src/alert/alert.ts +26 -0
  28. package/src/app-shell/app-shell.scss +387 -0
  29. package/src/app-shell/app-shell.stories.js +323 -0
  30. package/src/app-shell/app-shell.ts +388 -0
  31. package/src/badge/badge.scss +60 -0
  32. package/src/badge/badge.spec.ts +40 -0
  33. package/src/badge/badge.stories.js +88 -0
  34. package/src/badge/badge.ts +122 -0
  35. package/src/button/Overview.mdx +160 -0
  36. package/src/button/button.scss +28 -0
  37. package/src/button/button.spec.ts +11 -0
  38. package/src/button/button.stories.js +102 -0
  39. package/src/button/button.ts +17 -0
  40. package/src/card/card-base.ts +69 -0
  41. package/src/card/card.scss +45 -0
  42. package/src/card/card.spec.ts +11 -0
  43. package/src/card/card.ts +21 -0
  44. package/src/card/cards.stories.js +40 -0
  45. package/src/checkbox/checkbox.scss +8 -0
  46. package/src/checkbox/checkbox.spec.ts +11 -0
  47. package/src/checkbox/checkbox.stories.js +61 -0
  48. package/src/checkbox/checkbox.ts +18 -0
  49. package/src/chips/chip-base.ts +276 -0
  50. package/src/chips/chip-set-base.ts +184 -0
  51. package/src/chips/chip-set.scss +15 -0
  52. package/src/chips/chip-set.spec.ts +11 -0
  53. package/src/chips/chip-set.ts +27 -0
  54. package/src/chips/chip.scss +40 -0
  55. package/src/chips/chip.spec.ts +11 -0
  56. package/src/chips/chip.ts +26 -0
  57. package/src/chips/chips.stories.js +81 -0
  58. package/src/circular-progress/circular-progress.spec.ts +11 -0
  59. package/src/circular-progress/circular-progress.stories.js +40 -0
  60. package/src/circular-progress/circular-progress.ts +16 -0
  61. package/src/code-editor/code-editor.scss +20 -0
  62. package/src/code-editor/code-editor.spec.ts +11 -0
  63. package/src/code-editor/code-editor.stories.js +44 -0
  64. package/src/code-editor/code-editor.theme.ts +199 -0
  65. package/src/code-editor/code-editor.ts +231 -0
  66. package/src/code-snippet/code-snippet.scss +126 -0
  67. package/src/code-snippet/code-snippet.spec.ts +11 -0
  68. package/src/code-snippet/code-snippet.stories.js +134 -0
  69. package/src/code-snippet/code-snippet.ts +93 -0
  70. package/src/data-table/_data-table.theme.scss +39 -0
  71. package/src/data-table/data-table.stories.js +24 -0
  72. package/src/data-table/data-table.stories.scss +11 -0
  73. package/src/dialog/Overview.mdx +39 -0
  74. package/src/dialog/dialog.scss +17 -0
  75. package/src/dialog/dialog.spec.ts +11 -0
  76. package/src/dialog/dialog.stories.js +89 -0
  77. package/src/dialog/dialog.ts +44 -0
  78. package/src/drawer/drawer.scss +4 -0
  79. package/src/drawer/drawer.spec.ts +11 -0
  80. package/src/drawer/drawer.ts +18 -0
  81. package/src/empty-state/_empty-state.theme.scss +0 -0
  82. package/src/empty-state/empty-state.scss +67 -0
  83. package/src/empty-state/empty-state.spec.ts +11 -0
  84. package/src/empty-state/empty-state.stories.js +117 -0
  85. package/src/empty-state/empty-state.ts +61 -0
  86. package/src/expansion-panel/Overview.mdx +108 -0
  87. package/src/expansion-panel/expansion-panel-incorrect-example.png +0 -0
  88. package/src/expansion-panel/expansion-panel-item.scss +243 -0
  89. package/src/expansion-panel/expansion-panel-item.ts +95 -0
  90. package/src/expansion-panel/expansion-panel.spec.ts +11 -0
  91. package/src/expansion-panel/expansion-panel.stories.js +76 -0
  92. package/src/expansion-panel/expansion-panel.ts +94 -0
  93. package/src/focused-page/focused-page.scss +113 -0
  94. package/src/focused-page/focused-page.spec.ts +11 -0
  95. package/src/focused-page/focused-page.stories.js +167 -0
  96. package/src/focused-page/focused-page.ts +201 -0
  97. package/src/formfield/formfield.scss +8 -0
  98. package/src/formfield/formfield.spec.ts +11 -0
  99. package/src/formfield/formfield.ts +24 -0
  100. package/src/full-screen-dialog/full-screen-dialog.scss +37 -0
  101. package/src/full-screen-dialog/full-screen-dialog.spec.ts +11 -0
  102. package/src/full-screen-dialog/full-screen-dialog.stories.js +172 -0
  103. package/src/full-screen-dialog/full-screen-dialog.ts +84 -0
  104. package/src/icon/_icon-list.ts +316 -0
  105. package/src/icon/icon-demo.scss +25 -0
  106. package/src/icon/icon-demo.ts +37 -0
  107. package/src/icon/icon.spec.ts +11 -0
  108. package/src/icon/icon.stories.js +55 -0
  109. package/src/icon/icon.ts +16 -0
  110. package/src/icon-button/_icon-button.theme.scss +9 -0
  111. package/src/icon-button/icon-button.scss +12 -0
  112. package/src/icon-button/icon-button.spec.ts +11 -0
  113. package/src/icon-button/icon-button.stories.js +24 -0
  114. package/src/icon-button/icon-button.ts +19 -0
  115. package/src/icon-button-toggle/icon-button-toggle.scss +19 -0
  116. package/src/icon-button-toggle/icon-button-toggle.spec.ts +11 -0
  117. package/src/icon-button-toggle/icon-button-toggle.stories.js +32 -0
  118. package/src/icon-button-toggle/icon-button-toggle.ts +50 -0
  119. package/src/icon-checkbox/icon-check-toggle.ts +64 -0
  120. package/src/icon-checkbox/icon-check.spec.ts +11 -0
  121. package/src/icon-checkbox/icon-checkbox.scss +95 -0
  122. package/src/icon-checkbox/icon-checkbox.stories.js +77 -0
  123. package/src/icon-lockup/icon-lockup.scss +47 -0
  124. package/src/icon-lockup/icon-lockup.spec.ts +11 -0
  125. package/src/icon-lockup/icon-lockup.stories.js +93 -0
  126. package/src/icon-lockup/icon-lockup.ts +125 -0
  127. package/src/icon-radio/icon-radio-toggle.ts +43 -0
  128. package/src/icon-radio/icon-radio.scss +63 -0
  129. package/src/icon-radio/icon-radio.spec.ts +11 -0
  130. package/src/icon-radio/icon-radio.stories.js +23 -0
  131. package/src/index.scss +1 -0
  132. package/src/index.ts +57 -0
  133. package/src/linear-progress/linear-progress.scss +4 -0
  134. package/src/linear-progress/linear-progress.spec.ts +11 -0
  135. package/src/linear-progress/linear-progress.stories.js +43 -0
  136. package/src/linear-progress/linear-progress.ts +18 -0
  137. package/src/list/Overview.mdx +91 -0
  138. package/src/list/_list.theme.scss +100 -0
  139. package/src/list/check-list-item.spec.ts +11 -0
  140. package/src/list/check-list-item.ts +25 -0
  141. package/src/list/list-item.scss +56 -0
  142. package/src/list/list-item.spec.ts +11 -0
  143. package/src/list/list-item.ts +31 -0
  144. package/src/list/list.scss +25 -0
  145. package/src/list/list.stories.js +120 -0
  146. package/src/list/list.ts +23 -0
  147. package/src/list/nav-list-item.scss +159 -0
  148. package/src/list/nav-list-item.ts +223 -0
  149. package/src/list/radio-list-item.ts +25 -0
  150. package/src/menu/menu.scss +3 -0
  151. package/src/menu/menu.spec.ts +11 -0
  152. package/src/menu/menu.stories.js +110 -0
  153. package/src/menu/menu.ts +23 -0
  154. package/src/notebook-cell/notebook-cell.scss +185 -0
  155. package/src/notebook-cell/notebook-cell.spec.ts +11 -0
  156. package/src/notebook-cell/notebook-cell.stories.js +87 -0
  157. package/src/notebook-cell/notebook-cell.ts +300 -0
  158. package/src/radio/radio.scss +3 -0
  159. package/src/radio/radio.spec.ts +11 -0
  160. package/src/radio/radio.stories.js +56 -0
  161. package/src/radio/radio.ts +18 -0
  162. package/src/select/select.scss +16 -0
  163. package/src/select/select.spec.ts +11 -0
  164. package/src/select/select.stories.js +57 -0
  165. package/src/select/select.ts +18 -0
  166. package/src/side-sheet/side-sheet.scss +49 -0
  167. package/src/side-sheet/side-sheet.spec.ts +11 -0
  168. package/src/side-sheet/side-sheet.stories.js +96 -0
  169. package/src/side-sheet/side-sheet.ts +37 -0
  170. package/src/skeleton/_skeleton.styles.scss +24 -0
  171. package/src/skeleton/skeleton.stories.js +77 -0
  172. package/src/slider/slider-range.ts +16 -0
  173. package/src/slider/slider.spec.ts +11 -0
  174. package/src/slider/slider.stories.js +54 -0
  175. package/src/slider/slider.ts +16 -0
  176. package/src/snackbar/snackbar.scss +8 -0
  177. package/src/snackbar/snackbar.spec.ts +11 -0
  178. package/src/snackbar/snackbar.stories.js +42 -0
  179. package/src/snackbar/snackbar.ts +18 -0
  180. package/src/status-dialog/status-dialog.scss +204 -0
  181. package/src/status-dialog/status-dialog.spec.ts +48 -0
  182. package/src/status-dialog/status-dialog.stories.js +136 -0
  183. package/src/status-dialog/status-dialog.ts +188 -0
  184. package/src/status-header/_status-header.theme.scss +79 -0
  185. package/src/status-header/status-header-base.ts +42 -0
  186. package/src/status-header/status-header-item.scss +17 -0
  187. package/src/status-header/status-header-item.spec.ts +11 -0
  188. package/src/status-header/status-header-item.ts +32 -0
  189. package/src/status-header/status-header.scss +57 -0
  190. package/src/status-header/status-header.spec.ts +11 -0
  191. package/src/status-header/status-header.stories.js +114 -0
  192. package/src/status-header/status-header.ts +26 -0
  193. package/src/switch/switch.scss +17 -0
  194. package/src/switch/switch.spec.ts +11 -0
  195. package/src/switch/switch.stories.js +41 -0
  196. package/src/switch/switch.ts +18 -0
  197. package/src/tab/Overview.mdx +38 -0
  198. package/src/tab/tab-bar.spec.ts +11 -0
  199. package/src/tab/tab-bar.ts +16 -0
  200. package/src/tab/tab.scss +10 -0
  201. package/src/tab/tab.spec.ts +11 -0
  202. package/src/tab/tab.stories.js +30 -0
  203. package/src/tab/tab.ts +18 -0
  204. package/src/text-lockup/text-lockup.scss +66 -0
  205. package/src/text-lockup/text-lockup.spec.ts +11 -0
  206. package/src/text-lockup/text-lockup.stories.js +67 -0
  207. package/src/text-lockup/text-lockup.ts +55 -0
  208. package/src/textarea/textarea.spec.ts +11 -0
  209. package/src/textarea/textarea.stories.js +39 -0
  210. package/src/textarea/textarea.ts +19 -0
  211. package/src/textfield/textfield.scss +34 -0
  212. package/src/textfield/textfield.spec.ts +11 -0
  213. package/src/textfield/textfield.stories.js +60 -0
  214. package/src/textfield/textfield.ts +25 -0
  215. package/src/theme/_index.scss +46 -0
  216. package/src/theme/prebuilt/dark-theme.scss +17 -0
  217. package/src/theme/prebuilt/light-theme.scss +17 -0
  218. package/src/toolbar/toolbar.scss +37 -0
  219. package/src/toolbar/toolbar.spec.ts +11 -0
  220. package/src/toolbar/toolbar.stories.js +66 -0
  221. package/src/toolbar/toolbar.ts +27 -0
  222. package/src/tooltip/tooltip.scss +16 -0
  223. package/src/tooltip/tooltip.spec.ts +11 -0
  224. package/src/tooltip/tooltip.stories.js +72 -0
  225. package/src/tooltip/tooltip.ts +185 -0
  226. package/src/top-app-bar/top-app-bar-fixed.ts +23 -0
  227. package/src/top-app-bar/top-app-bar.scss +14 -0
  228. package/src/top-app-bar/top-app-bar.spec.ts +11 -0
  229. package/src/top-app-bar/top-app-bar.stories.js +41 -0
  230. package/src/top-app-bar/top-app-bar.ts +23 -0
  231. package/src/tree-list/tree-list-item.scss +96 -0
  232. package/src/tree-list/tree-list-item.spec.ts +11 -0
  233. package/src/tree-list/tree-list-item.ts +87 -0
  234. package/src/tree-list/tree-list.scss +13 -0
  235. package/src/tree-list/tree-list.spec.ts +11 -0
  236. package/src/tree-list/tree-list.stories.js +151 -0
  237. package/src/tree-list/tree-list.ts +53 -0
  238. package/src/typography/typography.scss +45 -0
  239. package/src/typography/typography.spec.ts +11 -0
  240. package/src/typography/typography.stories.js +23 -0
  241. package/src/typography/typography.ts +27 -0
  242. package/stories/Introduction.mdx +47 -0
  243. package/stories/color-use.mdx +509 -0
  244. package/stories/demos/dialog.component.html +187 -0
  245. package/stories/demos/dialog.component.js +57 -0
  246. package/stories/demos/grid.content.html +99 -0
  247. package/stories/demos/lorem-ipsum.content.html +338 -0
  248. package/stories/demos/material-web.content.html +2125 -0
  249. package/stories/demos/table-column-sorting.content.html +92 -0
  250. package/stories/demos/table-pagination.content.html +139 -0
  251. package/stories/demos/table-progress-indicator.content.html +77 -0
  252. package/stories/demos/table-row-selection.content.html +219 -0
  253. package/stories/demos/table.content.html +64 -0
  254. package/stories/demos/top-app-bar.component.js +57 -0
  255. package/stories/guide-representing-state.mdx +282 -0
  256. package/stories/info-and-help.mdx +484 -0
  257. package/stories/item-detail-and-editing.mdx +529 -0
  258. package/stories/markdown-elements.mdx +194 -0
  259. package/stories/writing-and-naming.mdx +157 -0
  260. package/tsconfig.json +34 -0
  261. package/tsconfig.lib.json +17 -0
  262. package/tsconfig.spec.json +14 -0
  263. package/types.d.ts +15 -0
  264. package/vite.config.js +58 -0
package/index.html ADDED
@@ -0,0 +1,288 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Covalent - components</title>
8
+
9
+ <!-- CSS Reset -->
10
+ <link href="reset.css" rel="stylesheet" />
11
+
12
+ <!-- Main entry point to include all of Covalent Components-->
13
+ <script type="module" src="src/index.ts"></script>
14
+ <link href="src/theme/prebuilt/light-theme.scss" rel="stylesheet" />
15
+ <link href="public/index.scss" rel="stylesheet" />
16
+
17
+ <!-- Inter Font Typography & Material Icons Font --->
18
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
19
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
20
+ <link
21
+ href="https://fonts.googleapis.com/css?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
22
+ rel="stylesheet"
23
+ />
24
+ <link
25
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
26
+ rel="stylesheet"
27
+ />
28
+ </head>
29
+ <body>
30
+ <cv-app-shell appName="[App Name]" sectionName="Environments" contained>
31
+ <svg
32
+ slot="logo"
33
+ width="103"
34
+ height="20"
35
+ viewBox="0 0 103 20"
36
+ style="fill: var(--cv-theme-text-logo-on-background)"
37
+ fill="none"
38
+ >
39
+ <path
40
+ d="M0 2.30182H3.53561V5.6615H7.47898V8.88045H3.53561V14.5072C3.53561 15.9632 4.26909 16.4391 5.30341 16.4391H7.47898V19.658H5.30341C1.68575 19.658 0 18.0358 0 14.5072V2.30182Z"
41
+ />
42
+ <path
43
+ d="M15.9376 19.9907C11.5865 19.9907 8.67492 17.0506 8.67492 12.6854C8.67492 8.32008 11.5318 5.32374 15.7461 5.32374C19.9605 5.32374 22.708 8.17934 22.708 12.5446C22.708 12.9643 22.6806 13.4121 22.5986 13.9443H12.3746C12.7003 15.9043 13.8714 16.828 15.9923 16.828C17.325 16.828 18.3046 16.2395 18.685 15.4565H22.33C21.5145 18.1714 19.2295 19.9907 15.9376 19.9907ZM12.4293 10.9787H19.0107C18.6577 9.21565 17.6233 8.37637 15.7461 8.37637C13.9783 8.37637 12.8371 9.27194 12.4293 10.9787Z"
44
+ />
45
+ <path
46
+ d="M24.6672 5.65895H28.0661V7.33751C29.3167 6.05044 30.8135 5.40563 32.2282 5.65895V9.01863C30.4604 8.79601 29.3192 9.63529 28.2028 11.1168V19.6529H24.6672V5.65895Z"
47
+ />
48
+ <path
49
+ d="M36.6316 19.8218C34.1303 19.8218 32.1437 18.3096 32.1437 15.1751C32.1437 12.6009 33.7201 10.8379 37.2557 10.8379H40.3288V10.4183C40.3288 9.13121 39.5406 8.59898 37.5814 8.59898C36.276 8.59898 35.2417 8.73972 33.827 9.15936V5.88412C34.916 5.57706 36.276 5.38004 37.8797 5.38004C41.9599 5.38004 43.8619 6.97416 43.8619 10.4183V19.6555H40.4084V18.8443L39.6202 19.1795C38.6132 19.5992 37.5814 19.8244 36.6291 19.8244L36.6316 19.8218ZM38.5635 16.5466L40.3313 15.7636V13.6935H37.6386C36.4153 13.6935 35.6793 14.282 35.6793 15.2058C35.6793 16.2984 36.4128 16.828 37.3377 16.828C37.7181 16.828 38.1532 16.7154 38.561 16.5491L38.5635 16.5466Z"
50
+ />
51
+ <path
52
+ d="M56.3758 19.6555V18.7318L56.1868 18.8162C54.9362 19.4329 53.6035 19.7399 52.3255 19.7399C48.9267 19.7399 45.9331 17.4728 45.9331 12.6598C45.9331 7.8467 48.9242 5.55148 52.3529 5.55148C53.6035 5.55148 54.9362 5.85853 56.1868 6.4752L56.2962 6.53149V0.341797H59.8318V19.6555H56.3758ZM52.9769 16.3802C53.7378 16.3802 54.5806 16.1832 55.4509 15.7636L56.2938 15.3439V9.97049L55.4509 9.55085C54.5806 9.13121 53.7378 8.93419 52.9769 8.93419C51.0177 8.93419 49.5507 10.1931 49.5507 12.6572C49.5507 15.1213 51.0202 16.3802 52.9769 16.3802Z"
53
+ />
54
+ <path
55
+ d="M66.2218 19.8218C63.7205 19.8218 61.7339 18.3096 61.7339 15.1751C61.7339 12.6009 63.3103 10.8379 66.8459 10.8379H69.919V10.4183C69.919 9.13121 69.1308 8.59898 67.1716 8.59898C65.8662 8.59898 64.8319 8.73972 63.4172 9.15936V5.88412C64.5062 5.57706 65.8662 5.38004 67.4699 5.38004C71.5501 5.38004 73.4521 6.97416 73.4521 10.4183V19.6555H69.9986V18.8443L69.2104 19.1795C68.2034 19.5992 67.1716 19.8244 66.2193 19.8244L66.2218 19.8218ZM68.1537 16.5466L69.9215 15.7636V13.6935H67.2288C66.0055 13.6935 65.2695 14.282 65.2695 15.2058C65.2695 16.2984 66.003 16.828 66.9279 16.828C67.3083 16.828 67.7435 16.7154 68.1512 16.5491L68.1537 16.5466Z"
56
+ />
57
+ <path
58
+ d="M76.0653 2.30182H79.6009V5.6615H83.5443V8.88045H79.6009V14.5072C79.6009 15.9632 80.3344 16.4391 81.3687 16.4391H83.5443V19.658H81.3687C77.7511 19.658 76.0653 18.0358 76.0653 14.5072V2.30182Z"
59
+ />
60
+ <path
61
+ d="M89.2555 19.8218C86.7542 19.8218 84.7676 18.3096 84.7676 15.1751C84.7676 12.6009 86.3439 10.8379 89.8795 10.8379H92.9527V10.4183C92.9527 9.13121 92.1645 8.59898 90.2053 8.59898C88.8999 8.59898 87.8656 8.73972 86.4509 9.15936V5.88412C87.5399 5.57706 88.8999 5.38004 90.5036 5.38004C94.5837 5.38004 96.4858 6.97416 96.4858 10.4183V19.6555H93.0323V18.8443L92.2441 19.1795C91.2371 19.5992 90.2053 19.8244 89.253 19.8244L89.2555 19.8218ZM91.1874 16.5466L92.9552 15.7636V13.6935H90.2624C89.0392 13.6935 88.3032 14.282 88.3032 15.2058C88.3032 16.2984 89.0367 16.828 89.9616 16.828C90.342 16.828 90.7771 16.7154 91.1849 16.5491L91.1874 16.5466Z"
62
+ />
63
+ <path
64
+ d="M98.5296 18.0588C98.5296 16.9943 99.3451 16.1551 100.407 16.1551C101.468 16.1551 102.284 16.9943 102.284 18.0588C102.284 19.1233 101.441 19.9907 100.407 19.9907C99.3725 19.9907 98.5296 19.1233 98.5296 18.0588Z"
65
+ />
66
+ </svg>
67
+
68
+ <cv-icon-button slot="section-action" icon="arrow_back"></cv-icon-button>
69
+
70
+ <cv-list class="navigation-rail" slot="navigation" activatable>
71
+ <cv-nav-list-item graphic="avatar">
72
+ <cv-icon class="home-icon" slot="graphic">language</cv-icon>
73
+ Production
74
+ <cv-icon-button
75
+ class="section-selector"
76
+ icon="arrow_drop_down"
77
+ ></cv-icon-button>
78
+ </cv-nav-list-item>
79
+
80
+ <cv-nav-list-item graphic="avatar">
81
+ <cv-icon class="home-icon" slot="graphic">home</cv-icon>
82
+ Home
83
+ </cv-nav-list-item>
84
+
85
+ <cv-nav-list-item graphic="avatar" hasChildren>
86
+ <span>Editor</span>
87
+ <cv-icon class="covalent-icon" slot="graphic">product_editor</cv-icon>
88
+ <cv-list slot="expansion-panel" activatable rootTabbable>
89
+ <cv-nav-list-item subNav>Scripts</cv-nav-list-item>
90
+ <cv-nav-list-item subNav>Scripts</cv-nav-list-item>
91
+ <cv-nav-list-item subNav>Scripts</cv-nav-list-item>
92
+ <cv-nav-list-item subNav>Scripts</cv-nav-list-item>
93
+ <cv-nav-list-item subNav>Scripts</cv-nav-list-item>
94
+ </cv-list>
95
+ </cv-nav-list-item>
96
+
97
+ <cv-nav-list-item graphic="avatar">
98
+ <span>Sites</span>
99
+ <cv-icon class="covalent-icon" slot="graphic">server</cv-icon>
100
+ </cv-nav-list-item>
101
+ <cv-nav-list-item graphic="avatar">
102
+ <span>Data Protections</span>
103
+ <cv-icon slot="graphic">settings_backup_restore</cv-icon>
104
+ </cv-nav-list-item>
105
+ <cv-nav-list-item graphic="avatar">
106
+ <span>Identity</span>
107
+ <cv-icon slot="graphic">contacts</cv-icon>
108
+ </cv-nav-list-item>
109
+ </cv-list>
110
+
111
+ <cv-toolbar slot="user-menu">
112
+ <span slot="title" style="display: flex; align-items: center">
113
+ <cv-typography scale="body1">All environments</cv-typography>
114
+ <cv-icon>arrow_drop_down</cv-icon>
115
+ </span>
116
+
117
+ <cv-textfield
118
+ slot="actionItems"
119
+ icon="forum"
120
+ placeholder="Message ask.ai"
121
+ dense
122
+ ></cv-textfield>
123
+ <cv-icon-button
124
+ slot="actionItems"
125
+ icon="notifications"
126
+ ></cv-icon-button>
127
+ <cv-icon-button-toggle
128
+ slot="actionItems"
129
+ onIcon="help"
130
+ offIcon="help"
131
+ class="help-item"
132
+ ></cv-icon-button-toggle>
133
+ <cv-icon-button slot="actionItems" icon="person"></cv-icon-button>
134
+ </cv-toolbar>
135
+
136
+ <div slot="help" class="mdc-typography">
137
+ <cv-toolbar sticky>
138
+ <span slot="title">Help</span>
139
+ <cv-icon-button
140
+ slot="actionItems"
141
+ icon="undock"
142
+ iconFont="covalent-icons"
143
+ ></cv-icon-button>
144
+ <cv-icon-button
145
+ slot="actionItems"
146
+ icon="close"
147
+ class="help-close"
148
+ ></cv-icon-button>
149
+ </cv-toolbar>
150
+ <div style="padding: 16px">
151
+ <cv-typography scale="headline5">
152
+ Ultricies nunc massa, id ut felis sed varius accumsan platea. </cv-typography
153
+ ><br />
154
+ <cv-typography scale="body1">
155
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
156
+ tincidunt lectus risus, id aliquet mi congue sed. </cv-typography
157
+ ><br />
158
+ <cv-typography scale="body1">
159
+ Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
160
+ pouere cubilia curae; Phasellus tincidunt eros arcu, sollicitudin
161
+ laoreet urna aliquet eget. </cv-typography
162
+ ><br />
163
+ <cv-typography scale="body1">
164
+ Phasellus porta sed libero vel vulputate. Quisque non nisl sem.
165
+ Pellentesque nec pretium magna, et vestibulum neque. Mauris molestie
166
+ eros quis nisi pretium, </cv-typography
167
+ ><br />
168
+ <cv-typography scale="body1">
169
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
170
+ tincidunt lectus risus, id aliquet mi congue sed. </cv-typography
171
+ ><br />
172
+ <cv-typography scale="body1">
173
+ Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
174
+ pouere cubilia curae; Phasellus tincidunt eros arcu, sollicitudin
175
+ laoreet urna aliquet eget. </cv-typography
176
+ ><br />
177
+ <cv-typography scale="body1">
178
+ Phasellus porta sed libero vel vulputate. Quisque non nisl sem.
179
+ Pellentesque nec pretium magna, et vestibulum neque. Mauris molestie
180
+ eros quis nisi pretium,
181
+ </cv-typography>
182
+ </div>
183
+ </div>
184
+ <div slot="mini-list">
185
+ <cv-toolbar divider>
186
+ <span slot="title">[Page name]</span>
187
+ <cv-icon-button
188
+ slot="actionItems"
189
+ icon="filter_list"
190
+ ></cv-icon-button>
191
+ <cv-icon-button slot="actionItems" icon="add"></cv-icon-button>
192
+ </cv-toolbar>
193
+ <cv-list activatable>
194
+ <cv-list-item graphic="avatar" twoline>
195
+ <cv-icon class="covalent-icon" slot="graphic">server</cv-icon>
196
+ <span>[Object name]</span>
197
+ <span slot="secondary">Secondary info</span>
198
+ </cv-list-item>
199
+ <cv-list-item graphic="avatar" twoline>
200
+ <cv-icon class="covalent-icon" slot="graphic">server</cv-icon>
201
+ <span>[Object name]</span>
202
+ <span slot="secondary">Secondary info</span>
203
+ </cv-list-item>
204
+ <cv-list-item graphic="avatar" twoline activated>
205
+ <cv-icon class="covalent-icon" slot="graphic">server</cv-icon>
206
+ <span>[Object name]</span>
207
+ <span slot="secondary">Secondary info</span>
208
+ </cv-list-item>
209
+ <cv-list-item graphic="avatar" twoline>
210
+ <cv-icon class="covalent-icon" slot="graphic">server</cv-icon>
211
+ <span>[Object name]</span>
212
+ <span slot="secondary">Secondary info</span>
213
+ </cv-list-item>
214
+ </cv-list>
215
+ </div>
216
+
217
+ <cv-toolbar>
218
+ <span slot="title">[Section name]</span>
219
+ <cv-icon-button slot="actionItems" icon="menu_open"></cv-icon-button>
220
+ <cv-icon-button
221
+ class="hidden-large"
222
+ slot="actionItems"
223
+ icon="add"
224
+ ></cv-icon-button>
225
+ <cv-button
226
+ class="hidden-small"
227
+ class="create-new-button"
228
+ label="Create new"
229
+ slot="actionItems"
230
+ raised
231
+ ></cv-button>
232
+ </cv-toolbar>
233
+
234
+ <cv-tab-bar>
235
+ <cv-tab label="Overview"></cv-tab>
236
+ <cv-tab label="Usage"></cv-tab>
237
+ <cv-tab label="Objects"></cv-tab>
238
+ <cv-tab label="Queries"></cv-tab>
239
+ <cv-tab label="Network"></cv-tab>
240
+ <cv-tab label="Settings"></cv-tab>
241
+ </cv-tab-bar>
242
+
243
+ <cv-action-ribbon labelText="this is my label" state="active">
244
+ <cv-button
245
+ slot="action-items"
246
+ class="mdc-banner__secondary-action"
247
+ outlined
248
+ >Bulk action</cv-button
249
+ >
250
+ </cv-action-ribbon>
251
+
252
+ <cv-empty-state
253
+ headline="You don't have access to this area"
254
+ subtitle="You don't have permission to view this application.
255
+ Please contact your system administrator for further details."
256
+ icon="work"
257
+ >
258
+ <cv-button slot="buttons">Button text</cv-button>
259
+ <cv-button slot="buttons">Button text</cv-button>
260
+ </cv-empty-state>
261
+
262
+ <br /><br />
263
+ </cv-app-shell>
264
+
265
+ <script>
266
+ var appShell = document.querySelector('cv-app-shell');
267
+ var sectionMenu = document.querySelector('#section-menu');
268
+ var sectionSelector = document.querySelector('.section-selector');
269
+ var helpClose = document.querySelector('.help-close');
270
+ var helpItem = document.querySelector('.help-item');
271
+
272
+ helpItem.addEventListener('click', () => {
273
+ appShell.helpOpen = !appShell.helpOpen;
274
+ });
275
+
276
+ helpClose.addEventListener('click', () => {
277
+ appShell.helpOpen = false;
278
+ helpItem.on = false;
279
+ });
280
+
281
+ sectionSelector.addEventListener('click', function () {
282
+ sectionMenu.open = !sectionMenu.open;
283
+ });
284
+
285
+ sectionMenu.anchor = sectionSelector;
286
+ </script>
287
+ </body>
288
+ </html>
package/jest.config.js ADDED
@@ -0,0 +1,18 @@
1
+ const esModules = ['@material', '@lit', 'lit', 'lit-scss-loader'].join('|');
2
+
3
+ module.exports = {
4
+ displayName: 'components',
5
+ preset: '../../jest.preset.js',
6
+ globals: {
7
+ 'ts-jest': {
8
+ tsconfig: '<rootDir>/tsconfig.spec.json',
9
+ },
10
+ },
11
+ transform: {
12
+ '^.+\\.[tj]s$': 'ts-jest',
13
+ },
14
+ testEnvironment: 'jsdom',
15
+ transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
16
+ moduleFileExtensions: ['ts', 'js', 'html'],
17
+ coverageDirectory: '../../coverage/libs/components',
18
+ };
package/package.json ADDED
@@ -0,0 +1,315 @@
1
+ {
2
+ "name": "@covalent/components",
3
+ "version": "0.0.0-COVALENT",
4
+ "description": "a catalog of material components for covalent",
5
+ "main": "./index.js",
6
+ "module": "./index.mjs",
7
+ "types": "./index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "sass": "./index.scss",
11
+ "import": "./index.mjs",
12
+ "require": "./index.js",
13
+ "types": "./index.d.ts"
14
+ },
15
+ "./icon/icon.theme": "./icon/_icon.theme.scss",
16
+ "./data-table.theme": "./data-table/_data-table.theme.scss",
17
+ "./theme": {
18
+ "sass": "./theme/_index.scss"
19
+ },
20
+ "./action-ribbon": {
21
+ "types": "./action-ribbon/action-ribbon.d.ts",
22
+ "import": "./action-ribbon.mjs",
23
+ "require": "./action-ribbon.js"
24
+ },
25
+ "./alert": {
26
+ "types": "./alert/alert.d.ts",
27
+ "import": "./alert.mjs",
28
+ "require": "./alert.js"
29
+ },
30
+ "./app-shell": {
31
+ "types": "./app-shell/app-shell.d.ts",
32
+ "import": "./app-shell.mjs",
33
+ "require": "./app-shell.js"
34
+ },
35
+ "./badge": {
36
+ "types": "./badge/badge.d.ts",
37
+ "import": "./badge.mjs",
38
+ "require": "./badge.js"
39
+ },
40
+ "./button": {
41
+ "types": "./button/button.d.ts",
42
+ "import": "./button.mjs",
43
+ "require": "./button.js"
44
+ },
45
+ "./card": {
46
+ "types": "./card/card.d.ts",
47
+ "import": "./card.mjs",
48
+ "require": "./card.js"
49
+ },
50
+ "./checkbox": {
51
+ "types": "./checkbox/checkbox.d.ts",
52
+ "import": "./checkbox.mjs",
53
+ "require": "./checkbox.js"
54
+ },
55
+ "./check-list-item": {
56
+ "types": "./list/check-list-item.d.ts",
57
+ "import": "./check-list-item.mjs",
58
+ "require": "./check-list-item.js"
59
+ },
60
+ "./chip": {
61
+ "types": "./chips/chip.d.ts",
62
+ "import": "./chip.mjs",
63
+ "require": "./chip.js"
64
+ },
65
+ "./chip-set": {
66
+ "types": "./chips/chip-set.d.ts",
67
+ "import": "./chip-set.mjs",
68
+ "require": "./chip-set.js"
69
+ },
70
+ "./circular-progress": {
71
+ "types": "./circular-progress/circular-progress.d.ts",
72
+ "import": "./circular-progress.mjs",
73
+ "require": "./circular-progress.js"
74
+ },
75
+ "./code-editor": {
76
+ "types": "./code-editor/code-editor.d.ts",
77
+ "import": "./code-editor.mjs",
78
+ "require": "./code-editor.js"
79
+ },
80
+ "./code-snippet": {
81
+ "types": "./code-snippet/code-snippet.d.ts",
82
+ "import": "./code-snippet.mjs",
83
+ "require": "./code-snippet.js"
84
+ },
85
+ "./dialog": {
86
+ "types": "./dialog/dialog.d.ts",
87
+ "import": "./dialog.mjs",
88
+ "require": "./dialog.js"
89
+ },
90
+ "./drawer": {
91
+ "types": "./drawer/drawer.d.ts",
92
+ "import": "./drawer.mjs",
93
+ "require": "./drawer.js"
94
+ },
95
+ "./empty-state": {
96
+ "types": "./empty-state/empty-state.d.ts",
97
+ "import": "./empty-state.mjs",
98
+ "require": "./empty-state.js"
99
+ },
100
+ "./expansion-panel": {
101
+ "types": "./expansion-panel/expansion-panel.d.ts",
102
+ "import": "./expansion-panel.mjs",
103
+ "require": "./expansion-panel.js"
104
+ },
105
+ "./expansion-panel-item": {
106
+ "types": "./expansion-panel/expansion-panel-item.d.ts",
107
+ "import": "./expansion-panel-item.mjs",
108
+ "require": "./expansion-panel-item.js"
109
+ },
110
+ "./focused-page": {
111
+ "types": "./focused-page/focused-page.d.ts",
112
+ "import": "./focused-page.mjs",
113
+ "require": "./focused-page.js"
114
+ },
115
+ "./formfield": {
116
+ "types": "./formfield/formfield.d.ts",
117
+ "import": "./formfield.mjs",
118
+ "require": "./formfield.js"
119
+ },
120
+ "./full-screen-dialog": {
121
+ "types": "./full-screen-dialog/full-screen-dialog.d.ts",
122
+ "import": "./full-screen-dialog.mjs",
123
+ "require": "./full-screen-dialog.js"
124
+ },
125
+ "./icon": {
126
+ "types": "./icon/icon.d.ts",
127
+ "import": "./icon.mjs",
128
+ "require": "./icon.js"
129
+ },
130
+ "./icon-demo": {
131
+ "types": "./icon/icon-demo.d.ts",
132
+ "import": "./icon-demo.mjs",
133
+ "require": "./icon-demo.js"
134
+ },
135
+ "./icon-button": {
136
+ "types": "./icon-button/icon-button.d.ts",
137
+ "import": "./icon-button.mjs",
138
+ "require": "./icon-button.js"
139
+ },
140
+ "./icon-button-toggle": {
141
+ "types": "./icon-button-toggle/icon-button-toggle.d.ts",
142
+ "import": "./icon-button-toggle.mjs",
143
+ "require": "./icon-button-toggle.js"
144
+ },
145
+ "./icon-check-toggle": {
146
+ "types": "./icon-checkbox/icon-check-toggle.d.ts",
147
+ "import": "./icon-check-toggle.mjs",
148
+ "require": "./icon-check-toggle.js"
149
+ },
150
+ "./icon-lockup": {
151
+ "types": "./icon-lockup/icon-lockup.d.ts",
152
+ "import": "./icon-lockup.mjs",
153
+ "require": "./icon-lockup.js"
154
+ },
155
+ "./icon-radio-toggle": {
156
+ "types": "./icon-radio/icon-radio-toggle.d.ts",
157
+ "import": "./icon-radio-toggle.mjs",
158
+ "require": "./icon-radio-toggle.js"
159
+ },
160
+ "./linear-progress": {
161
+ "types": "./linear-progress/linear-progress.d.ts",
162
+ "import": "./linear-progress.mjs",
163
+ "require": "./linear-progress.js"
164
+ },
165
+ "./list": {
166
+ "types": "./list/list.d.ts",
167
+ "import": "./list.mjs",
168
+ "require": "./list.js"
169
+ },
170
+ "./list-item": {
171
+ "types": "./list/list-item.d.ts",
172
+ "import": "./list-item.mjs",
173
+ "require": "./list-item.js"
174
+ },
175
+ "./menu": {
176
+ "types": "./menu/menu.d.ts",
177
+ "import": "./menu.mjs",
178
+ "require": "./menu.js"
179
+ },
180
+ "./nav-list-item": {
181
+ "types": "./list/nav-list-item.d.ts",
182
+ "import": "./nav-list-item.mjs",
183
+ "require": "./nav-list-item.js"
184
+ },
185
+ "./notebook-cell": {
186
+ "types": "./notebook-cell/notebook-cell.d.ts",
187
+ "import": "./notebook-cell.mjs",
188
+ "require": "./notebook-cell.js"
189
+ },
190
+ "./radio": {
191
+ "types": "./radio/radio.d.ts",
192
+ "import": "./radio.mjs",
193
+ "require": "./radio.js"
194
+ },
195
+ "./radio-list-item": {
196
+ "types": "./list/radio-list-item.d.ts",
197
+ "import": "./radio-list-item.mjs",
198
+ "require": "./radio-list-item.js"
199
+ },
200
+ "./select": {
201
+ "types": "./select/select.d.ts",
202
+ "import": "./select.mjs",
203
+ "require": "./select.js"
204
+ },
205
+ "./side-sheet": {
206
+ "types": "./side-sheet/side-sheet.d.ts",
207
+ "import": "./side-sheet.mjs",
208
+ "require": "./side-sheet.js"
209
+ },
210
+ "./slider": {
211
+ "types": "./slider/slider.d.ts",
212
+ "import": "./slider.mjs",
213
+ "require": "./slider.js"
214
+ },
215
+ "./slider-range": {
216
+ "types": "./slider/slider-range.d.ts",
217
+ "import": "./slider-range.mjs",
218
+ "require": "./slider-range.js"
219
+ },
220
+ "./snackbar": {
221
+ "types": "./snackbar/snackbar.d.ts",
222
+ "import": "./snackbar.mjs",
223
+ "require": "./snackbar.js"
224
+ },
225
+ "./status-dialog": {
226
+ "types": "./status-dialog/status-dialog.d.ts",
227
+ "import": "./status-dialog.mjs",
228
+ "require": "./status-dialog.js"
229
+ },
230
+ "./status-header": {
231
+ "types": "./status-header/status-header.d.ts",
232
+ "import": "./status-header.mjs",
233
+ "require": "./status-header.js"
234
+ },
235
+ "./status-header-item": {
236
+ "types": "./status-header/status-header-item.d.ts",
237
+ "import": "./status-header-item.mjs",
238
+ "require": "./status-header-item.js"
239
+ },
240
+ "./switch": {
241
+ "types": "./switch/switch.d.ts",
242
+ "import": "./switch.mjs",
243
+ "require": "./switch.js"
244
+ },
245
+ "./tab": {
246
+ "types": "./tab/tab.d.ts",
247
+ "import": "./tab.mjs",
248
+ "require": "./tab.js"
249
+ },
250
+ "./tab-bar": {
251
+ "types": "./tab/tab-bar.d.ts",
252
+ "import": "./tab-bar.mjs",
253
+ "require": "./tab-bar.js"
254
+ },
255
+ "./textarea": {
256
+ "types": "./textarea/textarea.d.ts",
257
+ "import": "./textarea.mjs",
258
+ "require": "./textarea.js"
259
+ },
260
+ "./textfield": {
261
+ "types": "./textfield/textfield.d.ts",
262
+ "import": "./textfield.mjs",
263
+ "require": "./textfield.js"
264
+ },
265
+ "./text-lockup": {
266
+ "types": "./text-lockup/text-lockup.d.ts",
267
+ "import": "./text-lockup.mjs",
268
+ "require": "./text-lockup.js"
269
+ },
270
+ "./toolbar": {
271
+ "types": "./toolbar/toolbar.d.ts",
272
+ "import": "./toolbar.mjs",
273
+ "require": "./toolbar.js"
274
+ },
275
+ "./tooltip": {
276
+ "types": "./tooltip/tooltip.d.ts",
277
+ "import": "./tooltip.mjs",
278
+ "require": "./tooltip.js"
279
+ },
280
+ "./top-app-bar": {
281
+ "types": "./top-app-bar/top-app-bar.d.ts",
282
+ "import": "./top-app-bar.mjs",
283
+ "require": "./top-app-bar.js"
284
+ },
285
+ "./top-app-bar-fixed": {
286
+ "types": "./top-app-bar/top-app-bar-fixed.d.ts",
287
+ "import": "./top-app-bar-fixed.mjs",
288
+ "require": "./top-app-bar-fixed.js"
289
+ },
290
+ "./tree-list": {
291
+ "types": "./tree-list/tree-list.d.ts",
292
+ "import": "./tree-list.mjs",
293
+ "require": "./tree-list.js"
294
+ },
295
+ "./tree-list-item": {
296
+ "types": "./tree-list/tree-list-item.d.ts",
297
+ "import": "./tree-list-item.mjs",
298
+ "require": "./tree-list-item.js"
299
+ },
300
+ "./typography": {
301
+ "types": "./typography/typography.d.ts",
302
+ "import": "./typography.mjs",
303
+ "require": "./typography.js"
304
+ }
305
+ },
306
+ "repository": {
307
+ "type": "git",
308
+ "url": "https://github.com/teradata/covalent.git"
309
+ },
310
+ "bugs": {
311
+ "url": "https://github.com/teradata/covalent/issues"
312
+ },
313
+ "license": "MIT",
314
+ "author": "Teradata UX"
315
+ }