oddsgate-ds 1.0.174 → 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 (303) 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 +1 -1
  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/organisms/Slider/Slider.component.d.ts +1 -1
  19. package/dist/cjs/types/components/organisms/Slider/Slider.interface.d.ts +3 -0
  20. package/dist/esm/assets/components/quotes.svg +3 -3
  21. package/dist/esm/index.js +5 -5
  22. package/dist/esm/index.js.map +1 -1
  23. package/dist/esm/types/components/atoms/AwardBadge/AwardBadge.component.d.ts +11 -0
  24. package/dist/esm/types/components/atoms/AwardBadge/AwardBadge.interface.d.ts +4 -0
  25. package/dist/esm/types/components/atoms/AwardBadge/AwardBadge.theme.d.ts +3 -0
  26. package/dist/esm/types/components/atoms/AwardBadge/index.d.ts +1 -0
  27. package/dist/esm/types/components/molecules/AwardCard/AwardCard.component.d.ts +15 -0
  28. package/dist/esm/types/components/molecules/AwardCard/AwardCard.interface.d.ts +10 -0
  29. package/dist/esm/types/components/molecules/AwardCard/AwardCard.theme.d.ts +6 -0
  30. package/dist/esm/types/components/molecules/AwardCard/index.d.ts +1 -0
  31. package/dist/esm/types/components/organisms/Slider/Slider.component.d.ts +1 -1
  32. package/dist/esm/types/components/organisms/Slider/Slider.interface.d.ts +3 -0
  33. package/dist/public/assets/components/quotes.svg +3 -3
  34. package/dist/public/assets/empty-state.svg +28 -28
  35. package/dist/public/fonts/Nichrome/mdnichrome-bold-webfont.svg +241 -241
  36. package/dist/public/fonts/Nichrome/mdnichrome-regular-webfont.svg +241 -241
  37. package/dist/public/fonts/miewfont/miewfont.svg +38 -38
  38. package/dist/types.d.ts +4 -1
  39. package/package.json +103 -103
  40. package/prettier.config.js +7 -7
  41. package/public/assets/components/quotes.svg +3 -3
  42. package/public/assets/empty-state.svg +28 -28
  43. package/public/fonts/Nichrome/mdnichrome-bold-webfont.svg +241 -241
  44. package/public/fonts/Nichrome/mdnichrome-regular-webfont.svg +241 -241
  45. package/public/fonts/miewfont/miewfont.svg +38 -38
  46. package/rollup.config.js +98 -98
  47. package/src/components/atoms/AwardBadge/AwardBadge.component.tsx +25 -0
  48. package/src/components/atoms/AwardBadge/AwardBadge.interface.ts +4 -0
  49. package/src/components/atoms/AwardBadge/AwardBadge.stories.tsx +48 -0
  50. package/src/components/atoms/AwardBadge/AwardBadge.theme.ts +28 -0
  51. package/src/components/atoms/AwardBadge/index.ts +1 -0
  52. package/src/components/atoms/Button/Button.component.tsx +60 -60
  53. package/src/components/atoms/Button/Button.interface.ts +29 -29
  54. package/src/components/atoms/Button/Button.stories.tsx +65 -65
  55. package/src/components/atoms/Button/Button.theme.ts +180 -180
  56. package/src/components/atoms/Button/index.ts +1 -1
  57. package/src/components/atoms/CardMarquee/CardMarquee.component.tsx +24 -24
  58. package/src/components/atoms/CardMarquee/CardMarquee.interface.ts +15 -15
  59. package/src/components/atoms/CardMarquee/CardMarquee.stories.tsx +21 -21
  60. package/src/components/atoms/CardMarquee/CardMarquee.theme.ts +48 -48
  61. package/src/components/atoms/CardMarquee/index.ts +1 -1
  62. package/src/components/atoms/Chip/Chip.component.tsx +30 -30
  63. package/src/components/atoms/Chip/Chip.interface.ts +14 -14
  64. package/src/components/atoms/Chip/Chip.stories.tsx +42 -42
  65. package/src/components/atoms/Chip/Chip.theme.ts +57 -57
  66. package/src/components/atoms/Chip/index.ts +1 -1
  67. package/src/components/atoms/CloseButton/CloseButton.component.tsx +17 -17
  68. package/src/components/atoms/CloseButton/CloseButton.interface.ts +9 -9
  69. package/src/components/atoms/CloseButton/CloseButton.stories.tsx +24 -24
  70. package/src/components/atoms/CloseButton/CloseButton.theme.ts +66 -66
  71. package/src/components/atoms/CloseButton/index.ts +1 -1
  72. package/src/components/atoms/Counter/Counter.component.tsx +99 -99
  73. package/src/components/atoms/Counter/Counter.interface.ts +10 -10
  74. package/src/components/atoms/Counter/Counter.stories.tsx +29 -29
  75. package/src/components/atoms/Counter/Counter.theme.ts +27 -27
  76. package/src/components/atoms/Counter/index.ts +1 -1
  77. package/src/components/atoms/EmptyState/EmptyState.component.tsx +27 -27
  78. package/src/components/atoms/EmptyState/EmptyState.interface.ts +10 -10
  79. package/src/components/atoms/EmptyState/EmptyState.stories.tsx +34 -34
  80. package/src/components/atoms/EmptyState/EmptyState.theme.ts +27 -27
  81. package/src/components/atoms/EmptyState/index.ts +1 -1
  82. package/src/components/atoms/Flex/Flex.component.tsx +30 -30
  83. package/src/components/atoms/Flex/Flex.interface.ts +24 -24
  84. package/src/components/atoms/Flex/Flex.theme.ts +12 -12
  85. package/src/components/atoms/Flex/index.ts +1 -1
  86. package/src/components/atoms/FlexGrid/FlexGrid.component.tsx +62 -62
  87. package/src/components/atoms/FlexGrid/FlexGrid.interface.ts +55 -55
  88. package/src/components/atoms/FlexGrid/FlexGrid.stories.tsx +59 -59
  89. package/src/components/atoms/FlexGrid/FlexGrid.theme.ts +82 -82
  90. package/src/components/atoms/FlexGrid/index.ts +1 -1
  91. package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.component.tsx +24 -24
  92. package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.interface.tsx +6 -6
  93. package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.theme.ts +134 -134
  94. package/src/components/atoms/FormField/CheckRadioField/index.ts +1 -1
  95. package/src/components/atoms/FormField/FormField.component.tsx +37 -37
  96. package/src/components/atoms/FormField/FormField.interface.ts +10 -10
  97. package/src/components/atoms/FormField/FormField.stories.tsx +499 -499
  98. package/src/components/atoms/FormField/FormField.theme.tsx +136 -136
  99. package/src/components/atoms/FormField/index.ts +1 -1
  100. package/src/components/atoms/Heading/Heading.component.tsx +18 -18
  101. package/src/components/atoms/Heading/Heading.interface.tsx +21 -21
  102. package/src/components/atoms/Heading/Heading.theme.ts +17 -17
  103. package/src/components/atoms/Heading/index.ts +1 -1
  104. package/src/components/atoms/Icon/Icon.component.tsx +19 -19
  105. package/src/components/atoms/Icon/Icon.interface.ts +8 -8
  106. package/src/components/atoms/Icon/Icon.stories.tsx +26 -26
  107. package/src/components/atoms/Icon/Icon.theme.ts +115 -115
  108. package/src/components/atoms/Icon/index.ts +1 -1
  109. package/src/components/atoms/ImageWrapper/ImageWrapper.component.tsx +42 -42
  110. package/src/components/atoms/ImageWrapper/ImageWrapper.interface.ts +16 -16
  111. package/src/components/atoms/ImageWrapper/ImageWrapper.stories.tsx +27 -27
  112. package/src/components/atoms/ImageWrapper/ImageWrapper.theme.ts +50 -50
  113. package/src/components/atoms/ImageWrapper/index.ts +1 -1
  114. package/src/components/atoms/LegalLinks/LegalLinks.component.tsx +35 -35
  115. package/src/components/atoms/LegalLinks/LegalLinks.interface.ts +12 -12
  116. package/src/components/atoms/LegalLinks/LegalLinks.stories.tsx +43 -43
  117. package/src/components/atoms/LegalLinks/LegalLinks.theme.ts +33 -33
  118. package/src/components/atoms/LegalLinks/index.ts +1 -1
  119. package/src/components/atoms/Loader/Loader.component.tsx +26 -26
  120. package/src/components/atoms/Loader/Loader.interface.ts +10 -10
  121. package/src/components/atoms/Loader/Loader.stories.tsx +33 -33
  122. package/src/components/atoms/Loader/Loader.theme.ts +51 -51
  123. package/src/components/atoms/Loader/index.ts +1 -1
  124. package/src/components/atoms/Marquee/Marquee.component.tsx +32 -32
  125. package/src/components/atoms/Marquee/Marquee.interface.ts +10 -10
  126. package/src/components/atoms/Marquee/Marquee.stories.tsx +20 -20
  127. package/src/components/atoms/Marquee/Marquee.theme.ts +40 -40
  128. package/src/components/atoms/Marquee/index.ts +1 -1
  129. package/src/components/atoms/Quote/Quote.component.tsx +29 -29
  130. package/src/components/atoms/Quote/Quote.interface.ts +10 -10
  131. package/src/components/atoms/Quote/Quote.stories.tsx +25 -25
  132. package/src/components/atoms/Quote/Quote.theme.ts +26 -26
  133. package/src/components/atoms/Quote/index.ts +1 -1
  134. package/src/components/atoms/RichText/RichText.component.tsx +32 -32
  135. package/src/components/atoms/RichText/RichText.interface.ts +11 -11
  136. package/src/components/atoms/RichText/RichText.stories.tsx +73 -73
  137. package/src/components/atoms/RichText/RichText.theme.ts +34 -34
  138. package/src/components/atoms/RichText/index.ts +1 -1
  139. package/src/components/atoms/ScrollingNav/ScrollingNav.component.tsx +18 -18
  140. package/src/components/atoms/ScrollingNav/ScrollingNav.interface.ts +8 -8
  141. package/src/components/atoms/ScrollingNav/ScrollingNav.stories.tsx +44 -44
  142. package/src/components/atoms/ScrollingNav/ScrollingNav.theme.ts +58 -58
  143. package/src/components/atoms/ScrollingNav/index.ts +1 -1
  144. package/src/components/atoms/Separator/Separator.component.tsx +19 -19
  145. package/src/components/atoms/Separator/Separator.interface.tsx +10 -10
  146. package/src/components/atoms/Separator/Separator.stories.tsx +29 -29
  147. package/src/components/atoms/Separator/Separator.theme.ts +9 -9
  148. package/src/components/atoms/Separator/index.ts +1 -1
  149. package/src/components/atoms/SocialLinks/SocialLinks.component.tsx +42 -42
  150. package/src/components/atoms/SocialLinks/SocialLinks.interface.ts +8 -8
  151. package/src/components/atoms/SocialLinks/SocialLinks.stories.tsx +48 -48
  152. package/src/components/atoms/SocialLinks/SocialLinks.theme.ts +80 -80
  153. package/src/components/atoms/SocialLinks/index.ts +1 -1
  154. package/src/components/atoms/Spacer/Spacer.component.tsx +34 -34
  155. package/src/components/atoms/Spacer/Spacer.interface.ts +24 -24
  156. package/src/components/atoms/Spacer/Spacer.stories.tsx +99 -99
  157. package/src/components/atoms/Spacer/Spacer.theme.ts +33 -33
  158. package/src/components/atoms/Spacer/index.ts +1 -1
  159. package/src/components/atoms/Video/Video.component.tsx +116 -116
  160. package/src/components/atoms/Video/Video.interface.ts +13 -13
  161. package/src/components/atoms/Video/Video.stories.tsx +37 -37
  162. package/src/components/atoms/Video/Video.theme.ts +44 -44
  163. package/src/components/atoms/Video/index.ts +1 -1
  164. package/src/components/atoms/VideoEmbed/VideoEmbed.component.tsx +109 -109
  165. package/src/components/atoms/VideoEmbed/VideoEmbed.interface.ts +13 -13
  166. package/src/components/atoms/VideoEmbed/VideoEmbed.stories.tsx +23 -23
  167. package/src/components/atoms/VideoEmbed/VideoEmbed.theme.ts +45 -45
  168. package/src/components/atoms/VideoEmbed/index.ts +1 -1
  169. package/src/components/common/PortalComponent/PortalComponent.tsx +48 -48
  170. package/src/components/common/PortalComponent/index.ts +1 -1
  171. package/src/components/molecules/Accordion/Accordion.component.tsx +58 -58
  172. package/src/components/molecules/Accordion/Accordion.interface.ts +15 -15
  173. package/src/components/molecules/Accordion/Accordion.stories.tsx +100 -100
  174. package/src/components/molecules/Accordion/Accordion.theme.ts +93 -93
  175. package/src/components/molecules/Accordion/index.ts +1 -1
  176. package/src/components/molecules/AwardCard/AwardCard.component.tsx +51 -0
  177. package/src/components/molecules/AwardCard/AwardCard.interface.ts +10 -0
  178. package/src/components/molecules/AwardCard/AwardCard.stories.tsx +34 -0
  179. package/src/components/molecules/AwardCard/AwardCard.theme.ts +33 -0
  180. package/src/components/molecules/AwardCard/index.ts +1 -0
  181. package/src/components/molecules/BlogCard/BlogCard.component.tsx +48 -48
  182. package/src/components/molecules/BlogCard/BlogCard.interface.ts +10 -10
  183. package/src/components/molecules/BlogCard/BlogCard.stories.tsx +37 -37
  184. package/src/components/molecules/BlogCard/BlogCard.theme.ts +41 -41
  185. package/src/components/molecules/BlogCard/index.ts +1 -1
  186. package/src/components/molecules/Card/Card.component.tsx +15 -15
  187. package/src/components/molecules/Card/Card.interface.ts +11 -11
  188. package/src/components/molecules/Card/Card.theme.ts +54 -54
  189. package/src/components/molecules/Card/index.ts +1 -1
  190. package/src/components/molecules/CareersCard/CareersCard.component.tsx +27 -27
  191. package/src/components/molecules/CareersCard/CareersCard.interface.ts +7 -7
  192. package/src/components/molecules/CareersCard/CareersCard.stories.tsx +30 -30
  193. package/src/components/molecules/CareersCard/CareersCard.theme.ts +13 -13
  194. package/src/components/molecules/CareersCard/index.ts +1 -1
  195. package/src/components/molecules/Dropdown/Dropdown.component.tsx +67 -67
  196. package/src/components/molecules/Dropdown/Dropdown.interface.ts +26 -26
  197. package/src/components/molecules/Dropdown/Dropdown.stories.tsx +54 -54
  198. package/src/components/molecules/Dropdown/Dropdown.theme.ts +69 -69
  199. package/src/components/molecules/Dropdown/index.ts +1 -1
  200. package/src/components/molecules/EventsCard/EventsCard.component.tsx +40 -40
  201. package/src/components/molecules/EventsCard/EventsCard.interface.ts +9 -9
  202. package/src/components/molecules/EventsCard/EventsCard.stories.tsx +37 -37
  203. package/src/components/molecules/EventsCard/EventsCard.theme.ts +33 -33
  204. package/src/components/molecules/EventsCard/index.ts +1 -1
  205. package/src/components/molecules/IconBox/IconBox.component.tsx +29 -29
  206. package/src/components/molecules/IconBox/IconBox.interface.tsx +10 -10
  207. package/src/components/molecules/IconBox/IconBox.stories.tsx +23 -23
  208. package/src/components/molecules/IconBox/IconBox.theme.ts +25 -25
  209. package/src/components/molecules/IconBox/index.ts +1 -1
  210. package/src/components/molecules/IconTitle/IconTitle.component.tsx +24 -24
  211. package/src/components/molecules/IconTitle/IconTitle.interface.tsx +10 -10
  212. package/src/components/molecules/IconTitle/IconTitle.stories.tsx +49 -49
  213. package/src/components/molecules/IconTitle/IconTitle.theme.ts +10 -10
  214. package/src/components/molecules/IconTitle/index.ts +1 -1
  215. package/src/components/molecules/LicenseCard/LicenseCard.component.tsx +27 -27
  216. package/src/components/molecules/LicenseCard/LicenseCard.interface.ts +6 -6
  217. package/src/components/molecules/LicenseCard/LicenseCard.stories.tsx +42 -42
  218. package/src/components/molecules/LicenseCard/LicenseCard.theme.ts +28 -28
  219. package/src/components/molecules/LicenseCard/index.ts +1 -1
  220. package/src/components/molecules/LogosCard/LogosCard.component.tsx +14 -14
  221. package/src/components/molecules/LogosCard/LogosCard.interface.ts +8 -8
  222. package/src/components/molecules/LogosCard/LogosCard.stories.tsx +38 -38
  223. package/src/components/molecules/LogosCard/LogosCard.theme.ts +19 -19
  224. package/src/components/molecules/LogosCard/index.ts +1 -1
  225. package/src/components/molecules/Modal/Modal.component.tsx +70 -70
  226. package/src/components/molecules/Modal/Modal.interface.ts +11 -11
  227. package/src/components/molecules/Modal/Modal.stories.tsx +57 -57
  228. package/src/components/molecules/Modal/Modal.theme.ts +55 -55
  229. package/src/components/molecules/Modal/index.ts +1 -1
  230. package/src/components/molecules/NewsCard/NewsCard.component.tsx +55 -55
  231. package/src/components/molecules/NewsCard/NewsCard.interface.ts +9 -9
  232. package/src/components/molecules/NewsCard/NewsCard.stories.tsx +44 -44
  233. package/src/components/molecules/NewsCard/NewsCard.theme.ts +77 -77
  234. package/src/components/molecules/NewsCard/index.ts +1 -1
  235. package/src/components/molecules/OffCanvas/OffCanvas.component.tsx +55 -55
  236. package/src/components/molecules/OffCanvas/OffCanvas.interface.ts +12 -12
  237. package/src/components/molecules/OffCanvas/OffCanvas.stories.tsx +55 -55
  238. package/src/components/molecules/OffCanvas/OffCanvas.theme.ts +50 -50
  239. package/src/components/molecules/OffCanvas/index.ts +1 -1
  240. package/src/components/molecules/ProductCard/ProductCard.component.tsx +60 -60
  241. package/src/components/molecules/ProductCard/ProductCard.interface.ts +7 -7
  242. package/src/components/molecules/ProductCard/ProductCard.stories.tsx +42 -42
  243. package/src/components/molecules/ProductCard/ProductCard.theme.ts +26 -26
  244. package/src/components/molecules/ProductCard/index.ts +1 -1
  245. package/src/components/molecules/ShareModal/ShareModal.component.tsx +167 -167
  246. package/src/components/molecules/ShareModal/ShareModal.interface.ts +9 -9
  247. package/src/components/molecules/ShareModal/ShareModal.stories.tsx +33 -33
  248. package/src/components/molecules/ShareModal/ShareModal.theme.ts +103 -103
  249. package/src/components/molecules/ShareModal/index.ts +1 -1
  250. package/src/components/molecules/TeamCard/TeamCard.component.tsx +31 -31
  251. package/src/components/molecules/TeamCard/TeamCard.interface.ts +7 -7
  252. package/src/components/molecules/TeamCard/TeamCard.stories.tsx +33 -33
  253. package/src/components/molecules/TeamCard/TeamCard.theme.ts +12 -12
  254. package/src/components/molecules/TeamCard/index.ts +1 -1
  255. package/src/components/organisms/CircularSlider/CircularSlider.component.tsx +231 -231
  256. package/src/components/organisms/CircularSlider/CircularSlider.interface.ts +13 -13
  257. package/src/components/organisms/CircularSlider/CircularSlider.stories.tsx +138 -138
  258. package/src/components/organisms/CircularSlider/CircularSlider.theme.ts +126 -126
  259. package/src/components/organisms/CircularSlider/index.ts +1 -1
  260. package/src/components/organisms/Cover/Cover.component.tsx +46 -46
  261. package/src/components/organisms/Cover/Cover.interface.ts +14 -14
  262. package/src/components/organisms/Cover/Cover.stories.tsx +97 -97
  263. package/src/components/organisms/Cover/Cover.theme.ts +49 -49
  264. package/src/components/organisms/Cover/index.ts +1 -1
  265. package/src/components/organisms/ProductsSlider/ProductsSlider.component.tsx +216 -216
  266. package/src/components/organisms/ProductsSlider/ProductsSlider.interface.ts +12 -12
  267. package/src/components/organisms/ProductsSlider/ProductsSlider.stories.tsx +132 -132
  268. package/src/components/organisms/ProductsSlider/ProductsSlider.theme.ts +77 -77
  269. package/src/components/organisms/ProductsSlider/index.ts +1 -1
  270. package/src/components/organisms/ProductsSlider//306/222.js +164 -164
  271. package/src/components/organisms/Slider/Slider.component.tsx +156 -154
  272. package/src/components/organisms/Slider/Slider.interface.ts +23 -19
  273. package/src/components/organisms/Slider/Slider.stories.tsx +223 -146
  274. package/src/components/organisms/Slider/Slider.theme.ts +144 -145
  275. package/src/components/organisms/Slider/Slider.utils.tsx +19 -19
  276. package/src/components/organisms/Slider/index.ts +1 -1
  277. package/src/components/organisms/Tabs/Tabs.component.tsx +88 -88
  278. package/src/components/organisms/Tabs/Tabs.interface.ts +18 -18
  279. package/src/components/organisms/Tabs/Tabs.stories.tsx +118 -118
  280. package/src/components/organisms/Tabs/Tabs.theme.ts +115 -115
  281. package/src/components/organisms/Tabs/index.ts +1 -1
  282. package/src/helpers/clickOutsideToClose.tsx +17 -17
  283. package/src/helpers/events.ts +9 -9
  284. package/src/helpers/exportCSS.tsx +27 -27
  285. package/src/helpers/getIcons.ts +5 -5
  286. package/src/helpers/isTouchDevice.tsx +11 -11
  287. package/src/helpers/useInterval.ts +25 -25
  288. package/src/helpers/useMediaMatch.tsx +26 -26
  289. package/src/helpers/uuid.ts +5 -5
  290. package/src/iconsList.json +1 -1
  291. package/src/index.ts +68 -68
  292. package/src/reportWebVitals.js +13 -13
  293. package/src/stories/Documentation/Colors.stories.tsx +46 -46
  294. package/src/stories/Documentation/Headings.stories.tsx +24 -24
  295. package/src/stories/Documentation/Icons.stories.tsx +73 -73
  296. package/src/stories/Documentation/JWT.stories.tsx +60 -60
  297. package/src/stories/Documentation/Utilities.stories.tsx +65 -65
  298. package/src/styles/Global.ts +301 -301
  299. package/src/styles/grid.ts +70 -70
  300. package/src/styles/reset.ts +47 -47
  301. package/src/styles/utilities.ts +374 -374
  302. package/src/styles/variables.ts +180 -180
  303. 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";