@edvisor/product-language 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (278) hide show
  1. package/index.d.ts +2 -0
  2. package/index.js +7914 -0
  3. package/lib/components/alert-banner/alert-banner.d.ts +11 -0
  4. package/lib/components/alert-banner/alert-level-flags.d.ts +13 -0
  5. package/lib/components/alert-banner/index.d.ts +1 -0
  6. package/lib/components/badge/badge-type-flags.d.ts +18 -0
  7. package/lib/components/badge/badge.d.ts +5 -0
  8. package/lib/components/badge/index.d.ts +1 -0
  9. package/{src/lib/components/card/atoms/card-frame.tsx → lib/components/card/atoms/card-frame.d.ts} +7 -17
  10. package/lib/components/card/atoms/index.d.ts +1 -0
  11. package/lib/components/card/card.d.ts +14 -0
  12. package/lib/components/card/components/card-alert-banner-slot.d.ts +5 -0
  13. package/lib/components/card/components/card-controls-slot.d.ts +4 -0
  14. package/lib/components/card/components/card-section-slot.d.ts +11 -0
  15. package/lib/components/card/components/index.d.ts +3 -0
  16. package/lib/components/card/index.d.ts +2 -0
  17. package/lib/components/card/molecules/index.d.ts +1 -0
  18. package/lib/components/card/molecules/left-right-card.d.ts +16 -0
  19. package/lib/components/checkbox/checkbox.d.ts +10 -0
  20. package/lib/components/checkbox/helpers.d.ts +12 -0
  21. package/lib/components/checkbox/index.d.ts +1 -0
  22. package/lib/components/divider/divider-type-flags.d.ts +9 -0
  23. package/lib/components/divider/divider.d.ts +7 -0
  24. package/lib/components/divider/index.d.ts +1 -0
  25. package/lib/components/flag/flag-size-flags.d.ts +12 -0
  26. package/lib/components/flag/flag.d.ts +9 -0
  27. package/lib/components/flag/flag.list.d.ts +781 -0
  28. package/lib/components/flag/index.d.ts +1 -0
  29. package/lib/components/icon/icon-list.d.ts +131 -0
  30. package/lib/components/icon/icon.d.ts +131 -0
  31. package/lib/components/icon/index.d.ts +1 -0
  32. package/lib/components/index.d.ts +17 -0
  33. package/lib/components/input-field/components/index.d.ts +2 -0
  34. package/lib/components/input-field/components/labeled-input.d.ts +10 -0
  35. package/lib/components/input-field/components/stepper.d.ts +7 -0
  36. package/lib/components/input-field/index.d.ts +3 -0
  37. package/lib/components/input-field/input-field.d.ts +25 -0
  38. package/lib/components/input-field/input-number.d.ts +18 -0
  39. package/lib/components/input-field/input-text.d.ts +14 -0
  40. package/lib/components/layout/flex.d.ts +16 -0
  41. package/lib/components/layout/grid-layout.d.ts +11 -0
  42. package/lib/components/layout/index.d.ts +3 -0
  43. package/lib/components/layout/left-right-layout.d.ts +34 -0
  44. package/lib/components/link/index.d.ts +1 -0
  45. package/lib/components/link/link.d.ts +14 -0
  46. package/lib/components/molecules/avatar/avatar-size-flags.d.ts +12 -0
  47. package/lib/components/molecules/avatar/avatar.d.ts +12 -0
  48. package/lib/components/molecules/avatar/index.d.ts +1 -0
  49. package/lib/components/molecules/button/button-flags.d.ts +44 -0
  50. package/lib/components/molecules/button/button.d.ts +12 -0
  51. package/lib/components/molecules/button/index.d.ts +1 -0
  52. package/lib/components/molecules/index.d.ts +3 -0
  53. package/lib/components/molecules/input-checkbox/index.d.ts +1 -0
  54. package/lib/components/molecules/input-checkbox/input-checkbox.d.ts +8 -0
  55. package/lib/components/organisms/index.d.ts +1 -0
  56. package/lib/components/organisms/multi-choice-list/index.d.ts +1 -0
  57. package/lib/components/organisms/multi-choice-list/multi-choice-list.d.ts +10 -0
  58. package/lib/components/spinner/index.d.ts +1 -0
  59. package/lib/components/spinner/spinner-size-flags.d.ts +10 -0
  60. package/lib/components/spinner/spinner.d.ts +9 -0
  61. package/lib/components/tabs/components/index.d.ts +1 -0
  62. package/lib/components/tabs/components/tab.d.ts +7 -0
  63. package/lib/components/tabs/index.d.ts +1 -0
  64. package/lib/components/tabs/tabs.d.ts +15 -0
  65. package/lib/components/tag/components/close-button.d.ts +8 -0
  66. package/lib/components/tag/components/index.d.ts +2 -0
  67. package/lib/components/tag/components/tag-label.d.ts +8 -0
  68. package/lib/components/tag/index.d.ts +1 -0
  69. package/lib/components/tag/tag.d.ts +10 -0
  70. package/lib/components/thumbnail/index.d.ts +1 -0
  71. package/lib/components/thumbnail/thumbnail-size-flags.d.ts +10 -0
  72. package/lib/components/thumbnail/thumbnail.d.ts +10 -0
  73. package/lib/components/typography/index.d.ts +1 -0
  74. package/lib/components/typography/typography.d.ts +24 -0
  75. package/lib/foundations/color-system/base-palette/base-palette.d.ts +76 -0
  76. package/lib/foundations/color-system/base-palette/index.d.ts +1 -0
  77. package/lib/foundations/color-system/color-guidelines/color-guidelines.d.ts +132 -0
  78. package/lib/foundations/color-system/color-guidelines/index.d.ts +1 -0
  79. package/lib/foundations/color-system/components/color-sample.d.ts +17 -0
  80. package/lib/foundations/color-system/components/index.d.ts +1 -0
  81. package/lib/foundations/color-system/index.d.ts +1 -0
  82. package/lib/foundations/index.d.ts +4 -0
  83. package/lib/foundations/shadows/components.d.ts +8 -0
  84. package/lib/foundations/shadows/index.d.ts +1 -0
  85. package/lib/foundations/shadows/shadows.d.ts +8 -0
  86. package/lib/foundations/spacing/index.d.ts +1 -0
  87. package/lib/foundations/spacing/spacing-guidelines.d.ts +22 -0
  88. package/lib/foundations/spacing/spacing.d.ts +18 -0
  89. package/lib/foundations/typography/constants.d.ts +22 -0
  90. package/lib/foundations/typography/fonts.d.ts +1 -0
  91. package/lib/foundations/typography/index.d.ts +1 -0
  92. package/lib/foundations/typography/text-aspect-flags.d.ts +19 -0
  93. package/lib/foundations/typography/typography.d.ts +24 -0
  94. package/lib/helpers/generic-types.d.ts +21 -0
  95. package/lib/helpers/index.d.ts +6 -0
  96. package/lib/helpers/nothing.d.ts +8 -0
  97. package/{src/lib/helpers/numbers.ts → lib/helpers/numbers.d.ts} +50 -67
  98. package/lib/helpers/safe-navigation.d.ts +15 -0
  99. package/lib/helpers/slots.d.ts +23 -0
  100. package/lib/helpers/strings.d.ts +1 -0
  101. package/package.json +11 -3
  102. package/.babelrc +0 -12
  103. package/.eslintrc.json +0 -147
  104. package/.storybook/main.js +0 -57
  105. package/.storybook/manager.js +0 -7
  106. package/.storybook/preview.js +0 -15
  107. package/.storybook/tsconfig.json +0 -30
  108. package/jest.config.ts +0 -15
  109. package/jest.setup.ts +0 -2
  110. package/project.json +0 -96
  111. package/release-it.json +0 -18
  112. package/src/README.md +0 -61
  113. package/src/assets/svg/example_icon.svg +0 -3
  114. package/src/assets/svg/example_icon_white.svg +0 -3
  115. package/src/assets/svg/spinner.svg +0 -3
  116. package/src/assets/svg/spinner_white.svg +0 -3
  117. package/src/helpers/index.ts +0 -4
  118. package/src/helpers/playground.ts +0 -16
  119. package/src/helpers/talesOf.tsx +0 -42
  120. package/src/index.ts +0 -2
  121. package/src/lib/components/README.md +0 -49
  122. package/src/lib/components/alert-banner/alert-banner.tsx +0 -34
  123. package/src/lib/components/alert-banner/alert-level-flags.ts +0 -77
  124. package/src/lib/components/alert-banner/index.ts +0 -1
  125. package/src/lib/components/badge/badge-type-flags.ts +0 -72
  126. package/src/lib/components/badge/badge.test.tsx +0 -29
  127. package/src/lib/components/badge/badge.tsx +0 -22
  128. package/src/lib/components/badge/index.ts +0 -1
  129. package/src/lib/components/badge/stories/badge.stories.mdx +0 -44
  130. package/src/lib/components/badge/stories/components.tsx +0 -49
  131. package/src/lib/components/card/atoms/index.ts +0 -1
  132. package/src/lib/components/card/card.test.tsx +0 -162
  133. package/src/lib/components/card/card.tsx +0 -78
  134. package/src/lib/components/card/components/card-alert-banner-slot.tsx +0 -16
  135. package/src/lib/components/card/components/card-controls-slot.tsx +0 -19
  136. package/src/lib/components/card/components/card-section-slot.tsx +0 -51
  137. package/src/lib/components/card/components/index.ts +0 -3
  138. package/src/lib/components/card/index.ts +0 -2
  139. package/src/lib/components/card/molecules/index.ts +0 -1
  140. package/src/lib/components/card/molecules/left-right-card.test.tsx +0 -89
  141. package/src/lib/components/card/molecules/left-right-card.tsx +0 -63
  142. package/src/lib/components/card/storybook/card.stories.mdx +0 -100
  143. package/src/lib/components/card/storybook/components.tsx +0 -223
  144. package/src/lib/components/checkbox/checkbox.test.tsx +0 -39
  145. package/src/lib/components/checkbox/checkbox.tsx +0 -63
  146. package/src/lib/components/checkbox/helpers.tsx +0 -100
  147. package/src/lib/components/checkbox/index.tsx +0 -1
  148. package/src/lib/components/checkbox/stories/checkbox.stories.mdx +0 -57
  149. package/src/lib/components/checkbox/stories/components.tsx +0 -84
  150. package/src/lib/components/divider/divider-type-flags.tsx +0 -37
  151. package/src/lib/components/divider/divider.test.tsx +0 -34
  152. package/src/lib/components/divider/divider.tsx +0 -37
  153. package/src/lib/components/divider/index.tsx +0 -1
  154. package/src/lib/components/divider/stories/components.tsx +0 -13
  155. package/src/lib/components/divider/stories/divider.stories.mdx +0 -44
  156. package/src/lib/components/flag/flag-size-flags.tsx +0 -55
  157. package/src/lib/components/flag/flag.list.tsx +0 -788
  158. package/src/lib/components/flag/flag.test.tsx +0 -65
  159. package/src/lib/components/flag/flag.tsx +0 -97
  160. package/src/lib/components/flag/index.tsx +0 -1
  161. package/src/lib/components/flag/stories/components.tsx +0 -403
  162. package/src/lib/components/flag/stories/flag.stories.mdx +0 -48
  163. package/src/lib/components/flag/stories/playGround-select.tsx +0 -145
  164. package/src/lib/components/icon/icon-list.tsx +0 -135
  165. package/src/lib/components/icon/icon.test.tsx +0 -48
  166. package/src/lib/components/icon/icon.tsx +0 -181
  167. package/src/lib/components/icon/index.tsx +0 -1
  168. package/src/lib/components/icon/stories/components.tsx +0 -282
  169. package/src/lib/components/icon/stories/icon.stories.mdx +0 -65
  170. package/src/lib/components/index.ts +0 -19
  171. package/src/lib/components/input-field/components/index.ts +0 -2
  172. package/src/lib/components/input-field/components/labeled-input.tsx +0 -54
  173. package/src/lib/components/input-field/components/stepper.tsx +0 -60
  174. package/src/lib/components/input-field/index.ts +0 -6
  175. package/src/lib/components/input-field/input-field.test.tsx +0 -107
  176. package/src/lib/components/input-field/input-field.tsx +0 -126
  177. package/src/lib/components/input-field/input-number.tsx +0 -41
  178. package/src/lib/components/input-field/input-text.tsx +0 -30
  179. package/src/lib/components/input-field/storybook/components.tsx +0 -327
  180. package/src/lib/components/input-field/storybook/input-field.stories.mdx +0 -113
  181. package/src/lib/components/layout/flex.tsx +0 -22
  182. package/src/lib/components/layout/grid-layout.tsx +0 -40
  183. package/src/lib/components/layout/index.ts +0 -3
  184. package/src/lib/components/layout/left-right-layout.tsx +0 -67
  185. package/src/lib/components/link/index.ts +0 -1
  186. package/src/lib/components/link/link.test.tsx +0 -29
  187. package/src/lib/components/link/link.tsx +0 -56
  188. package/src/lib/components/link/storybook/link.stories.mdx +0 -52
  189. package/src/lib/components/molecules/avatar/avatar-size-flags.tsx +0 -55
  190. package/src/lib/components/molecules/avatar/avatar.test.tsx +0 -114
  191. package/src/lib/components/molecules/avatar/avatar.tsx +0 -80
  192. package/src/lib/components/molecules/avatar/index.tsx +0 -1
  193. package/src/lib/components/molecules/avatar/stories/avatar.stories.mdx +0 -52
  194. package/src/lib/components/molecules/avatar/stories/components.tsx +0 -36
  195. package/src/lib/components/molecules/button/button-flags.tsx +0 -340
  196. package/src/lib/components/molecules/button/button.test.tsx +0 -77
  197. package/src/lib/components/molecules/button/button.tsx +0 -214
  198. package/src/lib/components/molecules/button/index.tsx +0 -1
  199. package/src/lib/components/molecules/button/stories/button.stories.mdx +0 -105
  200. package/src/lib/components/molecules/button/stories/components.tsx +0 -84
  201. package/src/lib/components/molecules/index.ts +0 -3
  202. package/src/lib/components/molecules/input-checkbox/index.tsx +0 -1
  203. package/src/lib/components/molecules/input-checkbox/input-checkbox.test.tsx +0 -34
  204. package/src/lib/components/molecules/input-checkbox/input-checkbox.tsx +0 -49
  205. package/src/lib/components/molecules/input-checkbox/stories/components.tsx +0 -53
  206. package/src/lib/components/molecules/input-checkbox/stories/input-checkbox.stories.mdx +0 -49
  207. package/src/lib/components/organisms/index.ts +0 -1
  208. package/src/lib/components/organisms/multi-choice-list/index.tsx +0 -1
  209. package/src/lib/components/organisms/multi-choice-list/multi-choice-list.test.tsx +0 -33
  210. package/src/lib/components/organisms/multi-choice-list/multi-choice-list.tsx +0 -52
  211. package/src/lib/components/organisms/multi-choice-list/stories/components.tsx +0 -124
  212. package/src/lib/components/organisms/multi-choice-list/stories/multi-choice-list.stories.mdx +0 -99
  213. package/src/lib/components/spinner/index.tsx +0 -1
  214. package/src/lib/components/spinner/spinner-size-flags.tsx +0 -39
  215. package/src/lib/components/spinner/spinner.test.tsx +0 -31
  216. package/src/lib/components/spinner/spinner.tsx +0 -54
  217. package/src/lib/components/spinner/stories/components.tsx +0 -39
  218. package/src/lib/components/spinner/stories/spinner.stories.mdx +0 -35
  219. package/src/lib/components/tabs/components/index.ts +0 -1
  220. package/src/lib/components/tabs/components/tab.tsx +0 -62
  221. package/src/lib/components/tabs/index.tsx +0 -1
  222. package/src/lib/components/tabs/storybook/components.tsx +0 -282
  223. package/src/lib/components/tabs/storybook/tabs.stories.mdx +0 -97
  224. package/src/lib/components/tabs/tabs.test.tsx +0 -86
  225. package/src/lib/components/tabs/tabs.tsx +0 -101
  226. package/src/lib/components/tag/components/close-button.tsx +0 -85
  227. package/src/lib/components/tag/components/index.ts +0 -2
  228. package/src/lib/components/tag/components/tag-label.tsx +0 -44
  229. package/src/lib/components/tag/index.tsx +0 -1
  230. package/src/lib/components/tag/stories/components.tsx +0 -86
  231. package/src/lib/components/tag/stories/tag.stories.mdx +0 -42
  232. package/src/lib/components/tag/tag.test.tsx +0 -36
  233. package/src/lib/components/tag/tag.tsx +0 -33
  234. package/src/lib/components/thumbnail/index.tsx +0 -1
  235. package/src/lib/components/thumbnail/stories/thumbnail.stories.mdx +0 -34
  236. package/src/lib/components/thumbnail/thumbnail-size-flags.tsx +0 -41
  237. package/src/lib/components/thumbnail/thumbnail.test.tsx +0 -51
  238. package/src/lib/components/thumbnail/thumbnail.tsx +0 -45
  239. package/src/lib/components/typography/index.ts +0 -1
  240. package/src/lib/components/typography/storybook/components.tsx +0 -288
  241. package/src/lib/components/typography/storybook/typography.stories.mdx +0 -90
  242. package/src/lib/components/typography/typography.test.tsx +0 -97
  243. package/src/lib/components/typography/typography.tsx +0 -99
  244. package/src/lib/foundations/color-system/base-palette/base-palette.stories.tsx +0 -123
  245. package/src/lib/foundations/color-system/base-palette/base-palette.ts +0 -93
  246. package/src/lib/foundations/color-system/base-palette/index.ts +0 -1
  247. package/src/lib/foundations/color-system/color-guidelines/color-guidelines.stories.mdx +0 -85
  248. package/src/lib/foundations/color-system/color-guidelines/color-guidelines.stories.tsx +0 -231
  249. package/src/lib/foundations/color-system/color-guidelines/color-guidelines.ts +0 -160
  250. package/src/lib/foundations/color-system/color-guidelines/index.ts +0 -1
  251. package/src/lib/foundations/color-system/components/color-sample.tsx +0 -99
  252. package/src/lib/foundations/color-system/components/index.ts +0 -1
  253. package/src/lib/foundations/color-system/index.ts +0 -1
  254. package/src/lib/foundations/index.ts +0 -4
  255. package/src/lib/foundations/shadows/components.tsx +0 -59
  256. package/src/lib/foundations/shadows/index.ts +0 -1
  257. package/src/lib/foundations/shadows/shadows.stories.mdx +0 -71
  258. package/src/lib/foundations/shadows/shadows.tsx +0 -47
  259. package/src/lib/foundations/spacing/index.ts +0 -1
  260. package/src/lib/foundations/spacing/spacing-guidelines.ts +0 -24
  261. package/src/lib/foundations/spacing/spacing.stories.mdx +0 -51
  262. package/src/lib/foundations/spacing/spacing.ts +0 -18
  263. package/src/lib/foundations/typography/constants.ts +0 -25
  264. package/src/lib/foundations/typography/fonts.ts +0 -205
  265. package/src/lib/foundations/typography/index.tsx +0 -1
  266. package/src/lib/foundations/typography/text-aspect-flags.ts +0 -61
  267. package/src/lib/foundations/typography/typography.tsx +0 -102
  268. package/src/lib/helpers/generic-types.ts +0 -44
  269. package/src/lib/helpers/index.ts +0 -6
  270. package/src/lib/helpers/nothing.tsx +0 -18
  271. package/src/lib/helpers/safe-navigation.ts +0 -44
  272. package/src/lib/helpers/slots.test.tsx +0 -98
  273. package/src/lib/helpers/slots.tsx +0 -157
  274. package/src/lib/helpers/strings.test.ts +0 -47
  275. package/src/lib/helpers/strings.ts +0 -16
  276. package/tsconfig.json +0 -35
  277. package/tsconfig.lib.json +0 -28
  278. package/tsconfig.spec.json +0 -21
package/src/lib/components/organisms/multi-choice-list/stories/components.tsx DELETED
@@ -1,124 +0,0 @@
1
- import { Body, Heading4 } from '@components'
2
- import { isDefined } from '@helpers'
3
- import { Playground } from 'storybook-addon-jarle-monaco'
4
- import { MultiChoiceList } from '../index'
5
-
6
- export const PlainHTMLFormExample = () => (
7
- <Playground
8
- code={`
9
- /* Edit this code sample! */
10
- const [withError, setWithError] = useState(false);
11
-
12
- <form onSubmit={(e) => {
13
- e.preventDefault()
14
- }}
15
- >
16
- <MultiChoiceList options={[
17
- {
18
- label: "My Awesome label",
19
- id: 'My checkbox 1',
20
- required: true,
21
- error: withError,
22
- helpfulMessage: 'Alternative text here',
23
- onInvalid: function(e){
24
- setWithError(true);
25
- },
26
- onChange: function(e){
27
- setWithError(false);
28
- }
29
- },
30
- {
31
- label: "My Awesome label",
32
- id: 'My checkbox 2',
33
- helpfulMessage: 'Alternative text here',
34
- },
35
- ]}
36
- />
37
- <input type="submit"/>
38
- </form>
39
- `}
40
- providerProps={{
41
- renderAsComponent: true,
42
- scope: {
43
- MultiChoiceList,
44
- },
45
- }}
46
- />
47
- )
48
-
49
- export const ExampleWithStateManagement = () => (
50
- <Playground
51
- code={`
52
- /* Edit this code sample! */
53
- const Locations = [
54
- {
55
- label: "Vancouver, BC",
56
- id: 1,
57
- },
58
- {
59
- label: "Toronto, ON",
60
- id: 2,
61
- },
62
- {
63
- label: "Quebec, QC",
64
- id: 3,
65
- },
66
- {
67
- label: "Montreal, QC",
68
- id: 4,
69
- },
70
- ];
71
- const [locations, setLocations] = useState([]);
72
- const [withError, setWithError] = useState(false);
73
-
74
- const options = Locations.map((location) => {
75
- return {
76
- ...location,
77
- checked: isDefined(locations.find((l) => l.id === location.id)),
78
- onChange: (checked) => {
79
- if (checked) {
80
- setLocations([
81
- ...locations,
82
- location,
83
- ])
84
- } else {
85
- const i = locations.findIndex((l) => l.id === location.id)
86
- locations.splice(i, 1)
87
- setLocations([
88
- ...locations
89
- ])
90
- }
91
- }
92
- }
93
- });
94
-
95
- <>
96
- <form onSubmit={(e) => {
97
- e.preventDefault()
98
- }}
99
- >
100
- <MultiChoiceList options={options}
101
- />
102
- <input type="submit"/>
103
- </form>
104
- <div>
105
- <Heading4>Your Selection</Heading4>
106
- {locations.map((location) => {
107
- return (
108
- <Body key={location.id}>{location.label}</Body>
109
- )
110
- })}
111
- </div>
112
- </>
113
- `}
114
- providerProps={{
115
- renderAsComponent: true,
116
- scope: {
117
- MultiChoiceList,
118
- Heading4,
119
- Body,
120
- isDefined,
121
- },
122
- }}
123
- />
124
- )
package/src/lib/components/organisms/multi-choice-list/stories/multi-choice-list.stories.mdx DELETED
@@ -1,99 +0,0 @@
1
- import { Canvas, Meta, Story } from '@storybook/addon-docs';
2
- import { MultiChoiceList } from '../multi-choice-list'
3
- import { PlainHTMLFormExample, ExampleWithStateManagement } from './components'
4
-
5
- <Meta
6
- title="Components/MultiChoiceList"
7
- component={MultiChoiceList}
8
- />
9
-
10
- # MultiChoiceList
11
-
12
- This is a organism, composed by checkbox molecule and some atoms.
13
-
14
- For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1097%3A2349)
15
-
16
- ## How to use
17
-
18
- ```javascript
19
- // Import the component
20
- import { MultiChoiceList } from './index'
21
-
22
-
23
- // Render the component sending the required parameters
24
- <MultiChoiceList options={[
25
- {
26
- label: 'My Awesome label',
27
- checked: true,
28
- id: '1',
29
- }]
30
- />
31
- ```
32
- ## Examples
33
-
34
- <Canvas>
35
- <MultiChoiceList options={[
36
- {
37
- label: "My Awesome label",
38
- defaultChecked: true,
39
- id: '1',
40
- },
41
- {
42
- label: "My label",
43
- id: '2',
44
- },
45
- {
46
- label: "My label",
47
- id: '3',
48
- },
49
- {
50
- label: "My label",
51
- id: '4',
52
- },
53
- ]}/>
54
- </Canvas>
55
-
56
- Also, you can send the altive text in order to helping user
57
- <Canvas>
58
- <MultiChoiceList options={[
59
- {
60
- label: "My Awesome label",
61
- id: 'My checkbox 1',
62
- defaultChecked: true,
63
- error: true,
64
- helpfulMessage: 'Alternative text here',
65
- },
66
- {
67
- label: "My Awesome label",
68
- id: 'My checkbox 2',
69
- helpfulMessage: 'Alternative text here',
70
- },
71
- {
72
- label: "My Awesome label",
73
- id: 'My checkbox 3',
74
- helpfulMessage: 'Alternative text here',
75
- }
76
- ]}/>
77
- </Canvas>
78
-
79
-
80
- ## API
81
- This component receive a list (`options` parameter) from N amount of Checkbox if you'd like to render.
82
- So all the possible values from Checkbox component can be passed here.
83
- Also, you can sen this parameters:
84
-
85
- | Name | Type | Description | Required (Y/N)|
86
- | ---- | ----- | ------ | ----- |
87
- | `id` | `string` | `The id from each checkbox in the list` | `Y` |
88
- | `helpfulMessage` | `string` | `Message that will be render bellow each checkbox field` | `N` |
89
-
90
- ## Playground
91
-
92
- <PlainHTMLFormExample />
93
-
94
- ### With State Management Example
95
-
96
- <ExampleWithStateManagement />
97
-
98
- ## Changelog
99
- - Offer the "indeterminate" behavior to render this list nesting
package/src/lib/components/spinner/index.tsx DELETED
@@ -1 +0,0 @@
1
- export * from './spinner'
package/src/lib/components/spinner/spinner-size-flags.tsx DELETED
@@ -1,39 +0,0 @@
1
- import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
2
-
3
- const enum SpinnerSize {
4
- small = 1,
5
- medium = 2,
6
- large = 4,
7
- }
8
-
9
- type SpinnerSizes<T> = MappedEnum<typeof SpinnerSize, T>
10
-
11
- function toSpinner(n: number): SpinnerSize {
12
- switch (n) {
13
- case SpinnerSize.small:
14
- return SpinnerSize.small
15
- case SpinnerSize.medium:
16
- return SpinnerSize.medium
17
- case SpinnerSize.large:
18
- return SpinnerSize.large
19
- default:
20
- return SpinnerSize.medium
21
- }
22
- }
23
-
24
- const SpinnerValues = {
25
- [SpinnerSize.small]: '18px',
26
- [SpinnerSize.medium]: '40px',
27
- [SpinnerSize.large]: '60px',
28
- }
29
-
30
- export type SpinnerProps = Partial<RequireOnlyOne<SpinnerSizes<boolean>>> &
31
- PropsWithChildren
32
-
33
- export function getValuesBySize(props: SpinnerProps): string {
34
- return SpinnerValues[
35
- toSpinner(
36
- bitwiseOr([props.small, props.medium, props.large])
37
- )
38
- ]
39
- }
package/src/lib/components/spinner/spinner.test.tsx DELETED
@@ -1,31 +0,0 @@
1
- import { render, screen } from '@testing-library/react'
2
- import { Spinner } from './index'
3
-
4
- describe('Spinner Tests', () => {
5
- describe('Spinner Tests', () => {
6
- it('should render the Spinner with default size', async () => {
7
- render(
8
- <Spinner />
9
- )
10
-
11
- const spinner = screen.getByRole('icon')
12
-
13
- expect(spinner).toBeInTheDocument()
14
- expect(spinner).toHaveStyle('height: 40px')
15
-
16
- })
17
-
18
- it('should render the Spinner with small size', async () => {
19
- render(
20
- <Spinner small/>
21
- )
22
-
23
- const spinner = screen.getByRole('icon')
24
-
25
- expect(spinner).toBeInTheDocument()
26
- expect(spinner).toHaveStyle('height: 18px')
27
-
28
- })
29
-
30
- })
31
- })
package/src/lib/components/spinner/spinner.tsx DELETED
@@ -1,54 +0,0 @@
1
- import { getValuesBySize, SpinnerProps } from './spinner-size-flags'
2
- import { FC, is } from '@helpers'
3
- import styled, { keyframes } from 'styled-components'
4
- import { Icons } from '@foundations'
5
- import { IconMinor } from 'components/icon'
6
-
7
- const spinAnimation = keyframes`
8
- 0% {
9
- transform: rotate(0deg);
10
- stroke-dashoffset: 25;
11
- }
12
- 50% {
13
- transform: rotate(720deg);
14
- stroke-dashoffset: 125;
15
- }
16
- 100% {
17
- transform: rotate(1080deg);
18
- stroke-dashoffset: 25;
19
- }
20
- `
21
-
22
- const Spin = styled.div<{ $size: string, $onPrimary: boolean, $onCritical: boolean }>`
23
- svg {
24
- width: ${({ $size }) => $size};
25
- height: ${({ $size }) => $size};
26
- position: unset;
27
- path {
28
- fill: ${({ $onPrimary, $onCritical }) => ($onPrimary || $onCritical) ? Icons.OnPrimary : Icons.Default};
29
- }
30
- animation: ${spinAnimation} infinite 2s linear;
31
- }
32
- `
33
-
34
- type IProps = SpinnerProps & {
35
- onPrimary?: boolean
36
- onCritical?: boolean
37
- className?: string
38
- }
39
-
40
- export const Spinner : FC<IProps> = (props) => {
41
- const size = getValuesBySize(props)
42
-
43
- return (
44
- <Spin
45
- $onPrimary={is(props.onPrimary)}
46
- $onCritical={is(props.onCritical)}
47
- $size={size}
48
- className={props.className}
49
- >
50
- <IconMinor.Spinner />
51
- </Spin>
52
- )
53
- }
54
-
package/src/lib/components/spinner/stories/components.tsx DELETED
@@ -1,39 +0,0 @@
1
- import styled from 'styled-components'
2
- import { Padding, Surface } from '@foundations'
3
- import { Playground } from 'storybook-addon-jarle-monaco'
4
- import { Button } from 'components/molecules'
5
- import { Spinner } from '../spinner'
6
-
7
- export const Div = styled.div`
8
- padding: ${Padding.s};
9
- background: ${Surface.Default.Default};
10
- display: flex;
11
- gap: 20px;
12
- `
13
-
14
- export const SpinnerCodeExample = () => (
15
- <Playground
16
- code={`
17
- // Try replacing the Button types.
18
- <Div>
19
- <Button primary>
20
- <Spinner onPrimary />
21
- </Button>
22
- <Button destructive primary>
23
- <Spinner onCritical />
24
- </Button>
25
- <Button destructive>
26
- <Spinner onCritical />
27
- </Button>
28
- </Div>
29
- `}
30
- providerProps={{
31
- renderAsComponent: true,
32
- scope: {
33
- Button,
34
- Spinner,
35
- Div,
36
- },
37
- }}
38
- />
39
- )
package/src/lib/components/spinner/stories/spinner.stories.mdx DELETED
@@ -1,35 +0,0 @@
1
- import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
2
- import { StoryComponent, talesOf, StorybookFrame } from '@stories'
3
- import { Spinner } from '../index'
4
- import { Button } from 'components/molecules/button'
5
-
6
- import { SpinnerCodeExample } from './components'
7
-
8
- <Meta title="Components/Spinner" />
9
-
10
- # Spinner
11
-
12
- Spinners are used to notify users that their action is being processed.
13
-
14
- For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=734%3A7380)
15
-
16
- ## How to Use
17
-
18
- ```tsx
19
- import { Spinner } from './index'
20
-
21
- <Spinner />
22
- ```
23
-
24
- ### Size
25
-
26
- <Canvas>
27
- <Spinner small/>
28
- <Spinner />
29
- </Canvas>
30
-
31
- ### On primary
32
-
33
- When rendering the spinner on a primary or critical surface, use onPrimary or onCritical.
34
-
35
- <SpinnerCodeExample/>
package/src/lib/components/tabs/components/index.ts DELETED
@@ -1 +0,0 @@
1
- export * from './tab'
package/src/lib/components/tabs/components/tab.tsx DELETED
@@ -1,62 +0,0 @@
1
- import { CSSProperties, HTMLAttributes, useEffect, useRef } from 'react'
2
- import { FC, isDefined, Nothing, PropsWithChildren } from '@helpers'
3
- import { Borders, Margin, Padding } from '@foundations'
4
- import { Label } from 'components/typography'
5
-
6
- const styles: (props: { selected: boolean }) => CSSProperties = ({ selected }) => ({
7
- display: 'flex',
8
- padding: Padding.m,
9
- cursor: 'pointer',
10
- outline: 'none',
11
- borderBottom: selected ? `3px solid ${Borders.Highlight.Default}` : '',
12
- ':focus': {
13
- borderBottom: `3px solid ${Borders.Highlight.Default}`
14
- },
15
- })
16
-
17
- export interface ITabProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {
18
- Prefix?: FC<HTMLAttributes<HTMLElement>>
19
- selected?: boolean
20
- }
21
-
22
- export const Tab: FC<ITabProps> = (props) => {
23
- const {
24
- Prefix,
25
- selected = false,
26
- ...rest
27
- } = props
28
-
29
- // eslint-disable-next-line no-null/no-null
30
- const ref = useRef<HTMLDivElement>(null)
31
-
32
- useEffect(() => {
33
- selected ? ref.current?.focus() : ref.current?.blur()
34
- }, [selected])
35
-
36
- /**
37
- * @TODO this is a hack to be able to use the ref in react-web-client
38
- * RWC uses styled-components < v4 and expects the ref to be passes as
39
- * "innerRef" not just "ref", but product-language uses > v4 and wants
40
- * to use ref. So for some components that need a ref, like this one
41
- * we will have to use a div and style it the old fashioned way until
42
- * we upgrade rwc's styled-components or drop rwc
43
- */
44
- return (
45
- <div
46
- {...rest}
47
- tabIndex={0}
48
- onClick={() => {
49
- ref.current?.focus()
50
- }}
51
- role={'tab'}
52
- aria-selected={selected}
53
- ref={ref}
54
- style={styles({ selected })}
55
- >
56
- {isDefined(Prefix) ? <Prefix style={{ marginRight: Margin.xs}} /> : <Nothing />}
57
- <Label strong subdued={!selected}>
58
- {props.children}
59
- </Label>
60
- </div>
61
- )
62
- }
package/src/lib/components/tabs/index.tsx DELETED
@@ -1 +0,0 @@
1
- export * from './tabs'