@zohodesk/components 1.0.0-temp-48 → 1.0.0-temp-51

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 (383) hide show
  1. package/README.md +52 -0
  2. package/assets/Appearance/dark/mode/darkMode.module.css +358 -0
  3. package/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css +34 -0
  4. package/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css +42 -0
  5. package/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css +34 -0
  6. package/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css +42 -0
  7. package/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css +34 -0
  8. package/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css +42 -0
  9. package/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css +34 -0
  10. package/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css +42 -0
  11. package/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css +34 -0
  12. package/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css +42 -0
  13. package/assets/Appearance/default/mode/defaultMode.module.css +358 -0
  14. package/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +34 -0
  15. package/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css +42 -0
  16. package/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css +34 -0
  17. package/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css +42 -0
  18. package/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +34 -0
  19. package/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css +42 -0
  20. package/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css +34 -0
  21. package/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css +42 -0
  22. package/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +34 -0
  23. package/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css +42 -0
  24. package/es/Animation/Animation.js +7 -8
  25. package/es/AppContainer/AppContainer.js +52 -11
  26. package/es/Avatar/Avatar.js +11 -11
  27. package/es/Button/Button.js +18 -23
  28. package/es/Button/Button.module.css +6 -2
  29. package/es/Card/Card.js +4 -5
  30. package/es/Card/Card.module.css +3 -3
  31. package/es/DateTime/DateWidget.module.css +0 -4
  32. package/es/DropBox/DropBox.js +2 -2
  33. package/es/ListItem/ListContainer.js +118 -0
  34. package/es/ListItem/ListItem.js +23 -31
  35. package/es/ListItem/ListItem.module.css +0 -1
  36. package/es/ListItem/ListItemWithAvatar.js +21 -27
  37. package/es/ListItem/ListItemWithCheckBox.js +23 -29
  38. package/es/ListItem/ListItemWithIcon.js +26 -26
  39. package/es/ListItem/ListItemWithRadio.js +24 -31
  40. package/es/MultiSelect/AdvancedGroupMultiSelect.js +8 -5
  41. package/es/MultiSelect/AdvancedMultiSelect.js +22 -8
  42. package/es/MultiSelect/AdvancedMultiSelect.module.css +8 -8
  43. package/es/MultiSelect/MultiSelect.js +27 -9
  44. package/es/MultiSelect/MultiSelect.module.css +8 -13
  45. package/es/MultiSelect/MultiSelectWithAvatar.js +7 -4
  46. package/es/MultiSelect/SelectedOptions.js +3 -2
  47. package/es/PopOver/PopOver.js +19 -20
  48. package/es/PopOver/PopOver.module.css +1 -1
  49. package/es/Popup/Popup.js +1 -1
  50. package/es/Provider/Config.js +2 -1
  51. package/es/Provider.js +22 -22
  52. package/es/Radio/Radio.js +1 -2
  53. package/es/Radio/Radio.module.css +2 -2
  54. package/es/Responsive/ResizeComponent.js +1 -1
  55. package/es/Responsive/sizeObservers.js +8 -1
  56. package/es/Ribbon/Ribbon.js +8 -8
  57. package/es/RippleEffect/RippleEffect.js +7 -4
  58. package/es/RippleEffect/RippleEffect.module.css +3 -0
  59. package/es/Select/GroupSelect.js +1 -1
  60. package/es/Select/Select.js +15 -1
  61. package/es/Select/Select.module.css +1 -1
  62. package/es/Select/SelectWithAvatar.js +8 -5
  63. package/es/Select/SelectWithIcon.js +1 -1
  64. package/es/Stencils/Stencils.js +5 -6
  65. package/es/Stencils/Stencils.module.css +4 -14
  66. package/es/Tab/Tabs.js +14 -2
  67. package/es/Tag/Tag.js +10 -4
  68. package/es/Tag/Tag.module.css +14 -11
  69. package/es/TextBoxIcon/TextBoxIcon.js +2 -2
  70. package/es/TextBoxIcon/TextBoxIcon.module.css +5 -2
  71. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -1
  72. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -1
  73. package/es/common/docStyle.module.css +9 -9
  74. package/es/utils/dropDownUtils.js +39 -1
  75. package/lib/Animation/Animation.js +7 -8
  76. package/lib/AppContainer/AppContainer.js +61 -12
  77. package/lib/Avatar/Avatar.js +11 -11
  78. package/lib/Button/Button.js +18 -23
  79. package/lib/Button/Button.module.css +6 -2
  80. package/lib/Card/Card.js +4 -5
  81. package/lib/Card/Card.module.css +3 -3
  82. package/lib/DateTime/DateWidget.module.css +0 -4
  83. package/lib/DropBox/DropBox.js +6 -2
  84. package/lib/ListItem/ListContainer.js +127 -0
  85. package/lib/ListItem/ListItem.js +25 -32
  86. package/lib/ListItem/ListItem.module.css +0 -1
  87. package/lib/ListItem/ListItemWithAvatar.js +23 -28
  88. package/lib/ListItem/ListItemWithCheckBox.js +24 -27
  89. package/lib/ListItem/ListItemWithIcon.js +27 -26
  90. package/lib/ListItem/ListItemWithRadio.js +26 -27
  91. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +8 -5
  92. package/lib/MultiSelect/AdvancedMultiSelect.js +22 -7
  93. package/lib/MultiSelect/AdvancedMultiSelect.module.css +8 -8
  94. package/lib/MultiSelect/MultiSelect.js +26 -8
  95. package/lib/MultiSelect/MultiSelect.module.css +8 -13
  96. package/lib/MultiSelect/MultiSelectWithAvatar.js +7 -4
  97. package/lib/MultiSelect/SelectedOptions.js +3 -2
  98. package/lib/PopOver/PopOver.js +19 -20
  99. package/lib/PopOver/PopOver.module.css +1 -1
  100. package/lib/Popup/Popup.js +32 -29
  101. package/lib/Provider/Config.js +2 -1
  102. package/lib/Provider.js +22 -22
  103. package/lib/Radio/Radio.js +1 -3
  104. package/lib/Radio/Radio.module.css +2 -2
  105. package/lib/Responsive/ResizeComponent.js +1 -1
  106. package/lib/Responsive/sizeObservers.js +8 -1
  107. package/lib/Ribbon/Ribbon.js +8 -8
  108. package/lib/RippleEffect/RippleEffect.js +7 -4
  109. package/lib/RippleEffect/RippleEffect.module.css +3 -0
  110. package/lib/Select/GroupSelect.js +1 -1
  111. package/lib/Select/Select.js +17 -3
  112. package/lib/Select/Select.module.css +1 -1
  113. package/lib/Select/SelectWithAvatar.js +8 -5
  114. package/lib/Select/SelectWithIcon.js +1 -1
  115. package/lib/Stencils/Stencils.js +5 -6
  116. package/lib/Stencils/Stencils.module.css +4 -14
  117. package/lib/Tab/Tabs.js +13 -2
  118. package/lib/Tag/Tag.js +10 -4
  119. package/lib/Tag/Tag.module.css +14 -11
  120. package/lib/TextBoxIcon/TextBoxIcon.js +2 -2
  121. package/lib/TextBoxIcon/TextBoxIcon.module.css +5 -2
  122. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +5 -3
  123. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +5 -3
  124. package/lib/common/docStyle.module.css +9 -9
  125. package/lib/utils/dropDownUtils.js +45 -2
  126. package/package.json +13 -9
  127. package/README_Beta.md +0 -2
  128. package/__testUtils__/globals.js +0 -46
  129. package/__testUtils__/moduleMapKey.json +0 -138
  130. package/dubFinder.js +0 -96
  131. package/es/Accordion/docs/Accordion__Demo.docs.js +0 -80
  132. package/es/Animation/docs/Animation__default.docs.js +0 -34
  133. package/es/Animation/docs/Animation__fadeIn.docs.js +0 -34
  134. package/es/Animation/docs/Animation__scaleIn.docs.js +0 -34
  135. package/es/Animation/docs/Animation__skewIn.docs.js +0 -34
  136. package/es/Animation/docs/Animation__slideDown.docs.js +0 -34
  137. package/es/Animation/docs/Animation__slideLeft.docs.js +0 -34
  138. package/es/Animation/docs/Animation__zoomIn.docs.js +0 -34
  139. package/es/AppContainer/docs/AppContainer__default.docs.js +0 -20
  140. package/es/Appearance/dark/mode/darkMode.module.css +0 -393
  141. package/es/Appearance/dark/themes/blue/blueDarkCTATheme.module.css +0 -34
  142. package/es/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css +0 -48
  143. package/es/Appearance/dark/themes/green/greenDarkCTATheme.module.css +0 -34
  144. package/es/Appearance/dark/themes/green/greenDarkComponentTheme.module.css +0 -48
  145. package/es/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css +0 -34
  146. package/es/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css +0 -48
  147. package/es/Appearance/dark/themes/red/redDarkCTATheme.module.css +0 -34
  148. package/es/Appearance/dark/themes/red/redDarkComponentTheme.module.css +0 -48
  149. package/es/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css +0 -34
  150. package/es/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css +0 -48
  151. package/es/Appearance/default/mode/defaultMode.module.css +0 -395
  152. package/es/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +0 -34
  153. package/es/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css +0 -48
  154. package/es/Appearance/default/themes/green/greenDefaultCTATheme.module.css +0 -34
  155. package/es/Appearance/default/themes/green/greenDefaultComponentTheme.module.css +0 -48
  156. package/es/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +0 -34
  157. package/es/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css +0 -48
  158. package/es/Appearance/default/themes/red/redDefaultCTATheme.module.css +0 -34
  159. package/es/Appearance/default/themes/red/redDefaultComponentTheme.module.css +0 -48
  160. package/es/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +0 -34
  161. package/es/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css +0 -48
  162. package/es/Avatar/docs/Avatar__custom.docs.js +0 -29
  163. package/es/Avatar/docs/Avatar__default.docs.js +0 -29
  164. package/es/Avatar/docs/Avatar__palette.docs.js +0 -49
  165. package/es/Avatar/docs/Avatar__text.docs.js +0 -28
  166. package/es/AvatarTeam/docs/AvatarTeam__custom.docs.js +0 -73
  167. package/es/AvatarTeam/docs/AvatarTeam__default.docs.js +0 -31
  168. package/es/AvatarTeam/docs/AvatarTeam__palette.docs.js +0 -50
  169. package/es/AvatarTeam/docs/AvatarTeam__size.docs.js +0 -49
  170. package/es/Button/docs/Button__custom.docs.js +0 -771
  171. package/es/Button/docs/Button__default.docs.js +0 -536
  172. package/es/Buttongroup/docs/Buttongroup__custom.docs.js +0 -37
  173. package/es/Buttongroup/docs/Buttongroup__footer.docs.js +0 -33
  174. package/es/Buttongroup/docs/Buttongroup__header.docs.js +0 -42
  175. package/es/Card/docs/Card__Custom.docs.js +0 -34
  176. package/es/Card/docs/Card__Default.docs.js +0 -37
  177. package/es/Card/docs/Card__Scroll.docs.js +0 -59
  178. package/es/CheckBox/docs/CheckBox__custom.docs.js +0 -293
  179. package/es/CheckBox/docs/CheckBox__default.docs.js +0 -219
  180. package/es/DateTime/docs/DateTime__default.docs.js +0 -91
  181. package/es/DateTime/docs/DateWidget__default.docs.js +0 -183
  182. package/es/DateTime/docs/timezonedata.json +0 -1
  183. package/es/DropBox/docs/DropBox__custom.docs.js +0 -66
  184. package/es/DropBox/docs/DropBox__customOrder.docs.js +0 -92
  185. package/es/DropBox/docs/DropBox__fixedPosition.docs.js +0 -91
  186. package/es/DropBox/docs/DropBox__position.docs.js +0 -87
  187. package/es/DropBox/docs/DropBox__size.docs.js +0 -61
  188. package/es/DropDown/docs/DropDownHeading__custom.docs.js +0 -23
  189. package/es/DropDown/docs/DropDownHeading__default.docs.js +0 -21
  190. package/es/Label/docs/Label__clipped.docs.js +0 -27
  191. package/es/Label/docs/Label__custom.docs.js +0 -30
  192. package/es/Label/docs/Label__palette.docs.js +0 -42
  193. package/es/Label/docs/Label__size.docs.js +0 -29
  194. package/es/Label/docs/Label__type.docs.js +0 -37
  195. package/es/Layout/docs/Layout__Hidden.docs.js +0 -77
  196. package/es/Layout/docs/Layout__default.docs.js +0 -49
  197. package/es/Layout/docs/Layout__four_Column.docs.js +0 -85
  198. package/es/Layout/docs/Layout__three_Column.docs.js +0 -76
  199. package/es/Layout/docs/Layout__two_Column.docs.js +0 -69
  200. package/es/LightNightMode/docs/AlternativeColors.docs.js +0 -74
  201. package/es/ListItem/docs/ListItemWithAvatar__custom.docs.js +0 -155
  202. package/es/ListItem/docs/ListItemWithAvatar__default.docs.js +0 -112
  203. package/es/ListItem/docs/ListItemWithCheckBox__custom.docs.js +0 -91
  204. package/es/ListItem/docs/ListItemWithCheckBox__default.docs.js +0 -65
  205. package/es/ListItem/docs/ListItemWithIcon__custom.docs.js +0 -68
  206. package/es/ListItem/docs/ListItemWithIcon__default.docs.js +0 -62
  207. package/es/ListItem/docs/ListItemWithRadio__custom.docs.js +0 -91
  208. package/es/ListItem/docs/ListItemWithRadio__default.docs.js +0 -65
  209. package/es/ListItem/docs/ListItem__custom.docs.js +0 -114
  210. package/es/ListItem/docs/ListItem__default.docs.js +0 -82
  211. package/es/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +0 -125
  212. package/es/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +0 -114
  213. package/es/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +0 -141
  214. package/es/MultiSelect/docs/MultiSelect__default.docs.js +0 -161
  215. package/es/PopOver/docs/PopOver__default.docs.js +0 -32
  216. package/es/Provider/docs/Provider_Id__Class.docs.js +0 -29
  217. package/es/Provider/docs/Provider_Id__Function.docs.js +0 -18
  218. package/es/Provider/docs/Provider_Zindex__Class.docs.js +0 -32
  219. package/es/Provider/docs/Provider_Zindex__Function.docs.js +0 -23
  220. package/es/Radio/docs/Radio__custom.docs.js +0 -245
  221. package/es/Radio/docs/Radio__default.docs.js +0 -169
  222. package/es/Responsive/docs/Responsive__Custom.docs.js +0 -206
  223. package/es/Responsive/docs/Responsive__default.docs.js +0 -97
  224. package/es/Responsive/docs/style.module.css +0 -56
  225. package/es/Ribbon/docs/Ribbon__custom.docs.js +0 -386
  226. package/es/Ribbon/docs/Ribbon__default.docs.js +0 -342
  227. package/es/RippleEffect/docs/RippleEffect__default.docs.js +0 -435
  228. package/es/Select/docs/GroupSelect__default.docs.js +0 -149
  229. package/es/Select/docs/SelectWithAvatar__default.docs.js +0 -97
  230. package/es/Select/docs/SelectWithIcon__default.docs.js +0 -138
  231. package/es/Select/docs/Select__default.docs.js +0 -288
  232. package/es/Stencils/docs/Stencils__custom.docs.js +0 -45
  233. package/es/Stencils/docs/Stencils__default.docs.js +0 -50
  234. package/es/Switch/docs/Switch__custom.docs.js +0 -153
  235. package/es/Switch/docs/Switch__default.docs.js +0 -107
  236. package/es/Tab/docs/Tab__default.docs.js +0 -258
  237. package/es/Tab/docs/tabdocs.module.css +0 -29
  238. package/es/Tag/docs/Tag__custom.docs.js +0 -368
  239. package/es/Tag/docs/Tag__default.docs.js +0 -253
  240. package/es/TextBox/docs/TextBox__custom.docs.js +0 -43
  241. package/es/TextBox/docs/TextBox__default.docs.js +0 -40
  242. package/es/TextBox/docs/TextBox__size.docs.js +0 -38
  243. package/es/TextBox/docs/TextBox__variant.docs.js +0 -38
  244. package/es/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +0 -89
  245. package/es/TextBoxIcon/docs/TextBoxIcon__default.docs.js +0 -61
  246. package/es/Textarea/docs/Textarea__animated.docs.js +0 -41
  247. package/es/Textarea/docs/Textarea__custom.docs.js +0 -82
  248. package/es/Textarea/docs/Textarea__default.docs.js +0 -76
  249. package/es/Textarea/docs/Textarea__disabled.docs.js +0 -29
  250. package/es/Tooltip/docs/Tooltip__default.docs.js +0 -332
  251. package/es/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +0 -97
  252. package/es/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +0 -150
  253. package/es/a11y/FocusScope/docs/FocusScope__default.docs.js +0 -139
  254. package/es/beta/FocusRing/docs/FocusRing__default.docs.js +0 -48
  255. package/es/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +0 -72
  256. package/es/semantic/Button/docs/Button__default.docs.js +0 -20
  257. package/externalDocsBuild.js +0 -21
  258. package/lib/Accordion/docs/Accordion__Demo.docs.js +0 -126
  259. package/lib/Animation/docs/Animation__default.docs.js +0 -85
  260. package/lib/Animation/docs/Animation__fadeIn.docs.js +0 -85
  261. package/lib/Animation/docs/Animation__scaleIn.docs.js +0 -85
  262. package/lib/Animation/docs/Animation__skewIn.docs.js +0 -85
  263. package/lib/Animation/docs/Animation__slideDown.docs.js +0 -85
  264. package/lib/Animation/docs/Animation__slideLeft.docs.js +0 -85
  265. package/lib/Animation/docs/Animation__zoomIn.docs.js +0 -85
  266. package/lib/AppContainer/docs/AppContainer__default.docs.js +0 -70
  267. package/lib/Appearance/dark/mode/darkMode.module.css +0 -393
  268. package/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css +0 -34
  269. package/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css +0 -48
  270. package/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css +0 -34
  271. package/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css +0 -48
  272. package/lib/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css +0 -34
  273. package/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css +0 -48
  274. package/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css +0 -34
  275. package/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css +0 -48
  276. package/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css +0 -34
  277. package/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css +0 -48
  278. package/lib/Appearance/default/mode/defaultMode.module.css +0 -395
  279. package/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +0 -34
  280. package/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css +0 -48
  281. package/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css +0 -34
  282. package/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css +0 -48
  283. package/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +0 -34
  284. package/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css +0 -48
  285. package/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css +0 -34
  286. package/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css +0 -48
  287. package/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +0 -34
  288. package/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css +0 -48
  289. package/lib/Avatar/docs/Avatar__custom.docs.js +0 -87
  290. package/lib/Avatar/docs/Avatar__default.docs.js +0 -83
  291. package/lib/Avatar/docs/Avatar__palette.docs.js +0 -107
  292. package/lib/Avatar/docs/Avatar__text.docs.js +0 -86
  293. package/lib/AvatarTeam/docs/AvatarTeam__custom.docs.js +0 -124
  294. package/lib/AvatarTeam/docs/AvatarTeam__default.docs.js +0 -82
  295. package/lib/AvatarTeam/docs/AvatarTeam__palette.docs.js +0 -101
  296. package/lib/AvatarTeam/docs/AvatarTeam__size.docs.js +0 -100
  297. package/lib/Button/docs/Button__custom.docs.js +0 -826
  298. package/lib/Button/docs/Button__default.docs.js +0 -590
  299. package/lib/Buttongroup/docs/Buttongroup__custom.docs.js +0 -89
  300. package/lib/Buttongroup/docs/Buttongroup__footer.docs.js +0 -85
  301. package/lib/Buttongroup/docs/Buttongroup__header.docs.js +0 -98
  302. package/lib/Card/docs/Card__Custom.docs.js +0 -90
  303. package/lib/Card/docs/Card__Default.docs.js +0 -92
  304. package/lib/Card/docs/Card__Scroll.docs.js +0 -114
  305. package/lib/CheckBox/docs/CheckBox__custom.docs.js +0 -348
  306. package/lib/CheckBox/docs/CheckBox__default.docs.js +0 -273
  307. package/lib/DateTime/docs/DateTime__default.docs.js +0 -142
  308. package/lib/DateTime/docs/DateWidget__default.docs.js +0 -240
  309. package/lib/DateTime/docs/timezonedata.json +0 -1
  310. package/lib/DropBox/docs/DropBox__custom.docs.js +0 -122
  311. package/lib/DropBox/docs/DropBox__customOrder.docs.js +0 -141
  312. package/lib/DropBox/docs/DropBox__fixedPosition.docs.js +0 -140
  313. package/lib/DropBox/docs/DropBox__position.docs.js +0 -142
  314. package/lib/DropBox/docs/DropBox__size.docs.js +0 -116
  315. package/lib/DropDown/docs/DropDownHeading__custom.docs.js +0 -73
  316. package/lib/DropDown/docs/DropDownHeading__default.docs.js +0 -70
  317. package/lib/Label/docs/Label__clipped.docs.js +0 -81
  318. package/lib/Label/docs/Label__custom.docs.js +0 -85
  319. package/lib/Label/docs/Label__palette.docs.js +0 -96
  320. package/lib/Label/docs/Label__size.docs.js +0 -83
  321. package/lib/Label/docs/Label__type.docs.js +0 -91
  322. package/lib/Layout/docs/Layout__Hidden.docs.js +0 -127
  323. package/lib/Layout/docs/Layout__default.docs.js +0 -98
  324. package/lib/Layout/docs/Layout__four_Column.docs.js +0 -135
  325. package/lib/Layout/docs/Layout__three_Column.docs.js +0 -126
  326. package/lib/Layout/docs/Layout__two_Column.docs.js +0 -119
  327. package/lib/LightNightMode/docs/AlternativeColors.docs.js +0 -131
  328. package/lib/ListItem/docs/ListItemWithAvatar__custom.docs.js +0 -206
  329. package/lib/ListItem/docs/ListItemWithAvatar__default.docs.js +0 -162
  330. package/lib/ListItem/docs/ListItemWithCheckBox__custom.docs.js +0 -142
  331. package/lib/ListItem/docs/ListItemWithCheckBox__default.docs.js +0 -115
  332. package/lib/ListItem/docs/ListItemWithIcon__custom.docs.js +0 -119
  333. package/lib/ListItem/docs/ListItemWithIcon__default.docs.js +0 -112
  334. package/lib/ListItem/docs/ListItemWithRadio__custom.docs.js +0 -142
  335. package/lib/ListItem/docs/ListItemWithRadio__default.docs.js +0 -115
  336. package/lib/ListItem/docs/ListItem__custom.docs.js +0 -164
  337. package/lib/ListItem/docs/ListItem__default.docs.js +0 -131
  338. package/lib/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +0 -177
  339. package/lib/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +0 -165
  340. package/lib/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +0 -191
  341. package/lib/MultiSelect/docs/MultiSelect__default.docs.js +0 -214
  342. package/lib/PopOver/docs/PopOver__default.docs.js +0 -86
  343. package/lib/Provider/docs/Provider_Id__Class.docs.js +0 -77
  344. package/lib/Provider/docs/Provider_Id__Function.docs.js +0 -29
  345. package/lib/Provider/docs/Provider_Zindex__Class.docs.js +0 -80
  346. package/lib/Provider/docs/Provider_Zindex__Function.docs.js +0 -34
  347. package/lib/Radio/docs/Radio__custom.docs.js +0 -299
  348. package/lib/Radio/docs/Radio__default.docs.js +0 -222
  349. package/lib/Responsive/docs/Responsive__Custom.docs.js +0 -272
  350. package/lib/Responsive/docs/Responsive__default.docs.js +0 -142
  351. package/lib/Responsive/docs/style.module.css +0 -56
  352. package/lib/Ribbon/docs/Ribbon__custom.docs.js +0 -437
  353. package/lib/Ribbon/docs/Ribbon__default.docs.js +0 -392
  354. package/lib/RippleEffect/docs/RippleEffect__default.docs.js +0 -484
  355. package/lib/Select/docs/GroupSelect__default.docs.js +0 -199
  356. package/lib/Select/docs/SelectWithAvatar__default.docs.js +0 -152
  357. package/lib/Select/docs/SelectWithIcon__default.docs.js +0 -190
  358. package/lib/Select/docs/Select__default.docs.js +0 -340
  359. package/lib/Stencils/docs/Stencils__custom.docs.js +0 -96
  360. package/lib/Stencils/docs/Stencils__default.docs.js +0 -101
  361. package/lib/Switch/docs/Switch__custom.docs.js +0 -203
  362. package/lib/Switch/docs/Switch__default.docs.js +0 -156
  363. package/lib/Tab/docs/Tab__default.docs.js +0 -308
  364. package/lib/Tab/docs/tabdocs.module.css +0 -29
  365. package/lib/Tag/docs/Tag__custom.docs.js +0 -423
  366. package/lib/Tag/docs/Tag__default.docs.js +0 -307
  367. package/lib/TextBox/docs/TextBox__custom.docs.js +0 -98
  368. package/lib/TextBox/docs/TextBox__default.docs.js +0 -95
  369. package/lib/TextBox/docs/TextBox__size.docs.js +0 -93
  370. package/lib/TextBox/docs/TextBox__variant.docs.js +0 -93
  371. package/lib/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +0 -145
  372. package/lib/TextBoxIcon/docs/TextBoxIcon__default.docs.js +0 -117
  373. package/lib/Textarea/docs/Textarea__animated.docs.js +0 -95
  374. package/lib/Textarea/docs/Textarea__custom.docs.js +0 -137
  375. package/lib/Textarea/docs/Textarea__default.docs.js +0 -130
  376. package/lib/Textarea/docs/Textarea__disabled.docs.js +0 -83
  377. package/lib/Tooltip/docs/Tooltip__default.docs.js +0 -391
  378. package/lib/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +0 -150
  379. package/lib/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +0 -206
  380. package/lib/a11y/FocusScope/docs/FocusScope__default.docs.js +0 -191
  381. package/lib/beta/FocusRing/docs/FocusRing__default.docs.js +0 -101
  382. package/lib/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +0 -145
  383. package/lib/semantic/Button/docs/Button__default.docs.js +0 -66
@@ -1,34 +0,0 @@
1
- import React, { Component } from 'react';
2
- import Card, { CardHeader, CardFooter, CardContent } from '../Card';
3
- import { Box } from '../../Layout';
4
- import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
5
- import style from '../../common/docStyle.module.css';
6
- export default class Card__Custom extends Component {
7
- render() {
8
- return /*#__PURE__*/React.createElement("div", {
9
- style: {
10
- height: '50vh'
11
- }
12
- }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Card, {
13
- isScrollAttribute: true,
14
- customClass: style.customCard
15
- }, /*#__PURE__*/React.createElement(CardHeader, {
16
- customClass: style.customCardHeader
17
- }, /*#__PURE__*/React.createElement(Box, null, "Header")), /*#__PURE__*/React.createElement(CardContent, {
18
- customClass: style.customCardContent,
19
- isScrollAttribute: true
20
- }, /*#__PURE__*/React.createElement(Box, null, "What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.")), /*#__PURE__*/React.createElement(CardFooter, {
21
- customClass: style.customCardFooter
22
- }, /*#__PURE__*/React.createElement(Box, null, "Footer")))));
23
- }
24
-
25
- }
26
-
27
- if (false) {
28
- Card__Custom.docs = {
29
- componentGroup: 'Template',
30
- folderName: 'Style Guide',
31
- external: true,
32
- description: ' '
33
- };
34
- }
@@ -1,37 +0,0 @@
1
- import React, { Component } from 'react';
2
- import Card, { CardHeader, CardFooter, CardContent } from '../Card';
3
- import { Box } from '../../Layout';
4
- import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
5
- export default class Card__Default extends Component {
6
- render() {
7
- return /*#__PURE__*/React.createElement("div", {
8
- style: {
9
- height: '50vh'
10
- }
11
- }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Card, {
12
- isScrollAttribute: true
13
- }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(Box, {
14
- style: {
15
- color: 'var(--dot_text_white)',
16
- background: 'var(--dot_bg_black)'
17
- }
18
- }, "Header")), /*#__PURE__*/React.createElement(CardContent, {
19
- isScrollAttribute: true
20
- }, /*#__PURE__*/React.createElement(Box, null, "What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.")), /*#__PURE__*/React.createElement(CardFooter, null, /*#__PURE__*/React.createElement(Box, {
21
- style: {
22
- color: 'var(--dot_text_white)',
23
- background: 'var(--dot_bg_black)'
24
- }
25
- }, "Footer")))));
26
- }
27
-
28
- }
29
-
30
- if (false) {
31
- Card__Default.docs = {
32
- componentGroup: 'Template',
33
- folderName: 'Style Guide',
34
- external: true,
35
- description: ' '
36
- };
37
- }
@@ -1,59 +0,0 @@
1
- import React, { Component } from 'react';
2
- import Card, { CardHeader, CardFooter, CardContent } from '../Card';
3
- import { Box } from '../../Layout';
4
- import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
5
- export default class Card__Scroll extends Component {
6
- constructor(props) {
7
- super(props);
8
- this.state = {
9
- from: 0,
10
- limit: 10,
11
- noMoreData: false,
12
- isApiSend: false,
13
- data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]
14
- };
15
- }
16
-
17
- render() {
18
- let {
19
- from,
20
- limit,
21
- data
22
- } = this.state;
23
- return /*#__PURE__*/React.createElement("div", {
24
- style: {
25
- height: '400px'
26
- }
27
- }, /*#__PURE__*/React.createElement(Card, {
28
- from: from,
29
- limit: limit,
30
- fetchData: this.fetchData
31
- }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(Box, {
32
- style: {
33
- color: 'var(--dot_text_white)',
34
- background: 'var(--dot_bg_black)'
35
- }
36
- }, "Header")), /*#__PURE__*/React.createElement(CardContent, null, data.map((val, index) => /*#__PURE__*/React.createElement("div", {
37
- key: index,
38
- style: {
39
- padding: '10px 0px',
40
- borderBottom: '1px solid #ddd'
41
- }
42
- }, val))), /*#__PURE__*/React.createElement(CardFooter, null, /*#__PURE__*/React.createElement(Box, {
43
- style: {
44
- color: 'var(--dot_text_white)',
45
- background: 'var(--dot_bg_black)'
46
- }
47
- }, "Footer"))));
48
- }
49
-
50
- }
51
-
52
- if (false) {
53
- Card__Scroll.docs = {
54
- componentGroup: 'Template',
55
- folderName: 'Style Guide',
56
- external: true,
57
- description: ' '
58
- };
59
- }
@@ -1,293 +0,0 @@
1
- import React, { Component } from 'react';
2
- import CheckBox from '../CheckBox';
3
- import styles from '../../common/docStyle.module.css';
4
- export default class CheckBox__custom extends Component {
5
- constructor(props) {
6
- super(props);
7
- this.onChange = this.onChange.bind(this);
8
- this.onSelect = this.onSelect.bind(this);
9
- this.state = {
10
- checked: false,
11
- selected: true
12
- };
13
- }
14
-
15
- onChange() {
16
- this.setState({
17
- checked: !this.state.checked
18
- });
19
- }
20
-
21
- onSelect() {
22
- this.setState({
23
- selected: !this.state.selected
24
- });
25
- }
26
-
27
- render() {
28
- let style = {
29
- margin: '10px'
30
- },
31
- titleStyle = {
32
- fontSize: '13px',
33
- padding: '15px 0',
34
- textTransform: 'upperCase',
35
- borderTop: '1px solid #e3e6eb'
36
- },
37
- spanStyle = {
38
- display: 'inline-block',
39
- margin: '10px 10px 10px 0'
40
- };
41
- return /*#__PURE__*/React.createElement("div", {
42
- style: style
43
- }, /*#__PURE__*/React.createElement("div", {
44
- style: {
45
- margin: '10px 0'
46
- }
47
- }, /*#__PURE__*/React.createElement("div", {
48
- style: {
49
- marginBottom: '10px'
50
- }
51
- }, /*#__PURE__*/React.createElement("div", {
52
- style: titleStyle
53
- }, "Default CheckBox"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CheckBox, {
54
- customClass: {
55
- customCheckBox: styles.customCbox
56
- },
57
- onChange: this.onChange,
58
- checked: this.state.checked
59
- })))), /*#__PURE__*/React.createElement("div", {
60
- style: {
61
- margin: '10px 0'
62
- }
63
- }, /*#__PURE__*/React.createElement("div", {
64
- style: {
65
- marginBottom: '10px'
66
- }
67
- }, /*#__PURE__*/React.createElement("div", {
68
- style: titleStyle
69
- }, "CheckBox Size"), /*#__PURE__*/React.createElement(CheckBox, {
70
- customClass: {
71
- customCheckBox: styles.customCbox
72
- },
73
- onChange: this.onChange,
74
- checked: this.state.checked,
75
- size: "small"
76
- }), /*#__PURE__*/React.createElement("span", {
77
- style: {
78
- marginLeft: '10px'
79
- }
80
- }, /*#__PURE__*/React.createElement(CheckBox, {
81
- customClass: {
82
- customCheckBox: styles.customCbox,
83
- customLabel: styles.customLbl
84
- },
85
- onChange: this.onChange,
86
- checked: this.state.checked,
87
- size: "medium"
88
- })))), /*#__PURE__*/React.createElement("div", {
89
- style: {
90
- margin: '10px 0'
91
- }
92
- }, /*#__PURE__*/React.createElement("div", {
93
- style: {
94
- marginBottom: '10px'
95
- }
96
- }, /*#__PURE__*/React.createElement("div", {
97
- style: titleStyle
98
- }, "Select State CheckBox"), /*#__PURE__*/React.createElement("span", {
99
- style: {
100
- marginRight: '10px'
101
- }
102
- }, /*#__PURE__*/React.createElement(CheckBox, {
103
- customClass: {
104
- customCheckBox: styles.customCbox
105
- },
106
- onChange: this.onSelect,
107
- checked: this.state.selected,
108
- activeStyle: "minus"
109
- })), /*#__PURE__*/React.createElement("span", {
110
- style: {
111
- marginRight: '10px'
112
- }
113
- }, /*#__PURE__*/React.createElement(CheckBox, {
114
- customClass: {
115
- customCheckBox: styles.customCbox
116
- },
117
- palette: "danger",
118
- onChange: this.onSelect,
119
- checked: this.state.selected,
120
- activeStyle: "minus"
121
- })))), /*#__PURE__*/React.createElement("div", {
122
- style: {
123
- marginBottom: '10px'
124
- }
125
- }, /*#__PURE__*/React.createElement("div", {
126
- style: titleStyle
127
- }, "Disabled Type CheckBox"), /*#__PURE__*/React.createElement("span", {
128
- style: {
129
- marginRight: '10px'
130
- }
131
- }, /*#__PURE__*/React.createElement(CheckBox, {
132
- customClass: {
133
- customCheckBox: styles.customCbox
134
- },
135
- checked: true,
136
- disabled: true
137
- })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CheckBox, {
138
- customClass: {
139
- customCheckBox: styles.disabledCbox
140
- },
141
- disabled: true
142
- }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
143
- style: titleStyle
144
- }, "Label With CheckBox"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
145
- style: spanStyle
146
- }, /*#__PURE__*/React.createElement(CheckBox, {
147
- customClass: {
148
- customCheckBox: styles.customCbox,
149
- customLabel: styles.customLbl
150
- },
151
- title: "Title",
152
- checked: this.state.checked,
153
- text: "Check With Label",
154
- onChange: this.onChange
155
- })), /*#__PURE__*/React.createElement("span", {
156
- style: spanStyle
157
- }, /*#__PURE__*/React.createElement(CheckBox, {
158
- customClass: {
159
- customCheckBox: styles.customCbox,
160
- customLabel: styles.customLbl,
161
- customCBoxSize: styles.largeCbox,
162
- customTickSize: styles.largeCboxTick
163
- },
164
- active: true,
165
- checked: this.state.checked,
166
- text: "Checked Active With Label",
167
- onChange: this.onChange
168
- })), /*#__PURE__*/React.createElement("span", {
169
- style: spanStyle
170
- }, /*#__PURE__*/React.createElement(CheckBox, {
171
- customClass: {
172
- customCheckBox: styles.disabledCbox,
173
- customLabel: styles.disabledLabel
174
- },
175
- checked: this.state.checked,
176
- disabled: true,
177
- text: "Disabled With Label",
178
- onChange: this.onChange
179
- })), /*#__PURE__*/React.createElement("span", {
180
- style: spanStyle
181
- }, /*#__PURE__*/React.createElement(CheckBox, {
182
- customClass: {
183
- customCheckBox: styles.readOnlyCbox,
184
- customLabel: styles.readOnlyLbl
185
- },
186
- isReadOnly: true,
187
- text: "ReadOnly With Label",
188
- onChange: this.onChange,
189
- checked: this.state.checked
190
- }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
191
- style: spanStyle
192
- }, /*#__PURE__*/React.createElement(CheckBox, {
193
- customClass: {
194
- customCheckBox: styles.customCbox,
195
- customLabel: styles.customLbl
196
- },
197
- palette: "danger",
198
- checked: this.state.checked,
199
- text: "Check With Label",
200
- onChange: this.onChange,
201
- activeStyle: "minus"
202
- })), /*#__PURE__*/React.createElement("span", {
203
- style: spanStyle
204
- }, /*#__PURE__*/React.createElement(CheckBox, {
205
- customClass: {
206
- customCheckBox: styles.customCbox,
207
- customLabel: styles.customLbl,
208
- customCBoxSize: styles.largeCbox
209
- },
210
- palette: "danger",
211
- active: true,
212
- checked: this.state.checked,
213
- text: "Checked Active With Label",
214
- onChange: this.onChange,
215
- activeStyle: "minus"
216
- })), /*#__PURE__*/React.createElement("span", {
217
- style: spanStyle
218
- }, /*#__PURE__*/React.createElement(CheckBox, {
219
- customClass: {
220
- customCheckBox: styles.disabledCbox,
221
- customLabel: styles.disabledLabel
222
- },
223
- palette: "danger",
224
- checked: this.state.checked,
225
- disabled: true,
226
- text: "Disabled With Label",
227
- onChange: this.onChange,
228
- activeStyle: "minus"
229
- })), /*#__PURE__*/React.createElement("span", {
230
- style: spanStyle
231
- }, /*#__PURE__*/React.createElement(CheckBox, {
232
- customClass: {
233
- customCheckBox: styles.readOnlyCbox,
234
- customLabel: styles.readOnlyLbl
235
- },
236
- palette: "danger",
237
- isReadOnly: true,
238
- text: "ReadOnly With Label",
239
- onChange: this.onChange,
240
- checked: this.state.checked,
241
- activeStyle: "minus"
242
- })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
243
- style: titleStyle
244
- }, "Size"), /*#__PURE__*/React.createElement("span", {
245
- style: spanStyle
246
- }, /*#__PURE__*/React.createElement(CheckBox, {
247
- customClass: {
248
- customCheckBox: styles.customCbox,
249
- customLabel: styles.customLbl
250
- },
251
- checked: true,
252
- size: "small",
253
- text: "Small",
254
- labelSize: "small"
255
- })), /*#__PURE__*/React.createElement("span", {
256
- style: spanStyle
257
- }, /*#__PURE__*/React.createElement(CheckBox, {
258
- customClass: {
259
- customCheckBox: styles.customCbox,
260
- customLabel: styles.customLbl
261
- },
262
- checked: true,
263
- text: "Medium"
264
- }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
265
- style: titleStyle
266
- }, "Palette"), /*#__PURE__*/React.createElement("span", {
267
- style: spanStyle
268
- }, /*#__PURE__*/React.createElement(CheckBox, {
269
- customClass: {
270
- customCheckBox: styles.customCbox,
271
- customLabel: styles.customLbl
272
- },
273
- checked: true,
274
- text: "Primary"
275
- })), /*#__PURE__*/React.createElement("span", {
276
- style: spanStyle
277
- }, /*#__PURE__*/React.createElement(CheckBox, {
278
- customClass: {
279
- customCheckBox: styles.customCbox,
280
- customLabel: styles.customLbl
281
- },
282
- checked: true,
283
- palette: "danger",
284
- text: "Danger"
285
- }))));
286
- }
287
-
288
- }
289
- CheckBox__custom.docs = {
290
- componentGroup: 'Form Elements',
291
- folderName: 'Style Guide',
292
- description: ' '
293
- };
@@ -1,219 +0,0 @@
1
- import React, { Component } from 'react';
2
- import CheckBox from '../CheckBox';
3
- export default class CheckBox__default extends Component {
4
- constructor(props) {
5
- super(props);
6
- this.onChange = this.onChange.bind(this);
7
- this.onSelect = this.onSelect.bind(this);
8
- this.state = {
9
- checked: false,
10
- selected: true
11
- };
12
- }
13
-
14
- onChange() {
15
- this.setState({
16
- checked: !this.state.checked
17
- });
18
- }
19
-
20
- onSelect() {
21
- this.setState({
22
- selected: !this.state.selected
23
- });
24
- }
25
-
26
- render() {
27
- let style = {
28
- margin: '10px'
29
- },
30
- titleStyle = {
31
- fontSize: '13px',
32
- padding: '15px 0',
33
- textTransform: 'upperCase',
34
- borderTop: '1px solid #e3e6eb'
35
- },
36
- spanStyle = {
37
- display: 'inline-block',
38
- margin: '10px 10px 10px 0'
39
- };
40
- return /*#__PURE__*/React.createElement("div", {
41
- style: style
42
- }, /*#__PURE__*/React.createElement("div", {
43
- style: {
44
- margin: '10px 0'
45
- }
46
- }, /*#__PURE__*/React.createElement("div", {
47
- style: {
48
- marginBottom: '10px'
49
- }
50
- }, /*#__PURE__*/React.createElement("div", {
51
- style: titleStyle
52
- }, "Default CheckBox"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CheckBox, {
53
- onChange: this.onChange,
54
- checked: this.state.checked
55
- })))), /*#__PURE__*/React.createElement("div", {
56
- style: {
57
- margin: '10px 0'
58
- }
59
- }, /*#__PURE__*/React.createElement("div", {
60
- style: {
61
- marginBottom: '10px'
62
- }
63
- }, /*#__PURE__*/React.createElement("div", {
64
- style: titleStyle
65
- }, "CheckBox Size"), /*#__PURE__*/React.createElement(CheckBox, {
66
- onChange: this.onChange,
67
- checked: this.state.checked,
68
- size: "small"
69
- }), /*#__PURE__*/React.createElement("span", {
70
- style: {
71
- marginLeft: '10px'
72
- }
73
- }, /*#__PURE__*/React.createElement(CheckBox, {
74
- onChange: this.onChange,
75
- checked: this.state.checked,
76
- size: "medium"
77
- })))), /*#__PURE__*/React.createElement("div", {
78
- style: {
79
- margin: '10px 0'
80
- }
81
- }, /*#__PURE__*/React.createElement("div", {
82
- style: {
83
- marginBottom: '10px'
84
- }
85
- }, /*#__PURE__*/React.createElement("div", {
86
- style: titleStyle
87
- }, "Select State CheckBox"), /*#__PURE__*/React.createElement("span", {
88
- style: {
89
- marginRight: '10px'
90
- }
91
- }, /*#__PURE__*/React.createElement(CheckBox, {
92
- onChange: this.onSelect,
93
- checked: this.state.selected,
94
- activeStyle: "minus"
95
- })), /*#__PURE__*/React.createElement("span", {
96
- style: {
97
- marginRight: '10px'
98
- }
99
- }, /*#__PURE__*/React.createElement(CheckBox, {
100
- palette: "danger",
101
- onChange: this.onSelect,
102
- checked: this.state.selected,
103
- activeStyle: "minus"
104
- })))), /*#__PURE__*/React.createElement("div", {
105
- style: {
106
- marginBottom: '10px'
107
- }
108
- }, /*#__PURE__*/React.createElement("div", {
109
- style: titleStyle
110
- }, "Disabled Type CheckBox"), /*#__PURE__*/React.createElement("span", {
111
- style: {
112
- marginRight: '10px'
113
- }
114
- }, /*#__PURE__*/React.createElement(CheckBox, {
115
- checked: true,
116
- disabled: true
117
- })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CheckBox, {
118
- disabled: true
119
- }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
120
- style: titleStyle
121
- }, "Label With CheckBox"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
122
- style: spanStyle
123
- }, /*#__PURE__*/React.createElement(CheckBox, {
124
- title: "Title",
125
- checked: this.state.checked,
126
- text: "Check With Label",
127
- onChange: this.onChange
128
- })), /*#__PURE__*/React.createElement("span", {
129
- style: spanStyle
130
- }, /*#__PURE__*/React.createElement(CheckBox, {
131
- active: true,
132
- checked: this.state.checked,
133
- text: "Checked Active With Label",
134
- onChange: this.onChange
135
- })), /*#__PURE__*/React.createElement("span", {
136
- style: spanStyle
137
- }, /*#__PURE__*/React.createElement(CheckBox, {
138
- checked: this.state.checked,
139
- disabled: true,
140
- text: "Disabled With Label",
141
- onChange: this.onChange
142
- })), /*#__PURE__*/React.createElement("span", {
143
- style: spanStyle
144
- }, /*#__PURE__*/React.createElement(CheckBox, {
145
- isReadOnly: true,
146
- text: "ReadOnly With Label",
147
- onChange: this.onChange,
148
- checked: this.state.checked
149
- }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
150
- style: spanStyle
151
- }, /*#__PURE__*/React.createElement(CheckBox, {
152
- palette: "danger",
153
- checked: this.state.checked,
154
- text: "Check With Label",
155
- onChange: this.onChange,
156
- activeStyle: "minus"
157
- })), /*#__PURE__*/React.createElement("span", {
158
- style: spanStyle
159
- }, /*#__PURE__*/React.createElement(CheckBox, {
160
- palette: "danger",
161
- active: true,
162
- checked: this.state.checked,
163
- text: "Checked Active With Label",
164
- onChange: this.onChange,
165
- activeStyle: "minus"
166
- })), /*#__PURE__*/React.createElement("span", {
167
- style: spanStyle
168
- }, /*#__PURE__*/React.createElement(CheckBox, {
169
- palette: "danger",
170
- checked: this.state.checked,
171
- disabled: true,
172
- text: "Disabled With Label",
173
- onChange: this.onChange,
174
- activeStyle: "minus"
175
- })), /*#__PURE__*/React.createElement("span", {
176
- style: spanStyle
177
- }, /*#__PURE__*/React.createElement(CheckBox, {
178
- palette: "danger",
179
- isReadOnly: true,
180
- text: "ReadOnly With Label",
181
- onChange: this.onChange,
182
- checked: this.state.checked,
183
- activeStyle: "minus"
184
- })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
185
- style: titleStyle
186
- }, "Size"), /*#__PURE__*/React.createElement("span", {
187
- style: spanStyle
188
- }, /*#__PURE__*/React.createElement(CheckBox, {
189
- checked: true,
190
- size: "small",
191
- text: "Small",
192
- labelSize: "small"
193
- })), /*#__PURE__*/React.createElement("span", {
194
- style: spanStyle
195
- }, /*#__PURE__*/React.createElement(CheckBox, {
196
- checked: true,
197
- text: "Medium"
198
- }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
199
- style: titleStyle
200
- }, "Palette"), /*#__PURE__*/React.createElement("span", {
201
- style: spanStyle
202
- }, /*#__PURE__*/React.createElement(CheckBox, {
203
- checked: true,
204
- text: "Primary"
205
- })), /*#__PURE__*/React.createElement("span", {
206
- style: spanStyle
207
- }, /*#__PURE__*/React.createElement(CheckBox, {
208
- checked: true,
209
- palette: "danger",
210
- text: "Danger"
211
- }))));
212
- }
213
-
214
- }
215
- CheckBox__default.docs = {
216
- componentGroup: 'Form Elements',
217
- folderName: 'Style Guide',
218
- description: ' '
219
- };