oddsgate-ds 1.0.168 → 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 +34 -23
  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,10 +1,10 @@
1
- import { CSSProperties } from 'react';
2
-
3
- export type IQuote = {
4
- id?: string;
5
- value?: string;
6
- citation?: string;
7
- className?: string;
8
- style?: CSSProperties;
9
- children?: React.ReactNode;
10
- };
1
+ import { CSSProperties } from 'react';
2
+
3
+ export type IQuote = {
4
+ id?: string;
5
+ value?: string;
6
+ citation?: string;
7
+ className?: string;
8
+ style?: CSSProperties;
9
+ children?: React.ReactNode;
10
+ };
@@ -1,25 +1,25 @@
1
- import type { Meta, StoryObj } from '@storybook/react'
2
-
3
- import { IQuote } from './Quote.interface'
4
- import Quote from './Quote.component'
5
- import React from 'react'
6
-
7
- export default {
8
- title: 'Components/Quote',
9
- component: Quote,
10
- tags: ['autodocs']
11
- } as Meta
12
-
13
- export const Simple: StoryObj<IQuote> = {
14
- render: args => <Quote {...args} />,
15
- args: {
16
- value:
17
- '"There are seasons in every country when noise and impudence pass current for worth; and in popular commotions especially, the clamors of interested and factious men are often mistaken for patriotism."'
18
- }
19
- }
20
- export const WithCitation: StoryObj<IQuote> = {
21
- args: {
22
- ...Simple.args,
23
- citation: 'Jeffery Smith, 28'
24
- }
25
- }
1
+ import type { Meta, StoryObj } from '@storybook/react'
2
+
3
+ import { IQuote } from './Quote.interface'
4
+ import Quote from './Quote.component'
5
+ import React from 'react'
6
+
7
+ export default {
8
+ title: 'Components/Quote',
9
+ component: Quote,
10
+ tags: ['autodocs']
11
+ } as Meta
12
+
13
+ export const Simple: StoryObj<IQuote> = {
14
+ render: args => <Quote {...args} />,
15
+ args: {
16
+ value:
17
+ '"There are seasons in every country when noise and impudence pass current for worth; and in popular commotions especially, the clamors of interested and factious men are often mistaken for patriotism."'
18
+ }
19
+ }
20
+ export const WithCitation: StoryObj<IQuote> = {
21
+ args: {
22
+ ...Simple.args,
23
+ citation: 'Jeffery Smith, 28'
24
+ }
25
+ }
@@ -1,26 +1,26 @@
1
- import { colors, spaces, typography } from '@/styles/variables';
2
- import styled, { css } from 'styled-components';
3
-
4
- import { IQuote } from './Quote.interface';
5
- import { fontSize } from '@/styles/utilities';
6
-
7
- export const StyledQuote = styled.div<IQuote>`
8
- color: currentColor;
9
- margin-bottom: ${spaces[2]};
10
- padding: 0 ${spaces[4]};
11
- ${fontSize('texts')};
12
- border-left: 2px solid ${colors.gray50};
13
-
14
- & blockquote {
15
- margin-left: 0;
16
- margin-bottom: ${spaces[2]};
17
-
18
- & p {
19
- margin-bottom: 0;
20
- }
21
- }
22
-
23
- & figcaption {
24
- font-weight: bold
25
- }
26
- `;
1
+ import { colors, spaces, typography } from '@/styles/variables';
2
+ import styled, { css } from 'styled-components';
3
+
4
+ import { IQuote } from './Quote.interface';
5
+ import { fontSize } from '@/styles/utilities';
6
+
7
+ export const StyledQuote = styled.div<IQuote>`
8
+ color: currentColor;
9
+ margin-bottom: ${spaces[2]};
10
+ padding: 0 ${spaces[4]};
11
+ ${fontSize('texts')};
12
+ border-left: 2px solid ${colors.gray50};
13
+
14
+ & blockquote {
15
+ margin-left: 0;
16
+ margin-bottom: ${spaces[2]};
17
+
18
+ & p {
19
+ margin-bottom: 0;
20
+ }
21
+ }
22
+
23
+ & figcaption {
24
+ font-weight: bold
25
+ }
26
+ `;
@@ -1 +1 @@
1
- export { default } from "./Quote.component";
1
+ export { default } from "./Quote.component";
@@ -1,32 +1,32 @@
1
- import { IRichText } from './RichText.interface'
2
- import React from 'react'
3
- import { StyledRichText } from './RichText.theme'
4
- import { typographyTags } from '../Heading/Heading.interface'
5
- import xss from 'xss'
6
-
7
- const RichText = ({
8
- id,
9
- tag = 'div',
10
- attributes,
11
- className,
12
- style,
13
- children,
14
- ...props
15
- }: IRichText) => {
16
- return (
17
- <StyledRichText
18
- id={id}
19
- as={typographyTags[tag]}
20
- className={className}
21
- style={style}
22
- dangerouslySetInnerHTML={{
23
- __html: xss(children, {
24
- stripIgnoreTagBody: ['script']
25
- })
26
- }}
27
- {...props}
28
- />
29
- )
30
- }
31
-
32
- export default RichText
1
+ import { IRichText } from './RichText.interface'
2
+ import React from 'react'
3
+ import { StyledRichText } from './RichText.theme'
4
+ import { typographyTags } from '../Heading/Heading.interface'
5
+ import xss from 'xss'
6
+
7
+ const RichText = ({
8
+ id,
9
+ tag = 'div',
10
+ attributes,
11
+ className,
12
+ style,
13
+ children,
14
+ ...props
15
+ }: IRichText) => {
16
+ return (
17
+ <StyledRichText
18
+ id={id}
19
+ as={typographyTags[tag]}
20
+ className={className}
21
+ style={style}
22
+ dangerouslySetInnerHTML={{
23
+ __html: xss(children, {
24
+ stripIgnoreTagBody: ['script']
25
+ })
26
+ }}
27
+ {...props}
28
+ />
29
+ )
30
+ }
31
+
32
+ export default RichText
@@ -1,11 +1,11 @@
1
- import { CSSProperties } from 'react';
2
- import { typographyTags } from '../Heading/Heading.interface';
3
-
4
- export type IRichText = {
5
- id?: string;
6
- tag?: keyof typeof typographyTags;
7
- attributes?: object;
8
- className?: string;
9
- style?: CSSProperties;
10
- children?: any;
11
- };
1
+ import { CSSProperties } from 'react';
2
+ import { typographyTags } from '../Heading/Heading.interface';
3
+
4
+ export type IRichText = {
5
+ id?: string;
6
+ tag?: keyof typeof typographyTags;
7
+ attributes?: object;
8
+ className?: string;
9
+ style?: CSSProperties;
10
+ children?: any;
11
+ };
@@ -1,73 +1,73 @@
1
- import { Meta, StoryObj } from '@storybook/react'
2
-
3
- import { IRichText } from './RichText.interface'
4
- import React from 'react'
5
- import RichText from '@/components/atoms/RichText'
6
-
7
- export default {
8
- title: 'Components/RichText',
9
- component: RichText,
10
- tags: ['autodocs']
11
- } as Meta
12
-
13
- export const Simple: StoryObj<IRichText> = {
14
- render: args => (
15
- <RichText {...args}>
16
- {`Example mixed content <strong>with bold text</strong> and <a href="https://example.com">linked content</a>.`}
17
- </RichText>
18
- ),
19
- args: {
20
- tag: 'p'
21
- }
22
- }
23
-
24
- export const List: StoryObj<IRichText> = {
25
- render: args => (
26
- <RichText {...args}>
27
- {`<h1>H1</h1>
28
- <h2>H2</h2>
29
- <h3>H3</h3>
30
- <h3>H3</h3>
31
- <h4>H4</h4>
32
- <h5>H5</h5>
33
- <h6>H6</h6>
34
- <p>Paragraph tag <strong>with</strong> <a href="https://example.com">linked content</a>.</p>
35
- <ul>
36
- <li>UL List item 1</li>
37
- <li>UL List item 2
38
- <ul>
39
- <li>UL List item 1</li>
40
- <li>UL List item 2</li>
41
- <li>UL List item 3</li>
42
- </ul>
43
- </li>
44
- <li>UL List item 3</li>
45
- </ul>
46
- <ol>
47
- <li>OL List item 1</li>
48
- <li>OL List item 2
49
- <ol>
50
- <li>OL List item 1</li>
51
- <li>OL List item 2</li>
52
- <li>OL List item 3</li>
53
- </ol>
54
- </li>
55
- <li>OL List item 3</li>
56
- </ol>`}
57
- </RichText>
58
- ),
59
- args: {
60
- tag: 'div'
61
- }
62
- }
63
-
64
- export const Heading: StoryObj<IRichText> = {
65
- render: args => (
66
- <RichText {...args}>
67
- {`This heading has <strong>Bold Content</strong> and <i>Italics</i>`}
68
- </RichText>
69
- ),
70
- args: {
71
- tag: 'h2'
72
- }
73
- }
1
+ import { Meta, StoryObj } from '@storybook/react'
2
+
3
+ import { IRichText } from './RichText.interface'
4
+ import React from 'react'
5
+ import RichText from '@/components/atoms/RichText'
6
+
7
+ export default {
8
+ title: 'Components/RichText',
9
+ component: RichText,
10
+ tags: ['autodocs']
11
+ } as Meta
12
+
13
+ export const Simple: StoryObj<IRichText> = {
14
+ render: args => (
15
+ <RichText {...args}>
16
+ {`Example mixed content <strong>with bold text</strong> and <a href="https://example.com">linked content</a>.`}
17
+ </RichText>
18
+ ),
19
+ args: {
20
+ tag: 'p'
21
+ }
22
+ }
23
+
24
+ export const List: StoryObj<IRichText> = {
25
+ render: args => (
26
+ <RichText {...args}>
27
+ {`<h1>H1</h1>
28
+ <h2>H2</h2>
29
+ <h3>H3</h3>
30
+ <h3>H3</h3>
31
+ <h4>H4</h4>
32
+ <h5>H5</h5>
33
+ <h6>H6</h6>
34
+ <p>Paragraph tag <strong>with</strong> <a href="https://example.com">linked content</a>.</p>
35
+ <ul>
36
+ <li>UL List item 1</li>
37
+ <li>UL List item 2
38
+ <ul>
39
+ <li>UL List item 1</li>
40
+ <li>UL List item 2</li>
41
+ <li>UL List item 3</li>
42
+ </ul>
43
+ </li>
44
+ <li>UL List item 3</li>
45
+ </ul>
46
+ <ol>
47
+ <li>OL List item 1</li>
48
+ <li>OL List item 2
49
+ <ol>
50
+ <li>OL List item 1</li>
51
+ <li>OL List item 2</li>
52
+ <li>OL List item 3</li>
53
+ </ol>
54
+ </li>
55
+ <li>OL List item 3</li>
56
+ </ol>`}
57
+ </RichText>
58
+ ),
59
+ args: {
60
+ tag: 'div'
61
+ }
62
+ }
63
+
64
+ export const Heading: StoryObj<IRichText> = {
65
+ render: args => (
66
+ <RichText {...args}>
67
+ {`This heading has <strong>Bold Content</strong> and <i>Italics</i>`}
68
+ </RichText>
69
+ ),
70
+ args: {
71
+ tag: 'h2'
72
+ }
73
+ }
@@ -1,34 +1,34 @@
1
- import { colors, spaces, typography } from '@/styles/variables';
2
- import styled, { css } from 'styled-components';
3
-
4
- import { IRichText } from './RichText.interface';
5
- import { fontSize } from '@/styles/utilities';
6
-
7
- export const StyledRichText = styled.div<IRichText>`
8
- display: block;
9
-
10
- & p {
11
- margin: 0;
12
- }
13
-
14
- ol, ul {
15
- padding-left: 16px;
16
- }
17
-
18
- & ol{
19
- list-style: decimal;
20
- }
21
- & ul{
22
- list-style: disc;
23
- }
24
-
25
- .dropCap{
26
- &::first-letter {
27
- float: left;
28
- margin-right: ${spaces[4]};
29
- ${fontSize('h2')};
30
- font-weight: bold;
31
- }
32
- }
33
- `;
34
-
1
+ import { colors, spaces, typography } from '@/styles/variables';
2
+ import styled, { css } from 'styled-components';
3
+
4
+ import { IRichText } from './RichText.interface';
5
+ import { fontSize } from '@/styles/utilities';
6
+
7
+ export const StyledRichText = styled.div<IRichText>`
8
+ display: block;
9
+
10
+ & p {
11
+ margin: 0;
12
+ }
13
+
14
+ ol, ul {
15
+ padding-left: 16px;
16
+ }
17
+
18
+ & ol{
19
+ list-style: decimal;
20
+ }
21
+ & ul{
22
+ list-style: disc;
23
+ }
24
+
25
+ .dropCap{
26
+ &::first-letter {
27
+ float: left;
28
+ margin-right: ${spaces[4]};
29
+ ${fontSize('h2')};
30
+ font-weight: bold;
31
+ }
32
+ }
33
+ `;
34
+
@@ -1 +1 @@
1
- export { default } from "./RichText.component";
1
+ export { default } from "./RichText.component";
@@ -1,18 +1,18 @@
1
- import { IScrollingNav } from './ScrollingNav.interface'
2
- import React from 'react'
3
- import { StyledScrollingNav } from '@/components/atoms/ScrollingNav/ScrollingNav.theme'
4
-
5
- const ScrollingNav = ({
6
- align,
7
- children,
8
- className,
9
- ...props
10
- }: IScrollingNav) => {
11
- return (
12
- <StyledScrollingNav align={align} className={className} {...props}>
13
- {children}
14
- </StyledScrollingNav>
15
- )
16
- }
17
-
18
- export default ScrollingNav
1
+ import { IScrollingNav } from './ScrollingNav.interface'
2
+ import React from 'react'
3
+ import { StyledScrollingNav } from '@/components/atoms/ScrollingNav/ScrollingNav.theme'
4
+
5
+ const ScrollingNav = ({
6
+ align,
7
+ children,
8
+ className,
9
+ ...props
10
+ }: IScrollingNav) => {
11
+ return (
12
+ <StyledScrollingNav align={align} className={className} {...props}>
13
+ {children}
14
+ </StyledScrollingNav>
15
+ )
16
+ }
17
+
18
+ export default ScrollingNav
@@ -1,8 +1,8 @@
1
- import { CSSProperties } from 'react';
2
-
3
- export interface IScrollingNav {
4
- align?: string
5
- className?: string,
6
- style?: CSSProperties
7
- children?: React.ReactNode
8
- }
1
+ import { CSSProperties } from 'react';
2
+
3
+ export interface IScrollingNav {
4
+ align?: string
5
+ className?: string,
6
+ style?: CSSProperties
7
+ children?: React.ReactNode
8
+ }
@@ -1,44 +1,44 @@
1
- import type { Meta, StoryObj } from '@storybook/react'
2
-
3
- import Chip from '@/components/atoms/Chip'
4
- import { IScrollingNav } from './ScrollingNav.interface'
5
- import React from 'react'
6
- import ScrollingNav from './ScrollingNav.component'
7
-
8
- // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
9
- export default {
10
- title: 'Components/ScrollingNav',
11
- component: ScrollingNav,
12
- tags: ['autodocs'],
13
- // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
14
- argTypes: {}
15
- } as Meta
16
-
17
- export const Simple: StoryObj<IScrollingNav> = {
18
- render: args => (
19
- <ScrollingNav {...args}>
20
- <Chip variant={'light'} hover={true}>
21
- Item 1
22
- </Chip>
23
- <Chip variant={'light'} hover={true}>
24
- Item 2
25
- </Chip>
26
- <Chip variant={'light'} hover={true}>
27
- Item 3
28
- </Chip>
29
- <Chip variant={'light'} hover={true}>
30
- Item 4
31
- </Chip>
32
- <Chip variant={'light'} hover={true}>
33
- Item 5
34
- </Chip>
35
- <Chip variant={'light'} hover={true}>
36
- Item 6
37
- </Chip>
38
- <Chip variant={'light'} hover={true}>
39
- Item 7
40
- </Chip>
41
- </ScrollingNav>
42
- ),
43
- args: {}
44
- }
1
+ import type { Meta, StoryObj } from '@storybook/react'
2
+
3
+ import Chip from '@/components/atoms/Chip'
4
+ import { IScrollingNav } from './ScrollingNav.interface'
5
+ import React from 'react'
6
+ import ScrollingNav from './ScrollingNav.component'
7
+
8
+ // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
9
+ export default {
10
+ title: 'Components/ScrollingNav',
11
+ component: ScrollingNav,
12
+ tags: ['autodocs'],
13
+ // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
14
+ argTypes: {}
15
+ } as Meta
16
+
17
+ export const Simple: StoryObj<IScrollingNav> = {
18
+ render: args => (
19
+ <ScrollingNav {...args}>
20
+ <Chip variant={'light'} hover={true}>
21
+ Item 1
22
+ </Chip>
23
+ <Chip variant={'light'} hover={true}>
24
+ Item 2
25
+ </Chip>
26
+ <Chip variant={'light'} hover={true}>
27
+ Item 3
28
+ </Chip>
29
+ <Chip variant={'light'} hover={true}>
30
+ Item 4
31
+ </Chip>
32
+ <Chip variant={'light'} hover={true}>
33
+ Item 5
34
+ </Chip>
35
+ <Chip variant={'light'} hover={true}>
36
+ Item 6
37
+ </Chip>
38
+ <Chip variant={'light'} hover={true}>
39
+ Item 7
40
+ </Chip>
41
+ </ScrollingNav>
42
+ ),
43
+ args: {}
44
+ }