oddsgate-ds 1.0.169 → 1.0.174

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