@papillonbits/components 0.2.0 → 0.5.0

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 (599) hide show
  1. package/build/index.scss +1 -0
  2. package/build/primer/Alert/Alert.js +142 -0
  3. package/build/primer/Alert/Alert.prop.js +43 -0
  4. package/build/primer/Alert/Alert.scss +158 -0
  5. package/build/primer/Alert/index.js +21 -0
  6. package/build/primer/Blankslate/Blankslate.js +39 -0
  7. package/build/primer/Blankslate/Blankslate.prop.js +31 -0
  8. package/build/primer/Blankslate/Blankslate.scss +91 -0
  9. package/build/primer/Blankslate/index.js +21 -0
  10. package/build/primer/Box/box.scss +294 -0
  11. package/build/primer/BranchName/branch-name.scss +32 -0
  12. package/build/primer/Breadcrumb/Breadcrumb.js +87 -0
  13. package/build/primer/Breadcrumb/Breadcrumb.prop.js +34 -0
  14. package/build/primer/Breadcrumb/Breadcrumb.scss +35 -0
  15. package/build/primer/Breadcrumb/index.js +21 -0
  16. package/build/primer/Button/Button.js +85 -7
  17. package/build/primer/Button/Button.prop.js +64 -3
  18. package/build/primer/Button/Button.scss +293 -4
  19. package/build/primer/Button/index.js +39 -1
  20. package/build/primer/Button/misc.scss +182 -1
  21. package/build/primer/Dropdown/Dropdown.js +126 -0
  22. package/build/primer/Dropdown/Dropdown.prop.js +39 -0
  23. package/build/primer/Dropdown/Dropdown.scss +276 -0
  24. package/build/primer/Dropdown/index.js +21 -0
  25. package/build/primer/ErrorBoundary/ErrorBoundary.js +82 -0
  26. package/build/primer/ErrorBoundary/ErrorBoundary.prop.js +15 -0
  27. package/build/primer/ErrorBoundary/index.js +13 -0
  28. package/build/primer/Form/Checkbox/Checkbox.js +53 -0
  29. package/build/primer/Form/Checkbox/Checkbox.md +32 -0
  30. package/build/primer/Form/Checkbox/Checkbox.prop.js +42 -0
  31. package/build/primer/Form/Checkbox/Checkbox.scss +8 -0
  32. package/build/primer/Form/Checkbox/__tests__/__snapshots__/Checkbox.int.test.js.snap +77 -0
  33. package/build/primer/Form/Checkbox/index.js +21 -0
  34. package/build/primer/Form/Input/Input.js +58 -0
  35. package/build/primer/Form/Input/Input.md +34 -0
  36. package/build/primer/Form/Input/Input.prop.js +51 -0
  37. package/build/primer/Form/Input/Input.scss +9 -0
  38. package/build/primer/Form/Input/__tests__/__snapshots__/Input.int.test.js.snap +31 -0
  39. package/build/primer/Form/Input/index.js +27 -0
  40. package/build/primer/Form/Radio/Radio.js +52 -0
  41. package/build/primer/Form/Radio/Radio.md +25 -0
  42. package/build/primer/Form/Radio/Radio.prop.js +40 -0
  43. package/build/primer/Form/Radio/Radio.scss +6 -0
  44. package/build/primer/Form/Radio/__tests__/__snapshots__/Radio.int.test.js.snap +75 -0
  45. package/build/primer/Form/Radio/index.js +21 -0
  46. package/build/primer/Form/form-control.scss +264 -0
  47. package/build/primer/Form/form-group.scss +277 -0
  48. package/build/primer/Form/form-select.scss +46 -0
  49. package/build/primer/Form/form-validation.scss +365 -0
  50. package/build/primer/Form/index.js +29 -0
  51. package/build/primer/Form/index.scss +8 -0
  52. package/build/primer/Form/input-group.scss +55 -0
  53. package/build/primer/Form/radio-group.scss +62 -0
  54. package/build/primer/Grid/DisplayTable/DisplayTable.js +71 -0
  55. package/build/primer/Grid/DisplayTable/DisplayTable.md +14 -0
  56. package/build/primer/Grid/DisplayTable/DisplayTable.prop.js +22 -0
  57. package/build/primer/Grid/DisplayTable/__tests__/__snapshots__/DisplayTable.int.test.js.snap +346 -0
  58. package/build/primer/Grid/DisplayTable/index.js +13 -0
  59. package/build/primer/Grid/FlexGrid/FlexGrid.js +277 -0
  60. package/build/primer/Grid/FlexGrid/FlexGrid.md +106 -0
  61. package/build/primer/Grid/FlexGrid/FlexGrid.prop.js +55 -0
  62. package/build/primer/Grid/FlexGrid/FlexGrid.scss +27 -0
  63. package/build/primer/Grid/FlexGrid/__tests__/__snapshots__/FlexGrid.int.test.js.snap +7225 -0
  64. package/build/primer/Grid/FlexGrid/index.js +27 -0
  65. package/build/primer/Grid/index.js +18 -0
  66. package/build/primer/Icon/Icon.js +79 -0
  67. package/build/primer/Icon/Icon.part.js +1386 -0
  68. package/build/primer/Icon/Icon.prop.js +517 -0
  69. package/build/primer/Icon/index.js +27 -0
  70. package/build/primer/Label/Label.js +40 -0
  71. package/build/primer/Label/Label.prop.js +41 -0
  72. package/build/primer/Label/counters.scss +38 -0
  73. package/build/primer/Label/diffstat.scss +37 -0
  74. package/build/primer/Label/index.js +13 -0
  75. package/build/primer/Label/index.scss +8 -0
  76. package/build/primer/Label/issue-labels.scss +25 -0
  77. package/build/primer/Label/labels.scss +94 -0
  78. package/build/primer/Label/mixins.scss +39 -0
  79. package/build/primer/Label/states.scss +56 -0
  80. package/build/primer/Layout/container.scss +32 -0
  81. package/build/primer/Layout/grid-offset.scss +45 -0
  82. package/build/primer/Layout/grid.scss +123 -0
  83. package/build/primer/Loader/Loader.js +82 -0
  84. package/build/primer/Loader/Loader.prop.js +26 -0
  85. package/build/primer/Loader/Loader.scss +21 -0
  86. package/build/primer/Loader/index.js +21 -0
  87. package/build/primer/Navigation/Menu/Menu.js +87 -0
  88. package/build/primer/Navigation/Menu/Menu.md +25 -0
  89. package/build/primer/Navigation/Menu/Menu.prop.js +32 -0
  90. package/build/primer/Navigation/Menu/Menu.scss +128 -0
  91. package/build/primer/Navigation/Menu/__tests__/__snapshots__/Menu.int.test.js.snap +120 -0
  92. package/build/primer/Navigation/Menu/index.js +13 -0
  93. package/build/primer/Navigation/TabNav/TabNav.js +148 -0
  94. package/build/primer/Navigation/TabNav/TabNav.md +56 -0
  95. package/build/primer/Navigation/TabNav/TabNav.prop.js +41 -0
  96. package/build/primer/Navigation/TabNav/TabNav.scss +103 -0
  97. package/build/primer/Navigation/TabNav/__tests__/__snapshots__/TabNav.int.test.js.snap +218 -0
  98. package/build/primer/Navigation/TabNav/index.js +21 -0
  99. package/build/primer/Navigation/UnderlineNav/UnderlineNav.js +148 -0
  100. package/build/primer/Navigation/UnderlineNav/UnderlineNav.md +65 -0
  101. package/build/primer/Navigation/UnderlineNav/UnderlineNav.prop.js +47 -0
  102. package/build/primer/Navigation/UnderlineNav/UnderlineNav.scss +92 -0
  103. package/build/primer/Navigation/UnderlineNav/__tests__/__snapshots__/UnderlineNav.int.test.js.snap +271 -0
  104. package/build/primer/Navigation/UnderlineNav/index.js +27 -0
  105. package/build/primer/Navigation/index.js +22 -0
  106. package/build/primer/Pagination/PreviousNext/PreviousNext.js +89 -0
  107. package/build/primer/Pagination/PreviousNext/PreviousNext.md +20 -0
  108. package/build/primer/Pagination/PreviousNext/PreviousNext.prop.js +61 -0
  109. package/build/primer/Pagination/PreviousNext/PreviousNext.scss +157 -0
  110. package/build/primer/Pagination/PreviousNext/__tests__/__snapshots__/PreviousNext.int.test.js.snap +63 -0
  111. package/build/primer/Pagination/PreviousNext/index.js +21 -0
  112. package/build/primer/Pagination/index.js +14 -0
  113. package/build/primer/Popover/Popover.js +77 -0
  114. package/build/primer/Popover/Popover.prop.js +47 -0
  115. package/build/primer/Popover/Popover.scss +230 -0
  116. package/build/primer/Popover/index.js +27 -0
  117. package/build/primer/Progress/Progress.js +41 -0
  118. package/build/primer/Progress/Progress.prop.js +26 -0
  119. package/build/primer/Progress/Progress.scss +29 -0
  120. package/build/primer/Progress/index.js +21 -0
  121. package/build/primer/SVG/icon/alert-16.svg +1 -0
  122. package/build/primer/SVG/icon/alert-24.svg +1 -0
  123. package/build/primer/SVG/icon/archive-16.svg +1 -0
  124. package/build/primer/SVG/icon/archive-24.svg +1 -0
  125. package/build/primer/SVG/icon/arrow-both-16.svg +1 -0
  126. package/build/primer/SVG/icon/arrow-both-24.svg +1 -0
  127. package/build/primer/SVG/icon/arrow-down-16.svg +1 -0
  128. package/build/primer/SVG/icon/arrow-down-24.svg +1 -0
  129. package/build/primer/SVG/icon/arrow-down-left-24.svg +1 -0
  130. package/build/primer/SVG/icon/arrow-down-right-24.svg +1 -0
  131. package/build/primer/SVG/icon/arrow-left-16.svg +1 -0
  132. package/build/primer/SVG/icon/arrow-left-24.svg +1 -0
  133. package/build/primer/SVG/icon/arrow-right-16.svg +1 -0
  134. package/build/primer/SVG/icon/arrow-right-24.svg +1 -0
  135. package/build/primer/SVG/icon/arrow-switch-16.svg +1 -0
  136. package/build/primer/SVG/icon/arrow-switch-24.svg +1 -0
  137. package/build/primer/SVG/icon/arrow-up-16.svg +1 -0
  138. package/build/primer/SVG/icon/arrow-up-24.svg +1 -0
  139. package/build/primer/SVG/icon/arrow-up-left-24.svg +1 -0
  140. package/build/primer/SVG/icon/arrow-up-right-24.svg +1 -0
  141. package/build/primer/SVG/icon/beaker-16.svg +1 -0
  142. package/build/primer/SVG/icon/beaker-24.svg +1 -0
  143. package/build/primer/SVG/icon/bell-16.svg +1 -0
  144. package/build/primer/SVG/icon/bell-24.svg +1 -0
  145. package/build/primer/SVG/icon/bell-fill-24.svg +1 -0
  146. package/build/primer/SVG/icon/bell-slash-16.svg +1 -0
  147. package/build/primer/SVG/icon/bell-slash-24.svg +1 -0
  148. package/build/primer/SVG/icon/blocked-16.svg +1 -0
  149. package/build/primer/SVG/icon/blocked-24.svg +1 -0
  150. package/build/primer/SVG/icon/bold-16.svg +1 -0
  151. package/build/primer/SVG/icon/bold-24.svg +1 -0
  152. package/build/primer/SVG/icon/book-16.svg +1 -0
  153. package/build/primer/SVG/icon/book-24.svg +1 -0
  154. package/build/primer/SVG/icon/bookmark-16.svg +1 -0
  155. package/build/primer/SVG/icon/bookmark-24.svg +1 -0
  156. package/build/primer/SVG/icon/bookmark-fill-24.svg +1 -0
  157. package/build/primer/SVG/icon/bookmark-slash-16.svg +1 -0
  158. package/build/primer/SVG/icon/bookmark-slash-24.svg +1 -0
  159. package/build/primer/SVG/icon/bookmark-slash-fill-24.svg +1 -0
  160. package/build/primer/SVG/icon/briefcase-16.svg +1 -0
  161. package/build/primer/SVG/icon/briefcase-24.svg +1 -0
  162. package/build/primer/SVG/icon/broadcast-16.svg +1 -0
  163. package/build/primer/SVG/icon/broadcast-24.svg +1 -0
  164. package/build/primer/SVG/icon/browser-16.svg +1 -0
  165. package/build/primer/SVG/icon/browser-24.svg +1 -0
  166. package/build/primer/SVG/icon/bug-16.svg +1 -0
  167. package/build/primer/SVG/icon/bug-24.svg +1 -0
  168. package/build/primer/SVG/icon/calendar-16.svg +1 -0
  169. package/build/primer/SVG/icon/calendar-24.svg +1 -0
  170. package/build/primer/SVG/icon/check-16.svg +1 -0
  171. package/build/primer/SVG/icon/check-24.svg +1 -0
  172. package/build/primer/SVG/icon/check-circle-16.svg +1 -0
  173. package/build/primer/SVG/icon/check-circle-24.svg +1 -0
  174. package/build/primer/SVG/icon/check-circle-fill-16.svg +1 -0
  175. package/build/primer/SVG/icon/check-circle-fill-24.svg +1 -0
  176. package/build/primer/SVG/icon/checklist-16.svg +1 -0
  177. package/build/primer/SVG/icon/checklist-24.svg +1 -0
  178. package/build/primer/SVG/icon/chevron-down-16.svg +1 -0
  179. package/build/primer/SVG/icon/chevron-down-24.svg +1 -0
  180. package/build/primer/SVG/icon/chevron-left-16.svg +1 -0
  181. package/build/primer/SVG/icon/chevron-left-24.svg +1 -0
  182. package/build/primer/SVG/icon/chevron-right-16.svg +1 -0
  183. package/build/primer/SVG/icon/chevron-right-24.svg +1 -0
  184. package/build/primer/SVG/icon/chevron-up-16.svg +1 -0
  185. package/build/primer/SVG/icon/chevron-up-24.svg +1 -0
  186. package/build/primer/SVG/icon/circle-16.svg +1 -0
  187. package/build/primer/SVG/icon/circle-24.svg +1 -0
  188. package/build/primer/SVG/icon/circle-slash-16.svg +1 -0
  189. package/build/primer/SVG/icon/circle-slash-24.svg +1 -0
  190. package/build/primer/SVG/icon/clippy-16.svg +1 -0
  191. package/build/primer/SVG/icon/clippy-24.svg +1 -0
  192. package/build/primer/SVG/icon/clock-16.svg +1 -0
  193. package/build/primer/SVG/icon/clock-24.svg +1 -0
  194. package/build/primer/SVG/icon/code-16.svg +1 -0
  195. package/build/primer/SVG/icon/code-24.svg +1 -0
  196. package/build/primer/SVG/icon/code-review-16.svg +1 -0
  197. package/build/primer/SVG/icon/code-review-24.svg +1 -0
  198. package/build/primer/SVG/icon/code-square-16.svg +1 -0
  199. package/build/primer/SVG/icon/code-square-24.svg +1 -0
  200. package/build/primer/SVG/icon/codescan-16.svg +1 -0
  201. package/build/primer/SVG/icon/codescan-24.svg +1 -0
  202. package/build/primer/SVG/icon/codescan-checkmark-16.svg +1 -0
  203. package/build/primer/SVG/icon/codescan-checkmark-24.svg +1 -0
  204. package/build/primer/SVG/icon/codespaces-16.svg +1 -0
  205. package/build/primer/SVG/icon/codespaces-24.svg +1 -0
  206. package/build/primer/SVG/icon/columns-16.svg +1 -0
  207. package/build/primer/SVG/icon/columns-24.svg +1 -0
  208. package/build/primer/SVG/icon/comment-16.svg +1 -0
  209. package/build/primer/SVG/icon/comment-24.svg +1 -0
  210. package/build/primer/SVG/icon/comment-discussion-16.svg +1 -0
  211. package/build/primer/SVG/icon/comment-discussion-24.svg +1 -0
  212. package/build/primer/SVG/icon/commit-24.svg +1 -0
  213. package/build/primer/SVG/icon/container-16.svg +1 -0
  214. package/build/primer/SVG/icon/container-24.svg +1 -0
  215. package/build/primer/SVG/icon/copy-24.svg +1 -0
  216. package/build/primer/SVG/icon/cpu-16.svg +1 -0
  217. package/build/primer/SVG/icon/cpu-24.svg +1 -0
  218. package/build/primer/SVG/icon/credit-card-16.svg +1 -0
  219. package/build/primer/SVG/icon/credit-card-24.svg +1 -0
  220. package/build/primer/SVG/icon/cross-reference-16.svg +1 -0
  221. package/build/primer/SVG/icon/cross-reference-24.svg +1 -0
  222. package/build/primer/SVG/icon/dash-16.svg +1 -0
  223. package/build/primer/SVG/icon/dash-24.svg +1 -0
  224. package/build/primer/SVG/icon/database-16.svg +1 -0
  225. package/build/primer/SVG/icon/database-24.svg +1 -0
  226. package/build/primer/SVG/icon/dependabot-16.svg +1 -0
  227. package/build/primer/SVG/icon/dependabot-24.svg +1 -0
  228. package/build/primer/SVG/icon/desktop-download-16.svg +1 -0
  229. package/build/primer/SVG/icon/desktop-download-24.svg +1 -0
  230. package/build/primer/SVG/icon/device-camera-16.svg +1 -0
  231. package/build/primer/SVG/icon/device-camera-video-16.svg +1 -0
  232. package/build/primer/SVG/icon/device-camera-video-24.svg +1 -0
  233. package/build/primer/SVG/icon/device-desktop-16.svg +1 -0
  234. package/build/primer/SVG/icon/device-desktop-24.svg +1 -0
  235. package/build/primer/SVG/icon/device-mobile-16.svg +1 -0
  236. package/build/primer/SVG/icon/device-mobile-24.svg +1 -0
  237. package/build/primer/SVG/icon/diamond-16.svg +1 -0
  238. package/build/primer/SVG/icon/diamond-24.svg +1 -0
  239. package/build/primer/SVG/icon/diff-16.svg +1 -0
  240. package/build/primer/SVG/icon/diff-24.svg +1 -0
  241. package/build/primer/SVG/icon/diff-added-16.svg +1 -0
  242. package/build/primer/SVG/icon/diff-ignored-16.svg +1 -0
  243. package/build/primer/SVG/icon/diff-modified-16.svg +1 -0
  244. package/build/primer/SVG/icon/diff-removed-16.svg +1 -0
  245. package/build/primer/SVG/icon/diff-renamed-16.svg +1 -0
  246. package/build/primer/SVG/icon/dot-16.svg +1 -0
  247. package/build/primer/SVG/icon/dot-24.svg +1 -0
  248. package/build/primer/SVG/icon/dot-fill-16.svg +1 -0
  249. package/build/primer/SVG/icon/dot-fill-24.svg +1 -0
  250. package/build/primer/SVG/icon/download-16.svg +1 -0
  251. package/build/primer/SVG/icon/download-24.svg +1 -0
  252. package/build/primer/SVG/icon/duplicate-16.svg +1 -0
  253. package/build/primer/SVG/icon/duplicate-24.svg +1 -0
  254. package/build/primer/SVG/icon/ellipsis-16.svg +1 -0
  255. package/build/primer/SVG/icon/eye-16.svg +1 -0
  256. package/build/primer/SVG/icon/eye-24.svg +1 -0
  257. package/build/primer/SVG/icon/eye-closed-16.svg +1 -0
  258. package/build/primer/SVG/icon/eye-closed-24.svg +1 -0
  259. package/build/primer/SVG/icon/eye-slash-24.svg +1 -0
  260. package/build/primer/SVG/icon/file-16.svg +1 -0
  261. package/build/primer/SVG/icon/file-24.svg +1 -0
  262. package/build/primer/SVG/icon/file-badge-16.svg +1 -0
  263. package/build/primer/SVG/icon/file-binary-16.svg +1 -0
  264. package/build/primer/SVG/icon/file-binary-24.svg +1 -0
  265. package/build/primer/SVG/icon/file-code-16.svg +1 -0
  266. package/build/primer/SVG/icon/file-code-24.svg +1 -0
  267. package/build/primer/SVG/icon/file-diff-16.svg +1 -0
  268. package/build/primer/SVG/icon/file-diff-24.svg +1 -0
  269. package/build/primer/SVG/icon/file-directory-16.svg +1 -0
  270. package/build/primer/SVG/icon/file-directory-24.svg +1 -0
  271. package/build/primer/SVG/icon/file-directory-fill-24.svg +1 -0
  272. package/build/primer/SVG/icon/file-media-24.svg +1 -0
  273. package/build/primer/SVG/icon/file-submodule-16.svg +1 -0
  274. package/build/primer/SVG/icon/file-submodule-24.svg +1 -0
  275. package/build/primer/SVG/icon/file-symlink-24.svg +1 -0
  276. package/build/primer/SVG/icon/file-symlink-file-16.svg +1 -0
  277. package/build/primer/SVG/icon/file-symlink-file-24.svg +1 -0
  278. package/build/primer/SVG/icon/file-zip-16.svg +1 -0
  279. package/build/primer/SVG/icon/file-zip-24.svg +1 -0
  280. package/build/primer/SVG/icon/filter-16.svg +1 -0
  281. package/build/primer/SVG/icon/filter-24.svg +1 -0
  282. package/build/primer/SVG/icon/fire-24.svg +1 -0
  283. package/build/primer/SVG/icon/flame-16.svg +1 -0
  284. package/build/primer/SVG/icon/flame-24.svg +1 -0
  285. package/build/primer/SVG/icon/fold-16.svg +1 -0
  286. package/build/primer/SVG/icon/fold-24.svg +1 -0
  287. package/build/primer/SVG/icon/fold-down-16.svg +1 -0
  288. package/build/primer/SVG/icon/fold-down-24.svg +1 -0
  289. package/build/primer/SVG/icon/fold-up-16.svg +1 -0
  290. package/build/primer/SVG/icon/fold-up-24.svg +1 -0
  291. package/build/primer/SVG/icon/gear-16.svg +1 -0
  292. package/build/primer/SVG/icon/gear-24.svg +1 -0
  293. package/build/primer/SVG/icon/gift-16.svg +1 -0
  294. package/build/primer/SVG/icon/gift-24.svg +1 -0
  295. package/build/primer/SVG/icon/git-branch-16.svg +1 -0
  296. package/build/primer/SVG/icon/git-branch-24.svg +1 -0
  297. package/build/primer/SVG/icon/git-commit-16.svg +1 -0
  298. package/build/primer/SVG/icon/git-commit-24.svg +1 -0
  299. package/build/primer/SVG/icon/git-compare-16.svg +1 -0
  300. package/build/primer/SVG/icon/git-compare-24.svg +1 -0
  301. package/build/primer/SVG/icon/git-fork-24.svg +1 -0
  302. package/build/primer/SVG/icon/git-merge-16.svg +1 -0
  303. package/build/primer/SVG/icon/git-merge-24.svg +1 -0
  304. package/build/primer/SVG/icon/git-pull-request-16.svg +1 -0
  305. package/build/primer/SVG/icon/git-pull-request-24.svg +1 -0
  306. package/build/primer/SVG/icon/git-pull-request-closed-16.svg +1 -0
  307. package/build/primer/SVG/icon/git-pull-request-closed-24.svg +1 -0
  308. package/build/primer/SVG/icon/git-pull-request-draft-16.svg +1 -0
  309. package/build/primer/SVG/icon/git-pull-request-draft-24.svg +1 -0
  310. package/build/primer/SVG/icon/globe-16.svg +1 -0
  311. package/build/primer/SVG/icon/globe-24.svg +1 -0
  312. package/build/primer/SVG/icon/grabber-16.svg +1 -0
  313. package/build/primer/SVG/icon/grabber-24.svg +1 -0
  314. package/build/primer/SVG/icon/graph-16.svg +1 -0
  315. package/build/primer/SVG/icon/graph-24.svg +1 -0
  316. package/build/primer/SVG/icon/hash-16.svg +1 -0
  317. package/build/primer/SVG/icon/hash-24.svg +1 -0
  318. package/build/primer/SVG/icon/heading-16.svg +1 -0
  319. package/build/primer/SVG/icon/heading-24.svg +1 -0
  320. package/build/primer/SVG/icon/heart-16.svg +1 -0
  321. package/build/primer/SVG/icon/heart-24.svg +1 -0
  322. package/build/primer/SVG/icon/heart-fill-16.svg +1 -0
  323. package/build/primer/SVG/icon/heart-fill-24.svg +1 -0
  324. package/build/primer/SVG/icon/history-16.svg +1 -0
  325. package/build/primer/SVG/icon/history-24.svg +1 -0
  326. package/build/primer/SVG/icon/home-16.svg +1 -0
  327. package/build/primer/SVG/icon/home-24.svg +1 -0
  328. package/build/primer/SVG/icon/home-fill-24.svg +1 -0
  329. package/build/primer/SVG/icon/horizontal-rule-16.svg +1 -0
  330. package/build/primer/SVG/icon/horizontal-rule-24.svg +1 -0
  331. package/build/primer/SVG/icon/hourglass-16.svg +1 -0
  332. package/build/primer/SVG/icon/hourglass-24.svg +1 -0
  333. package/build/primer/SVG/icon/hubot-16.svg +1 -0
  334. package/build/primer/SVG/icon/hubot-24.svg +1 -0
  335. package/build/primer/SVG/icon/image-16.svg +1 -0
  336. package/build/primer/SVG/icon/image-24.svg +1 -0
  337. package/build/primer/SVG/icon/inbox-16.svg +1 -0
  338. package/build/primer/SVG/icon/inbox-24.svg +1 -0
  339. package/build/primer/SVG/icon/index.js +1248 -0
  340. package/build/primer/SVG/icon/infinity-16.svg +1 -0
  341. package/build/primer/SVG/icon/infinity-24.svg +1 -0
  342. package/build/primer/SVG/icon/info-16.svg +1 -0
  343. package/build/primer/SVG/icon/info-24.svg +1 -0
  344. package/build/primer/SVG/icon/insights-24.svg +1 -0
  345. package/build/primer/SVG/icon/issue-closed-16.svg +1 -0
  346. package/build/primer/SVG/icon/issue-closed-24.svg +1 -0
  347. package/build/primer/SVG/icon/issue-draft-16.svg +1 -0
  348. package/build/primer/SVG/icon/issue-draft-24.svg +1 -0
  349. package/build/primer/SVG/icon/issue-opened-16.svg +1 -0
  350. package/build/primer/SVG/icon/issue-opened-24.svg +1 -0
  351. package/build/primer/SVG/icon/issue-reopened-16.svg +1 -0
  352. package/build/primer/SVG/icon/issue-reopened-24.svg +1 -0
  353. package/build/primer/SVG/icon/italic-16.svg +1 -0
  354. package/build/primer/SVG/icon/italic-24.svg +1 -0
  355. package/build/primer/SVG/icon/kebab-horizontal-16.svg +1 -0
  356. package/build/primer/SVG/icon/kebab-horizontal-24.svg +1 -0
  357. package/build/primer/SVG/icon/key-16.svg +1 -0
  358. package/build/primer/SVG/icon/key-24.svg +1 -0
  359. package/build/primer/SVG/icon/law-16.svg +1 -0
  360. package/build/primer/SVG/icon/law-24.svg +1 -0
  361. package/build/primer/SVG/icon/light-bulb-16.svg +1 -0
  362. package/build/primer/SVG/icon/light-bulb-24.svg +1 -0
  363. package/build/primer/SVG/icon/link-16.svg +1 -0
  364. package/build/primer/SVG/icon/link-24.svg +1 -0
  365. package/build/primer/SVG/icon/link-external-16.svg +1 -0
  366. package/build/primer/SVG/icon/link-external-24.svg +1 -0
  367. package/build/primer/SVG/icon/list-ordered-16.svg +1 -0
  368. package/build/primer/SVG/icon/list-ordered-24.svg +1 -0
  369. package/build/primer/SVG/icon/list-unordered-16.svg +1 -0
  370. package/build/primer/SVG/icon/list-unordered-24.svg +1 -0
  371. package/build/primer/SVG/icon/location-16.svg +1 -0
  372. package/build/primer/SVG/icon/location-24.svg +1 -0
  373. package/build/primer/SVG/icon/lock-16.svg +1 -0
  374. package/build/primer/SVG/icon/lock-24.svg +1 -0
  375. package/build/primer/SVG/icon/logo-gist-16.svg +1 -0
  376. package/build/primer/SVG/icon/logo-github-16.svg +1 -0
  377. package/build/primer/SVG/icon/mail-16.svg +1 -0
  378. package/build/primer/SVG/icon/mail-24.svg +1 -0
  379. package/build/primer/SVG/icon/mark-github-16.svg +1 -0
  380. package/build/primer/SVG/icon/markdown-16.svg +1 -0
  381. package/build/primer/SVG/icon/megaphone-16.svg +1 -0
  382. package/build/primer/SVG/icon/megaphone-24.svg +1 -0
  383. package/build/primer/SVG/icon/mention-16.svg +1 -0
  384. package/build/primer/SVG/icon/mention-24.svg +1 -0
  385. package/build/primer/SVG/icon/meter-16.svg +1 -0
  386. package/build/primer/SVG/icon/milestone-16.svg +1 -0
  387. package/build/primer/SVG/icon/milestone-24.svg +1 -0
  388. package/build/primer/SVG/icon/mirror-16.svg +1 -0
  389. package/build/primer/SVG/icon/mirror-24.svg +1 -0
  390. package/build/primer/SVG/icon/moon-16.svg +1 -0
  391. package/build/primer/SVG/icon/moon-24.svg +1 -0
  392. package/build/primer/SVG/icon/mortar-board-16.svg +1 -0
  393. package/build/primer/SVG/icon/mortar-board-24.svg +1 -0
  394. package/build/primer/SVG/icon/multi-select-16.svg +1 -0
  395. package/build/primer/SVG/icon/multi-select-24.svg +1 -0
  396. package/build/primer/SVG/icon/mute-16.svg +1 -0
  397. package/build/primer/SVG/icon/mute-24.svg +1 -0
  398. package/build/primer/SVG/icon/no-entry-16.svg +1 -0
  399. package/build/primer/SVG/icon/no-entry-24.svg +1 -0
  400. package/build/primer/SVG/icon/north-star-16.svg +1 -0
  401. package/build/primer/SVG/icon/north-star-24.svg +1 -0
  402. package/build/primer/SVG/icon/note-16.svg +1 -0
  403. package/build/primer/SVG/icon/note-24.svg +1 -0
  404. package/build/primer/SVG/icon/number-16.svg +1 -0
  405. package/build/primer/SVG/icon/number-24.svg +1 -0
  406. package/build/primer/SVG/icon/octoface-16.svg +1 -0
  407. package/build/primer/SVG/icon/octoface-24.svg +1 -0
  408. package/build/primer/SVG/icon/organization-16.svg +1 -0
  409. package/build/primer/SVG/icon/organization-24.svg +1 -0
  410. package/build/primer/SVG/icon/package-16.svg +1 -0
  411. package/build/primer/SVG/icon/package-24.svg +1 -0
  412. package/build/primer/SVG/icon/package-dependencies-16.svg +1 -0
  413. package/build/primer/SVG/icon/package-dependencies-24.svg +1 -0
  414. package/build/primer/SVG/icon/package-dependents-16.svg +1 -0
  415. package/build/primer/SVG/icon/package-dependents-24.svg +1 -0
  416. package/build/primer/SVG/icon/paintbrush-16.svg +1 -0
  417. package/build/primer/SVG/icon/paper-airplane-16.svg +1 -0
  418. package/build/primer/SVG/icon/paper-airplane-24.svg +1 -0
  419. package/build/primer/SVG/icon/pencil-16.svg +1 -0
  420. package/build/primer/SVG/icon/pencil-24.svg +1 -0
  421. package/build/primer/SVG/icon/people-16.svg +1 -0
  422. package/build/primer/SVG/icon/people-24.svg +1 -0
  423. package/build/primer/SVG/icon/person-16.svg +1 -0
  424. package/build/primer/SVG/icon/person-24.svg +1 -0
  425. package/build/primer/SVG/icon/person-add-16.svg +1 -0
  426. package/build/primer/SVG/icon/person-add-24.svg +1 -0
  427. package/build/primer/SVG/icon/pin-16.svg +1 -0
  428. package/build/primer/SVG/icon/pin-24.svg +1 -0
  429. package/build/primer/SVG/icon/play-16.svg +1 -0
  430. package/build/primer/SVG/icon/play-24.svg +1 -0
  431. package/build/primer/SVG/icon/plug-16.svg +1 -0
  432. package/build/primer/SVG/icon/plug-24.svg +1 -0
  433. package/build/primer/SVG/icon/plus-16.svg +1 -0
  434. package/build/primer/SVG/icon/plus-24.svg +1 -0
  435. package/build/primer/SVG/icon/plus-circle-16.svg +1 -0
  436. package/build/primer/SVG/icon/plus-circle-24.svg +1 -0
  437. package/build/primer/SVG/icon/project-16.svg +1 -0
  438. package/build/primer/SVG/icon/project-24.svg +1 -0
  439. package/build/primer/SVG/icon/pulse-16.svg +1 -0
  440. package/build/primer/SVG/icon/pulse-24.svg +1 -0
  441. package/build/primer/SVG/icon/question-16.svg +1 -0
  442. package/build/primer/SVG/icon/question-24.svg +1 -0
  443. package/build/primer/SVG/icon/quote-16.svg +1 -0
  444. package/build/primer/SVG/icon/quote-24.svg +1 -0
  445. package/build/primer/SVG/icon/reply-16.svg +1 -0
  446. package/build/primer/SVG/icon/reply-24.svg +1 -0
  447. package/build/primer/SVG/icon/repo-16.svg +1 -0
  448. package/build/primer/SVG/icon/repo-24.svg +1 -0
  449. package/build/primer/SVG/icon/repo-clone-16.svg +1 -0
  450. package/build/primer/SVG/icon/repo-forked-16.svg +1 -0
  451. package/build/primer/SVG/icon/repo-forked-24.svg +1 -0
  452. package/build/primer/SVG/icon/repo-pull-16.svg +1 -0
  453. package/build/primer/SVG/icon/repo-push-16.svg +1 -0
  454. package/build/primer/SVG/icon/repo-push-24.svg +1 -0
  455. package/build/primer/SVG/icon/repo-template-16.svg +1 -0
  456. package/build/primer/SVG/icon/repo-template-24.svg +1 -0
  457. package/build/primer/SVG/icon/report-16.svg +1 -0
  458. package/build/primer/SVG/icon/report-24.svg +1 -0
  459. package/build/primer/SVG/icon/rocket-16.svg +1 -0
  460. package/build/primer/SVG/icon/rocket-24.svg +1 -0
  461. package/build/primer/SVG/icon/rows-16.svg +1 -0
  462. package/build/primer/SVG/icon/rows-24.svg +1 -0
  463. package/build/primer/SVG/icon/rss-16.svg +1 -0
  464. package/build/primer/SVG/icon/rss-24.svg +1 -0
  465. package/build/primer/SVG/icon/ruby-16.svg +1 -0
  466. package/build/primer/SVG/icon/ruby-24.svg +1 -0
  467. package/build/primer/SVG/icon/screen-full-16.svg +1 -0
  468. package/build/primer/SVG/icon/screen-full-24.svg +1 -0
  469. package/build/primer/SVG/icon/screen-normal-16.svg +1 -0
  470. package/build/primer/SVG/icon/screen-normal-24.svg +1 -0
  471. package/build/primer/SVG/icon/search-16.svg +1 -0
  472. package/build/primer/SVG/icon/search-24.svg +1 -0
  473. package/build/primer/SVG/icon/select-single-16.svg +1 -0
  474. package/build/primer/SVG/icon/server-16.svg +1 -0
  475. package/build/primer/SVG/icon/server-24.svg +1 -0
  476. package/build/primer/SVG/icon/settings-24.svg +1 -0
  477. package/build/primer/SVG/icon/share-16.svg +1 -0
  478. package/build/primer/SVG/icon/share-24.svg +1 -0
  479. package/build/primer/SVG/icon/share-android-16.svg +1 -0
  480. package/build/primer/SVG/icon/share-android-24.svg +1 -0
  481. package/build/primer/SVG/icon/shield-16.svg +1 -0
  482. package/build/primer/SVG/icon/shield-24.svg +1 -0
  483. package/build/primer/SVG/icon/shield-check-16.svg +1 -0
  484. package/build/primer/SVG/icon/shield-check-24.svg +1 -0
  485. package/build/primer/SVG/icon/shield-lock-16.svg +1 -0
  486. package/build/primer/SVG/icon/shield-lock-24.svg +1 -0
  487. package/build/primer/SVG/icon/shield-x-16.svg +1 -0
  488. package/build/primer/SVG/icon/shield-x-24.svg +1 -0
  489. package/build/primer/SVG/icon/sidebar-collapse-16.svg +1 -0
  490. package/build/primer/SVG/icon/sidebar-collapse-24.svg +1 -0
  491. package/build/primer/SVG/icon/sidebar-expand-16.svg +1 -0
  492. package/build/primer/SVG/icon/sidebar-expand-24.svg +1 -0
  493. package/build/primer/SVG/icon/sign-in-16.svg +1 -0
  494. package/build/primer/SVG/icon/sign-in-24.svg +1 -0
  495. package/build/primer/SVG/icon/sign-out-16.svg +1 -0
  496. package/build/primer/SVG/icon/sign-out-24.svg +1 -0
  497. package/build/primer/SVG/icon/single-select-24.svg +1 -0
  498. package/build/primer/SVG/icon/skip-16.svg +1 -0
  499. package/build/primer/SVG/icon/skip-24.svg +1 -0
  500. package/build/primer/SVG/icon/smiley-16.svg +1 -0
  501. package/build/primer/SVG/icon/smiley-24.svg +1 -0
  502. package/build/primer/SVG/icon/square-16.svg +1 -0
  503. package/build/primer/SVG/icon/square-24.svg +1 -0
  504. package/build/primer/SVG/icon/square-fill-16.svg +1 -0
  505. package/build/primer/SVG/icon/square-fill-24.svg +1 -0
  506. package/build/primer/SVG/icon/squirrel-16.svg +1 -0
  507. package/build/primer/SVG/icon/squirrel-24.svg +1 -0
  508. package/build/primer/SVG/icon/star-16.svg +1 -0
  509. package/build/primer/SVG/icon/star-24.svg +1 -0
  510. package/build/primer/SVG/icon/star-fill-16.svg +1 -0
  511. package/build/primer/SVG/icon/star-fill-24.svg +1 -0
  512. package/build/primer/SVG/icon/stop-16.svg +1 -0
  513. package/build/primer/SVG/icon/stop-24.svg +1 -0
  514. package/build/primer/SVG/icon/stopwatch-16.svg +1 -0
  515. package/build/primer/SVG/icon/stopwatch-24.svg +1 -0
  516. package/build/primer/SVG/icon/strikethrough-16.svg +1 -0
  517. package/build/primer/SVG/icon/strikethrough-24.svg +1 -0
  518. package/build/primer/SVG/icon/sun-16.svg +1 -0
  519. package/build/primer/SVG/icon/sun-24.svg +1 -0
  520. package/build/primer/SVG/icon/sync-16.svg +1 -0
  521. package/build/primer/SVG/icon/sync-24.svg +1 -0
  522. package/build/primer/SVG/icon/tab-24.svg +1 -0
  523. package/build/primer/SVG/icon/table-16.svg +1 -0
  524. package/build/primer/SVG/icon/table-24.svg +1 -0
  525. package/build/primer/SVG/icon/tag-16.svg +1 -0
  526. package/build/primer/SVG/icon/tag-24.svg +1 -0
  527. package/build/primer/SVG/icon/tasklist-16.svg +1 -0
  528. package/build/primer/SVG/icon/tasklist-24.svg +1 -0
  529. package/build/primer/SVG/icon/telescope-16.svg +1 -0
  530. package/build/primer/SVG/icon/telescope-24.svg +1 -0
  531. package/build/primer/SVG/icon/terminal-16.svg +1 -0
  532. package/build/primer/SVG/icon/terminal-24.svg +1 -0
  533. package/build/primer/SVG/icon/three-bars-16.svg +1 -0
  534. package/build/primer/SVG/icon/thumbsdown-16.svg +1 -0
  535. package/build/primer/SVG/icon/thumbsdown-24.svg +1 -0
  536. package/build/primer/SVG/icon/thumbsup-16.svg +1 -0
  537. package/build/primer/SVG/icon/thumbsup-24.svg +1 -0
  538. package/build/primer/SVG/icon/tools-16.svg +1 -0
  539. package/build/primer/SVG/icon/tools-24.svg +1 -0
  540. package/build/primer/SVG/icon/trash-16.svg +1 -0
  541. package/build/primer/SVG/icon/trash-24.svg +1 -0
  542. package/build/primer/SVG/icon/trashcan-16.svg +1 -0
  543. package/build/primer/SVG/icon/triangle-down-16.svg +1 -0
  544. package/build/primer/SVG/icon/triangle-down-24.svg +1 -0
  545. package/build/primer/SVG/icon/triangle-left-16.svg +1 -0
  546. package/build/primer/SVG/icon/triangle-left-24.svg +1 -0
  547. package/build/primer/SVG/icon/triangle-right-16.svg +1 -0
  548. package/build/primer/SVG/icon/triangle-right-24.svg +1 -0
  549. package/build/primer/SVG/icon/triangle-up-16.svg +1 -0
  550. package/build/primer/SVG/icon/triangle-up-24.svg +1 -0
  551. package/build/primer/SVG/icon/typography-16.svg +1 -0
  552. package/build/primer/SVG/icon/typography-24.svg +1 -0
  553. package/build/primer/SVG/icon/unfold-16.svg +1 -0
  554. package/build/primer/SVG/icon/unfold-24.svg +1 -0
  555. package/build/primer/SVG/icon/unlock-16.svg +1 -0
  556. package/build/primer/SVG/icon/unlock-24.svg +1 -0
  557. package/build/primer/SVG/icon/unmute-16.svg +1 -0
  558. package/build/primer/SVG/icon/unmute-24.svg +1 -0
  559. package/build/primer/SVG/icon/unverifed-24.svg +1 -0
  560. package/build/primer/SVG/icon/unverified-16.svg +1 -0
  561. package/build/primer/SVG/icon/unverified-24.svg +1 -0
  562. package/build/primer/SVG/icon/upload-16.svg +1 -0
  563. package/build/primer/SVG/icon/upload-24.svg +1 -0
  564. package/build/primer/SVG/icon/verified-16.svg +1 -0
  565. package/build/primer/SVG/icon/verified-24.svg +1 -0
  566. package/build/primer/SVG/icon/versions-16.svg +1 -0
  567. package/build/primer/SVG/icon/versions-24.svg +1 -0
  568. package/build/primer/SVG/icon/video-16.svg +1 -0
  569. package/build/primer/SVG/icon/video-24.svg +1 -0
  570. package/build/primer/SVG/icon/workflow-16.svg +1 -0
  571. package/build/primer/SVG/icon/workflow-24.svg +1 -0
  572. package/build/primer/SVG/icon/x-16.svg +1 -0
  573. package/build/primer/SVG/icon/x-24.svg +1 -0
  574. package/build/primer/SVG/icon/x-circle-16.svg +1 -0
  575. package/build/primer/SVG/icon/x-circle-24.svg +1 -0
  576. package/build/primer/SVG/icon/x-circle-fill-16.svg +1 -0
  577. package/build/primer/SVG/icon/x-circle-fill-24.svg +1 -0
  578. package/build/primer/SVG/icon/zap-16.svg +1 -0
  579. package/build/primer/SVG/icon/zap-24.svg +1 -0
  580. package/build/primer/SVG/index.js +13 -0
  581. package/build/primer/Select/Select.js +78 -0
  582. package/build/primer/Select/Select.prop.js +32 -0
  583. package/build/primer/Select/Select.scss +49 -0
  584. package/build/primer/Select/index.js +21 -0
  585. package/build/primer/SelectMenu/SelectMenu.js +114 -0
  586. package/build/primer/SelectMenu/SelectMenu.prop.js +31 -0
  587. package/build/primer/SelectMenu/SelectMenu.scss +467 -0
  588. package/build/primer/SelectMenu/index.js +13 -0
  589. package/build/primer/Subhead/Subhead.js +34 -0
  590. package/build/primer/Subhead/Subhead.prop.js +20 -0
  591. package/build/primer/Subhead/Subhead.scss +50 -0
  592. package/build/primer/Subhead/index.js +13 -0
  593. package/build/primer/Toast/Toast.js +64 -0
  594. package/build/primer/Toast/Toast.prop.js +31 -0
  595. package/build/primer/Toast/Toast.scss +130 -0
  596. package/build/primer/Toast/index.js +21 -0
  597. package/build/primer/index.js +93 -1
  598. package/build/primer/index.scss +1 -1
  599. package/package.json +6 -2
package/build/primer/Button/Button.scss CHANGED
@@ -1,15 +1,25 @@
1
- @import './misc.scss';
2
- @import '../index.scss';
1
+ @import '../../index.scss';
3
2
 
3
+ // stylelint-disable no-descending-specificity
4
+ // stylelint-disable selector-max-type, no-duplicate-selectors
5
+
6
+ // Base button styles
4
7
  .btn {
5
8
  position: relative;
6
9
  display: inline-block;
7
- line-height: 20px;
10
+ // stylelint-disable-next-line primer/spacing
11
+ padding: 5px $spacer-3;
12
+ font-size: $body-font-size;
13
+ font-weight: $font-weight-semibold;
14
+ // stylelint-disable-next-line primer/typography
15
+ line-height: 20px; // Specifically not inherit our `<body>` default
8
16
  white-space: nowrap;
9
17
  vertical-align: middle;
10
18
  cursor: pointer;
11
19
  user-select: none;
12
- appearance: none;
20
+ border: $border-width $border-style;
21
+ border-radius: $border-radius;
22
+ appearance: none; // Corrects inability to style clickable `input` types in iOS.
13
23
 
14
24
  &:hover {
15
25
  text-decoration: none;
@@ -19,9 +29,288 @@
19
29
  &.disabled,
20
30
  &[aria-disabled='true'] {
21
31
  cursor: default;
32
+ }
33
+
34
+ i {
35
+ font-style: normal;
36
+ font-weight: $font-weight-semibold;
37
+ opacity: 0.75;
38
+ }
39
+
40
+ .octicon {
41
+ margin-right: $spacer-1;
42
+ color: var(--color-fg-muted);
43
+ vertical-align: text-bottom;
44
+
45
+ &:only-child {
46
+ margin-right: 0;
47
+ }
48
+ }
49
+
50
+ .Counter {
51
+ // stylelint-disable-next-line primer/spacing
52
+ margin-left: 2px;
53
+ color: inherit;
54
+ text-shadow: none;
55
+ vertical-align: top;
56
+ background-color: var(--color-btn-counter-bg);
57
+ }
58
+
59
+ .dropdown-caret {
60
+ margin-left: $spacer-1;
61
+ opacity: 0.8;
62
+ }
63
+ }
64
+
65
+ // Default button
66
+
67
+ .btn {
68
+ color: var(--color-btn-text);
69
+ background-color: var(--color-btn-bg);
70
+ border-color: var(--color-btn-border);
71
+ box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
72
+ transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
73
+ transition-property: color, background-color, border-color;
74
+
75
+ &:hover,
76
+ &.hover,
77
+ [open] > & {
78
+ background-color: var(--color-btn-hover-bg);
79
+ border-color: var(--color-btn-hover-border);
80
+ transition-duration: 0.1s;
81
+ }
82
+
83
+ &:active {
84
+ background-color: var(--color-btn-active-bg);
85
+ border-color: var(--color-btn-active-border);
86
+ transition: none;
87
+ }
88
+
89
+ &.selected,
90
+ &[aria-selected='true'] {
91
+ background-color: var(--color-btn-selected-bg);
92
+ box-shadow: var(--color-primer-shadow-inset);
93
+ }
94
+
95
+ &:disabled,
96
+ &.disabled,
97
+ &[aria-disabled='true'] {
98
+ color: var(--color-primer-fg-disabled);
99
+ background-color: var(--color-btn-bg);
100
+ border-color: var(--color-btn-border);
101
+
102
+ .octicon {
103
+ color: var(--color-primer-fg-disabled);
104
+ }
105
+ }
106
+
107
+ // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
108
+ &:focus,
109
+ &.focus {
110
+ border-color: var(--color-btn-focus-border);
111
+ outline: none;
112
+ box-shadow: var(--color-btn-focus-shadow);
113
+ }
114
+ }
115
+
116
+ // Primary button
117
+
118
+ .btn-primary {
119
+ color: var(--color-btn-primary-text);
120
+ background-color: var(--color-btn-primary-bg);
121
+ border-color: var(--color-btn-primary-border);
122
+ box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
123
+
124
+ &:hover,
125
+ &.hover,
126
+ [open] > & {
127
+ background-color: var(--color-btn-primary-hover-bg);
128
+ border-color: var(--color-btn-primary-hover-border);
129
+ }
130
+
131
+ &:active,
132
+ &.selected,
133
+ &[aria-selected='true'] {
134
+ background-color: var(--color-btn-primary-selected-bg);
135
+ box-shadow: var(--color-btn-primary-selected-shadow);
136
+ }
137
+
138
+ &:disabled,
139
+ &.disabled,
140
+ &[aria-disabled='true'] {
141
+ color: var(--color-btn-primary-disabled-text);
142
+ background-color: var(--color-btn-primary-disabled-bg);
143
+ border-color: var(--color-btn-primary-disabled-border);
144
+
145
+ .octicon {
146
+ color: var(--color-btn-primary-disabled-text);
147
+ }
148
+ }
149
+
150
+ &:focus,
151
+ &.focus {
152
+ background-color: var(--color-btn-primary-focus-bg);
153
+ border-color: var(--color-btn-primary-focus-border);
154
+ box-shadow: var(--color-btn-primary-focus-shadow);
155
+ }
156
+
157
+ .Counter {
158
+ color: inherit;
159
+ background-color: var(--color-btn-primary-counter-bg);
160
+ }
161
+
162
+ .octicon {
163
+ color: var(--color-btn-primary-icon);
164
+ }
165
+ }
166
+
167
+ // Outline button
168
+
169
+ .btn-outline {
170
+ color: var(--color-btn-outline-text);
171
+
172
+ &:hover,
173
+ [open] > & {
174
+ color: var(--color-btn-outline-hover-text);
175
+ background-color: var(--color-btn-outline-hover-bg);
176
+ border-color: var(--color-btn-outline-hover-border);
177
+ box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
178
+
179
+ .Counter {
180
+ background-color: var(--color-btn-outline-hover-counter-bg);
181
+ }
22
182
 
23
183
  .octicon {
24
184
  color: inherit;
25
185
  }
26
186
  }
187
+
188
+ &:active,
189
+ &.selected,
190
+ &[aria-selected='true'] {
191
+ color: var(--color-btn-outline-selected-text);
192
+ background-color: var(--color-btn-outline-selected-bg);
193
+ border-color: var(--color-btn-outline-selected-border);
194
+ box-shadow: var(--color-btn-outline-selected-shadow);
195
+ }
196
+
197
+ &:disabled,
198
+ &.disabled,
199
+ &[aria-disabled='true'] {
200
+ color: var(--color-btn-outline-disabled-text);
201
+ background-color: var(--color-btn-outline-disabled-bg);
202
+ border-color: var(--color-btn-border);
203
+ box-shadow: none;
204
+
205
+ .Counter {
206
+ background-color: var(--color-btn-outline-disabled-counter-bg);
207
+ }
208
+ }
209
+
210
+ &:focus {
211
+ border-color: var(--color-btn-outline-focus-border);
212
+ box-shadow: var(--color-btn-outline-focus-shadow);
213
+ }
214
+
215
+ .Counter {
216
+ color: inherit;
217
+ background-color: var(--color-btn-outline-counter-bg);
218
+ }
219
+ }
220
+
221
+ // Danger button
222
+
223
+ .btn-danger {
224
+ color: var(--color-btn-danger-text);
225
+
226
+ .octicon {
227
+ color: var(--color-btn-danger-icon);
228
+ }
229
+
230
+ &:hover,
231
+ [open] > & {
232
+ color: var(--color-btn-danger-hover-text);
233
+ background-color: var(--color-btn-danger-hover-bg);
234
+ border-color: var(--color-btn-danger-hover-border);
235
+ box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
236
+
237
+ .Counter {
238
+ background-color: var(--color-btn-danger-hover-counter-bg);
239
+ }
240
+
241
+ .octicon {
242
+ color: var(--color-btn-danger-hover-icon);
243
+ }
244
+ }
245
+
246
+ &:active,
247
+ &.selected,
248
+ &[aria-selected='true'] {
249
+ color: var(--color-btn-danger-selected-text);
250
+ background-color: var(--color-btn-danger-selected-bg);
251
+ border-color: var(--color-btn-danger-selected-border);
252
+ box-shadow: var(--color-btn-danger-selected-shadow);
253
+ }
254
+
255
+ &:disabled,
256
+ &.disabled,
257
+ &[aria-disabled='true'] {
258
+ color: var(--color-btn-danger-disabled-text);
259
+ background-color: var(--color-btn-danger-disabled-bg);
260
+ border-color: var(--color-btn-border);
261
+ box-shadow: none;
262
+
263
+ .Counter {
264
+ background-color: var(--color-btn-danger-disabled-counter-bg);
265
+ }
266
+
267
+ .octicon {
268
+ color: var(--color-btn-danger-disabled-text);
269
+ }
270
+ }
271
+
272
+ &:focus {
273
+ border-color: var(--color-btn-danger-focus-border);
274
+ box-shadow: var(--color-btn-danger-focus-shadow);
275
+ }
276
+
277
+ .Counter {
278
+ color: inherit;
279
+ background-color: var(--color-btn-danger-counter-bg);
280
+ }
281
+ }
282
+
283
+ // Sizes
284
+ //
285
+ // Tweak `line-height` to make them smaller.
286
+ .btn-sm {
287
+ // stylelint-disable-next-line primer/spacing
288
+ padding: 3px 12px;
289
+ font-size: $font-size-small;
290
+ // stylelint-disable-next-line primer/typography
291
+ line-height: 20px;
292
+
293
+ .octicon {
294
+ vertical-align: text-top;
295
+ }
296
+ }
297
+
298
+ // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
299
+ .btn-large {
300
+ // stylelint-disable-next-line primer/spacing
301
+ padding: $em-spacer-6 1.5em;
302
+ font-size: inherit;
303
+ line-height: $lh-default;
304
+
305
+ // stylelint-disable-next-line primer/borders
306
+ border-radius: 0.5em;
307
+ }
308
+
309
+ // Full-width button
310
+ //
311
+ // These buttons expand to the full width of their parent container
312
+ .btn-block {
313
+ display: block;
314
+ width: 100%;
315
+ text-align: center;
27
316
  }
package/build/primer/Button/index.js CHANGED
@@ -9,5 +9,43 @@ Object.defineProperty(exports, "Button", {
9
9
  return _Button.Button;
10
10
  }
11
11
  });
12
+ Object.defineProperty(exports, "buttonElement", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Button2.buttonElement;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "buttonInputType", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _Button2.buttonInputType;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "buttonSize", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _Button2.buttonSize;
28
+ }
29
+ });
30
+ Object.defineProperty(exports, "buttonState", {
31
+ enumerable: true,
32
+ get: function get() {
33
+ return _Button2.buttonState;
34
+ }
35
+ });
36
+ Object.defineProperty(exports, "buttonVariant", {
37
+ enumerable: true,
38
+ get: function get() {
39
+ return _Button2.buttonVariant;
40
+ }
41
+ });
42
+ Object.defineProperty(exports, "iconAlignment", {
43
+ enumerable: true,
44
+ get: function get() {
45
+ return _Button2.iconAlignment;
46
+ }
47
+ });
48
+
49
+ var _Button = require("./Button");
12
50
 
13
- var _Button = require("./Button");
51
+ var _Button2 = require("./Button.prop");
package/build/primer/Button/misc.scss CHANGED
@@ -1,14 +1,20 @@
1
+ // stylelint-disable selector-max-type, function-no-unknown
2
+
3
+ // Link-like buttons
4
+ //
5
+ // This class is for styling <button> and <input> elements to look like links
1
6
  .btn-link {
2
7
  display: inline-block;
3
8
  padding: 0;
4
9
  font-size: inherit;
10
+ color: $text-blue;
5
11
  text-decoration: none;
6
12
  white-space: nowrap;
7
13
  cursor: pointer;
8
14
  user-select: none;
9
15
  background-color: transparent;
10
16
  border: 0;
11
- appearance: none;
17
+ appearance: none; // Corrects inability to style clickable `input` types in iOS.
12
18
 
13
19
  &:hover {
14
20
  text-decoration: underline;
@@ -18,7 +24,182 @@
18
24
  &[aria-disabled='true'] {
19
25
  &,
20
26
  &:hover {
27
+ // stylelint-disable-next-line primer/colors
28
+ color: rgba($gray-600, 0.5);
21
29
  cursor: default;
22
30
  }
23
31
  }
24
32
  }
33
+
34
+ // Invisible button
35
+ //
36
+ // Typically used as a "cancel" button next to a .btn
37
+ .btn-invisible {
38
+ color: $text-blue;
39
+ background-color: transparent; // Reset default gradient backgrounds and colors
40
+ border: 0;
41
+ border-radius: 0;
42
+ box-shadow: none;
43
+
44
+ &:hover,
45
+ &:active,
46
+ &:focus,
47
+ &.selected,
48
+ &[aria-selected='true'],
49
+ &.zeroclipboard-is-hover,
50
+ &.zeroclipboard-is-active {
51
+ color: $text-blue;
52
+ background: none;
53
+ outline: none;
54
+ box-shadow: none;
55
+ }
56
+ }
57
+
58
+ // Octicon button
59
+ //
60
+ // Icon-only buttons
61
+ .btn-octicon {
62
+ display: inline-block;
63
+ // stylelint-disable-next-line primer/spacing
64
+ padding: 5px;
65
+ // stylelint-disable-next-line primer/spacing
66
+ margin-left: 5px;
67
+ line-height: $lh-condensed-ultra;
68
+ color: $text-gray;
69
+ vertical-align: middle;
70
+
71
+ // For `<button>` elements
72
+ background: transparent;
73
+ border: 0;
74
+
75
+ &:hover {
76
+ color: $text-blue;
77
+ }
78
+
79
+ &.disabled,
80
+ &[aria-disabled='true'] {
81
+ // stylelint-disable-next-line primer/colors
82
+ color: $gray-400;
83
+ cursor: default;
84
+
85
+ // stylelint-disable-next-line primer/colors
86
+ &:hover {
87
+ color: $gray-400;
88
+ }
89
+ }
90
+ }
91
+
92
+ .btn-octicon-danger:hover {
93
+ color: $text-red;
94
+ }
95
+
96
+ // Close button
97
+ //
98
+ // Typically used with an octicon-x
99
+ .close-button {
100
+ padding: 0;
101
+ background: transparent;
102
+ border: 0;
103
+ outline: none;
104
+ }
105
+
106
+ // Hidden text button
107
+ //
108
+ // Use `.hidden-text-expander` to indicate and expand hidden text.
109
+ .hidden-text-expander {
110
+ display: block;
111
+
112
+ &.inline {
113
+ position: relative;
114
+ top: -1px;
115
+ display: inline-block;
116
+ // stylelint-disable-next-line primer/spacing
117
+ margin-left: 5px;
118
+ line-height: 0;
119
+ }
120
+ }
121
+
122
+ .hidden-text-expander a,
123
+ .ellipsis-expander {
124
+ display: inline-block;
125
+ height: 12px;
126
+ // stylelint-disable-next-line primer/spacing
127
+ padding: 0 5px 5px;
128
+ font-size: $font-size-small;
129
+ font-weight: $font-weight-bold;
130
+ // stylelint-disable-next-line primer/typography
131
+ line-height: 6px;
132
+ // stylelint-disable-next-line primer/colors
133
+ color: $gray-700;
134
+ text-decoration: none;
135
+ vertical-align: middle;
136
+ // stylelint-disable-next-line primer/colors
137
+ background: lighten($gray-300, 5%);
138
+ border: 0;
139
+ // stylelint-disable-next-line primer/borders
140
+ border-radius: 1px;
141
+
142
+ &:hover {
143
+ text-decoration: none;
144
+ // stylelint-disable-next-line primer/colors
145
+ background-color: darken($gray-300, 4%);
146
+ }
147
+
148
+ &:active {
149
+ color: $text-white;
150
+ // stylelint-disable-next-line primer/colors
151
+ background-color: $blue-400;
152
+ }
153
+ }
154
+
155
+ // Social button count
156
+ // TODO: Deprecate? Use BtnGroup instead?
157
+
158
+ .btn-with-count {
159
+ float: left;
160
+ border-top-right-radius: 0;
161
+ border-bottom-right-radius: 0;
162
+
163
+ &:focus {
164
+ z-index: 1;
165
+ }
166
+ }
167
+
168
+ // Social count bubble
169
+ //
170
+ // A container that is used for social bubbles counts.
171
+
172
+ .social-count {
173
+ position: relative;
174
+ float: left;
175
+ // stylelint-disable-next-line primer/spacing
176
+ padding: 3px 12px;
177
+ font-size: $font-size-small;
178
+ font-weight: $font-weight-bold;
179
+ // stylelint-disable-next-line primer/typography
180
+ line-height: 20px;
181
+ color: $text-gray-dark;
182
+ vertical-align: middle;
183
+ background-color: $bg-white;
184
+ border: $border-width $border-style $border-color-button;
185
+ border-left: 0;
186
+ border-top-right-radius: $border-radius;
187
+ border-bottom-right-radius: $border-radius;
188
+ box-shadow: $box-shadow, $box-shadow-highlight;
189
+
190
+ &:hover,
191
+ &:active {
192
+ text-decoration: none;
193
+ }
194
+
195
+ &:hover {
196
+ color: $text-blue;
197
+ cursor: pointer;
198
+ }
199
+
200
+ &:focus {
201
+ z-index: 1;
202
+ outline: 0;
203
+ box-shadow: $box-shadow-focus;
204
+ }
205
+ }
package/build/primer/Dropdown/Dropdown.js ADDED
@@ -0,0 +1,126 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.Dropdown = Dropdown;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ var _classnames = _interopRequireDefault(require("classnames"));
13
+
14
+ var _uuid = require("uuid");
15
+
16
+ var _details = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/details.scss"));
17
+
18
+ var _visibilityDisplay = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/visibility-display.scss"));
19
+
20
+ var _layout = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/layout.scss"));
21
+
22
+ var _flexbox = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/flexbox.scss"));
23
+
24
+ var _array = require("@papillonbits/library/array");
25
+
26
+ var _hooks = require("@papillonbits/library/hooks");
27
+
28
+ var _Button = _interopRequireDefault(require("../Button/Button.scss"));
29
+
30
+ var _Dropdown = require("./Dropdown.prop");
31
+
32
+ var _Dropdown2 = _interopRequireDefault(require("./Dropdown.scss"));
33
+
34
+ var _jsxRuntime = require("react/jsx-runtime");
35
+
36
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
37
+
38
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
39
+
40
+ function Dropdown(_ref) {
41
+ var _ariaAttr$haspopup;
42
+
43
+ var className = _ref.className,
44
+ summary = _ref.summary,
45
+ ariaAttr = _ref.ariaAttr,
46
+ items = _ref.items,
47
+ _onClick = _ref.onClick,
48
+ state = _ref.state;
49
+ var details = (0, _hooks.useRef)(null);
50
+
51
+ if (!items) {
52
+ return null;
53
+ }
54
+
55
+ var indexItems = (0, _array.getIndexItems)(items);
56
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
57
+ className: className,
58
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
59
+ ref: details,
60
+ className: (0, _classnames["default"])(_Dropdown2["default"].dropdown, _details["default"]['details-reset'], _details["default"]['details-overlay'], _visibilityDisplay["default"]['d-inline-block'], (0, _defineProperty2["default"])({}, _Dropdown2["default"]['dropdown-inactive'], state === _Dropdown.dropdownState.inactive)),
61
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("summary", {
62
+ className: (0, _classnames["default"])(_Button["default"].btn),
63
+ "aria-haspopup": (_ariaAttr$haspopup = ariaAttr === null || ariaAttr === void 0 ? void 0 : ariaAttr.haspopup) !== null && _ariaAttr$haspopup !== void 0 ? _ariaAttr$haspopup : false,
64
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
65
+ className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-justify-between'], _flexbox["default"]['flex-items-center'], (0, _defineProperty2["default"])({}, _Dropdown2["default"]['dropdown-inactive'], state === _Dropdown.dropdownState.inactive)),
66
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
67
+ children: summary
68
+ }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
69
+ className: _Dropdown2["default"]['dropdown-caret']
70
+ })]
71
+ })
72
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
73
+ className: (0, _classnames["default"])(_Dropdown2["default"]['dropdown-menu'], _Dropdown2["default"]['dropdown-menu-se'], _layout["default"]['width-full']),
74
+ children: indexItems.map(function (indexItem) {
75
+ var href = indexItem.href,
76
+ text = indexItem.text,
77
+ isSelected = indexItem.isSelected;
78
+ var itemOtherProps = isSelected ? _objectSpread({}, {
79
+ 'aria-current': ariaAttr === null || ariaAttr === void 0 ? void 0 : ariaAttr.current
80
+ }) : null;
81
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
82
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
83
+ onClick: function onClick(e) {
84
+ e.preventDefault();
85
+ var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
86
+
87
+ _onClick({
88
+ summary: text,
89
+ ariaAttr: ariaAttr,
90
+ items: newIndexItems.map(function (newIndexItem) {
91
+ return function (_ref2) {
92
+ var newIndexItemId = _ref2.id,
93
+ newIndexItemHref = _ref2.href,
94
+ newIndexItemText = _ref2.text,
95
+ dateModified = _ref2['date-modified'],
96
+ dateCreated = _ref2['date-created'],
97
+ newIndexItemIsSelected = _ref2.isSelected;
98
+ return {
99
+ id: newIndexItemId,
100
+ href: newIndexItemHref,
101
+ text: newIndexItemText,
102
+ 'date-modified': dateModified,
103
+ 'date-created': dateCreated,
104
+ isSelected: newIndexItemIsSelected
105
+ };
106
+ }(newIndexItem);
107
+ } // eslint-disable-line
108
+ )
109
+ });
110
+
111
+ details.current.removeAttribute('open');
112
+ },
113
+ className: _Dropdown2["default"]['dropdown-item'],
114
+ href: href
115
+ }, itemOtherProps), {}, {
116
+ children: text
117
+ }))
118
+ }, (0, _uuid.v1)());
119
+ })
120
+ })]
121
+ })
122
+ });
123
+ }
124
+
125
+ Dropdown.propTypes = _Dropdown.propTypes;
126
+ Dropdown.defaultProps = _Dropdown.defaultProps;