oddsgate-ds 1.0.169 → 1.0.171

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