@dktunited-techoff/techoff-suite-ui 0.8.5 → 0.8.7

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 (295) hide show
  1. package/package.json +1 -1
  2. package/src/components/Icon/icons/index.ts +1 -1
  3. package/src/layouts/Header/Header.css +15 -23
  4. package/src/layouts/Header/Header.tsx +9 -4
  5. package/src/layouts/Header/Header.types.ts +1 -0
  6. package/src/layouts/Header/__stories__/Header.stories.mdx +11 -3
  7. package/src/layouts/Navigation/Navigation.css +1 -1
  8. package/esm/assets/fonts/Montserrat-Medium.ttf +0 -0
  9. package/esm/components/Button/Button.css +0 -93
  10. package/esm/components/Button/Button.d.ts +0 -5
  11. package/esm/components/Button/Button.js +0 -17
  12. package/esm/components/Button/Button.js.map +0 -1
  13. package/esm/components/Button/Button.types.d.ts +0 -9
  14. package/esm/components/Button/Button.types.js +0 -2
  15. package/esm/components/Button/Button.types.js.map +0 -1
  16. package/esm/components/Button/__stories__/Button.stories.mdx +0 -74
  17. package/esm/components/Checkbox/Checkbox.css +0 -61
  18. package/esm/components/Checkbox/Checkbox.d.ts +0 -7
  19. package/esm/components/Checkbox/Checkbox.js +0 -21
  20. package/esm/components/Checkbox/Checkbox.js.map +0 -1
  21. package/esm/components/Checkbox/Checkbox.types.d.ts +0 -4
  22. package/esm/components/Checkbox/Checkbox.types.js +0 -2
  23. package/esm/components/Checkbox/Checkbox.types.js.map +0 -1
  24. package/esm/components/Checkbox/__stories__/Checkbox.stories.mdx +0 -43
  25. package/esm/components/Icon/Icon.css +0 -26
  26. package/esm/components/Icon/Icon.d.ts +0 -4
  27. package/esm/components/Icon/Icon.js +0 -12
  28. package/esm/components/Icon/Icon.js.map +0 -1
  29. package/esm/components/Icon/Icon.types.d.ts +0 -4
  30. package/esm/components/Icon/Icon.types.js +0 -2
  31. package/esm/components/Icon/Icon.types.js.map +0 -1
  32. package/esm/components/Icon/__stories__/Icon.stories.mdx +0 -88
  33. package/esm/components/Icon/icons/alert-fill.svg +0 -1
  34. package/esm/components/Icon/icons/alert-line.svg +0 -1
  35. package/esm/components/Icon/icons/arrow-back.svg +0 -1
  36. package/esm/components/Icon/icons/arrow-down.svg +0 -1
  37. package/esm/components/Icon/icons/arrow-left.svg +0 -1
  38. package/esm/components/Icon/icons/arrow-right-.svg +0 -1
  39. package/esm/components/Icon/icons/arrow-up.svg +0 -1
  40. package/esm/components/Icon/icons/arrows-up-down.svg +0 -1
  41. package/esm/components/Icon/icons/check-circle-fill.svg +0 -1
  42. package/esm/components/Icon/icons/check-circle.svg +0 -1
  43. package/esm/components/Icon/icons/check.svg +0 -1
  44. package/esm/components/Icon/icons/chevron-down.svg +0 -1
  45. package/esm/components/Icon/icons/chevron-left.svg +0 -1
  46. package/esm/components/Icon/icons/chevron-right.svg +0 -1
  47. package/esm/components/Icon/icons/chevron-up.svg +0 -1
  48. package/esm/components/Icon/icons/circle.svg +0 -1
  49. package/esm/components/Icon/icons/dots-vertical.svg +0 -1
  50. package/esm/components/Icon/icons/download.svg +0 -1
  51. package/esm/components/Icon/icons/edit.svg +0 -1
  52. package/esm/components/Icon/icons/external-link.svg +0 -1
  53. package/esm/components/Icon/icons/filter-off.svg +0 -1
  54. package/esm/components/Icon/icons/filter.svg +0 -1
  55. package/esm/components/Icon/icons/header-bikestudio.svg +0 -32
  56. package/esm/components/Icon/icons/header-nsc-helmet.svg +0 -32
  57. package/esm/components/Icon/icons/header-opticost.svg +0 -32
  58. package/esm/components/Icon/icons/heart-fill.svg +0 -1
  59. package/esm/components/Icon/icons/heart.svg +0 -1
  60. package/esm/components/Icon/icons/home.svg +0 -1
  61. package/esm/components/Icon/icons/houglass.svg +0 -1
  62. package/esm/components/Icon/icons/in-progress.svg +0 -18
  63. package/esm/components/Icon/icons/index.d.ts +0 -3
  64. package/esm/components/Icon/icons/index.js +0 -49
  65. package/esm/components/Icon/icons/index.js.map +0 -1
  66. package/esm/components/Icon/icons/index.ts +0 -48
  67. package/esm/components/Icon/icons/lightning-off.svg +0 -1
  68. package/esm/components/Icon/icons/lightning.svg +0 -1
  69. package/esm/components/Icon/icons/list-settings.svg +0 -1
  70. package/esm/components/Icon/icons/lock.svg +0 -1
  71. package/esm/components/Icon/icons/plus-circle.svg +0 -1
  72. package/esm/components/Icon/icons/plus.svg +0 -1
  73. package/esm/components/Icon/icons/search.svg +0 -1
  74. package/esm/components/Icon/icons/seed-2.svg +0 -1
  75. package/esm/components/Icon/icons/square-check-fill.svg +0 -1
  76. package/esm/components/Icon/icons/square.svg +0 -1
  77. package/esm/components/Icon/icons/tools.svg +0 -1
  78. package/esm/components/Icon/icons/user.svg +0 -1
  79. package/esm/components/Icon/icons/waiting-validation.svg +0 -19
  80. package/esm/components/Icon/icons/x-circle-fill.svg +0 -1
  81. package/esm/components/Icon/icons/x.svg +0 -1
  82. package/esm/components/Inputs/BooleanInput/BooleanInput.css +0 -51
  83. package/esm/components/Inputs/BooleanInput/BooleanInput.d.ts +0 -4
  84. package/esm/components/Inputs/BooleanInput/BooleanInput.js +0 -13
  85. package/esm/components/Inputs/BooleanInput/BooleanInput.js.map +0 -1
  86. package/esm/components/Inputs/BooleanInput/BooleanInput.tsx +0 -24
  87. package/esm/components/Inputs/BooleanInput/BooleanInput.types.d.ts +0 -7
  88. package/esm/components/Inputs/BooleanInput/BooleanInput.types.js +0 -2
  89. package/esm/components/Inputs/BooleanInput/BooleanInput.types.js.map +0 -1
  90. package/esm/components/Inputs/BooleanInput/BooleanInput.types.ts +0 -7
  91. package/esm/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +0 -44
  92. package/esm/components/Inputs/TextInput/TextInput.css +0 -42
  93. package/esm/components/Inputs/TextInput/TextInput.d.ts +0 -4
  94. package/esm/components/Inputs/TextInput/TextInput.js +0 -16
  95. package/esm/components/Inputs/TextInput/TextInput.js.map +0 -1
  96. package/esm/components/Inputs/TextInput/TextInput.tsx +0 -24
  97. package/esm/components/Inputs/TextInput/TextInput.types.d.ts +0 -8
  98. package/esm/components/Inputs/TextInput/TextInput.types.js +0 -2
  99. package/esm/components/Inputs/TextInput/TextInput.types.js.map +0 -1
  100. package/esm/components/Inputs/TextInput/TextInput.types.ts +0 -8
  101. package/esm/components/Inputs/TextInput/__stories__/TextInput.stories.mdx +0 -55
  102. package/esm/components/Loader/Loader.css +0 -42
  103. package/esm/components/Loader/Loader.d.ts +0 -4
  104. package/esm/components/Loader/Loader.js +0 -6
  105. package/esm/components/Loader/Loader.js.map +0 -1
  106. package/esm/components/Loader/Loader.types.d.ts +0 -3
  107. package/esm/components/Loader/Loader.types.js +0 -2
  108. package/esm/components/Loader/Loader.types.js.map +0 -1
  109. package/esm/components/Loader/__stories__/Loader.stories.mdx +0 -30
  110. package/esm/index.d.ts +0 -9
  111. package/esm/index.js +0 -10
  112. package/esm/index.js.map +0 -1
  113. package/esm/layouts/Header/Header.css +0 -83
  114. package/esm/layouts/Header/Header.d.ts +0 -4
  115. package/esm/layouts/Header/Header.js +0 -14
  116. package/esm/layouts/Header/Header.js.map +0 -1
  117. package/esm/layouts/Header/Header.types.d.ts +0 -4
  118. package/esm/layouts/Header/Header.types.js +0 -2
  119. package/esm/layouts/Header/Header.types.js.map +0 -1
  120. package/esm/layouts/Header/HeaderActions.d.ts +0 -3
  121. package/esm/layouts/Header/HeaderActions.js +0 -7
  122. package/esm/layouts/Header/HeaderActions.js.map +0 -1
  123. package/esm/layouts/Header/HeaderProfile.d.ts +0 -3
  124. package/esm/layouts/Header/HeaderProfile.js +0 -16
  125. package/esm/layouts/Header/HeaderProfile.js.map +0 -1
  126. package/esm/layouts/Header/HeaderTitle.d.ts +0 -3
  127. package/esm/layouts/Header/HeaderTitle.js +0 -11
  128. package/esm/layouts/Header/HeaderTitle.js.map +0 -1
  129. package/esm/layouts/Header/__stories__/Header.stories.mdx +0 -36
  130. package/esm/layouts/Navigation/Navigation.css +0 -74
  131. package/esm/layouts/Navigation/Navigation.d.ts +0 -4
  132. package/esm/layouts/Navigation/Navigation.js +0 -15
  133. package/esm/layouts/Navigation/Navigation.js.map +0 -1
  134. package/esm/layouts/Navigation/Navigation.types.d.ts +0 -5
  135. package/esm/layouts/Navigation/Navigation.types.js +0 -2
  136. package/esm/layouts/Navigation/Navigation.types.js.map +0 -1
  137. package/esm/layouts/Navigation/NavigationActions.d.ts +0 -4
  138. package/esm/layouts/Navigation/NavigationActions.js +0 -4
  139. package/esm/layouts/Navigation/NavigationActions.js.map +0 -1
  140. package/esm/layouts/Navigation/NavigationBreadcrumb.d.ts +0 -6
  141. package/esm/layouts/Navigation/NavigationBreadcrumb.js +0 -26
  142. package/esm/layouts/Navigation/NavigationBreadcrumb.js.map +0 -1
  143. package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx +0 -46
  144. package/esm/utils/string.utils.d.ts +0 -1
  145. package/esm/utils/string.utils.js +0 -2
  146. package/esm/utils/string.utils.js.map +0 -1
  147. package/esm/utils/validator.utils.d.ts +0 -2
  148. package/esm/utils/validator.utils.js +0 -5
  149. package/esm/utils/validator.utils.js.map +0 -1
  150. package/lib/assets/fonts/Montserrat-Medium.ttf +0 -0
  151. package/lib/components/Button/Button.css +0 -93
  152. package/lib/components/Button/Button.d.ts +0 -5
  153. package/lib/components/Button/Button.js +0 -21
  154. package/lib/components/Button/Button.js.map +0 -1
  155. package/lib/components/Button/Button.types.d.ts +0 -9
  156. package/lib/components/Button/Button.types.js +0 -3
  157. package/lib/components/Button/Button.types.js.map +0 -1
  158. package/lib/components/Button/__stories__/Button.stories.mdx +0 -74
  159. package/lib/components/Checkbox/Checkbox.css +0 -61
  160. package/lib/components/Checkbox/Checkbox.d.ts +0 -7
  161. package/lib/components/Checkbox/Checkbox.js +0 -27
  162. package/lib/components/Checkbox/Checkbox.js.map +0 -1
  163. package/lib/components/Checkbox/Checkbox.types.d.ts +0 -4
  164. package/lib/components/Checkbox/Checkbox.types.js +0 -3
  165. package/lib/components/Checkbox/Checkbox.types.js.map +0 -1
  166. package/lib/components/Checkbox/__stories__/Checkbox.stories.mdx +0 -43
  167. package/lib/components/Icon/Icon.css +0 -26
  168. package/lib/components/Icon/Icon.d.ts +0 -4
  169. package/lib/components/Icon/Icon.js +0 -16
  170. package/lib/components/Icon/Icon.js.map +0 -1
  171. package/lib/components/Icon/Icon.types.d.ts +0 -4
  172. package/lib/components/Icon/Icon.types.js +0 -3
  173. package/lib/components/Icon/Icon.types.js.map +0 -1
  174. package/lib/components/Icon/__stories__/Icon.stories.mdx +0 -88
  175. package/lib/components/Icon/icons/alert-fill.svg +0 -1
  176. package/lib/components/Icon/icons/alert-line.svg +0 -1
  177. package/lib/components/Icon/icons/arrow-back.svg +0 -1
  178. package/lib/components/Icon/icons/arrow-down.svg +0 -1
  179. package/lib/components/Icon/icons/arrow-left.svg +0 -1
  180. package/lib/components/Icon/icons/arrow-right-.svg +0 -1
  181. package/lib/components/Icon/icons/arrow-up.svg +0 -1
  182. package/lib/components/Icon/icons/arrows-up-down.svg +0 -1
  183. package/lib/components/Icon/icons/check-circle-fill.svg +0 -1
  184. package/lib/components/Icon/icons/check-circle.svg +0 -1
  185. package/lib/components/Icon/icons/check.svg +0 -1
  186. package/lib/components/Icon/icons/chevron-down.svg +0 -1
  187. package/lib/components/Icon/icons/chevron-left.svg +0 -1
  188. package/lib/components/Icon/icons/chevron-right.svg +0 -1
  189. package/lib/components/Icon/icons/chevron-up.svg +0 -1
  190. package/lib/components/Icon/icons/circle.svg +0 -1
  191. package/lib/components/Icon/icons/dots-vertical.svg +0 -1
  192. package/lib/components/Icon/icons/download.svg +0 -1
  193. package/lib/components/Icon/icons/edit.svg +0 -1
  194. package/lib/components/Icon/icons/external-link.svg +0 -1
  195. package/lib/components/Icon/icons/filter-off.svg +0 -1
  196. package/lib/components/Icon/icons/filter.svg +0 -1
  197. package/lib/components/Icon/icons/header-bikestudio.svg +0 -32
  198. package/lib/components/Icon/icons/header-nsc-helmet.svg +0 -32
  199. package/lib/components/Icon/icons/header-opticost.svg +0 -32
  200. package/lib/components/Icon/icons/header-reparability.svg +0 -32
  201. package/lib/components/Icon/icons/heart-fill.svg +0 -1
  202. package/lib/components/Icon/icons/heart.svg +0 -1
  203. package/lib/components/Icon/icons/home.svg +0 -1
  204. package/lib/components/Icon/icons/houglass.svg +0 -1
  205. package/lib/components/Icon/icons/in-progress.svg +0 -18
  206. package/lib/components/Icon/icons/index.d.ts +0 -3
  207. package/lib/components/Icon/icons/index.js +0 -52
  208. package/lib/components/Icon/icons/index.js.map +0 -1
  209. package/lib/components/Icon/icons/index.ts +0 -48
  210. package/lib/components/Icon/icons/lightning-off.svg +0 -1
  211. package/lib/components/Icon/icons/lightning.svg +0 -1
  212. package/lib/components/Icon/icons/list-settings.svg +0 -1
  213. package/lib/components/Icon/icons/lock.svg +0 -1
  214. package/lib/components/Icon/icons/plus-circle.svg +0 -1
  215. package/lib/components/Icon/icons/plus.svg +0 -1
  216. package/lib/components/Icon/icons/search.svg +0 -1
  217. package/lib/components/Icon/icons/seed-2.svg +0 -1
  218. package/lib/components/Icon/icons/square-check-fill.svg +0 -1
  219. package/lib/components/Icon/icons/square.svg +0 -1
  220. package/lib/components/Icon/icons/tools.svg +0 -1
  221. package/lib/components/Icon/icons/user.svg +0 -1
  222. package/lib/components/Icon/icons/waiting-validation.svg +0 -19
  223. package/lib/components/Icon/icons/x-circle-fill.svg +0 -1
  224. package/lib/components/Icon/icons/x.svg +0 -1
  225. package/lib/components/Inputs/BooleanInput/BooleanInput.css +0 -51
  226. package/lib/components/Inputs/BooleanInput/BooleanInput.d.ts +0 -4
  227. package/lib/components/Inputs/BooleanInput/BooleanInput.js +0 -17
  228. package/lib/components/Inputs/BooleanInput/BooleanInput.js.map +0 -1
  229. package/lib/components/Inputs/BooleanInput/BooleanInput.tsx +0 -24
  230. package/lib/components/Inputs/BooleanInput/BooleanInput.types.d.ts +0 -7
  231. package/lib/components/Inputs/BooleanInput/BooleanInput.types.js +0 -3
  232. package/lib/components/Inputs/BooleanInput/BooleanInput.types.js.map +0 -1
  233. package/lib/components/Inputs/BooleanInput/BooleanInput.types.ts +0 -7
  234. package/lib/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +0 -44
  235. package/lib/components/Inputs/TextInput/TextInput.css +0 -42
  236. package/lib/components/Inputs/TextInput/TextInput.d.ts +0 -4
  237. package/lib/components/Inputs/TextInput/TextInput.js +0 -20
  238. package/lib/components/Inputs/TextInput/TextInput.js.map +0 -1
  239. package/lib/components/Inputs/TextInput/TextInput.tsx +0 -24
  240. package/lib/components/Inputs/TextInput/TextInput.types.d.ts +0 -8
  241. package/lib/components/Inputs/TextInput/TextInput.types.js +0 -3
  242. package/lib/components/Inputs/TextInput/TextInput.types.js.map +0 -1
  243. package/lib/components/Inputs/TextInput/TextInput.types.ts +0 -8
  244. package/lib/components/Inputs/TextInput/__stories__/TextInput.stories.mdx +0 -55
  245. package/lib/components/Loader/Loader.css +0 -42
  246. package/lib/components/Loader/Loader.d.ts +0 -4
  247. package/lib/components/Loader/Loader.js +0 -10
  248. package/lib/components/Loader/Loader.js.map +0 -1
  249. package/lib/components/Loader/Loader.types.d.ts +0 -3
  250. package/lib/components/Loader/Loader.types.js +0 -3
  251. package/lib/components/Loader/Loader.types.js.map +0 -1
  252. package/lib/components/Loader/__stories__/Loader.stories.mdx +0 -30
  253. package/lib/index.d.ts +0 -9
  254. package/lib/index.js +0 -26
  255. package/lib/index.js.map +0 -1
  256. package/lib/layouts/Header/Header.css +0 -83
  257. package/lib/layouts/Header/Header.d.ts +0 -4
  258. package/lib/layouts/Header/Header.js +0 -18
  259. package/lib/layouts/Header/Header.js.map +0 -1
  260. package/lib/layouts/Header/Header.types.d.ts +0 -4
  261. package/lib/layouts/Header/Header.types.js +0 -3
  262. package/lib/layouts/Header/Header.types.js.map +0 -1
  263. package/lib/layouts/Header/HeaderActions.d.ts +0 -3
  264. package/lib/layouts/Header/HeaderActions.js +0 -11
  265. package/lib/layouts/Header/HeaderActions.js.map +0 -1
  266. package/lib/layouts/Header/HeaderProfile.d.ts +0 -3
  267. package/lib/layouts/Header/HeaderProfile.js +0 -20
  268. package/lib/layouts/Header/HeaderProfile.js.map +0 -1
  269. package/lib/layouts/Header/HeaderTitle.d.ts +0 -3
  270. package/lib/layouts/Header/HeaderTitle.js +0 -15
  271. package/lib/layouts/Header/HeaderTitle.js.map +0 -1
  272. package/lib/layouts/Header/__stories__/Header.stories.mdx +0 -36
  273. package/lib/layouts/Navigation/Navigation.css +0 -74
  274. package/lib/layouts/Navigation/Navigation.d.ts +0 -4
  275. package/lib/layouts/Navigation/Navigation.js +0 -19
  276. package/lib/layouts/Navigation/Navigation.js.map +0 -1
  277. package/lib/layouts/Navigation/Navigation.types.d.ts +0 -5
  278. package/lib/layouts/Navigation/Navigation.types.js +0 -3
  279. package/lib/layouts/Navigation/Navigation.types.js.map +0 -1
  280. package/lib/layouts/Navigation/NavigationActions.d.ts +0 -4
  281. package/lib/layouts/Navigation/NavigationActions.js +0 -8
  282. package/lib/layouts/Navigation/NavigationActions.js.map +0 -1
  283. package/lib/layouts/Navigation/NavigationBreadcrumb.d.ts +0 -6
  284. package/lib/layouts/Navigation/NavigationBreadcrumb.js +0 -31
  285. package/lib/layouts/Navigation/NavigationBreadcrumb.js.map +0 -1
  286. package/lib/layouts/Navigation/__stories__/Navigation.stories.mdx +0 -46
  287. package/lib/utils/string.utils.d.ts +0 -1
  288. package/lib/utils/string.utils.js +0 -6
  289. package/lib/utils/string.utils.js.map +0 -1
  290. package/lib/utils/validator.utils.d.ts +0 -2
  291. package/lib/utils/validator.utils.js +0 -9
  292. package/lib/utils/validator.utils.js.map +0 -1
  293. package/src/components/Icon/icons/header-reparability.svg +0 -32
  294. package/src/layouts/Header/HeaderTitle.tsx +0 -17
  295. /package/{esm/components/Icon/icons/header-reparability.svg → src/components/Icon/icons/header-repairability.svg} +0 -0
@@ -1,7 +0,0 @@
1
- import * as React from 'react';
2
- export const HeaderActions = ({ children }) => {
3
- // #########
4
- // Rendering
5
- return React.createElement("div", { className: "header-actions" }, children);
6
- };
7
- //# sourceMappingURL=HeaderActions.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"HeaderActions.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC/D,YAAY;IACZ,YAAY;IACZ,OAAO,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAAC;AAC1D,CAAC,CAAC"}
@@ -1,3 +0,0 @@
1
- import * as React from 'react';
2
- import { HeaderProfileProps } from './Header.types';
3
- export declare const HeaderProfile: ({ firstname, lastname }: HeaderProfileProps) => React.JSX.Element;
@@ -1,16 +0,0 @@
1
- import * as React from 'react';
2
- import { Icon } from '../../components/Icon/Icon';
3
- import { capitalize } from '../../utils/string.utils';
4
- export const HeaderProfile = ({ firstname, lastname }) => {
5
- // #########
6
- // Rendering
7
- return (React.createElement("div", { className: "header-profile" },
8
- React.createElement("div", { className: "header-profile--icon" },
9
- React.createElement(Icon, { name: "user", size: "16" })),
10
- React.createElement("div", { className: "header-profile--name" },
11
- capitalize(firstname),
12
- " ",
13
- lastname.charAt(0).toUpperCase(),
14
- ".")));
15
- };
16
- //# sourceMappingURL=HeaderProfile.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"HeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderProfile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC3E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB;QAC7B,6BAAK,SAAS,EAAC,sBAAsB;YACnC,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC1B;QAEN,6BAAK,SAAS,EAAC,sBAAsB;YAClC,UAAU,CAAC,SAAS,CAAC;;YAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;gBACrD,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,3 +0,0 @@
1
- import * as React from 'react';
2
- import { PropsWithChildren } from 'react';
3
- export declare const HeaderTitle: ({ children }: PropsWithChildren) => React.JSX.Element;
@@ -1,11 +0,0 @@
1
- import * as React from 'react';
2
- const svg = '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 335 62.6" style="enable-background:new 0 0 335 62.6;" xml:space="preserve"><style type="text/css"> .st0{fill:#0883C4;} .st1{fill:#FFFFFF;}</style><path d="M126.2,24.4c-3.1-3.3-7.4-5.3-12.4-5.3c-9.2,0-16,6.8-16,16.1c0,9.3,6.7,16.2,16,16.2c5.3,0,9.6-2.4,12.6-6l8.1,7.3 c-5.4,6.5-12.1,9.8-20.7,9.8C98,62.6,86.4,51,86.4,35.3C86.4,19.5,98,8,113.8,8c8.2,0,15.4,3,20.3,8.5L126.2,24.4z"/><polygon points="46.8,9.5 80.3,9.5 80.3,19.9 58,19.9 58,30.8 77.3,30.8 77.3,40.9 58,40.9 58,52.1 80.3,52.1 80.3,62.6 46.8,62.6 "/><polygon points="265.4,8.7 297,8.7 297,19.2 276.6,19.2 276.6,32.6 294,32.6 294,42.8 276.6,42.8 276.6,61.8 265.4,61.8 "/><polygon points="303.4,8.7 335,8.7 335,19.2 314.6,19.2 314.6,32.6 332,32.6 332,42.8 314.6,42.8 314.6,61.8 303.4,61.8 "/><polygon points="174.5,40.1 152,40.1 152,61.8 140.8,61.8 140.8,8.7 152,8.7 152,29.2 174.5,29.2 174.5,8.7 185.7,8.7 185.7,61.8 174.5,61.8 "/><polygon points="0,9.5 40.3,9.5 40.3,20.4 25.8,20.4 25.8,62.6 14.6,62.6 14.6,20.4 0,20.4 "/><polyline points="188.4,15.9 198.6,0 209.9,0 199.7,15.9 188.4,15.9 "/><path d="M231.7,8c-15.8,0-27.4,11.5-27.4,27.3c0,15.8,11.6,27.3,27.4,27.3c15.7,0,27.2-11.5,27.2-27.3C258.9,19.5,247.4,8,231.7,8z" /><polygon class="st0" points="208,36.3 243.1,15.9 243,56.6 "/><polygon class="st1" points="231.1,56.7 230.6,37.4 214.2,47.6 "/></svg>';
3
- export const HeaderTitle = ({ children }) => {
4
- // #########
5
- // Rendering
6
- return (React.createElement("div", { className: "header-title-container" },
7
- React.createElement("div", { className: "header-title" }, children),
8
- React.createElement("div", { className: "header-by" }, "BY"),
9
- React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: svg } })));
10
- };
11
- //# sourceMappingURL=HeaderTitle.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"HeaderTitle.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,GAAG,GACP,wjDAAwjD,CAAC;AAE3jD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC7D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,6BAAK,SAAS,EAAC,cAAc,IAAE,QAAQ,CAAO;QAC9C,6BAAK,SAAS,EAAC,WAAW,SAAS;QACnC,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,CACxE,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,36 +0,0 @@
1
- import React from 'react';
2
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Header } from '../Header';
4
- import { HeaderActions } from '../HeaderActions';
5
- import { HeaderTitle } from '../HeaderTitle';
6
- import { HeaderProfile } from '../HeaderProfile';
7
- import { Button } from '../../../components/Button/Button';
8
-
9
- <Meta title="Layouts/Header" />
10
-
11
- # Header
12
-
13
- The header will allow users to quickly find the information they need at a glance but also make some actions. The header is therefore central in the design of each application: it contains all the essential information, obvious shortcuts, which will help boost Deacthlon Techoff brand image.
14
-
15
- ## Overview
16
-
17
- <Canvas>
18
- <Story
19
- name="Overview"
20
- args={{
21
- children: [
22
- <HeaderTitle>Techoff Suite UI</HeaderTitle>,
23
- <HeaderActions>
24
- <Button icon="plus" size="lg" variant="shadow" rounded onClick={() => {}} />
25
- <HeaderProfile firstname="John" lastname="Doe" />
26
- </HeaderActions>,
27
- ],
28
- }}
29
- >
30
- {args => <Header>{args.children}</Header>}
31
- </Story>
32
- </Canvas>
33
-
34
- ## Props
35
-
36
- <ArgsTable story="Overview" of={Header} />
@@ -1,74 +0,0 @@
1
- .navigation {
2
- display: flex;
3
- align-items: center;
4
- height: 32px;
5
- padding: 0 24px;
6
- }
7
-
8
- /* ############ */
9
- /* BREADCRUMB */
10
- .breadcrumb {
11
- display: flex;
12
- align-items: center;
13
- padding-right: 20px;
14
- }
15
- .breadcrumb-container {
16
- display: flex;
17
- align-items: center;
18
- }
19
- .breadcrumb-chevron {
20
- padding: 0 8px;
21
- color: #00689d;
22
- }
23
- .breadcrumb-item {
24
- display: flex;
25
- align-items: center;
26
- height: 32px;
27
- border-radius: 9999px;
28
- color: #00689d;
29
- }
30
- .breadcrumb-item--highlight {
31
- padding: 0 20px;
32
- box-shadow: 0px 6px 6px 0px #00537d1a;
33
- background: linear-gradient(270.22deg, #007dbc 43.94%, #7ebee0 114.83%);
34
- color: #ffffff;
35
- }
36
- .breadcrumb-item--link {
37
- cursor: pointer;
38
- }
39
- .breadcrumb-item--link:hover {
40
- text-decoration: underline;
41
- }
42
- .breadcrumb-item--icon {
43
- padding-right: 8px;
44
- }
45
-
46
- /* ######### */
47
- /* DIVIDER */
48
- .navigation-divider {
49
- flex: 1;
50
- height: 1px;
51
- margin: 4px 0;
52
- background: #b3bac3;
53
- }
54
-
55
- /* ######### */
56
- /* ACTIONS */
57
- .navigation-actions {
58
- /* flex items-center [&>*]:ml-4 */
59
- display: flex;
60
- align-items: center;
61
- }
62
- .navigation-actions > * {
63
- margin-left: 16px;
64
- }
65
-
66
- /* ######### */
67
- /* GLOBALS */
68
- * {
69
- font-size: 14px;
70
- outline: none;
71
- box-sizing: border-box;
72
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
73
- 'Helvetica Neue', sans-serif;
74
- }
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { PropsWithChildren } from 'react';
3
- import './Navigation.css';
4
- export declare const Navigation: ({ children }: PropsWithChildren) => React.JSX.Element;
@@ -1,15 +0,0 @@
1
- import * as React from 'react';
2
- import { Children } from 'react';
3
- import { isSuiteElement } from '../../utils/validator.utils';
4
- import './Navigation.css';
5
- export const Navigation = ({ children }) => {
6
- const breadcrumbElement = Children.toArray(children).find(c => isSuiteElement(c, 'NavigationBreadcrumb'));
7
- const actionsElement = Children.toArray(children).find(c => isSuiteElement(c, 'NavigationActions'));
8
- // #########
9
- // Rendering
10
- return (React.createElement("div", { className: "navigation" },
11
- breadcrumbElement,
12
- React.createElement("div", { className: "navigation-divider" }),
13
- actionsElement));
14
- };
15
- //# sourceMappingURL=Navigation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC5D,MAAM,iBAAiB,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAC1G,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEpG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACxB,iBAAiB;QAClB,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACrC,cAAc,CACX,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,5 +0,0 @@
1
- export type NavigationBreadcrumbItemProps = {
2
- icon?: string;
3
- highlight?: boolean;
4
- onClick?: () => void;
5
- };
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=Navigation.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Navigation.types.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.types.ts"],"names":[],"mappings":""}
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { PropsWithChildren } from 'react';
3
- import './Navigation.css';
4
- export declare const NavigationActions: ({ children }: PropsWithChildren) => React.JSX.Element;
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import './Navigation.css';
3
- export const NavigationActions = ({ children }) => (React.createElement("div", { className: "navigation-actions" }, children));
4
- //# sourceMappingURL=NavigationActions.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NavigationActions.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/NavigationActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,CACpE,6BAAK,SAAS,EAAC,oBAAoB,IAAE,QAAQ,CAAO,CACrD,CAAC"}
@@ -1,6 +0,0 @@
1
- import * as React from 'react';
2
- import { PropsWithChildren } from 'react';
3
- import { NavigationBreadcrumbItemProps } from './Navigation.types';
4
- import './Navigation.css';
5
- export declare const NavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<NavigationBreadcrumbItemProps>) => React.JSX.Element;
6
- export declare const NavigationBreadcrumb: ({ children }: PropsWithChildren) => React.JSX.Element;
@@ -1,26 +0,0 @@
1
- import * as React from 'react';
2
- import { Children } from 'react';
3
- import { Icon } from '../../components/Icon/Icon';
4
- import { isSuiteElement } from '../../utils/validator.utils';
5
- import './Navigation.css';
6
- export const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
7
- // #########
8
- // Rendering
9
- return (React.createElement("div", { className: `
10
- breadcrumb-item
11
- ${highlight ? 'breadcrumb-item--highlight' : ''} ${onClick ? 'breadcrumb-item--link' : ''}
12
- `, onClick: onClick },
13
- icon && (React.createElement("div", { className: "breadcrumb-item--icon" },
14
- React.createElement(Icon, { name: icon, size: "16" }))),
15
- children));
16
- };
17
- export const NavigationBreadcrumb = ({ children }) => {
18
- const breadcrumbItemElements = Children.toArray(children).filter(c => isSuiteElement(c, 'NavigationBreadcrumbItem'));
19
- // #########
20
- // Rendering
21
- return (React.createElement("div", { className: "breadcrumb" }, breadcrumbItemElements.map((child, index) => (React.createElement("div", { key: index, className: "breadcrumb-container" },
22
- child,
23
- index !== breadcrumbItemElements.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
24
- React.createElement(Icon, { name: "chevron-right" }))))))));
25
- };
26
- //# sourceMappingURL=NavigationBreadcrumb.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NavigationBreadcrumb.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/NavigationBreadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACtE,MAAM,sBAAsB,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC;IAErH,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY,IACxB,sBAAsB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;QAC9C,KAAK;QAEL,KAAK,KAAK,sBAAsB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9C,6BAAK,SAAS,EAAC,oBAAoB;YACjC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,46 +0,0 @@
1
- import React from 'react';
2
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Navigation } from '../Navigation';
4
- import { NavigationBreadcrumb, NavigationBreadcrumbItem } from '../NavigationBreadcrumb';
5
- import { NavigationActions } from '../NavigationActions';
6
- import { Button } from '../../../components/Button/Button';
7
- import { icons } from '../../../components/Icon/icons';
8
-
9
- <Meta title="Layouts/Navigation" />
10
-
11
- # Navigation
12
-
13
- Breadcrumbs are an important navigation component that shows content hierarchy. They allow users to be aware of their current location in the hierarchical structure of the application. Breadcrumbs enable users to quickly move up to a parent level. Moreover this navigation component allows user to make some actions.
14
-
15
- ## Overview
16
-
17
- <Canvas>
18
- <Story
19
- name="Overview"
20
- args={{
21
- children: [
22
- <NavigationBreadcrumb>
23
- <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
24
- Home
25
- </NavigationBreadcrumbItem>
26
- <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
27
- <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
28
- </NavigationBreadcrumb>,
29
- <NavigationActions>
30
- <Button icon="check" onClick={() => {}}>
31
- Action 1
32
- </Button>
33
- <Button icon="plus" onClick={() => {}}>
34
- Action 2
35
- </Button>
36
- </NavigationActions>,
37
- ],
38
- }}
39
- >
40
- {args => <Navigation>{args.children}</Navigation>}
41
- </Story>
42
- </Canvas>
43
-
44
- ## Props
45
-
46
- <ArgsTable story="Overview" of={Navigation} />
@@ -1 +0,0 @@
1
- export declare const capitalize: (str: string) => string;
@@ -1,2 +0,0 @@
1
- export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
2
- //# sourceMappingURL=string.utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"string.utils.js","sourceRoot":"","sources":["../../src/utils/string.utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC"}
@@ -1,2 +0,0 @@
1
- import { JSXElementConstructor, ReactElement, ReactNode, ReactPortal } from 'react';
2
- export declare const isSuiteElement: (element: string | number | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal, name: string) => boolean;
@@ -1,5 +0,0 @@
1
- import { isValidElement } from 'react';
2
- export const isSuiteElement = (element, name) => {
3
- return isValidElement(element) && typeof element.type === 'function' && element.type.name === name;
4
- };
5
- //# sourceMappingURL=validator.utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"validator.utils.js","sourceRoot":"","sources":["../../src/utils/validator.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+D,cAAc,EAAE,MAAM,OAAO,CAAC;AAEpG,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,OAAqH,EACrH,IAAY,EACZ,EAAE;IACF,OAAO,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,OAAO,CAAC,IAAI,KAAK,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC;AACrG,CAAC,CAAC"}
@@ -1,93 +0,0 @@
1
- .button {
2
- display: flex;
3
- align-items: center;
4
- justify-content: center;
5
- border: none;
6
- border-radius: 6px;
7
- font-size: 14px;
8
- line-height: 16px;
9
- font-weight: 500;
10
- cursor: pointer;
11
- transition: all ease 0.3s;
12
- }
13
- .button > div {
14
- margin-right: 8px;
15
- }
16
- .button > div:last-child {
17
- margin-right: 0px;
18
- }
19
- /* ####### */
20
- /* BLOCK */
21
- .button--block {
22
- width: 100%;
23
- }
24
- /* ####### */
25
- /* SIZES */
26
- .button--md {
27
- height: 32px;
28
- padding: 0 14px;
29
- }
30
- .button--md.button--icon-only {
31
- width: 32px;
32
- padding: 0;
33
- }
34
- .button--lg {
35
- height: 40px;
36
- padding: 0 16px;
37
- }
38
- .button--lg.button--icon-only {
39
- width: 40px;
40
- padding: 0;
41
- }
42
- /* ########## */
43
- /* VARIANTS */
44
- .button--primary {
45
- background: #007dbc;
46
- color: #ffffff;
47
- }
48
- .button--primary:hover {
49
- background: #00689d;
50
- }
51
- .button--secondary {
52
- background: #e7f3f9;
53
- color: #007dbc;
54
- }
55
- .button--secondary:hover {
56
- background: #bedeef;
57
- }
58
- .button--success {
59
- background: #02be8a;
60
- color: #ffffff;
61
- }
62
- .button--success:hover {
63
- background: #029e73;
64
- color: #ffffff;
65
- }
66
- .button--ghost {
67
- background: #ffffff;
68
- color: #1d1d1b;
69
- font-weight: 400;
70
- }
71
- .button--ghost:hover {
72
- background: #e7f3f9;
73
- }
74
- .button--shadow {
75
- box-shadow: 0px 12px 12px 0px #00537d1a;
76
- background: #ffffff;
77
- color: #4e5d6b;
78
- }
79
- /* ######### */
80
- /* ROUNDED */
81
- .button--rounded {
82
- border-radius: 9999px;
83
- }
84
-
85
- /* ######### */
86
- /* GLOBALS */
87
- * {
88
- font-size: 14px;
89
- outline: none;
90
- box-sizing: border-box;
91
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
92
- 'Helvetica Neue', sans-serif;
93
- }
@@ -1,5 +0,0 @@
1
- import * as React from 'react';
2
- import { PropsWithChildren } from 'react';
3
- import { ButtonProps } from './Button.types';
4
- import './Button.css';
5
- export declare const Button: ({ children, icon, iconDirection, size, variant, block, rounded, onClick, }: PropsWithChildren<ButtonProps>) => React.JSX.Element;
@@ -1,21 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Button = void 0;
4
- const React = require("react");
5
- const Icon_1 = require("../Icon/Icon");
6
- require("./Button.css");
7
- const Button = ({ children, icon, iconDirection = 'left', size = 'md', variant = 'primary', block, rounded, onClick, }) => {
8
- // #########
9
- // Rendering
10
- return (React.createElement("button", { className: `
11
- button button--${size} button--${variant}
12
- ${block ? 'button--block' : ''}
13
- ${rounded ? 'button--rounded' : ''}
14
- ${icon && !children ? 'button--icon-only' : ''}
15
- `, onClick: onClick },
16
- icon && iconDirection === 'left' && React.createElement(Icon_1.Icon, { name: icon, size: "16" }),
17
- children && React.createElement("div", null, children),
18
- icon && iconDirection === 'right' && React.createElement(Icon_1.Icon, { name: icon, size: "16" })));
19
- };
20
- exports.Button = Button;
21
- //# sourceMappingURL=Button.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,uCAAoC;AAEpC,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,OAAO,GACwB,EAAE,EAAE;IACnC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;yBACQ,IAAI,YAAY,OAAO;UACtC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;UAC5B,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;UAChC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;OAC/C,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QAClE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC7D,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,MAAM,UA2BjB"}
@@ -1,9 +0,0 @@
1
- export type ButtonProps = {
2
- icon?: string;
3
- iconDirection?: 'left' | 'right';
4
- size?: 'md' | 'lg';
5
- variant?: 'primary' | 'secondary' | 'success' | 'ghost' | 'shadow';
6
- block?: boolean;
7
- rounded?: boolean;
8
- onClick: () => void;
9
- };
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- //# sourceMappingURL=Button.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":""}
@@ -1,74 +0,0 @@
1
- import React from 'react';
2
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Button } from '../Button';
4
- import { icons } from '../../Icon/icons';
5
-
6
- <Meta title="Components/Button" />
7
-
8
- export const buttonArgTypes = {
9
- children: {
10
- control: 'text',
11
- description: 'Child of the button.',
12
- },
13
- icon: {
14
- control: 'select',
15
- options: Object.keys(icons),
16
- description: 'Icon of the button.',
17
- },
18
- iconDirection: {
19
- control: 'inline-radio',
20
- options: ['left', 'right'],
21
- description: 'Define the direction of the icon.',
22
- table: { defaultValue: { summary: 'left' } },
23
- },
24
- size: {
25
- control: 'inline-radio',
26
- options: ['md', 'lg'],
27
- description: 'Define the size of the button.',
28
- table: { defaultValue: { summary: 'md' } },
29
- },
30
- variant: {
31
- control: 'inline-radio',
32
- options: ['primary', 'secondary', 'success', 'ghost', 'shadow'],
33
- description: "Variant of the button defining it's color and outline.",
34
- table: { defaultValue: { summary: 'primary' } },
35
- },
36
- block: {
37
- control: 'boolean',
38
- description: 'Define if the button is full width',
39
- table: { defaultValue: { summary: 'false' } },
40
- },
41
- rounded: {
42
- control: 'boolean',
43
- description: 'Define if the button has its corner full rounded',
44
- table: { defaultValue: { summary: 'false' } },
45
- },
46
- };
47
-
48
- # Button
49
-
50
- Buttons express what action will occur when the users clicks. Buttons are used to initialize an action, either in the background or foreground of an experience.
51
-
52
- ## Overview
53
-
54
- <Canvas>
55
- <Story
56
- name="Overview"
57
- args={{
58
- children: 'Button',
59
- iconDirection: 'left',
60
- size: 'md',
61
- variant: 'primary',
62
- block: false,
63
- rounded: false,
64
- onClick: () => {},
65
- }}
66
- argTypes={buttonArgTypes}
67
- >
68
- {args => <Button {...args}>{args.children}</Button>}
69
- </Story>
70
- </Canvas>
71
-
72
- ## Props
73
-
74
- <ArgsTable story="Overview" of={Button} />
@@ -1,61 +0,0 @@
1
- .checkbox {
2
- display: flex;
3
- align-items: center;
4
- cursor: pointer;
5
- }
6
- /* ##### */
7
- /* BOX */
8
- .checkbox:hover .checkbox-box {
9
- background: #e7f3f9;
10
- }
11
- .checkbox-box {
12
- position: relative;
13
- display: flex;
14
- align-items: center;
15
- justify-content: center;
16
- width: 24px;
17
- height: 24px;
18
- border-radius: 6px;
19
- color: #007dbc;
20
- transition: all ease 0.3s;
21
- }
22
- .checkbox-box::before {
23
- content: '';
24
- position: absolute;
25
- width: 16px;
26
- height: 16px;
27
- border-radius: 6px;
28
- background: #ffffff;
29
- z-index: 10;
30
- }
31
- .checkbox-box .icon {
32
- z-index: 20;
33
- }
34
-
35
- /* ################# */
36
- /* LABEL / CAPTION */
37
- .checkbox-container {
38
- width: 100%;
39
- margin-left: 4px;
40
- padding: 4px 8px;
41
- border-radius: 6px;
42
- }
43
- .checkbox-container--with-caption .checkbox-label {
44
- color: #007dbc;
45
- font-weight: 700;
46
- }
47
- .checkbox-caption {
48
- color: #404040;
49
- font-size: 12px;
50
- font-style: italic;
51
- }
52
-
53
- /* ######### */
54
- /* GLOBALS */
55
- * {
56
- font-size: 14px;
57
- outline: none;
58
- box-sizing: border-box;
59
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
60
- 'Helvetica Neue', sans-serif;
61
- }
@@ -1,7 +0,0 @@
1
- import * as React from 'react';
2
- import { PropsWithChildren } from 'react';
3
- import { CheckboxProps } from './Checkbox.types';
4
- import './Checkbox.css';
5
- export declare const CheckboxLabel: ({ children }: PropsWithChildren) => React.JSX.Element;
6
- export declare const CheckboxCaption: ({ children }: PropsWithChildren) => React.JSX.Element;
7
- export declare const Checkbox: ({ children, checked, onChange }: PropsWithChildren<CheckboxProps>) => React.JSX.Element;