oddsgate-ds 1.0.171 → 1.0.175

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 (307) hide show
  1. package/.babelrc.json +25 -25
  2. package/.editorconfig +12 -12
  3. package/.storybook/main.ts +58 -58
  4. package/.storybook/preview.ts +26 -26
  5. package/README.md +30 -30
  6. package/chromatic.config.json +6 -6
  7. package/dist/cjs/assets/components/quotes.svg +3 -3
  8. package/dist/cjs/index.js +4 -4
  9. package/dist/cjs/index.js.map +1 -1
  10. package/dist/cjs/types/components/atoms/AwardBadge/AwardBadge.component.d.ts +11 -0
  11. package/dist/cjs/types/components/atoms/AwardBadge/AwardBadge.interface.d.ts +4 -0
  12. package/dist/cjs/types/components/atoms/AwardBadge/AwardBadge.theme.d.ts +3 -0
  13. package/dist/cjs/types/components/atoms/AwardBadge/index.d.ts +1 -0
  14. package/dist/cjs/types/components/molecules/AwardCard/AwardCard.component.d.ts +15 -0
  15. package/dist/cjs/types/components/molecules/AwardCard/AwardCard.interface.d.ts +10 -0
  16. package/dist/cjs/types/components/molecules/AwardCard/AwardCard.theme.d.ts +6 -0
  17. package/dist/cjs/types/components/molecules/AwardCard/index.d.ts +1 -0
  18. package/dist/cjs/types/components/molecules/EventsCard/EventsCard.component.d.ts +1 -1
  19. package/dist/cjs/types/components/molecules/EventsCard/EventsCard.interface.d.ts +0 -1
  20. package/dist/cjs/types/components/organisms/Slider/Slider.component.d.ts +1 -1
  21. package/dist/cjs/types/components/organisms/Slider/Slider.interface.d.ts +3 -0
  22. package/dist/esm/assets/components/quotes.svg +3 -3
  23. package/dist/esm/index.js +5 -5
  24. package/dist/esm/index.js.map +1 -1
  25. package/dist/esm/types/components/atoms/AwardBadge/AwardBadge.component.d.ts +11 -0
  26. package/dist/esm/types/components/atoms/AwardBadge/AwardBadge.interface.d.ts +4 -0
  27. package/dist/esm/types/components/atoms/AwardBadge/AwardBadge.theme.d.ts +3 -0
  28. package/dist/esm/types/components/atoms/AwardBadge/index.d.ts +1 -0
  29. package/dist/esm/types/components/molecules/AwardCard/AwardCard.component.d.ts +15 -0
  30. package/dist/esm/types/components/molecules/AwardCard/AwardCard.interface.d.ts +10 -0
  31. package/dist/esm/types/components/molecules/AwardCard/AwardCard.theme.d.ts +6 -0
  32. package/dist/esm/types/components/molecules/AwardCard/index.d.ts +1 -0
  33. package/dist/esm/types/components/molecules/EventsCard/EventsCard.component.d.ts +1 -1
  34. package/dist/esm/types/components/molecules/EventsCard/EventsCard.interface.d.ts +0 -1
  35. package/dist/esm/types/components/organisms/Slider/Slider.component.d.ts +1 -1
  36. package/dist/esm/types/components/organisms/Slider/Slider.interface.d.ts +3 -0
  37. package/dist/public/assets/components/quotes.svg +3 -3
  38. package/dist/public/assets/empty-state.svg +28 -28
  39. package/dist/public/fonts/Nichrome/mdnichrome-bold-webfont.svg +241 -241
  40. package/dist/public/fonts/Nichrome/mdnichrome-regular-webfont.svg +241 -241
  41. package/dist/public/fonts/miewfont/miewfont.svg +38 -38
  42. package/dist/types.d.ts +5 -3
  43. package/package.json +103 -103
  44. package/prettier.config.js +7 -7
  45. package/public/assets/components/quotes.svg +3 -3
  46. package/public/assets/empty-state.svg +28 -28
  47. package/public/fonts/Nichrome/mdnichrome-bold-webfont.svg +241 -241
  48. package/public/fonts/Nichrome/mdnichrome-regular-webfont.svg +241 -241
  49. package/public/fonts/miewfont/miewfont.svg +38 -38
  50. package/rollup.config.js +98 -98
  51. package/src/components/atoms/AwardBadge/AwardBadge.component.tsx +25 -0
  52. package/src/components/atoms/AwardBadge/AwardBadge.interface.ts +4 -0
  53. package/src/components/atoms/AwardBadge/AwardBadge.stories.tsx +48 -0
  54. package/src/components/atoms/AwardBadge/AwardBadge.theme.ts +28 -0
  55. package/src/components/atoms/AwardBadge/index.ts +1 -0
  56. package/src/components/atoms/Button/Button.component.tsx +60 -60
  57. package/src/components/atoms/Button/Button.interface.ts +29 -29
  58. package/src/components/atoms/Button/Button.stories.tsx +65 -65
  59. package/src/components/atoms/Button/Button.theme.ts +180 -180
  60. package/src/components/atoms/Button/index.ts +1 -1
  61. package/src/components/atoms/CardMarquee/CardMarquee.component.tsx +24 -24
  62. package/src/components/atoms/CardMarquee/CardMarquee.interface.ts +15 -15
  63. package/src/components/atoms/CardMarquee/CardMarquee.stories.tsx +21 -21
  64. package/src/components/atoms/CardMarquee/CardMarquee.theme.ts +48 -48
  65. package/src/components/atoms/CardMarquee/index.ts +1 -1
  66. package/src/components/atoms/Chip/Chip.component.tsx +30 -30
  67. package/src/components/atoms/Chip/Chip.interface.ts +14 -14
  68. package/src/components/atoms/Chip/Chip.stories.tsx +42 -42
  69. package/src/components/atoms/Chip/Chip.theme.ts +57 -57
  70. package/src/components/atoms/Chip/index.ts +1 -1
  71. package/src/components/atoms/CloseButton/CloseButton.component.tsx +17 -17
  72. package/src/components/atoms/CloseButton/CloseButton.interface.ts +9 -9
  73. package/src/components/atoms/CloseButton/CloseButton.stories.tsx +24 -24
  74. package/src/components/atoms/CloseButton/CloseButton.theme.ts +66 -66
  75. package/src/components/atoms/CloseButton/index.ts +1 -1
  76. package/src/components/atoms/Counter/Counter.component.tsx +99 -99
  77. package/src/components/atoms/Counter/Counter.interface.ts +10 -10
  78. package/src/components/atoms/Counter/Counter.stories.tsx +29 -29
  79. package/src/components/atoms/Counter/Counter.theme.ts +27 -27
  80. package/src/components/atoms/Counter/index.ts +1 -1
  81. package/src/components/atoms/EmptyState/EmptyState.component.tsx +27 -27
  82. package/src/components/atoms/EmptyState/EmptyState.interface.ts +10 -10
  83. package/src/components/atoms/EmptyState/EmptyState.stories.tsx +34 -34
  84. package/src/components/atoms/EmptyState/EmptyState.theme.ts +27 -27
  85. package/src/components/atoms/EmptyState/index.ts +1 -1
  86. package/src/components/atoms/Flex/Flex.component.tsx +30 -30
  87. package/src/components/atoms/Flex/Flex.interface.ts +24 -24
  88. package/src/components/atoms/Flex/Flex.theme.ts +12 -12
  89. package/src/components/atoms/Flex/index.ts +1 -1
  90. package/src/components/atoms/FlexGrid/FlexGrid.component.tsx +62 -62
  91. package/src/components/atoms/FlexGrid/FlexGrid.interface.ts +55 -55
  92. package/src/components/atoms/FlexGrid/FlexGrid.stories.tsx +59 -59
  93. package/src/components/atoms/FlexGrid/FlexGrid.theme.ts +82 -82
  94. package/src/components/atoms/FlexGrid/index.ts +1 -1
  95. package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.component.tsx +24 -24
  96. package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.interface.tsx +6 -6
  97. package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.theme.ts +134 -134
  98. package/src/components/atoms/FormField/CheckRadioField/index.ts +1 -1
  99. package/src/components/atoms/FormField/FormField.component.tsx +37 -37
  100. package/src/components/atoms/FormField/FormField.interface.ts +10 -10
  101. package/src/components/atoms/FormField/FormField.stories.tsx +499 -499
  102. package/src/components/atoms/FormField/FormField.theme.tsx +136 -136
  103. package/src/components/atoms/FormField/index.ts +1 -1
  104. package/src/components/atoms/Heading/Heading.component.tsx +18 -18
  105. package/src/components/atoms/Heading/Heading.interface.tsx +21 -21
  106. package/src/components/atoms/Heading/Heading.theme.ts +17 -17
  107. package/src/components/atoms/Heading/index.ts +1 -1
  108. package/src/components/atoms/Icon/Icon.component.tsx +19 -19
  109. package/src/components/atoms/Icon/Icon.interface.ts +8 -8
  110. package/src/components/atoms/Icon/Icon.stories.tsx +26 -26
  111. package/src/components/atoms/Icon/Icon.theme.ts +115 -115
  112. package/src/components/atoms/Icon/index.ts +1 -1
  113. package/src/components/atoms/ImageWrapper/ImageWrapper.component.tsx +42 -42
  114. package/src/components/atoms/ImageWrapper/ImageWrapper.interface.ts +16 -16
  115. package/src/components/atoms/ImageWrapper/ImageWrapper.stories.tsx +27 -27
  116. package/src/components/atoms/ImageWrapper/ImageWrapper.theme.ts +50 -50
  117. package/src/components/atoms/ImageWrapper/index.ts +1 -1
  118. package/src/components/atoms/LegalLinks/LegalLinks.component.tsx +35 -35
  119. package/src/components/atoms/LegalLinks/LegalLinks.interface.ts +12 -12
  120. package/src/components/atoms/LegalLinks/LegalLinks.stories.tsx +43 -43
  121. package/src/components/atoms/LegalLinks/LegalLinks.theme.ts +33 -33
  122. package/src/components/atoms/LegalLinks/index.ts +1 -1
  123. package/src/components/atoms/Loader/Loader.component.tsx +26 -26
  124. package/src/components/atoms/Loader/Loader.interface.ts +10 -10
  125. package/src/components/atoms/Loader/Loader.stories.tsx +33 -33
  126. package/src/components/atoms/Loader/Loader.theme.ts +51 -51
  127. package/src/components/atoms/Loader/index.ts +1 -1
  128. package/src/components/atoms/Marquee/Marquee.component.tsx +32 -32
  129. package/src/components/atoms/Marquee/Marquee.interface.ts +10 -10
  130. package/src/components/atoms/Marquee/Marquee.stories.tsx +20 -20
  131. package/src/components/atoms/Marquee/Marquee.theme.ts +40 -40
  132. package/src/components/atoms/Marquee/index.ts +1 -1
  133. package/src/components/atoms/Quote/Quote.component.tsx +29 -29
  134. package/src/components/atoms/Quote/Quote.interface.ts +10 -10
  135. package/src/components/atoms/Quote/Quote.stories.tsx +25 -25
  136. package/src/components/atoms/Quote/Quote.theme.ts +26 -26
  137. package/src/components/atoms/Quote/index.ts +1 -1
  138. package/src/components/atoms/RichText/RichText.component.tsx +32 -32
  139. package/src/components/atoms/RichText/RichText.interface.ts +11 -11
  140. package/src/components/atoms/RichText/RichText.stories.tsx +73 -73
  141. package/src/components/atoms/RichText/RichText.theme.ts +34 -34
  142. package/src/components/atoms/RichText/index.ts +1 -1
  143. package/src/components/atoms/ScrollingNav/ScrollingNav.component.tsx +18 -18
  144. package/src/components/atoms/ScrollingNav/ScrollingNav.interface.ts +8 -8
  145. package/src/components/atoms/ScrollingNav/ScrollingNav.stories.tsx +44 -44
  146. package/src/components/atoms/ScrollingNav/ScrollingNav.theme.ts +58 -58
  147. package/src/components/atoms/ScrollingNav/index.ts +1 -1
  148. package/src/components/atoms/Separator/Separator.component.tsx +19 -19
  149. package/src/components/atoms/Separator/Separator.interface.tsx +10 -10
  150. package/src/components/atoms/Separator/Separator.stories.tsx +29 -29
  151. package/src/components/atoms/Separator/Separator.theme.ts +9 -9
  152. package/src/components/atoms/Separator/index.ts +1 -1
  153. package/src/components/atoms/SocialLinks/SocialLinks.component.tsx +42 -42
  154. package/src/components/atoms/SocialLinks/SocialLinks.interface.ts +8 -8
  155. package/src/components/atoms/SocialLinks/SocialLinks.stories.tsx +48 -48
  156. package/src/components/atoms/SocialLinks/SocialLinks.theme.ts +80 -80
  157. package/src/components/atoms/SocialLinks/index.ts +1 -1
  158. package/src/components/atoms/Spacer/Spacer.component.tsx +34 -34
  159. package/src/components/atoms/Spacer/Spacer.interface.ts +24 -24
  160. package/src/components/atoms/Spacer/Spacer.stories.tsx +99 -99
  161. package/src/components/atoms/Spacer/Spacer.theme.ts +33 -33
  162. package/src/components/atoms/Spacer/index.ts +1 -1
  163. package/src/components/atoms/Video/Video.component.tsx +116 -116
  164. package/src/components/atoms/Video/Video.interface.ts +13 -13
  165. package/src/components/atoms/Video/Video.stories.tsx +37 -37
  166. package/src/components/atoms/Video/Video.theme.ts +44 -44
  167. package/src/components/atoms/Video/index.ts +1 -1
  168. package/src/components/atoms/VideoEmbed/VideoEmbed.component.tsx +109 -109
  169. package/src/components/atoms/VideoEmbed/VideoEmbed.interface.ts +13 -13
  170. package/src/components/atoms/VideoEmbed/VideoEmbed.stories.tsx +23 -23
  171. package/src/components/atoms/VideoEmbed/VideoEmbed.theme.ts +45 -45
  172. package/src/components/atoms/VideoEmbed/index.ts +1 -1
  173. package/src/components/common/PortalComponent/PortalComponent.tsx +48 -48
  174. package/src/components/common/PortalComponent/index.ts +1 -1
  175. package/src/components/molecules/Accordion/Accordion.component.tsx +58 -58
  176. package/src/components/molecules/Accordion/Accordion.interface.ts +15 -15
  177. package/src/components/molecules/Accordion/Accordion.stories.tsx +100 -100
  178. package/src/components/molecules/Accordion/Accordion.theme.ts +93 -93
  179. package/src/components/molecules/Accordion/index.ts +1 -1
  180. package/src/components/molecules/AwardCard/AwardCard.component.tsx +51 -0
  181. package/src/components/molecules/AwardCard/AwardCard.interface.ts +10 -0
  182. package/src/components/molecules/AwardCard/AwardCard.stories.tsx +34 -0
  183. package/src/components/molecules/AwardCard/AwardCard.theme.ts +33 -0
  184. package/src/components/molecules/AwardCard/index.ts +1 -0
  185. package/src/components/molecules/BlogCard/BlogCard.component.tsx +48 -48
  186. package/src/components/molecules/BlogCard/BlogCard.interface.ts +10 -10
  187. package/src/components/molecules/BlogCard/BlogCard.stories.tsx +37 -37
  188. package/src/components/molecules/BlogCard/BlogCard.theme.ts +41 -41
  189. package/src/components/molecules/BlogCard/index.ts +1 -1
  190. package/src/components/molecules/Card/Card.component.tsx +15 -15
  191. package/src/components/molecules/Card/Card.interface.ts +11 -11
  192. package/src/components/molecules/Card/Card.theme.ts +54 -54
  193. package/src/components/molecules/Card/index.ts +1 -1
  194. package/src/components/molecules/CareersCard/CareersCard.component.tsx +27 -27
  195. package/src/components/molecules/CareersCard/CareersCard.interface.ts +7 -7
  196. package/src/components/molecules/CareersCard/CareersCard.stories.tsx +30 -30
  197. package/src/components/molecules/CareersCard/CareersCard.theme.ts +13 -13
  198. package/src/components/molecules/CareersCard/index.ts +1 -1
  199. package/src/components/molecules/Dropdown/Dropdown.component.tsx +67 -67
  200. package/src/components/molecules/Dropdown/Dropdown.interface.ts +26 -26
  201. package/src/components/molecules/Dropdown/Dropdown.stories.tsx +54 -54
  202. package/src/components/molecules/Dropdown/Dropdown.theme.ts +69 -69
  203. package/src/components/molecules/Dropdown/index.ts +1 -1
  204. package/src/components/molecules/EventsCard/EventsCard.component.tsx +40 -41
  205. package/src/components/molecules/EventsCard/EventsCard.interface.ts +9 -10
  206. package/src/components/molecules/EventsCard/EventsCard.stories.tsx +37 -38
  207. package/src/components/molecules/EventsCard/EventsCard.theme.ts +33 -33
  208. package/src/components/molecules/EventsCard/index.ts +1 -1
  209. package/src/components/molecules/IconBox/IconBox.component.tsx +29 -29
  210. package/src/components/molecules/IconBox/IconBox.interface.tsx +10 -10
  211. package/src/components/molecules/IconBox/IconBox.stories.tsx +23 -23
  212. package/src/components/molecules/IconBox/IconBox.theme.ts +25 -25
  213. package/src/components/molecules/IconBox/index.ts +1 -1
  214. package/src/components/molecules/IconTitle/IconTitle.component.tsx +24 -24
  215. package/src/components/molecules/IconTitle/IconTitle.interface.tsx +10 -10
  216. package/src/components/molecules/IconTitle/IconTitle.stories.tsx +49 -49
  217. package/src/components/molecules/IconTitle/IconTitle.theme.ts +10 -10
  218. package/src/components/molecules/IconTitle/index.ts +1 -1
  219. package/src/components/molecules/LicenseCard/LicenseCard.component.tsx +27 -27
  220. package/src/components/molecules/LicenseCard/LicenseCard.interface.ts +6 -6
  221. package/src/components/molecules/LicenseCard/LicenseCard.stories.tsx +42 -42
  222. package/src/components/molecules/LicenseCard/LicenseCard.theme.ts +28 -28
  223. package/src/components/molecules/LicenseCard/index.ts +1 -1
  224. package/src/components/molecules/LogosCard/LogosCard.component.tsx +14 -14
  225. package/src/components/molecules/LogosCard/LogosCard.interface.ts +8 -8
  226. package/src/components/molecules/LogosCard/LogosCard.stories.tsx +38 -38
  227. package/src/components/molecules/LogosCard/LogosCard.theme.ts +19 -19
  228. package/src/components/molecules/LogosCard/index.ts +1 -1
  229. package/src/components/molecules/Modal/Modal.component.tsx +70 -70
  230. package/src/components/molecules/Modal/Modal.interface.ts +11 -11
  231. package/src/components/molecules/Modal/Modal.stories.tsx +57 -57
  232. package/src/components/molecules/Modal/Modal.theme.ts +55 -55
  233. package/src/components/molecules/Modal/index.ts +1 -1
  234. package/src/components/molecules/NewsCard/NewsCard.component.tsx +55 -55
  235. package/src/components/molecules/NewsCard/NewsCard.interface.ts +9 -9
  236. package/src/components/molecules/NewsCard/NewsCard.stories.tsx +44 -44
  237. package/src/components/molecules/NewsCard/NewsCard.theme.ts +77 -77
  238. package/src/components/molecules/NewsCard/index.ts +1 -1
  239. package/src/components/molecules/OffCanvas/OffCanvas.component.tsx +55 -55
  240. package/src/components/molecules/OffCanvas/OffCanvas.interface.ts +12 -12
  241. package/src/components/molecules/OffCanvas/OffCanvas.stories.tsx +55 -55
  242. package/src/components/molecules/OffCanvas/OffCanvas.theme.ts +50 -50
  243. package/src/components/molecules/OffCanvas/index.ts +1 -1
  244. package/src/components/molecules/ProductCard/ProductCard.component.tsx +60 -60
  245. package/src/components/molecules/ProductCard/ProductCard.interface.ts +7 -7
  246. package/src/components/molecules/ProductCard/ProductCard.stories.tsx +42 -42
  247. package/src/components/molecules/ProductCard/ProductCard.theme.ts +26 -26
  248. package/src/components/molecules/ProductCard/index.ts +1 -1
  249. package/src/components/molecules/ShareModal/ShareModal.component.tsx +167 -167
  250. package/src/components/molecules/ShareModal/ShareModal.interface.ts +9 -9
  251. package/src/components/molecules/ShareModal/ShareModal.stories.tsx +33 -33
  252. package/src/components/molecules/ShareModal/ShareModal.theme.ts +103 -103
  253. package/src/components/molecules/ShareModal/index.ts +1 -1
  254. package/src/components/molecules/TeamCard/TeamCard.component.tsx +31 -31
  255. package/src/components/molecules/TeamCard/TeamCard.interface.ts +7 -7
  256. package/src/components/molecules/TeamCard/TeamCard.stories.tsx +33 -33
  257. package/src/components/molecules/TeamCard/TeamCard.theme.ts +12 -12
  258. package/src/components/molecules/TeamCard/index.ts +1 -1
  259. package/src/components/organisms/CircularSlider/CircularSlider.component.tsx +231 -231
  260. package/src/components/organisms/CircularSlider/CircularSlider.interface.ts +13 -13
  261. package/src/components/organisms/CircularSlider/CircularSlider.stories.tsx +138 -138
  262. package/src/components/organisms/CircularSlider/CircularSlider.theme.ts +126 -126
  263. package/src/components/organisms/CircularSlider/index.ts +1 -1
  264. package/src/components/organisms/Cover/Cover.component.tsx +46 -46
  265. package/src/components/organisms/Cover/Cover.interface.ts +14 -14
  266. package/src/components/organisms/Cover/Cover.stories.tsx +97 -97
  267. package/src/components/organisms/Cover/Cover.theme.ts +49 -49
  268. package/src/components/organisms/Cover/index.ts +1 -1
  269. package/src/components/organisms/ProductsSlider/ProductsSlider.component.tsx +216 -216
  270. package/src/components/organisms/ProductsSlider/ProductsSlider.interface.ts +12 -12
  271. package/src/components/organisms/ProductsSlider/ProductsSlider.stories.tsx +132 -132
  272. package/src/components/organisms/ProductsSlider/ProductsSlider.theme.ts +77 -77
  273. package/src/components/organisms/ProductsSlider/index.ts +1 -1
  274. package/src/components/organisms/ProductsSlider//306/222.js +164 -164
  275. package/src/components/organisms/Slider/Slider.component.tsx +156 -154
  276. package/src/components/organisms/Slider/Slider.interface.ts +23 -19
  277. package/src/components/organisms/Slider/Slider.stories.tsx +223 -146
  278. package/src/components/organisms/Slider/Slider.theme.ts +144 -145
  279. package/src/components/organisms/Slider/Slider.utils.tsx +19 -19
  280. package/src/components/organisms/Slider/index.ts +1 -1
  281. package/src/components/organisms/Tabs/Tabs.component.tsx +88 -88
  282. package/src/components/organisms/Tabs/Tabs.interface.ts +18 -18
  283. package/src/components/organisms/Tabs/Tabs.stories.tsx +118 -118
  284. package/src/components/organisms/Tabs/Tabs.theme.ts +115 -115
  285. package/src/components/organisms/Tabs/index.ts +1 -1
  286. package/src/helpers/clickOutsideToClose.tsx +17 -17
  287. package/src/helpers/events.ts +9 -9
  288. package/src/helpers/exportCSS.tsx +27 -27
  289. package/src/helpers/getIcons.ts +5 -5
  290. package/src/helpers/isTouchDevice.tsx +11 -11
  291. package/src/helpers/useInterval.ts +25 -25
  292. package/src/helpers/useMediaMatch.tsx +26 -26
  293. package/src/helpers/uuid.ts +5 -5
  294. package/src/iconsList.json +1 -1
  295. package/src/index.ts +68 -68
  296. package/src/reportWebVitals.js +13 -13
  297. package/src/stories/Documentation/Colors.stories.tsx +46 -46
  298. package/src/stories/Documentation/Headings.stories.tsx +24 -24
  299. package/src/stories/Documentation/Icons.stories.tsx +73 -73
  300. package/src/stories/Documentation/JWT.stories.tsx +60 -60
  301. package/src/stories/Documentation/Utilities.stories.tsx +65 -65
  302. package/src/styles/Global.ts +301 -301
  303. package/src/styles/grid.ts +70 -70
  304. package/src/styles/reset.ts +47 -47
  305. package/src/styles/utilities.ts +374 -374
  306. package/src/styles/variables.ts +180 -180
  307. package/tsconfig.json +31 -31
@@ -1,33 +1,33 @@
1
- import { colors, radius, responsiveMedia } from '@/styles/variables';
2
- import styled, { css } from 'styled-components';
3
-
4
- import Card from '../Card/Card.component';
5
- import { IEventsCard } from './EventsCard.interface';
6
-
7
- export const StyledEventsCard = styled(Card) <IEventsCard>`
8
- padding: 1rem;
9
- border-radius: ${radius.md};
10
- text-align: left;
11
- transition: all 0.3s;
12
-
13
- picture{
14
- border-radius: 100%;
15
- & img{
16
- opacity: 1 !important;
17
- }
18
- }
19
- & figcaption{
20
- color: ${colors.third10};
21
- padding:1rem;
22
- margin-top: 1rem;
23
- }
24
-
25
- &:hover{
26
- background-color: ${colors.third10};
27
-
28
- & figcaption{
29
- color: ${colors.secondary50};
30
- }
31
- }
32
- `;
33
-
1
+ import { colors, radius, responsiveMedia } from '@/styles/variables';
2
+ import styled, { css } from 'styled-components';
3
+
4
+ import Card from '../Card/Card.component';
5
+ import { IEventsCard } from './EventsCard.interface';
6
+
7
+ export const StyledEventsCard = styled(Card) <IEventsCard>`
8
+ padding: 1rem;
9
+ border-radius: ${radius.md};
10
+ text-align: left;
11
+ transition: all 0.3s;
12
+
13
+ picture{
14
+ border-radius: 100%;
15
+ & img{
16
+ opacity: 1 !important;
17
+ }
18
+ }
19
+ & figcaption{
20
+ color: ${colors.third10};
21
+ padding:1rem;
22
+ margin-top: 1rem;
23
+ }
24
+
25
+ &:hover{
26
+ background-color: ${colors.third10};
27
+
28
+ & figcaption{
29
+ color: ${colors.secondary50};
30
+ }
31
+ }
32
+ `;
33
+
@@ -1 +1 @@
1
- export { default } from "./EventsCard.component";
1
+ export { default } from "./EventsCard.component";
@@ -1,29 +1,29 @@
1
- import React from 'react';
2
-
3
- import Heading from '@/components/atoms/Heading/Heading.component';
4
- import RichText from '@/components/atoms/RichText/RichText.component';
5
-
6
- import { IIconBox } from './IconBox.interface';
7
- import { StyledIconBox } from './IconBox.theme';
8
-
9
- const IconBox = ({
10
- label,
11
- icon,
12
- description,
13
- className,
14
- ...props
15
- }: IIconBox) => {
16
- return (
17
- <StyledIconBox className={className} {...props}>
18
- {icon}
19
- <div>
20
- <Heading size="texts" tag="span" style={{ fontWeight: 600 }}>
21
- {label}
22
- </Heading>
23
- <RichText tag='p'>{description}</RichText>
24
- </div>
25
- </StyledIconBox>
26
- )
27
- }
28
-
29
- export default IconBox
1
+ import React from 'react';
2
+
3
+ import Heading from '@/components/atoms/Heading/Heading.component';
4
+ import RichText from '@/components/atoms/RichText/RichText.component';
5
+
6
+ import { IIconBox } from './IconBox.interface';
7
+ import { StyledIconBox } from './IconBox.theme';
8
+
9
+ const IconBox = ({
10
+ label,
11
+ icon,
12
+ description,
13
+ className,
14
+ ...props
15
+ }: IIconBox) => {
16
+ return (
17
+ <StyledIconBox className={className} {...props}>
18
+ {icon}
19
+ <div>
20
+ <Heading size="texts" tag="span" style={{ fontWeight: 600 }}>
21
+ {label}
22
+ </Heading>
23
+ <RichText tag='p'>{description}</RichText>
24
+ </div>
25
+ </StyledIconBox>
26
+ )
27
+ }
28
+
29
+ export default IconBox
@@ -1,10 +1,10 @@
1
- import { CSSProperties } from 'react';
2
-
3
- export type IIconBox = {
4
- label?: string;
5
- icon?: React.ReactElement;
6
- description?: string;
7
- className?: string;
8
- style?: CSSProperties
9
- children?: React.ReactNode;
10
- }
1
+ import { CSSProperties } from 'react';
2
+
3
+ export type IIconBox = {
4
+ label?: string;
5
+ icon?: React.ReactElement;
6
+ description?: string;
7
+ className?: string;
8
+ style?: CSSProperties
9
+ children?: React.ReactNode;
10
+ }
@@ -1,23 +1,23 @@
1
- import type { Meta, StoryObj } from '@storybook/react'
2
-
3
- import { IIconBox } from './IconBox.interface'
4
- import Icon from '@/components/atoms/Icon'
5
- import IconBox from './IconBox.component'
6
- import React from 'react'
7
-
8
- // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
9
- export default {
10
- title: 'Components/IconBox',
11
- component: IconBox,
12
- tags: ['autodocs']
13
- } as Meta
14
-
15
- export const Simple: StoryObj<IIconBox> = {
16
- render: args => <IconBox {...args}></IconBox>,
17
- args: {
18
- icon: <Icon icon="icon-right-chevron" />,
19
- label: 'Lorem ipsum',
20
- description:
21
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.'
22
- }
23
- }
1
+ import type { Meta, StoryObj } from '@storybook/react'
2
+
3
+ import { IIconBox } from './IconBox.interface'
4
+ import Icon from '@/components/atoms/Icon'
5
+ import IconBox from './IconBox.component'
6
+ import React from 'react'
7
+
8
+ // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
9
+ export default {
10
+ title: 'Components/IconBox',
11
+ component: IconBox,
12
+ tags: ['autodocs']
13
+ } as Meta
14
+
15
+ export const Simple: StoryObj<IIconBox> = {
16
+ render: args => <IconBox {...args}></IconBox>,
17
+ args: {
18
+ icon: <Icon icon="icon-right-chevron" />,
19
+ label: 'Lorem ipsum',
20
+ description:
21
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.'
22
+ }
23
+ }
@@ -1,25 +1,25 @@
1
- import styled, { css } from 'styled-components';
2
-
3
- import { IIconBox } from './IconBox.interface';
4
- import { colors } from '@/styles/variables';
5
-
6
- export const StyledIconBox = styled.div<IIconBox>`
7
- display: flex;
8
-
9
- & i{
10
- display: flex;
11
- align-items: center;
12
- justify-content: center;
13
-
14
- width: 32px;
15
- height: 32px;
16
-
17
- color: ${colors.primary50};
18
- background: ${colors.secondary50};
19
- border-radius: 50px;
20
-
21
- text-align:center;
22
-
23
- margin-right:8px;
24
- }
25
- `;
1
+ import styled, { css } from 'styled-components';
2
+
3
+ import { IIconBox } from './IconBox.interface';
4
+ import { colors } from '@/styles/variables';
5
+
6
+ export const StyledIconBox = styled.div<IIconBox>`
7
+ display: flex;
8
+
9
+ & i{
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+
14
+ width: 32px;
15
+ height: 32px;
16
+
17
+ color: ${colors.primary50};
18
+ background: ${colors.secondary50};
19
+ border-radius: 50px;
20
+
21
+ text-align:center;
22
+
23
+ margin-right:8px;
24
+ }
25
+ `;
@@ -1 +1 @@
1
- export { default } from "./IconBox.component";
1
+ export { default } from "./IconBox.component";
@@ -1,24 +1,24 @@
1
- import Heading from '@/components/atoms/Heading/Heading.component'
2
- import { IIconTitle } from './IconTitle.interface'
3
- import React from 'react'
4
- import { StyledIconTitle } from './IconTitle.theme'
5
-
6
- const IconTitle = ({
7
- label,
8
- icon,
9
- imageElement,
10
- className,
11
- style,
12
- children,
13
- ...props
14
- }: IIconTitle) => {
15
- return (
16
- <StyledIconTitle className={className} style={style}>
17
- {icon && icon}
18
- {imageElement && imageElement}
19
- {children}
20
- </StyledIconTitle>
21
- )
22
- }
23
-
24
- export default IconTitle
1
+ import Heading from '@/components/atoms/Heading/Heading.component'
2
+ import { IIconTitle } from './IconTitle.interface'
3
+ import React from 'react'
4
+ import { StyledIconTitle } from './IconTitle.theme'
5
+
6
+ const IconTitle = ({
7
+ label,
8
+ icon,
9
+ imageElement,
10
+ className,
11
+ style,
12
+ children,
13
+ ...props
14
+ }: IIconTitle) => {
15
+ return (
16
+ <StyledIconTitle className={className} style={style}>
17
+ {icon && icon}
18
+ {imageElement && imageElement}
19
+ {children}
20
+ </StyledIconTitle>
21
+ )
22
+ }
23
+
24
+ export default IconTitle
@@ -1,10 +1,10 @@
1
- import { CSSProperties } from 'react';
2
-
3
- export type IIconTitle = {
4
- label?: string;
5
- icon?: React.ReactElement;
6
- imageElement?: React.ReactElement;
7
- className?: string;
8
- style?: CSSProperties
9
- children?: React.ReactNode;
10
- }
1
+ import { CSSProperties } from 'react';
2
+
3
+ export type IIconTitle = {
4
+ label?: string;
5
+ icon?: React.ReactElement;
6
+ imageElement?: React.ReactElement;
7
+ className?: string;
8
+ style?: CSSProperties
9
+ children?: React.ReactNode;
10
+ }
@@ -1,49 +1,49 @@
1
- import type { Meta, StoryObj } from '@storybook/react'
2
-
3
- import Heading from '@/components/atoms/Heading'
4
- import { IIconTitle } from './IconTitle.interface'
5
- import Icon from '@/components/atoms/Icon'
6
- import IconTitle from './IconTitle.component'
7
- import React from 'react'
8
-
9
- // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
10
- export default {
11
- title: 'Components/IconTitle',
12
- component: IconTitle,
13
- tags: ['autodocs']
14
- } as Meta
15
-
16
- export const IconStory: StoryObj<IIconTitle> = {
17
- render: args => (
18
- <IconTitle {...args}>
19
- <Heading size="texts" tag="h4">
20
- Lorem ipsum
21
- </Heading>
22
- </IconTitle>
23
- ),
24
- args: {
25
- icon: <Icon icon="icon-chevron-up" />
26
- }
27
- }
28
-
29
- export const Image: StoryObj<IIconTitle> = {
30
- render: args => (
31
- <IconTitle {...args}>
32
- <Heading size="texts" tag="h4">
33
- Lorem ipsum
34
- </Heading>
35
- </IconTitle>
36
- ),
37
- args: {
38
- imageElement: (
39
- <img
40
- width="100%"
41
- height="100%"
42
- sizes="100vw"
43
- decoding="async"
44
- src="/assets/placeholder.png"
45
- alt="Empty state"
46
- />
47
- )
48
- }
49
- }
1
+ import type { Meta, StoryObj } from '@storybook/react'
2
+
3
+ import Heading from '@/components/atoms/Heading'
4
+ import { IIconTitle } from './IconTitle.interface'
5
+ import Icon from '@/components/atoms/Icon'
6
+ import IconTitle from './IconTitle.component'
7
+ import React from 'react'
8
+
9
+ // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
10
+ export default {
11
+ title: 'Components/IconTitle',
12
+ component: IconTitle,
13
+ tags: ['autodocs']
14
+ } as Meta
15
+
16
+ export const IconStory: StoryObj<IIconTitle> = {
17
+ render: args => (
18
+ <IconTitle {...args}>
19
+ <Heading size="texts" tag="h4">
20
+ Lorem ipsum
21
+ </Heading>
22
+ </IconTitle>
23
+ ),
24
+ args: {
25
+ icon: <Icon icon="icon-chevron-up" />
26
+ }
27
+ }
28
+
29
+ export const Image: StoryObj<IIconTitle> = {
30
+ render: args => (
31
+ <IconTitle {...args}>
32
+ <Heading size="texts" tag="h4">
33
+ Lorem ipsum
34
+ </Heading>
35
+ </IconTitle>
36
+ ),
37
+ args: {
38
+ imageElement: (
39
+ <img
40
+ width="100%"
41
+ height="100%"
42
+ sizes="100vw"
43
+ decoding="async"
44
+ src="/assets/placeholder.png"
45
+ alt="Empty state"
46
+ />
47
+ )
48
+ }
49
+ }
@@ -1,10 +1,10 @@
1
- import styled, { css } from 'styled-components';
2
-
3
- import { IIconTitle } from './IconTitle.interface';
4
- import { colors } from '@/styles/variables';
5
-
6
- export const StyledIconTitle = styled.div<IIconTitle>`
7
- display:flex;
8
- align-items: center;
9
- gap:4px;
10
- `;
1
+ import styled, { css } from 'styled-components';
2
+
3
+ import { IIconTitle } from './IconTitle.interface';
4
+ import { colors } from '@/styles/variables';
5
+
6
+ export const StyledIconTitle = styled.div<IIconTitle>`
7
+ display:flex;
8
+ align-items: center;
9
+ gap:4px;
10
+ `;
@@ -1 +1 @@
1
- export { default } from "./IconTitle.component";
1
+ export { default } from "./IconTitle.component";
@@ -1,27 +1,27 @@
1
- import Heading from '@/components/atoms/Heading'
2
- import { ILicenseCard } from './LicenseCard.interface'
3
- import React from 'react'
4
- import { StyledLicenseCard } from './LicenseCard.theme'
5
-
6
- const LicenseCard = ({
7
- title,
8
- imageElement,
9
- description,
10
- className,
11
- style,
12
- ...props
13
- }: ILicenseCard) => {
14
- return (
15
- <StyledLicenseCard className={className} style={style}>
16
- <Heading tag={'h3'} size={'h2'} className={'text-uppercase fw-bold'}>
17
- {title}
18
- </Heading>
19
- <Heading tag={'span'} size={'h5'} className={'mt-4 mb-4'}>
20
- {description}
21
- </Heading>
22
- {imageElement}
23
- </StyledLicenseCard>
24
- )
25
- }
26
-
27
- export default LicenseCard
1
+ import Heading from '@/components/atoms/Heading'
2
+ import { ILicenseCard } from './LicenseCard.interface'
3
+ import React from 'react'
4
+ import { StyledLicenseCard } from './LicenseCard.theme'
5
+
6
+ const LicenseCard = ({
7
+ title,
8
+ imageElement,
9
+ description,
10
+ className,
11
+ style,
12
+ ...props
13
+ }: ILicenseCard) => {
14
+ return (
15
+ <StyledLicenseCard className={className} style={style}>
16
+ <Heading tag={'h3'} size={'h2'} className={'text-uppercase fw-bold'}>
17
+ {title}
18
+ </Heading>
19
+ <Heading tag={'span'} size={'h5'} className={'mt-4 mb-4'}>
20
+ {description}
21
+ </Heading>
22
+ {imageElement}
23
+ </StyledLicenseCard>
24
+ )
25
+ }
26
+
27
+ export default LicenseCard
@@ -1,6 +1,6 @@
1
- import { ICard } from '../Card/Card.interface';
2
-
3
- export interface ILicenseCard extends ICard {
4
- title?: string
5
- description?: string | React.ReactElement
6
- }
1
+ import { ICard } from '../Card/Card.interface';
2
+
3
+ export interface ILicenseCard extends ICard {
4
+ title?: string
5
+ description?: string | React.ReactElement
6
+ }
@@ -1,42 +1,42 @@
1
- import type { Meta, StoryObj } from '@storybook/react'
2
-
3
- import { ILicenseCard } from './LicenseCard.interface'
4
- import LicenseCard from './LicenseCard.component'
5
- import React from 'react'
6
-
7
- // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
8
- export default {
9
- title: 'Components/LicenseCard',
10
- component: LicenseCard,
11
- tags: ['autodocs']
12
- } as Meta
13
-
14
- const image = (
15
- <img
16
- width="100%"
17
- height="100%"
18
- sizes="100vw"
19
- decoding="async"
20
- src="/assets/placeholder.png"
21
- alt="Empty state"
22
- />
23
- )
24
-
25
- export const Simple: StoryObj<ILicenseCard> = {
26
- render: args => (
27
- <>
28
- <LicenseCard
29
- {...args}
30
- title="Lorem"
31
- style={{ maxWidth: '320px' }}
32
- ></LicenseCard>
33
- <LicenseCard {...args} style={{ maxWidth: '320px' }}></LicenseCard>
34
- </>
35
- ),
36
- args: {
37
- title: 'Cras vel facilisis tellus',
38
- imageElement: image,
39
- description:
40
- 'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.'
41
- }
42
- }
1
+ import type { Meta, StoryObj } from '@storybook/react'
2
+
3
+ import { ILicenseCard } from './LicenseCard.interface'
4
+ import LicenseCard from './LicenseCard.component'
5
+ import React from 'react'
6
+
7
+ // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
8
+ export default {
9
+ title: 'Components/LicenseCard',
10
+ component: LicenseCard,
11
+ tags: ['autodocs']
12
+ } as Meta
13
+
14
+ const image = (
15
+ <img
16
+ width="100%"
17
+ height="100%"
18
+ sizes="100vw"
19
+ decoding="async"
20
+ src="/assets/placeholder.png"
21
+ alt="Empty state"
22
+ />
23
+ )
24
+
25
+ export const Simple: StoryObj<ILicenseCard> = {
26
+ render: args => (
27
+ <>
28
+ <LicenseCard
29
+ {...args}
30
+ title="Lorem"
31
+ style={{ maxWidth: '320px' }}
32
+ ></LicenseCard>
33
+ <LicenseCard {...args} style={{ maxWidth: '320px' }}></LicenseCard>
34
+ </>
35
+ ),
36
+ args: {
37
+ title: 'Cras vel facilisis tellus',
38
+ imageElement: image,
39
+ description:
40
+ 'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.'
41
+ }
42
+ }
@@ -1,28 +1,28 @@
1
- import { colors, radius, responsiveMedia } from '@/styles/variables';
2
- import styled, { css } from 'styled-components';
3
-
4
- import { ILicenseCard } from './LicenseCard.interface';
5
-
6
- export const StyledLicenseCard = styled.div <ILicenseCard>`
7
- display: flex;
8
- flex-flow: column;
9
- align-items: center;
10
- text-align:center;
11
- background-color: ${colors.third10};
12
- padding: 2rem;
13
- border-radius: 0 ${radius.lg};
14
-
15
- & img{
16
- width: 100%;
17
- max-width: 4rem;
18
- object-fit: contain;
19
- }
20
-
21
-
22
- @media only screen and (min-width: ${responsiveMedia}) {
23
- & img{
24
- max-width: 7rem;
25
- }
26
- }
27
- `;
28
-
1
+ import { colors, radius, responsiveMedia } from '@/styles/variables';
2
+ import styled, { css } from 'styled-components';
3
+
4
+ import { ILicenseCard } from './LicenseCard.interface';
5
+
6
+ export const StyledLicenseCard = styled.div <ILicenseCard>`
7
+ display: flex;
8
+ flex-flow: column;
9
+ align-items: center;
10
+ text-align:center;
11
+ background-color: ${colors.third10};
12
+ padding: 2rem;
13
+ border-radius: 0 ${radius.lg};
14
+
15
+ & img{
16
+ width: 100%;
17
+ max-width: 4rem;
18
+ object-fit: contain;
19
+ }
20
+
21
+
22
+ @media only screen and (min-width: ${responsiveMedia}) {
23
+ & img{
24
+ max-width: 7rem;
25
+ }
26
+ }
27
+ `;
28
+
@@ -1 +1 @@
1
- export { default } from "./LicenseCard.component";
1
+ export { default } from "./LicenseCard.component";