@bitrise/bitkit 10.2.0 → 10.2.3-alpha-chakra.1

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 (253) hide show
  1. package/package.json +23 -57
  2. package/src/Components/Tabs/Tab.tsx +2 -24
  3. package/src/Old/DatePicker/DatePicker.tsx +6 -6
  4. package/src/Old/DatePicker/DatePickerMonth.tsx +7 -7
  5. package/src/Old/Dropdown/Dropdown.tsx +54 -50
  6. package/src/Old/Dropdown/DropdownMenuItem.tsx +1 -2
  7. package/src/Old/Dropdown/DropdownMenuItemGroup.tsx +2 -2
  8. package/src/Old/Input/InputLabel.tsx +5 -3
  9. package/src/Old/Notification/Notification.tsx +3 -4
  10. package/src/Old/Notification/__snapshots__/Notification.test.tsx.snap +8 -12
  11. package/src/Old/Ribbon/Ribbon.tsx +4 -4
  12. package/src/Old/Status/Status500.tsx +6 -6
  13. package/src/Old/Table/TableHeaderCell.tsx +1 -1
  14. package/src/Old/Text/TextSizes.css +0 -39
  15. package/src/Old/Toggle/Toggle.tsx +1 -1
  16. package/src/Old/hooks/index.ts +0 -1
  17. package/src/Old/variables.css +0 -1
  18. package/src/Old/variables.ts +0 -3
  19. package/src/index.ts +0 -3
  20. package/src/old.ts +0 -94
  21. package/src/tsconfig.tsbuildinfo +1 -1
  22. package/src/Components/Transitions/Fade.stories.tsx +0 -26
  23. package/src/Components/Transitions/Fade.tsx +0 -12
  24. package/src/Old/AddonBeam/AddonBeam.css +0 -16
  25. package/src/Old/AddonBeam/AddonBeam.tsx +0 -116
  26. package/src/Old/AddonBeam/AddonBeamLink.tsx +0 -37
  27. package/src/Old/AddonFooter/AddonFooter.tsx +0 -24
  28. package/src/Old/AppLayout/AppLayout.css +0 -45
  29. package/src/Old/AppLayout/AppLayout.tsx +0 -21
  30. package/src/Old/AppLayout/AppLayoutBody.tsx +0 -10
  31. package/src/Old/AppLayout/AppLayoutHeader.tsx +0 -10
  32. package/src/Old/AppLayout/AppLayoutMain.tsx +0 -10
  33. package/src/Old/AppLayout/AppLayoutSidebar.tsx +0 -10
  34. package/src/Old/Avatar/Avatar.css +0 -4
  35. package/src/Old/Avatar/Avatar.tsx +0 -64
  36. package/src/Old/Avatar/avatarColors.ts +0 -26
  37. package/src/Old/Bounds/Bounds.tsx +0 -20
  38. package/src/Old/Button/Button.css +0 -249
  39. package/src/Old/Button/Button.test.tsx +0 -29
  40. package/src/Old/Button/Button.tsx +0 -55
  41. package/src/Old/Button/ButtonSize.ts +0 -3
  42. package/src/Old/Button/Buttons.test.tsx +0 -42
  43. package/src/Old/Button/Buttons.tsx +0 -34
  44. package/src/Old/Button/__snapshots__/Button.test.tsx.snap +0 -73
  45. package/src/Old/Button/__snapshots__/Buttons.test.tsx.snap +0 -45
  46. package/src/Old/Dropdown/DropdownButton.tsx +0 -28
  47. package/src/Old/Dropdown/DropdownMenus.tsx +0 -14
  48. package/src/Old/ExternalLink/ExternalLink.tsx +0 -24
  49. package/src/Old/Icon/Icon.css +0 -4
  50. package/src/Old/Icon/Icon.tsx +0 -32
  51. package/src/Old/Icon/tsx/IconsAddOns.tsx +0 -14
  52. package/src/Old/Icon/tsx/IconsAddOnsColorTuorqouise.tsx +0 -20
  53. package/src/Old/Icon/tsx/IconsAddOnsColorViolet.tsx +0 -20
  54. package/src/Old/Icon/tsx/IconsAddOnsWhite.tsx +0 -20
  55. package/src/Old/Icon/tsx/IconsApp.tsx +0 -16
  56. package/src/Old/Icon/tsx/IconsArrowBack.tsx +0 -14
  57. package/src/Old/Icon/tsx/IconsArrowDown.tsx +0 -21
  58. package/src/Old/Icon/tsx/IconsArrowForward.tsx +0 -16
  59. package/src/Old/Icon/tsx/IconsArrowQuit.tsx +0 -14
  60. package/src/Old/Icon/tsx/IconsArrowUp.tsx +0 -14
  61. package/src/Old/Icon/tsx/IconsBackArrow.tsx +0 -13
  62. package/src/Old/Icon/tsx/IconsBell.tsx +0 -16
  63. package/src/Old/Icon/tsx/IconsBitbot.tsx +0 -16
  64. package/src/Old/Icon/tsx/IconsBitbotFailed.tsx +0 -18
  65. package/src/Old/Icon/tsx/IconsBitbucket.tsx +0 -26
  66. package/src/Old/Icon/tsx/IconsBitbucketFill.tsx +0 -14
  67. package/src/Old/Icon/tsx/IconsBitriseCertified.tsx +0 -19
  68. package/src/Old/Icon/tsx/IconsBook.tsx +0 -16
  69. package/src/Old/Icon/tsx/IconsBranchBranch.tsx +0 -16
  70. package/src/Old/Icon/tsx/IconsBranchCommit.tsx +0 -14
  71. package/src/Old/Icon/tsx/IconsBranchPull.tsx +0 -16
  72. package/src/Old/Icon/tsx/IconsBranchPush.tsx +0 -21
  73. package/src/Old/Icon/tsx/IconsBranchTag.tsx +0 -16
  74. package/src/Old/Icon/tsx/IconsBug.tsx +0 -16
  75. package/src/Old/Icon/tsx/IconsBuild.tsx +0 -14
  76. package/src/Old/Icon/tsx/IconsBuildstatusAborted.tsx +0 -16
  77. package/src/Old/Icon/tsx/IconsBuildstatusAbortedSolid.tsx +0 -15
  78. package/src/Old/Icon/tsx/IconsBuildstatusFailed.tsx +0 -16
  79. package/src/Old/Icon/tsx/IconsBuildstatusFailedSolid.tsx +0 -15
  80. package/src/Old/Icon/tsx/IconsBuildstatusLoading.tsx +0 -13
  81. package/src/Old/Icon/tsx/IconsBuildstatusLoadingAnimated.tsx +0 -31
  82. package/src/Old/Icon/tsx/IconsBuildstatusLoadingeeehh.tsx +0 -13
  83. package/src/Old/Icon/tsx/IconsBuildstatusLoadingeeehhWhite.tsx +0 -13
  84. package/src/Old/Icon/tsx/IconsBuildstatusNeverbuilt.tsx +0 -14
  85. package/src/Old/Icon/tsx/IconsBuildstatusSuccessful.tsx +0 -16
  86. package/src/Old/Icon/tsx/IconsBuildstatusSuccessfulSolid.tsx +0 -15
  87. package/src/Old/Icon/tsx/IconsCalendar.tsx +0 -16
  88. package/src/Old/Icon/tsx/IconsChain.tsx +0 -16
  89. package/src/Old/Icon/tsx/IconsChangePlan.tsx +0 -14
  90. package/src/Old/Icon/tsx/IconsChat.tsx +0 -14
  91. package/src/Old/Icon/tsx/IconsChatMessage.tsx +0 -16
  92. package/src/Old/Icon/tsx/IconsChevronDown.tsx +0 -13
  93. package/src/Old/Icon/tsx/IconsChevronLeft.tsx +0 -16
  94. package/src/Old/Icon/tsx/IconsChevronRight.tsx +0 -16
  95. package/src/Old/Icon/tsx/IconsChevronUp.tsx +0 -15
  96. package/src/Old/Icon/tsx/IconsClock.tsx +0 -16
  97. package/src/Old/Icon/tsx/IconsCloseSmall.tsx +0 -16
  98. package/src/Old/Icon/tsx/IconsCode.tsx +0 -16
  99. package/src/Old/Icon/tsx/IconsCoffee.tsx +0 -16
  100. package/src/Old/Icon/tsx/IconsConsole.tsx +0 -16
  101. package/src/Old/Icon/tsx/IconsCredit.tsx +0 -21
  102. package/src/Old/Icon/tsx/IconsCreditcard.tsx +0 -16
  103. package/src/Old/Icon/tsx/IconsDeleteNope.tsx +0 -15
  104. package/src/Old/Icon/tsx/IconsDeployment.tsx +0 -14
  105. package/src/Old/Icon/tsx/IconsDoc.tsx +0 -16
  106. package/src/Old/Icon/tsx/IconsDollars.tsx +0 -16
  107. package/src/Old/Icon/tsx/IconsDownload.tsx +0 -16
  108. package/src/Old/Icon/tsx/IconsDropdownArrows.tsx +0 -16
  109. package/src/Old/Icon/tsx/IconsDudes.tsx +0 -14
  110. package/src/Old/Icon/tsx/IconsDuplicate.tsx +0 -14
  111. package/src/Old/Icon/tsx/IconsEnterprise.tsx +0 -19
  112. package/src/Old/Icon/tsx/IconsErrorGeneral.tsx +0 -16
  113. package/src/Old/Icon/tsx/IconsFileDoc.tsx +0 -16
  114. package/src/Old/Icon/tsx/IconsFilePdf.tsx +0 -16
  115. package/src/Old/Icon/tsx/IconsFilePlist.tsx +0 -16
  116. package/src/Old/Icon/tsx/IconsFileZip.tsx +0 -16
  117. package/src/Old/Icon/tsx/IconsFilter.tsx +0 -16
  118. package/src/Old/Icon/tsx/IconsFlag.tsx +0 -13
  119. package/src/Old/Icon/tsx/IconsFolder.tsx +0 -16
  120. package/src/Old/Icon/tsx/IconsFullscreen.tsx +0 -14
  121. package/src/Old/Icon/tsx/IconsFullscreenExit.tsx +0 -14
  122. package/src/Old/Icon/tsx/IconsGauge.tsx +0 -16
  123. package/src/Old/Icon/tsx/IconsGithub.tsx +0 -14
  124. package/src/Old/Icon/tsx/IconsGitlab.tsx +0 -20
  125. package/src/Old/Icon/tsx/IconsGitlabFill.tsx +0 -14
  126. package/src/Old/Icon/tsx/IconsGlobe.tsx +0 -16
  127. package/src/Old/Icon/tsx/IconsGroup.tsx +0 -14
  128. package/src/Old/Icon/tsx/IconsHeart.tsx +0 -14
  129. package/src/Old/Icon/tsx/IconsHidePassword.tsx +0 -19
  130. package/src/Old/Icon/tsx/IconsHistory.tsx +0 -14
  131. package/src/Old/Icon/tsx/IconsImage.tsx +0 -14
  132. package/src/Old/Icon/tsx/IconsInfo.tsx +0 -14
  133. package/src/Old/Icon/tsx/IconsIntegrations.tsx +0 -14
  134. package/src/Old/Icon/tsx/IconsInteraction.tsx +0 -14
  135. package/src/Old/Icon/tsx/IconsInvoice.tsx +0 -16
  136. package/src/Old/Icon/tsx/IconsJapanese.tsx +0 -15
  137. package/src/Old/Icon/tsx/IconsKey.tsx +0 -14
  138. package/src/Old/Icon/tsx/IconsLaptop.tsx +0 -13
  139. package/src/Old/Icon/tsx/IconsLaptops.tsx +0 -16
  140. package/src/Old/Icon/tsx/IconsLightbulb.tsx +0 -16
  141. package/src/Old/Icon/tsx/IconsLock.tsx +0 -16
  142. package/src/Old/Icon/tsx/IconsLogin.tsx +0 -16
  143. package/src/Old/Icon/tsx/IconsLogout.tsx +0 -16
  144. package/src/Old/Icon/tsx/IconsMagnifier.tsx +0 -16
  145. package/src/Old/Icon/tsx/IconsMail.tsx +0 -16
  146. package/src/Old/Icon/tsx/IconsMenuGrid.tsx +0 -16
  147. package/src/Old/Icon/tsx/IconsMenuHamburger.tsx +0 -13
  148. package/src/Old/Icon/tsx/IconsMessage.tsx +0 -16
  149. package/src/Old/Icon/tsx/IconsMinusClose.tsx +0 -10
  150. package/src/Old/Icon/tsx/IconsMinusRemove.tsx +0 -16
  151. package/src/Old/Icon/tsx/IconsMobile.tsx +0 -16
  152. package/src/Old/Icon/tsx/IconsMonitoring.tsx +0 -14
  153. package/src/Old/Icon/tsx/IconsMoreHorizontal.tsx +0 -13
  154. package/src/Old/Icon/tsx/IconsMoreVertical.tsx +0 -17
  155. package/src/Old/Icon/tsx/IconsNoTie.tsx +0 -14
  156. package/src/Old/Icon/tsx/IconsNumero.tsx +0 -16
  157. package/src/Old/Icon/tsx/IconsOpenInBrowser.tsx +0 -16
  158. package/src/Old/Icon/tsx/IconsOverview.tsx +0 -14
  159. package/src/Old/Icon/tsx/IconsOwner.tsx +0 -19
  160. package/src/Old/Icon/tsx/IconsPause.tsx +0 -14
  161. package/src/Old/Icon/tsx/IconsPencil.tsx +0 -17
  162. package/src/Old/Icon/tsx/IconsPercent.tsx +0 -14
  163. package/src/Old/Icon/tsx/IconsPerson.tsx +0 -14
  164. package/src/Old/Icon/tsx/IconsPlatformsAndroid.tsx +0 -16
  165. package/src/Old/Icon/tsx/IconsPlatformsApple.tsx +0 -16
  166. package/src/Old/Icon/tsx/IconsPlatformsCordova.tsx +0 -14
  167. package/src/Old/Icon/tsx/IconsPlatformsFastlane.tsx +0 -14
  168. package/src/Old/Icon/tsx/IconsPlatformsFlutter.tsx +0 -14
  169. package/src/Old/Icon/tsx/IconsPlatformsGo.tsx +0 -13
  170. package/src/Old/Icon/tsx/IconsPlatformsIonic.tsx +0 -14
  171. package/src/Old/Icon/tsx/IconsPlatformsMacos.tsx +0 -14
  172. package/src/Old/Icon/tsx/IconsPlatformsNodejs.tsx +0 -13
  173. package/src/Old/Icon/tsx/IconsPlatformsOther.tsx +0 -21
  174. package/src/Old/Icon/tsx/IconsPlatformsReact.tsx +0 -14
  175. package/src/Old/Icon/tsx/IconsPlatformsXamarin.tsx +0 -14
  176. package/src/Old/Icon/tsx/IconsPlay.tsx +0 -16
  177. package/src/Old/Icon/tsx/IconsPlusAdd.tsx +0 -16
  178. package/src/Old/Icon/tsx/IconsPlusOpen.tsx +0 -13
  179. package/src/Old/Icon/tsx/IconsPower.tsx +0 -11
  180. package/src/Old/Icon/tsx/IconsRefresh.tsx +0 -13
  181. package/src/Old/Icon/tsx/IconsRequest.tsx +0 -14
  182. package/src/Old/Icon/tsx/IconsResponsiveness.tsx +0 -14
  183. package/src/Old/Icon/tsx/IconsSave.tsx +0 -14
  184. package/src/Old/Icon/tsx/IconsSecurityShield.tsx +0 -16
  185. package/src/Old/Icon/tsx/IconsSettings.tsx +0 -16
  186. package/src/Old/Icon/tsx/IconsShip.tsx +0 -14
  187. package/src/Old/Icon/tsx/IconsShowPassword.tsx +0 -16
  188. package/src/Old/Icon/tsx/IconsShuffle.tsx +0 -16
  189. package/src/Old/Icon/tsx/IconsStability.tsx +0 -16
  190. package/src/Old/Icon/tsx/IconsStack.tsx +0 -16
  191. package/src/Old/Icon/tsx/IconsStatus.tsx +0 -16
  192. package/src/Old/Icon/tsx/IconsStepThirdParty.tsx +0 -16
  193. package/src/Old/Icon/tsx/IconsStepUpgrade.tsx +0 -10
  194. package/src/Old/Icon/tsx/IconsStepUpgradeCircle.tsx +0 -11
  195. package/src/Old/Icon/tsx/IconsStepVersionOk.tsx +0 -11
  196. package/src/Old/Icon/tsx/IconsSteps.tsx +0 -14
  197. package/src/Old/Icon/tsx/IconsStepsColorTuorqouise.tsx +0 -14
  198. package/src/Old/Icon/tsx/IconsStepsColorViolet.tsx +0 -14
  199. package/src/Old/Icon/tsx/IconsStepsWhite.tsx +0 -14
  200. package/src/Old/Icon/tsx/IconsStopwatch.tsx +0 -16
  201. package/src/Old/Icon/tsx/IconsSupport.tsx +0 -16
  202. package/src/Old/Icon/tsx/IconsSwitch.tsx +0 -13
  203. package/src/Old/Icon/tsx/IconsTestFailed.tsx +0 -14
  204. package/src/Old/Icon/tsx/IconsTestInconclusive.tsx +0 -14
  205. package/src/Old/Icon/tsx/IconsTestInfo.tsx +0 -14
  206. package/src/Old/Icon/tsx/IconsTestSkipped.tsx +0 -14
  207. package/src/Old/Icon/tsx/IconsTestSuccess.tsx +0 -14
  208. package/src/Old/Icon/tsx/IconsTestWarning.tsx +0 -14
  209. package/src/Old/Icon/tsx/IconsTick.tsx +0 -13
  210. package/src/Old/Icon/tsx/IconsTime.tsx +0 -16
  211. package/src/Old/Icon/tsx/IconsTrace.tsx +0 -14
  212. package/src/Old/Icon/tsx/IconsTrash.tsx +0 -16
  213. package/src/Old/Icon/tsx/IconsTrigger.tsx +0 -16
  214. package/src/Old/Icon/tsx/IconsTwitter.tsx +0 -16
  215. package/src/Old/Icon/tsx/IconsValidateShield.tsx +0 -16
  216. package/src/Old/Icon/tsx/IconsWarning.tsx +0 -16
  217. package/src/Old/Icon/tsx/IconsWebUi.tsx +0 -17
  218. package/src/Old/Icon/tsx/IconsWindow.tsx +0 -16
  219. package/src/Old/Icon/tsx/IconsWorkflow.tsx +0 -16
  220. package/src/Old/Icon/tsx/IconsWorkflowFlow.tsx +0 -16
  221. package/src/Old/Icon/tsx/IconsWow.tsx +0 -16
  222. package/src/Old/Icon/tsx/index.ts +0 -694
  223. package/src/Old/Image/Image.css +0 -4
  224. package/src/Old/Image/Image.tsx +0 -15
  225. package/src/Old/Link/Link.css +0 -44
  226. package/src/Old/Link/Link.tsx +0 -30
  227. package/src/Old/List/List.css +0 -3
  228. package/src/Old/List/List.tsx +0 -14
  229. package/src/Old/List/ListItem.tsx +0 -13
  230. package/src/Old/Modal/Modal.css +0 -67
  231. package/src/Old/Modal/Modal.tsx +0 -117
  232. package/src/Old/Modal/ModalBody.tsx +0 -17
  233. package/src/Old/Modal/ModalHeader.tsx +0 -50
  234. package/src/Old/Modal/ModalHeaderProgress.tsx +0 -23
  235. package/src/Old/Modal/ModalTitle.tsx +0 -13
  236. package/src/Old/Portal/Portal.tsx +0 -15
  237. package/src/Old/Progress/ProgressButtonContent.tsx +0 -35
  238. package/src/Old/RadioButton/RadioButton.css +0 -46
  239. package/src/Old/RadioButton/RadioButton.tsx +0 -27
  240. package/src/Old/Sidebar/Sidebar.css +0 -125
  241. package/src/Old/Sidebar/Sidebar.tsx +0 -25
  242. package/src/Old/Sidebar/SidebarHeader.tsx +0 -10
  243. package/src/Old/Sidebar/SidebarMenu.tsx +0 -30
  244. package/src/Old/Sidebar/SidebarMenuContext.ts +0 -7
  245. package/src/Old/Sidebar/SidebarMenuItem.tsx +0 -67
  246. package/src/Old/Sidebar/SidebarSubMenu.tsx +0 -33
  247. package/src/Old/Sidebar/SidebarSubMenuItem.tsx +0 -59
  248. package/src/Old/Status/Status404.tsx +0 -43
  249. package/src/Old/Tabs/Tab.tsx +0 -23
  250. package/src/Old/Tabs/Tabs.css +0 -30
  251. package/src/Old/Tabs/Tabs.tsx +0 -18
  252. package/src/Old/Tooltip/Tooltip.tsx +0 -85
  253. package/src/Old/hooks/useResizeObserver.ts +0 -40
@@ -1,249 +0,0 @@
1
- :root {
2
- --Button--border-small: 0.0625rem;
3
- --Button--border-medium: 0.0625rem;
4
- --Button--border-large: 0.125rem;
5
- --Button--padding-small-vertical: calc(var(--size--x1) - var(--Button--border-small));
6
- --Button--padding-small-horizontal: var(--size--x3);
7
- --Button--padding-medium-vertical: calc(var(--size--x3) - var(--Button--border-medium));
8
- --Button--padding-medium-horizontal: var(--size--x4);
9
- --Button--padding-large-vertical: var(--size--x4);
10
- --Button--padding-large-horizontal: var(--size--x6);
11
- --Button--line-height: var(--size--x6);
12
- }
13
-
14
- .Button {
15
- border: 0 solid transparent;
16
- background-color: transparent;
17
- line-height: var(--Button--line-height);
18
- transition-property: border-color, background-color, color;
19
- transition-duration: var(--transition-duration--base);
20
- transition-timing-function: var(--transition-timing-function);
21
- }
22
-
23
- .Button:hover {
24
- cursor: pointer;
25
- }
26
-
27
- .Button:disabled,
28
- .Button[disabled] {
29
- cursor: not-allowed;
30
- }
31
-
32
- .Button--full-width {
33
- width: 100%;
34
- }
35
-
36
- .Button--size-small {
37
- padding: var(--Button--padding-small-vertical) var(--Button--padding-small-horizontal);
38
- border-width: var(--Button--border-small);
39
- border-radius: var(--size--x1);
40
- font-size: var(--fontSizes-2);
41
- }
42
-
43
- .Button--size-medium {
44
- padding: var(--Button--padding-medium-vertical) var(--Button--padding-medium-horizontal);
45
- border-width: var(--Button--border-medium);
46
- border-radius: var(--size--x1);
47
- font-size: var(--fontSizes-3);
48
- }
49
-
50
- .Button--size-large {
51
- padding: var(--Button--padding-large-vertical) var(--Button--padding-large-horizontal);
52
- border-width: var(--Button--border-large);
53
- border-radius: 0.375rem;
54
- font-size: var(--fontSizes-4);
55
- }
56
-
57
- .Button--borderless {
58
- border: none;
59
- border-radius: 0;
60
- }
61
-
62
- /* stylelint-disable no-descending-specificity */
63
- .Button--level-primary,
64
- .Button--level-secondary {
65
- position: relative;
66
- overflow: hidden;
67
- z-index: 0;
68
- }
69
-
70
- .Button--level-primary::before,
71
- .Button--level-primary::after,
72
- .Button--level-secondary::before,
73
- .Button--level-secondary::after {
74
- content: '';
75
- position: absolute;
76
- top: -0.125rem;
77
- right: -0.125rem;
78
- bottom: -0.125rem;
79
- left: -0.125rem;
80
- z-index: -1;
81
- transition-property: opacity;
82
- transition-duration: var(--transition-duration--base);
83
- transition-timing-function: var(--transition-timing-function);
84
- }
85
-
86
- .Button--level-primary:disabled::before,
87
- .Button--level-primary:hover:not(:disabled)::before,
88
- .Button--level-primary[disabled]::before,
89
- .Button--level-primary:hover:not([disabled])::before,
90
- .Button--level-secondary:disabled::before,
91
- .Button--level-secondary:hover:not(:disabled)::before,
92
- .Button--level-secondary[disabled]::before,
93
- .Button--level-secondary:hover:not([disabled])::before {
94
- opacity: 0;
95
- }
96
-
97
- .Button--level-primary:hover:not(:disabled)::after,
98
- .Button--level-primary:hover:not([disabled])::after,
99
- .Button--level-secondary:hover:not(:disabled)::after,
100
- .Button--level-secondary:hover:not([disabled])::after {
101
- opacity: 1;
102
- }
103
-
104
- .Button--level-primary:disabled::after,
105
- .Button--level-primary:active:not(:disabled)::after,
106
- .Button--level-primary[disabled]::after,
107
- .Button--level-primary:active:not([disabled])::after,
108
- .Button--level-secondary:disabled::after,
109
- .Button--level-secondary:active:not(:disabled)::after,
110
- .Button--level-secondary[disabled]::after,
111
- .Button--level-secondary:active:not([disabled])::after {
112
- opacity: 0;
113
- }
114
-
115
- .Button--level-primary {
116
- border-color: var(--color-eggplant);
117
- background-color: var(--color-grape--5);
118
- color: var(--color-gray--1);
119
- font-weight: var(--font-weight--bold);
120
- }
121
-
122
- .Button--level-primary:disabled,
123
- .Button--level-primary[disabled] {
124
- border-color: var(--color-gray--5);
125
- background-image: linear-gradient(to bottom, var(--color-gray--4), var(--color-gray--5));
126
- }
127
-
128
- .Button--level-primary::before {
129
- opacity: 1;
130
- background-image: linear-gradient(to bottom, #6C0EB2, #450674);
131
- }
132
-
133
- .Button--level-primary::after {
134
- opacity: 0;
135
- background-image: linear-gradient(to bottom, #50167B, #3D125D);
136
- }
137
-
138
- .Button--level-secondary {
139
- border-color: var(--color-gray--3);
140
- background-color: var(--color-gray--2);
141
- color: var(--color-grape--5);
142
- }
143
-
144
- .Button--level-secondary:disabled,
145
- .Button--level-secondary[disabled] {
146
- border-color: var(--color-gray--3);
147
- background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
148
- color: var(--color-gray--5);
149
- }
150
-
151
- .Button--level-secondary:active:not(:disabled) {
152
- border-color: var(--color-eggplant);
153
- background-color: var(--color-grape--5);
154
- color: var(--color-gray--1);
155
- }
156
-
157
- .Button--level-secondary::before {
158
- opacity: 1;
159
- background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
160
- }
161
-
162
- .Button--level-secondary::after {
163
- content: none;
164
- opacity: 0;
165
- }
166
-
167
- .Button--level-tertiary {
168
- border-color: transparent;
169
- background-color: transparent;
170
- color: var(--color-grape--3);
171
- }
172
-
173
- .Button--level-tertiary:disabled,
174
- .Button--level-tertiary[disabled] {
175
- color: var(--color-gray--5);
176
- }
177
-
178
- .Button--level-tertiary:hover:not(:disabled),
179
- .Button--level-tertiary:hover:not([disabled]) {
180
- background-color: var(--color-grape--1);
181
- }
182
-
183
- .Button--level-tertiary:active:not(:disabled),
184
- .Button--level-tertiary:active:not([disabled]) {
185
- background-color: var(--color-grape--5);
186
- color: var(--color-gray--1);
187
- }
188
-
189
- .Button--variant-danger.Button--level-primary:not(:disabled),
190
- .Button--variant-danger.Button--level-primary:not([disabled]) {
191
- border-color: #D4093C;
192
- background-color: #C90032;
193
- }
194
-
195
- .Button--variant-danger.Button--level-primary:not(:disabled):active,
196
- .Button--variant-danger.Button--level-primary:not([disabled]):active {
197
- border-color: #D4093C;
198
- background-color: var(--color-red--5);
199
- }
200
-
201
- .Button--variant-danger.Button--level-primary:not(:disabled)::before,
202
- .Button--variant-danger.Button--level-primary:not([disabled])::before {
203
- background-image: linear-gradient(to bottom, #FF2158, #E41447);
204
- }
205
-
206
- .Button--variant-danger.Button--level-primary:not(:disabled)::after,
207
- .Button--variant-danger.Button--level-primary:not([disabled])::after {
208
- content: none;
209
- }
210
-
211
- .Button--variant-danger.Button--level-secondary:not(:disabled),
212
- .Button--variant-danger.Button--level-secondary:not([disabled]) {
213
- border-color: var(--color-gray--3);
214
- background-color: var(--color-red--1);
215
- color: var(--color-red--3);
216
- }
217
-
218
- .Button--variant-danger.Button--level-secondary:not(:disabled):hover,
219
- .Button--variant-danger.Button--level-secondary:not([disabled]):hover {
220
- border-color: var(--color-red--2);
221
- }
222
-
223
- .Button--variant-danger.Button--level-secondary:not(:disabled):active,
224
- .Button--variant-danger.Button--level-secondary:not([disabled]):active {
225
- border-color: #D4093C;
226
- background-color: var(--color-red--5);
227
- color: var(--color-gray--1);
228
- }
229
-
230
- .Button--variant-danger.Button--level-secondary:not(:disabled)::before,
231
- .Button--variant-danger.Button--level-secondary:not([disabled])::before {
232
- background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
233
- }
234
-
235
- .Button--variant-danger.Button--level-secondary:not(:disabled)::after,
236
- .Button--variant-danger.Button--level-secondary:not([disabled])::after {
237
- content: none;
238
- }
239
-
240
- .Buttons--joined .Button:not(:first-child) {
241
- border-top-left-radius: 0;
242
- border-bottom-left-radius: 0;
243
- }
244
-
245
- .Buttons--joined .Button:not(:last-child) {
246
- border-right: 0;
247
- border-top-right-radius: 0;
248
- border-bottom-right-radius: 0;
249
- }
@@ -1,29 +0,0 @@
1
- import { shallow } from 'enzyme';
2
- import { shallowToJson } from 'enzyme-to-json';
3
- import Button from './Button';
4
-
5
- describe('Button', () => {
6
- test('default template', () => {
7
- expect(shallowToJson(shallow(<Button>Content</Button>))).toMatchSnapshot();
8
- });
9
-
10
- test('borderless', () => {
11
- expect(shallowToJson(shallow(<Button borderless>Content</Button>))).toMatchSnapshot();
12
- });
13
-
14
- test('fullWidth', () => {
15
- expect(shallowToJson(shallow(<Button fullWidth>Content</Button>))).toMatchSnapshot();
16
- });
17
-
18
- test('level', () => {
19
- expect(shallowToJson(shallow(<Button level="primary">Content</Button>))).toMatchSnapshot();
20
- });
21
-
22
- test('size', () => {
23
- expect(shallowToJson(shallow(<Button size="small">Content</Button>))).toMatchSnapshot();
24
- });
25
-
26
- test('variant', () => {
27
- expect(shallowToJson(shallow(<Button variant="danger">Content</Button>))).toMatchSnapshot();
28
- });
29
- });
@@ -1,55 +0,0 @@
1
- import * as React from 'react';
2
- import classnames from 'classnames';
3
- import Flex, { Props as FlexProps } from '../Flex/Flex';
4
- import './Button.css';
5
- import ButtonSize from './ButtonSize';
6
-
7
- export interface Props extends FlexProps {
8
- /**
9
- * Removes the borders from the Button, useful for when used inside a w
10
- * rapping container with custom borders
11
- */
12
- borderless?: boolean;
13
- /**
14
- * Allows the Button to fill the container space rather than shrinking
15
- * down to the content
16
- */
17
- fullWidth?: boolean;
18
- /** Sets the visual importance of the Button. */
19
- level?: 'primary' | 'secondary' | 'tertiary';
20
- /**
21
- * Sets the size of the Button. Small allows the Button to fit
22
- * into smaller spaces, while large will help the button stand
23
- * out on a page with lots of space.
24
- */
25
- size?: ButtonSize;
26
- /**
27
- * Variant is another prop that changes the styles to indicate it's usage.
28
- * For example "danger" is to let the user know this button performs a
29
- * potentionally dangerous action.
30
- */
31
- variant?: 'danger';
32
- }
33
-
34
- /** Standard Button component */
35
- const Button: React.FunctionComponent<Props> = (props: Props) => {
36
- const { borderless, className, fullWidth, level, size, variant, ...rest } = props;
37
-
38
- const gap = size === 'small' ? 'x1' : 'x2';
39
- const classes = classnames(className, 'Button', `Button--level-${level}`, `Button--size-${size}`, {
40
- 'Button--borderless': borderless,
41
- 'Button--full-width': fullWidth,
42
- [`Button--variant-${variant}`]: variant,
43
- });
44
-
45
- return (
46
- <Flex Component="button" {...rest} alignChildren="middle" className={classes} direction="horizontal" gap={gap} />
47
- );
48
- };
49
-
50
- Button.defaultProps = {
51
- level: 'secondary',
52
- size: 'medium',
53
- };
54
-
55
- export default Button;
@@ -1,3 +0,0 @@
1
- type ButtonSize = 'small' | 'medium' | 'large';
2
-
3
- export default ButtonSize;
@@ -1,42 +0,0 @@
1
- import { shallow } from 'enzyme';
2
- import { shallowToJson } from 'enzyme-to-json';
3
- import Button from './Button';
4
- import Buttons from './Buttons';
5
-
6
- describe('Buttons', () => {
7
- test('default template', () => {
8
- expect(
9
- shallowToJson(
10
- shallow(
11
- <Buttons>
12
- <Button>Content</Button>
13
- </Buttons>,
14
- ),
15
- ),
16
- ).toMatchSnapshot();
17
- });
18
-
19
- test('fullWidth', () => {
20
- expect(
21
- shallowToJson(
22
- shallow(
23
- <Buttons fullWidth>
24
- <Button>Content</Button>
25
- </Buttons>,
26
- ),
27
- ),
28
- ).toMatchSnapshot();
29
- });
30
-
31
- test('joined', () => {
32
- expect(
33
- shallowToJson(
34
- shallow(
35
- <Buttons joined>
36
- <Button>Content</Button>
37
- </Buttons>,
38
- ),
39
- ),
40
- ).toMatchSnapshot();
41
- });
42
- });
@@ -1,34 +0,0 @@
1
- import * as React from 'react';
2
- import classnames from 'classnames';
3
- import Flex, { Props as FlexProps } from '../Flex/Flex';
4
-
5
- export interface Props extends FlexProps {
6
- /** */
7
- fullWidth?: boolean;
8
- gap?: FlexProps['gap'];
9
- /** Connects any child components, when not provided they will be spaced out a little bit. */
10
- joined?: boolean;
11
- }
12
-
13
- /** Parent component to any multiples of Buttons. */
14
- const Buttons: React.FunctionComponent<Props> = (props: Props) => {
15
- const { fullWidth, gap, joined, ...rest } = props;
16
- const classes = classnames('Buttons', {
17
- 'Buttons--joined': joined,
18
- });
19
-
20
- return (
21
- <Flex
22
- {...rest}
23
- className={classes}
24
- direction={fullWidth ? 'vertical' : 'horizontal'}
25
- gap={joined && !fullWidth ? undefined : gap}
26
- />
27
- );
28
- };
29
-
30
- Buttons.defaultProps = {
31
- gap: 'x2',
32
- };
33
-
34
- export default Buttons;
@@ -1,73 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`Button borderless 1`] = `
4
- <Flex
5
- Component="button"
6
- alignChildren="middle"
7
- className="Button Button--level-secondary Button--size-medium Button--borderless"
8
- direction="horizontal"
9
- gap="x2"
10
- >
11
- Content
12
- </Flex>
13
- `;
14
-
15
- exports[`Button default template 1`] = `
16
- <Flex
17
- Component="button"
18
- alignChildren="middle"
19
- className="Button Button--level-secondary Button--size-medium"
20
- direction="horizontal"
21
- gap="x2"
22
- >
23
- Content
24
- </Flex>
25
- `;
26
-
27
- exports[`Button fullWidth 1`] = `
28
- <Flex
29
- Component="button"
30
- alignChildren="middle"
31
- className="Button Button--level-secondary Button--size-medium Button--full-width"
32
- direction="horizontal"
33
- gap="x2"
34
- >
35
- Content
36
- </Flex>
37
- `;
38
-
39
- exports[`Button level 1`] = `
40
- <Flex
41
- Component="button"
42
- alignChildren="middle"
43
- className="Button Button--level-primary Button--size-medium"
44
- direction="horizontal"
45
- gap="x2"
46
- >
47
- Content
48
- </Flex>
49
- `;
50
-
51
- exports[`Button size 1`] = `
52
- <Flex
53
- Component="button"
54
- alignChildren="middle"
55
- className="Button Button--level-secondary Button--size-small"
56
- direction="horizontal"
57
- gap="x1"
58
- >
59
- Content
60
- </Flex>
61
- `;
62
-
63
- exports[`Button variant 1`] = `
64
- <Flex
65
- Component="button"
66
- alignChildren="middle"
67
- className="Button Button--level-secondary Button--size-medium Button--variant-danger"
68
- direction="horizontal"
69
- gap="x2"
70
- >
71
- Content
72
- </Flex>
73
- `;
@@ -1,45 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`Buttons default template 1`] = `
4
- <Flex
5
- className="Buttons"
6
- direction="horizontal"
7
- gap="x2"
8
- >
9
- <Button
10
- level="secondary"
11
- size="medium"
12
- >
13
- Content
14
- </Button>
15
- </Flex>
16
- `;
17
-
18
- exports[`Buttons fullWidth 1`] = `
19
- <Flex
20
- className="Buttons"
21
- direction="vertical"
22
- gap="x2"
23
- >
24
- <Button
25
- level="secondary"
26
- size="medium"
27
- >
28
- Content
29
- </Button>
30
- </Flex>
31
- `;
32
-
33
- exports[`Buttons joined 1`] = `
34
- <Flex
35
- className="Buttons Buttons--joined"
36
- direction="horizontal"
37
- >
38
- <Button
39
- level="secondary"
40
- size="medium"
41
- >
42
- Content
43
- </Button>
44
- </Flex>
45
- `;
@@ -1,28 +0,0 @@
1
- import * as React from 'react';
2
- import Button, { Props as ButtonProps } from '../Button/Button';
3
- import Flex from '../Flex/Flex';
4
- import Icon from '../Icon/Icon';
5
-
6
- export type Props = Omit<ButtonProps, 'level'>;
7
-
8
- /**
9
- * A Button under the hood, but set up with a
10
- * standard prop configuration for a Dropdown.
11
- */
12
- const DropdownButton: React.FunctionComponent<Props> = (props: Props) => {
13
- const { children } = props;
14
-
15
- return (
16
- <Button type="button" {...props} alignChildrenHorizontal="start" fullWidth gap="x4" level="secondary">
17
- <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2" grow shrink>
18
- {children}
19
- </Flex>
20
-
21
- <Flex>
22
- <Icon name="ChevronDown" />
23
- </Flex>
24
- </Button>
25
- );
26
- };
27
-
28
- export default DropdownButton;
@@ -1,14 +0,0 @@
1
- import * as React from 'react';
2
- import PlacementArea, { Props as PlacementAreaProps } from '../Placement/PlacementArea';
3
-
4
- export type Props = PlacementAreaProps;
5
-
6
- /**
7
- * Provides a horizontal flex environment for a
8
- * dual view dropdown menu.
9
- */
10
- const DropdownMenus: React.FunctionComponent<Props> = (props: Props) => {
11
- return <PlacementArea {...props} direction="horizontal" />;
12
- };
13
-
14
- export default DropdownMenus;
@@ -1,24 +0,0 @@
1
- import * as React from 'react';
2
- import Flex from '../Flex/Flex';
3
- import Icon from '../Icon/Icon';
4
- import Link, { Props as LinkProps } from '../Link/Link';
5
-
6
- export type Props = LinkProps;
7
-
8
- const ExternalLink: React.FunctionComponent<Props> = (props: Props) => {
9
- const { children, ...rest } = props;
10
-
11
- return (
12
- <Link {...rest}>
13
- <Flex alignChildrenVertical="middle" direction="horizontal" gap="x1">
14
- <Flex>{children}</Flex>
15
-
16
- <Flex>
17
- <Icon name="OpenInBrowser" />
18
- </Flex>
19
- </Flex>
20
- </Link>
21
- );
22
- };
23
-
24
- export default ExternalLink;
@@ -1,4 +0,0 @@
1
- .Icon {
2
- display: block;
3
- fill: currentColor;
4
- }
@@ -1,32 +0,0 @@
1
- import * as React from 'react';
2
- import Base, { Props as BaseProps } from '../Base/Base';
3
- import { IconMap } from './tsx';
4
- import type { TypeIconName } from './tsx';
5
- import './Icon.css';
6
-
7
- export type { TypeIconName };
8
-
9
- export interface Props extends BaseProps {
10
- /** Name of the Icon to display */
11
- name: TypeIconName;
12
- /** Any CSS unit sizing for the Icon */
13
- size?: string;
14
- }
15
-
16
- /** Iconography component that output as crisp SVG icon. */
17
- const Icon: React.FunctionComponent<Props> = (props: Props) => {
18
- const { name, size, ...rest } = props;
19
- const IconSVG = IconMap[name];
20
-
21
- return (
22
- <Base {...rest} Component="svg" className="Icon" height={size} viewBox="0 0 24 24" width={size}>
23
- <IconSVG height="100%" width="100%" />
24
- </Base>
25
- );
26
- };
27
-
28
- Icon.defaultProps = {
29
- size: '1.5rem',
30
- };
31
-
32
- export default Icon;
@@ -1,14 +0,0 @@
1
- // THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
2
- import * as React from 'react';
3
-
4
- const SvgIconsAddOns = (props: React.SVGProps<SVGSVGElement>) => (
5
- <svg {...props} viewBox="0 0 24 24">
6
- <path
7
- fill="currentColor"
8
- fillRule="evenodd"
9
- d="M20 17.767a.502.502 0 0 1-.25.434l-3.001 1.732a.5.5 0 0 1-.499-.001l-2.999-1.73a.504.504 0 0 1-.251-.435V14.15c0-.178.096-.343.248-.432l.002-.001 3-1.732.001-.001a.503.503 0 0 1 .499 0l2.999 1.73c.155.09.251.257.251.436v3.616zm-9.25.434-3.001 1.732a.5.5 0 0 1-.499-.001l-2.999-1.73A.504.504 0 0 1 4 17.767V14.15c0-.18.096-.345.25-.434l3.001-1.732a.503.503 0 0 1 .499 0l3 1.733h.002c.153.09.248.255.248.433v3.616a.502.502 0 0 1-.25.434zM8.5 6.23c0-.178.096-.344.25-.433l3.001-1.732a.503.503 0 0 1 .499 0l2.999 1.73c.155.09.251.257.251.436V9.82a.501.501 0 0 1-.25.432l-3.001 1.733h-.001a.496.496 0 0 1-.496 0l-.002-.001-2.108-1.217-.892-.515a.501.501 0 0 1-.25-.432V6.23zm12.25 5.754-2.999-1.731c-.093-.053-.195-.08-.293-.121.014-.104.042-.206.042-.312V6.23a2.51 2.51 0 0 0-1.25-2.165l-2.999-1.731a2.505 2.505 0 0 0-2.501-.001L7.749 4.067A2.51 2.51 0 0 0 6.5 6.232V9.82c0 .106.028.208.042.312-.098.04-.199.067-.292.12l-3.001 1.733A2.51 2.51 0 0 0 2 14.15v3.616c0 .89.479 1.719 1.25 2.166l2.999 1.73a2.49 2.49 0 0 0 1.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732c.092-.054.165-.128.249-.192.084.064.157.139.25.193l2.999 1.73a2.49 2.49 0 0 0 1.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732A2.51 2.51 0 0 0 22 17.767V14.15c0-.89-.479-1.72-1.25-2.166z"
10
- />
11
- </svg>
12
- );
13
-
14
- export default SvgIconsAddOns;
@@ -1,20 +0,0 @@
1
- // THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
2
- import * as React from 'react';
3
-
4
- const SvgIconsAddOnsColorTuorqouise = (props: React.SVGProps<SVGSVGElement>) => (
5
- <svg {...props} viewBox="0 0 24 24">
6
- <g fill="#0DD3C5" fillRule="evenodd">
7
- <path
8
- d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
9
- opacity={0.8}
10
- />
11
- <path
12
- d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
13
- opacity={0.5}
14
- />
15
- <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 0 1 1.001-1.741l3-1.742a1.992 1.992 0 0 1 1.998 0l3 1.742A2.012 2.012 0 0 1 17 5.753" />
16
- </g>
17
- </svg>
18
- );
19
-
20
- export default SvgIconsAddOnsColorTuorqouise;