@zohodesk/components 1.0.0-alpha-222 → 1.0.0-alpha-226

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 (300) hide show
  1. package/README.md +15 -0
  2. package/assets/Appearance/dark/mode/darkMode.module.css +356 -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/{es → assets}/Appearance/dark/themes/green/greenDarkCTATheme.module.css +11 -11
  6. package/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css +42 -0
  7. package/{lib → assets}/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css +11 -11
  8. package/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css +42 -0
  9. package/{lib → assets}/Appearance/dark/themes/red/redDarkCTATheme.module.css +11 -11
  10. package/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css +42 -0
  11. package/{es → assets}/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css +11 -11
  12. package/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css +42 -0
  13. package/assets/Appearance/default/mode/defaultMode.module.css +356 -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/{es → assets}/Appearance/default/themes/green/greenDefaultCTATheme.module.css +3 -3
  17. package/{lib → assets}/Appearance/default/themes/green/greenDefaultComponentTheme.module.css +8 -8
  18. package/{es → assets}/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +1 -1
  19. package/{lib → assets}/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css +7 -7
  20. package/{es → assets}/Appearance/default/themes/red/redDefaultCTATheme.module.css +8 -8
  21. package/{lib → assets}/Appearance/default/themes/red/redDefaultComponentTheme.module.css +7 -7
  22. package/{es → assets}/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +1 -1
  23. package/{es → assets}/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css +7 -7
  24. package/es/AppContainer/AppContainer.js +6 -6
  25. package/es/Card/Card.module.css +3 -3
  26. package/es/ListItem/ListContainer.js +123 -0
  27. package/es/ListItem/ListItem.js +23 -31
  28. package/es/ListItem/ListItemWithAvatar.js +21 -27
  29. package/es/ListItem/ListItemWithCheckBox.js +23 -29
  30. package/es/ListItem/ListItemWithIcon.js +26 -26
  31. package/es/ListItem/ListItemWithRadio.js +24 -31
  32. package/es/PopOver/PopOver.module.css +1 -1
  33. package/es/Provider.js +22 -22
  34. package/es/Stencils/Stencils.module.css +4 -14
  35. package/es/common/docStyle.module.css +9 -9
  36. package/lib/AppContainer/AppContainer.js +6 -6
  37. package/lib/Card/Card.module.css +3 -3
  38. package/lib/ListItem/ListContainer.js +132 -0
  39. package/lib/ListItem/ListItem.js +25 -32
  40. package/lib/ListItem/ListItemWithAvatar.js +23 -28
  41. package/lib/ListItem/ListItemWithCheckBox.js +24 -27
  42. package/lib/ListItem/ListItemWithIcon.js +27 -26
  43. package/lib/ListItem/ListItemWithRadio.js +26 -27
  44. package/lib/PopOver/PopOver.module.css +1 -1
  45. package/lib/Provider.js +22 -22
  46. package/lib/Stencils/Stencils.module.css +4 -14
  47. package/lib/common/docStyle.module.css +9 -9
  48. package/package.json +8 -8
  49. package/README_Beta.md +0 -2
  50. package/__testUtils__/globals.js +0 -46
  51. package/__testUtils__/moduleMapKey.json +0 -138
  52. package/dubFinder.js +0 -96
  53. package/es/Accordion/docs/Accordion__Demo.docs.js +0 -80
  54. package/es/Animation/docs/Animation__default.docs.js +0 -34
  55. package/es/Animation/docs/Animation__fadeIn.docs.js +0 -34
  56. package/es/Animation/docs/Animation__scaleIn.docs.js +0 -34
  57. package/es/Animation/docs/Animation__skewIn.docs.js +0 -34
  58. package/es/Animation/docs/Animation__slideDown.docs.js +0 -34
  59. package/es/Animation/docs/Animation__slideLeft.docs.js +0 -34
  60. package/es/Animation/docs/Animation__zoomIn.docs.js +0 -34
  61. package/es/AppContainer/docs/AppContainer__default.docs.js +0 -20
  62. package/es/Appearance/dark/mode/darkMode.module.css +0 -356
  63. package/es/Appearance/dark/themes/blue/blueDarkCTATheme.module.css +0 -34
  64. package/es/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css +0 -42
  65. package/es/Appearance/dark/themes/green/greenDarkComponentTheme.module.css +0 -42
  66. package/es/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css +0 -34
  67. package/es/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css +0 -42
  68. package/es/Appearance/dark/themes/red/redDarkCTATheme.module.css +0 -34
  69. package/es/Appearance/dark/themes/red/redDarkComponentTheme.module.css +0 -42
  70. package/es/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css +0 -42
  71. package/es/Appearance/default/mode/defaultMode.module.css +0 -356
  72. package/es/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +0 -34
  73. package/es/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css +0 -42
  74. package/es/Appearance/default/themes/green/greenDefaultComponentTheme.module.css +0 -42
  75. package/es/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css +0 -42
  76. package/es/Appearance/default/themes/red/redDefaultComponentTheme.module.css +0 -42
  77. package/es/Avatar/docs/Avatar__custom.docs.js +0 -29
  78. package/es/Avatar/docs/Avatar__default.docs.js +0 -29
  79. package/es/Avatar/docs/Avatar__palette.docs.js +0 -49
  80. package/es/Avatar/docs/Avatar__text.docs.js +0 -28
  81. package/es/AvatarTeam/docs/AvatarTeam__custom.docs.js +0 -73
  82. package/es/AvatarTeam/docs/AvatarTeam__default.docs.js +0 -31
  83. package/es/AvatarTeam/docs/AvatarTeam__palette.docs.js +0 -50
  84. package/es/AvatarTeam/docs/AvatarTeam__size.docs.js +0 -49
  85. package/es/Button/docs/Button__custom.docs.js +0 -771
  86. package/es/Button/docs/Button__default.docs.js +0 -536
  87. package/es/Buttongroup/docs/Buttongroup__custom.docs.js +0 -37
  88. package/es/Buttongroup/docs/Buttongroup__footer.docs.js +0 -33
  89. package/es/Buttongroup/docs/Buttongroup__header.docs.js +0 -42
  90. package/es/Card/docs/Card__Custom.docs.js +0 -34
  91. package/es/Card/docs/Card__Default.docs.js +0 -37
  92. package/es/Card/docs/Card__Scroll.docs.js +0 -59
  93. package/es/CheckBox/docs/CheckBox__custom.docs.js +0 -293
  94. package/es/CheckBox/docs/CheckBox__default.docs.js +0 -219
  95. package/es/DateTime/docs/DateTime__default.docs.js +0 -91
  96. package/es/DateTime/docs/DateWidget__default.docs.js +0 -183
  97. package/es/DateTime/docs/timezonedata.json +0 -1
  98. package/es/DropBox/docs/DropBox__custom.docs.js +0 -66
  99. package/es/DropBox/docs/DropBox__customOrder.docs.js +0 -92
  100. package/es/DropBox/docs/DropBox__fixedPosition.docs.js +0 -91
  101. package/es/DropBox/docs/DropBox__position.docs.js +0 -87
  102. package/es/DropBox/docs/DropBox__size.docs.js +0 -61
  103. package/es/DropDown/docs/DropDownHeading__custom.docs.js +0 -23
  104. package/es/DropDown/docs/DropDownHeading__default.docs.js +0 -21
  105. package/es/Label/docs/Label__clipped.docs.js +0 -27
  106. package/es/Label/docs/Label__custom.docs.js +0 -30
  107. package/es/Label/docs/Label__palette.docs.js +0 -42
  108. package/es/Label/docs/Label__size.docs.js +0 -29
  109. package/es/Label/docs/Label__type.docs.js +0 -37
  110. package/es/Layout/docs/Layout__Hidden.docs.js +0 -77
  111. package/es/Layout/docs/Layout__default.docs.js +0 -49
  112. package/es/Layout/docs/Layout__four_Column.docs.js +0 -85
  113. package/es/Layout/docs/Layout__three_Column.docs.js +0 -76
  114. package/es/Layout/docs/Layout__two_Column.docs.js +0 -69
  115. package/es/LightNightMode/docs/AlternativeColors.docs.js +0 -74
  116. package/es/ListItem/docs/ListItemWithAvatar__custom.docs.js +0 -155
  117. package/es/ListItem/docs/ListItemWithAvatar__default.docs.js +0 -112
  118. package/es/ListItem/docs/ListItemWithCheckBox__custom.docs.js +0 -91
  119. package/es/ListItem/docs/ListItemWithCheckBox__default.docs.js +0 -65
  120. package/es/ListItem/docs/ListItemWithIcon__custom.docs.js +0 -68
  121. package/es/ListItem/docs/ListItemWithIcon__default.docs.js +0 -62
  122. package/es/ListItem/docs/ListItemWithRadio__custom.docs.js +0 -91
  123. package/es/ListItem/docs/ListItemWithRadio__default.docs.js +0 -65
  124. package/es/ListItem/docs/ListItem__custom.docs.js +0 -114
  125. package/es/ListItem/docs/ListItem__default.docs.js +0 -82
  126. package/es/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +0 -125
  127. package/es/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +0 -114
  128. package/es/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +0 -141
  129. package/es/MultiSelect/docs/MultiSelect__default.docs.js +0 -161
  130. package/es/PopOver/docs/PopOver__default.docs.js +0 -32
  131. package/es/Provider/docs/Provider_Id__Class.docs.js +0 -29
  132. package/es/Provider/docs/Provider_Id__Function.docs.js +0 -18
  133. package/es/Provider/docs/Provider_Zindex__Class.docs.js +0 -32
  134. package/es/Provider/docs/Provider_Zindex__Function.docs.js +0 -23
  135. package/es/Radio/docs/Radio__custom.docs.js +0 -245
  136. package/es/Radio/docs/Radio__default.docs.js +0 -169
  137. package/es/Responsive/docs/Responsive__Custom.docs.js +0 -206
  138. package/es/Responsive/docs/Responsive__default.docs.js +0 -97
  139. package/es/Responsive/docs/style.module.css +0 -56
  140. package/es/Ribbon/docs/Ribbon__custom.docs.js +0 -386
  141. package/es/Ribbon/docs/Ribbon__default.docs.js +0 -342
  142. package/es/RippleEffect/docs/RippleEffect__default.docs.js +0 -435
  143. package/es/Select/docs/GroupSelect__default.docs.js +0 -149
  144. package/es/Select/docs/SelectWithAvatar__default.docs.js +0 -97
  145. package/es/Select/docs/SelectWithIcon__default.docs.js +0 -138
  146. package/es/Select/docs/Select__default.docs.js +0 -288
  147. package/es/Stencils/docs/Stencils__custom.docs.js +0 -45
  148. package/es/Stencils/docs/Stencils__default.docs.js +0 -50
  149. package/es/Switch/docs/Switch__custom.docs.js +0 -153
  150. package/es/Switch/docs/Switch__default.docs.js +0 -107
  151. package/es/Tab/docs/Tab__default.docs.js +0 -258
  152. package/es/Tab/docs/tabdocs.module.css +0 -29
  153. package/es/Tag/docs/Tag__custom.docs.js +0 -368
  154. package/es/Tag/docs/Tag__default.docs.js +0 -253
  155. package/es/TextBox/docs/TextBox__custom.docs.js +0 -43
  156. package/es/TextBox/docs/TextBox__default.docs.js +0 -40
  157. package/es/TextBox/docs/TextBox__size.docs.js +0 -38
  158. package/es/TextBox/docs/TextBox__variant.docs.js +0 -38
  159. package/es/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +0 -89
  160. package/es/TextBoxIcon/docs/TextBoxIcon__default.docs.js +0 -61
  161. package/es/Textarea/docs/Textarea__animated.docs.js +0 -41
  162. package/es/Textarea/docs/Textarea__custom.docs.js +0 -82
  163. package/es/Textarea/docs/Textarea__default.docs.js +0 -76
  164. package/es/Textarea/docs/Textarea__disabled.docs.js +0 -29
  165. package/es/Tooltip/docs/Tooltip__default.docs.js +0 -332
  166. package/es/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +0 -97
  167. package/es/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +0 -150
  168. package/es/a11y/FocusScope/docs/FocusScope__default.docs.js +0 -139
  169. package/es/beta/FocusRing/docs/FocusRing__default.docs.js +0 -48
  170. package/es/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +0 -72
  171. package/es/semantic/Button/docs/Button__default.docs.js +0 -20
  172. package/externalDocsBuild.js +0 -21
  173. package/lib/Accordion/docs/Accordion__Demo.docs.js +0 -126
  174. package/lib/Animation/docs/Animation__default.docs.js +0 -85
  175. package/lib/Animation/docs/Animation__fadeIn.docs.js +0 -85
  176. package/lib/Animation/docs/Animation__scaleIn.docs.js +0 -85
  177. package/lib/Animation/docs/Animation__skewIn.docs.js +0 -85
  178. package/lib/Animation/docs/Animation__slideDown.docs.js +0 -85
  179. package/lib/Animation/docs/Animation__slideLeft.docs.js +0 -85
  180. package/lib/Animation/docs/Animation__zoomIn.docs.js +0 -85
  181. package/lib/AppContainer/docs/AppContainer__default.docs.js +0 -70
  182. package/lib/Appearance/dark/mode/darkMode.module.css +0 -356
  183. package/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css +0 -34
  184. package/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css +0 -42
  185. package/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css +0 -34
  186. package/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css +0 -42
  187. package/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css +0 -42
  188. package/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css +0 -42
  189. package/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css +0 -34
  190. package/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css +0 -42
  191. package/lib/Appearance/default/mode/defaultMode.module.css +0 -356
  192. package/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +0 -34
  193. package/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css +0 -42
  194. package/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css +0 -34
  195. package/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +0 -34
  196. package/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css +0 -34
  197. package/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +0 -34
  198. package/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css +0 -42
  199. package/lib/Avatar/docs/Avatar__custom.docs.js +0 -87
  200. package/lib/Avatar/docs/Avatar__default.docs.js +0 -83
  201. package/lib/Avatar/docs/Avatar__palette.docs.js +0 -107
  202. package/lib/Avatar/docs/Avatar__text.docs.js +0 -86
  203. package/lib/AvatarTeam/docs/AvatarTeam__custom.docs.js +0 -124
  204. package/lib/AvatarTeam/docs/AvatarTeam__default.docs.js +0 -82
  205. package/lib/AvatarTeam/docs/AvatarTeam__palette.docs.js +0 -101
  206. package/lib/AvatarTeam/docs/AvatarTeam__size.docs.js +0 -100
  207. package/lib/Button/docs/Button__custom.docs.js +0 -826
  208. package/lib/Button/docs/Button__default.docs.js +0 -590
  209. package/lib/Buttongroup/docs/Buttongroup__custom.docs.js +0 -89
  210. package/lib/Buttongroup/docs/Buttongroup__footer.docs.js +0 -85
  211. package/lib/Buttongroup/docs/Buttongroup__header.docs.js +0 -98
  212. package/lib/Card/docs/Card__Custom.docs.js +0 -90
  213. package/lib/Card/docs/Card__Default.docs.js +0 -92
  214. package/lib/Card/docs/Card__Scroll.docs.js +0 -114
  215. package/lib/CheckBox/docs/CheckBox__custom.docs.js +0 -348
  216. package/lib/CheckBox/docs/CheckBox__default.docs.js +0 -273
  217. package/lib/DateTime/docs/DateTime__default.docs.js +0 -142
  218. package/lib/DateTime/docs/DateWidget__default.docs.js +0 -240
  219. package/lib/DateTime/docs/timezonedata.json +0 -1
  220. package/lib/DropBox/docs/DropBox__custom.docs.js +0 -122
  221. package/lib/DropBox/docs/DropBox__customOrder.docs.js +0 -141
  222. package/lib/DropBox/docs/DropBox__fixedPosition.docs.js +0 -140
  223. package/lib/DropBox/docs/DropBox__position.docs.js +0 -142
  224. package/lib/DropBox/docs/DropBox__size.docs.js +0 -116
  225. package/lib/DropDown/docs/DropDownHeading__custom.docs.js +0 -73
  226. package/lib/DropDown/docs/DropDownHeading__default.docs.js +0 -70
  227. package/lib/Label/docs/Label__clipped.docs.js +0 -81
  228. package/lib/Label/docs/Label__custom.docs.js +0 -85
  229. package/lib/Label/docs/Label__palette.docs.js +0 -96
  230. package/lib/Label/docs/Label__size.docs.js +0 -83
  231. package/lib/Label/docs/Label__type.docs.js +0 -91
  232. package/lib/Layout/docs/Layout__Hidden.docs.js +0 -127
  233. package/lib/Layout/docs/Layout__default.docs.js +0 -98
  234. package/lib/Layout/docs/Layout__four_Column.docs.js +0 -135
  235. package/lib/Layout/docs/Layout__three_Column.docs.js +0 -126
  236. package/lib/Layout/docs/Layout__two_Column.docs.js +0 -119
  237. package/lib/LightNightMode/docs/AlternativeColors.docs.js +0 -131
  238. package/lib/ListItem/docs/ListItemWithAvatar__custom.docs.js +0 -206
  239. package/lib/ListItem/docs/ListItemWithAvatar__default.docs.js +0 -162
  240. package/lib/ListItem/docs/ListItemWithCheckBox__custom.docs.js +0 -142
  241. package/lib/ListItem/docs/ListItemWithCheckBox__default.docs.js +0 -115
  242. package/lib/ListItem/docs/ListItemWithIcon__custom.docs.js +0 -119
  243. package/lib/ListItem/docs/ListItemWithIcon__default.docs.js +0 -112
  244. package/lib/ListItem/docs/ListItemWithRadio__custom.docs.js +0 -142
  245. package/lib/ListItem/docs/ListItemWithRadio__default.docs.js +0 -115
  246. package/lib/ListItem/docs/ListItem__custom.docs.js +0 -164
  247. package/lib/ListItem/docs/ListItem__default.docs.js +0 -131
  248. package/lib/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +0 -177
  249. package/lib/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +0 -165
  250. package/lib/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +0 -191
  251. package/lib/MultiSelect/docs/MultiSelect__default.docs.js +0 -214
  252. package/lib/PopOver/docs/PopOver__default.docs.js +0 -86
  253. package/lib/Provider/docs/Provider_Id__Class.docs.js +0 -77
  254. package/lib/Provider/docs/Provider_Id__Function.docs.js +0 -29
  255. package/lib/Provider/docs/Provider_Zindex__Class.docs.js +0 -80
  256. package/lib/Provider/docs/Provider_Zindex__Function.docs.js +0 -34
  257. package/lib/Radio/docs/Radio__custom.docs.js +0 -299
  258. package/lib/Radio/docs/Radio__default.docs.js +0 -222
  259. package/lib/Responsive/docs/Responsive__Custom.docs.js +0 -272
  260. package/lib/Responsive/docs/Responsive__default.docs.js +0 -142
  261. package/lib/Responsive/docs/style.module.css +0 -56
  262. package/lib/Ribbon/docs/Ribbon__custom.docs.js +0 -437
  263. package/lib/Ribbon/docs/Ribbon__default.docs.js +0 -392
  264. package/lib/RippleEffect/docs/RippleEffect__default.docs.js +0 -484
  265. package/lib/Select/docs/GroupSelect__default.docs.js +0 -199
  266. package/lib/Select/docs/SelectWithAvatar__default.docs.js +0 -152
  267. package/lib/Select/docs/SelectWithIcon__default.docs.js +0 -190
  268. package/lib/Select/docs/Select__default.docs.js +0 -340
  269. package/lib/Stencils/docs/Stencils__custom.docs.js +0 -96
  270. package/lib/Stencils/docs/Stencils__default.docs.js +0 -101
  271. package/lib/Switch/docs/Switch__custom.docs.js +0 -203
  272. package/lib/Switch/docs/Switch__default.docs.js +0 -156
  273. package/lib/Tab/docs/Tab__default.docs.js +0 -308
  274. package/lib/Tab/docs/tabdocs.module.css +0 -29
  275. package/lib/Tag/docs/Tag__custom.docs.js +0 -423
  276. package/lib/Tag/docs/Tag__default.docs.js +0 -307
  277. package/lib/TextBox/docs/TextBox__custom.docs.js +0 -98
  278. package/lib/TextBox/docs/TextBox__default.docs.js +0 -95
  279. package/lib/TextBox/docs/TextBox__size.docs.js +0 -93
  280. package/lib/TextBox/docs/TextBox__variant.docs.js +0 -93
  281. package/lib/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +0 -145
  282. package/lib/TextBoxIcon/docs/TextBoxIcon__default.docs.js +0 -117
  283. package/lib/Textarea/docs/Textarea__animated.docs.js +0 -95
  284. package/lib/Textarea/docs/Textarea__custom.docs.js +0 -137
  285. package/lib/Textarea/docs/Textarea__default.docs.js +0 -130
  286. package/lib/Textarea/docs/Textarea__disabled.docs.js +0 -83
  287. package/lib/Tooltip/docs/Tooltip__default.docs.js +0 -391
  288. package/lib/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +0 -150
  289. package/lib/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +0 -206
  290. package/lib/a11y/FocusScope/docs/FocusScope__default.docs.js +0 -191
  291. package/lib/beta/FocusRing/docs/FocusRing__default.docs.js +0 -101
  292. package/lib/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +0 -145
  293. package/lib/semantic/Button/docs/Button__default.docs.js +0 -66
  294. package/preprocess/componentAppearanceColors.js +0 -65
  295. package/preprocess/componentThemeColors.js +0 -119
  296. package/preprocess/ctaThemeColors.js +0 -95
  297. package/preprocess/index.js +0 -3
  298. package/preprocess/json/componentAppearanceVariableJson.js +0 -1515
  299. package/preprocess/json/componentThemeVariableJson.js +0 -259
  300. package/preprocess/json/ctaThemeVariableJson.js +0 -337
@@ -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
- };