@faststore/core 22.42.6

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 (475) hide show
  1. package/.babelrc +4 -0
  2. package/.editorconfig +13 -0
  3. package/.eslintignore +8 -0
  4. package/.eslintrc +21 -0
  5. package/.github/CODEOWNERS +2 -0
  6. package/.github/workflows/release.yml +40 -0
  7. package/.husky/pre-commit +4 -0
  8. package/.prettierignore +8 -0
  9. package/.prettierrc +1 -0
  10. package/.release-it.json +31 -0
  11. package/.storybook/components/BestPractices.tsx +18 -0
  12. package/.storybook/components/BestPracticesRule.tsx +43 -0
  13. package/.storybook/components/Callout.tsx +12 -0
  14. package/.storybook/components/SectionItem.tsx +44 -0
  15. package/.storybook/components/SectionList.tsx +27 -0
  16. package/.storybook/components/TokenDivider.tsx +12 -0
  17. package/.storybook/components/TokenRow.tsx +32 -0
  18. package/.storybook/components/TokenTable.tsx +33 -0
  19. package/.storybook/components/index.ts +8 -0
  20. package/.storybook/main.js +59 -0
  21. package/.storybook/manager-head.html +9 -0
  22. package/.storybook/manager.js +6 -0
  23. package/.storybook/mocks/cart-sidebar.js +40 -0
  24. package/.storybook/mocks/filter-slider.js +59 -0
  25. package/.storybook/mocks/index.ts +5 -0
  26. package/.storybook/mocks/product.ts +67 -0
  27. package/.storybook/mocks/productGridItems.ts +334 -0
  28. package/.storybook/mocks/searchHistory.ts +8 -0
  29. package/.storybook/mocks/searchTerms.ts +5 -0
  30. package/.storybook/preview-head.html +1 -0
  31. package/.storybook/preview.js +89 -0
  32. package/.storybook/storybook.css +550 -0
  33. package/.storybook/theme.js +21 -0
  34. package/.stylelintignore +1 -0
  35. package/.vscode/settings.json +7 -0
  36. package/@generated/graphql/index.ts +1133 -0
  37. package/@generated/graphql/persisted.json +12 -0
  38. package/CHANGELOG.md +730 -0
  39. package/LICENSE +21 -0
  40. package/README.md +437 -0
  41. package/bun.lockb +0 -0
  42. package/cms/content-types.json +52 -0
  43. package/cms/sections.json +350 -0
  44. package/cms/translation-keys.json +1 -0
  45. package/cms-webhook-urls.json +5 -0
  46. package/codegen.yml +22 -0
  47. package/cypress/fixtures/example.json +5 -0
  48. package/cypress/global.js +15 -0
  49. package/cypress/integration/a11y.test.js +45 -0
  50. package/cypress/integration/analytics.test.js +381 -0
  51. package/cypress/integration/cart.test.js +100 -0
  52. package/cypress/integration/performance.test.js +65 -0
  53. package/cypress/integration/plp.test.js +224 -0
  54. package/cypress/integration/search.test.js +38 -0
  55. package/cypress/integration/seo.test.js +318 -0
  56. package/cypress/plugins/index.js +41 -0
  57. package/cypress/support/commands.js +70 -0
  58. package/cypress/support/index.js +3 -0
  59. package/cypress.json +9 -0
  60. package/lighthouserc.js +22 -0
  61. package/next-env.d.ts +5 -0
  62. package/next.config.js +35 -0
  63. package/package.json +114 -0
  64. package/postcss.config.js +5 -0
  65. package/public/brandless-negative.png +0 -0
  66. package/public/brandless-neutral.png +0 -0
  67. package/public/brandless-positive.png +0 -0
  68. package/public/brandless-storybook.png +0 -0
  69. package/public/favicon.ico +0 -0
  70. package/public/icons.svg +58 -0
  71. package/public/logo.svg +42 -0
  72. package/public/mockServiceWorker.js +367 -0
  73. package/public/robots.txt +5 -0
  74. package/pull_request_template.md +37 -0
  75. package/renovate.json +5 -0
  76. package/src/Layout.tsx +51 -0
  77. package/src/components/ThirdPartyScripts/GoogleTagManager.tsx +61 -0
  78. package/src/components/ThirdPartyScripts/ThirdPartyScripts.tsx +37 -0
  79. package/src/components/ThirdPartyScripts/index.ts +1 -0
  80. package/src/components/ThirdPartyScripts/vtex.tsx +23 -0
  81. package/src/components/cart/CartItem/CartItem.stories.mdx +134 -0
  82. package/src/components/cart/CartItem/CartItem.tsx +158 -0
  83. package/src/components/cart/CartItem/cart-item.module.scss +68 -0
  84. package/src/components/cart/CartItem/index.ts +1 -0
  85. package/src/components/cart/CartSidebar/CartSidebar.stories.mdx +119 -0
  86. package/src/components/cart/CartSidebar/CartSidebar.tsx +140 -0
  87. package/src/components/cart/CartSidebar/cart-sidebar.module.scss +69 -0
  88. package/src/components/cart/CartSidebar/index.ts +1 -0
  89. package/src/components/cart/CartToggle/CartToggle.tsx +20 -0
  90. package/src/components/cart/CartToggle/index.ts +1 -0
  91. package/src/components/cart/EmptyCart/EmptyCart.tsx +26 -0
  92. package/src/components/cart/EmptyCart/index.ts +1 -0
  93. package/src/components/cart/OrderSummary/OrderSummary.tsx +39 -0
  94. package/src/components/cart/OrderSummary/index.ts +1 -0
  95. package/src/components/cart/OrderSummary/order-summary.module.scss +22 -0
  96. package/src/components/cms/RenderPageSections.tsx +52 -0
  97. package/src/components/cms/SectionBoundary.tsx +34 -0
  98. package/src/components/common/Alert/Alert.tsx +53 -0
  99. package/src/components/common/Alert/index.ts +1 -0
  100. package/src/components/common/Footer/Footer.stories.mdx +158 -0
  101. package/src/components/common/Footer/Footer.tsx +160 -0
  102. package/src/components/common/Footer/FooterLinks.tsx +155 -0
  103. package/src/components/common/Footer/footer.module.scss +246 -0
  104. package/src/components/common/Footer/index.ts +2 -0
  105. package/src/components/common/Navbar/NavLinks.stories.mdx +122 -0
  106. package/src/components/common/Navbar/NavLinks.tsx +58 -0
  107. package/src/components/common/Navbar/Navbar.stories.mdx +179 -0
  108. package/src/components/common/Navbar/Navbar.tsx +97 -0
  109. package/src/components/common/Navbar/NavbarSlider.stories.mdx +108 -0
  110. package/src/components/common/Navbar/NavbarSlider.tsx +62 -0
  111. package/src/components/common/Navbar/index.ts +3 -0
  112. package/src/components/common/Navbar/navbar-slider.module.scss +60 -0
  113. package/src/components/common/Navbar/navbar.module.scss +204 -0
  114. package/src/components/common/Navbar/navlinks.module.scss +96 -0
  115. package/src/components/common/Toast/Toast.tsx +40 -0
  116. package/src/components/common/Toast/index.ts +1 -0
  117. package/src/components/product/OutOfStock/OutOfStock.stories.mdx +127 -0
  118. package/src/components/product/OutOfStock/OutOfStock.tsx +134 -0
  119. package/src/components/product/OutOfStock/index.ts +2 -0
  120. package/src/components/product/OutOfStock/out-of-stock.module.scss +55 -0
  121. package/src/components/product/ProductCard/ProductCard.stories.mdx +412 -0
  122. package/src/components/product/ProductCard/ProductCard.tsx +170 -0
  123. package/src/components/product/ProductCard/index.ts +2 -0
  124. package/src/components/product/ProductCard/product-card.module.scss +254 -0
  125. package/src/components/product/ProductGrid/ProductGrid.stories.mdx +97 -0
  126. package/src/components/product/ProductGrid/ProductGrid.tsx +37 -0
  127. package/src/components/product/ProductGrid/index.ts +1 -0
  128. package/src/components/product/ProductGrid/product-grid.module.scss +39 -0
  129. package/src/components/regionalization/Regionalization.stories.mdx +182 -0
  130. package/src/components/regionalization/RegionalizationBar/RegionalizationBar.stories.mdx +116 -0
  131. package/src/components/regionalization/RegionalizationBar/RegionalizationBar.tsx +40 -0
  132. package/src/components/regionalization/RegionalizationBar/index.ts +1 -0
  133. package/src/components/regionalization/RegionalizationBar/regionalization-bar.module.scss +56 -0
  134. package/src/components/regionalization/RegionalizationButton/RegionalizationButton.tsx +24 -0
  135. package/src/components/regionalization/RegionalizationButton/index.ts +1 -0
  136. package/src/components/regionalization/RegionalizationInput/RegionalizationInput.tsx +61 -0
  137. package/src/components/regionalization/RegionalizationInput/index.ts +1 -0
  138. package/src/components/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx +161 -0
  139. package/src/components/regionalization/RegionalizationModal/RegionalizationModal.tsx +13 -0
  140. package/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx +48 -0
  141. package/src/components/regionalization/RegionalizationModal/index.ts +2 -0
  142. package/src/components/regionalization/RegionalizationModal/regionalization-modal-content.module.scss +79 -0
  143. package/src/components/search/Filter/Facets.stories.mdx +284 -0
  144. package/src/components/search/Filter/Facets.tsx +136 -0
  145. package/src/components/search/Filter/Filter.stories.mdx +209 -0
  146. package/src/components/search/Filter/Filter.tsx +91 -0
  147. package/src/components/search/Filter/FilterSlider.stories.mdx +226 -0
  148. package/src/components/search/Filter/FilterSlider.tsx +109 -0
  149. package/src/components/search/Filter/facets.module.scss +117 -0
  150. package/src/components/search/Filter/filter-slider.module.scss +63 -0
  151. package/src/components/search/Filter/index.ts +2 -0
  152. package/src/components/search/Filter/useFilter.ts +131 -0
  153. package/src/components/search/Search.stories.mdx +169 -0
  154. package/src/components/search/SearchDropdown/SearchDropdown.stories.mdx +62 -0
  155. package/src/components/search/SearchDropdown/SearchDropdown.tsx +44 -0
  156. package/src/components/search/SearchDropdown/index.ts +2 -0
  157. package/src/components/search/SearchHistory/SearchHistory.stories.mdx +59 -0
  158. package/src/components/search/SearchHistory/SearchHistory.tsx +51 -0
  159. package/src/components/search/SearchHistory/index.ts +1 -0
  160. package/src/components/search/SearchInput/SearchInput.stories.mdx +205 -0
  161. package/src/components/search/SearchInput/SearchInput.tsx +128 -0
  162. package/src/components/search/SearchInput/index.ts +2 -0
  163. package/src/components/search/SearchInput/search-input.module.scss +153 -0
  164. package/src/components/search/SearchProductCard/SearchProductCard.stories.mdx +96 -0
  165. package/src/components/search/SearchProductCard/SearchProductCard.tsx +103 -0
  166. package/src/components/search/SearchProductCard/index.ts +1 -0
  167. package/src/components/search/SearchProductCard/search-product-card.module.scss +54 -0
  168. package/src/components/search/SearchSharedTokenTable.mdx +98 -0
  169. package/src/components/search/SearchSuggestions/SearchSuggestions.stories.mdx +58 -0
  170. package/src/components/search/SearchSuggestions/SearchSuggestions.tsx +136 -0
  171. package/src/components/search/SearchSuggestions/index.ts +2 -0
  172. package/src/components/search/SearchTop/SearchTop.stories.mdx +58 -0
  173. package/src/components/search/SearchTop/SearchTop.tsx +78 -0
  174. package/src/components/search/SearchTop/index.ts +2 -0
  175. package/src/components/search/Sort/Sort.tsx +42 -0
  176. package/src/components/search/Sort/index.ts +1 -0
  177. package/src/components/search/search.module.scss +101 -0
  178. package/src/components/search/searchMock.ts +48 -0
  179. package/src/components/sections/BannerNewsletter/BannerNewsletter.tsx +28 -0
  180. package/src/components/sections/BannerNewsletter/banner-newsletter.module.scss +23 -0
  181. package/src/components/sections/BannerText/BannerText.stories.mdx +270 -0
  182. package/src/components/sections/BannerText/BannerText.tsx +87 -0
  183. package/src/components/sections/BannerText/banner-text.module.scss +127 -0
  184. package/src/components/sections/BannerText/index.ts +2 -0
  185. package/src/components/sections/Breadcrumb/Breadcrumb.tsx +24 -0
  186. package/src/components/sections/Breadcrumb/index.ts +1 -0
  187. package/src/components/sections/Hero/Hero.stories.mdx +277 -0
  188. package/src/components/sections/Hero/Hero.tsx +109 -0
  189. package/src/components/sections/Hero/hero.module.scss +180 -0
  190. package/src/components/sections/Hero/index.ts +2 -0
  191. package/src/components/sections/Incentives/Incentives.stories.mdx +159 -0
  192. package/src/components/sections/Incentives/Incentives.tsx +69 -0
  193. package/src/components/sections/Incentives/IncentivesFooter.tsx +8 -0
  194. package/src/components/sections/Incentives/IncentivesHeader.tsx +23 -0
  195. package/src/components/sections/Incentives/incentives.module.scss +122 -0
  196. package/src/components/sections/Incentives/incentivesMock.ts +55 -0
  197. package/src/components/sections/Incentives/index.ts +2 -0
  198. package/src/components/sections/Newsletter/Newsletter.stories.mdx +139 -0
  199. package/src/components/sections/Newsletter/Newsletter.tsx +151 -0
  200. package/src/components/sections/Newsletter/index.ts +2 -0
  201. package/src/components/sections/Newsletter/newsletter.module.scss +135 -0
  202. package/src/components/sections/ProducDetailsContent/ProductDetailsContent.stories.mdx +66 -0
  203. package/src/components/sections/ProducDetailsContent/ProductDetailsContent.tsx +278 -0
  204. package/src/components/sections/ProducDetailsContent/index.ts +1 -0
  205. package/src/components/sections/ProducDetailsContent/product-details-content.module.scss +50 -0
  206. package/src/components/sections/ProductDetails/ProductDetails.tsx +316 -0
  207. package/src/components/sections/ProductDetails/index.ts +1 -0
  208. package/src/components/sections/ProductDetails/product-details.module.scss +194 -0
  209. package/src/components/sections/ProductGallery/EmptyGallery.tsx +38 -0
  210. package/src/components/sections/ProductGallery/ProductGallery.tsx +186 -0
  211. package/src/components/sections/ProductGallery/ProductGalleryPage.tsx +70 -0
  212. package/src/components/sections/ProductGallery/index.ts +1 -0
  213. package/src/components/sections/ProductGallery/product-gallery.module.scss +184 -0
  214. package/src/components/sections/ProductGallery/useDelayedFacets.ts +18 -0
  215. package/src/components/sections/ProductGallery/useDelayedPagination.ts +16 -0
  216. package/src/components/sections/ProductGallery/useGalleryQuery.ts +58 -0
  217. package/src/components/sections/ProductGallery/usePageProducts.ts +48 -0
  218. package/src/components/sections/ProductShelf/ProductShelf.tsx +68 -0
  219. package/src/components/sections/ProductShelf/index.ts +1 -0
  220. package/src/components/sections/ProductShelf/product-shelf.module.scss +41 -0
  221. package/src/components/sections/ProductTiles/ProductTiles.tsx +83 -0
  222. package/src/components/sections/ProductTiles/index.ts +1 -0
  223. package/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx +45 -0
  224. package/src/components/sections/ScrollToTopButton/index.ts +1 -0
  225. package/src/components/sections/ScrollToTopButton/scroll-to-top-button.module.scss +12 -0
  226. package/src/components/sections/Section/Section.tsx +15 -0
  227. package/src/components/sections/Section/index.ts +1 -0
  228. package/src/components/sections/Section/section.scss +16 -0
  229. package/src/components/skeletons/FilterSkeleton/FilterSkeleton.stories.mdx +97 -0
  230. package/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx +34 -0
  231. package/src/components/skeletons/FilterSkeleton/filter-skeleton.module.scss +51 -0
  232. package/src/components/skeletons/FilterSkeleton/index.ts +1 -0
  233. package/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.stories.mdx +176 -0
  234. package/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx +52 -0
  235. package/src/components/skeletons/ProductCardSkeleton/index.ts +1 -0
  236. package/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss +97 -0
  237. package/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx +29 -0
  238. package/src/components/skeletons/ProductGridSkeleton/index.ts +1 -0
  239. package/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx +32 -0
  240. package/src/components/skeletons/ProductShelfSkeleton/index.ts +1 -0
  241. package/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx +57 -0
  242. package/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/index.ts +1 -0
  243. package/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.module.scss +218 -0
  244. package/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx +33 -0
  245. package/src/components/skeletons/ProductTilesSkeleton/index.ts +2 -0
  246. package/src/components/skeletons/Shimmer/Shimmer.tsx +11 -0
  247. package/src/components/skeletons/Shimmer/index.ts +1 -0
  248. package/src/components/skeletons/Shimmer/shimmer.module.scss +43 -0
  249. package/src/components/skeletons/Skeleton/Skeleton.tsx +49 -0
  250. package/src/components/skeletons/Skeleton/index.ts +1 -0
  251. package/src/components/skeletons/Skeleton/skeleton.module.scss +77 -0
  252. package/src/components/skeletons/Skeletons.stories.mdx +178 -0
  253. package/src/components/ui/Accordion/Accordion.stories.mdx +219 -0
  254. package/src/components/ui/Accordion/Accordion.tsx +39 -0
  255. package/src/components/ui/Accordion/AccordionItem.stories.mdx +116 -0
  256. package/src/components/ui/Accordion/AccordionItem.tsx +82 -0
  257. package/src/components/ui/Accordion/accordion.module.scss +65 -0
  258. package/src/components/ui/Accordion/index.ts +2 -0
  259. package/src/components/ui/Alert/Alert.stories.mdx +164 -0
  260. package/src/components/ui/Alert/Alert.tsx +78 -0
  261. package/src/components/ui/Alert/alert.module.scss +93 -0
  262. package/src/components/ui/Alert/index.ts +1 -0
  263. package/src/components/ui/Badge/Badge.stories.mdx +465 -0
  264. package/src/components/ui/Badge/Badge.tsx +76 -0
  265. package/src/components/ui/Badge/DiscountBadge.stories.mdx +191 -0
  266. package/src/components/ui/Badge/DiscountBadge.tsx +57 -0
  267. package/src/components/ui/Badge/badge.module.scss +252 -0
  268. package/src/components/ui/Badge/index.ts +4 -0
  269. package/src/components/ui/Breadcrumb/Breadcrumb.stories.mdx +197 -0
  270. package/src/components/ui/Breadcrumb/Breadcrumb.tsx +122 -0
  271. package/src/components/ui/Breadcrumb/breadcrumb.module.scss +144 -0
  272. package/src/components/ui/Breadcrumb/index.ts +2 -0
  273. package/src/components/ui/Button/Button.stories.mdx +685 -0
  274. package/src/components/ui/Button/Button.tsx +85 -0
  275. package/src/components/ui/Button/ButtonBuy/ButtonBuy.tsx +24 -0
  276. package/src/components/ui/Button/ButtonBuy/index.ts +1 -0
  277. package/src/components/ui/Button/ButtonLink/ButtonLink.tsx +49 -0
  278. package/src/components/ui/Button/ButtonLink/ButtonSignIn/ButtonSignIn.tsx +22 -0
  279. package/src/components/ui/Button/ButtonLink/ButtonSignIn/ButtonSignInFallback/ButtonSignInFallback.tsx +18 -0
  280. package/src/components/ui/Button/ButtonLink/ButtonSignIn/ButtonSignInFallback/index.ts +1 -0
  281. package/src/components/ui/Button/ButtonLink/ButtonSignIn/index.ts +1 -0
  282. package/src/components/ui/Button/ButtonLink/index.ts +1 -0
  283. package/src/components/ui/Button/button.module.scss +392 -0
  284. package/src/components/ui/Button/index.ts +6 -0
  285. package/src/components/ui/Checkbox/Checkbox.stories.mdx +268 -0
  286. package/src/components/ui/Checkbox/Checkbox.tsx +20 -0
  287. package/src/components/ui/Checkbox/checkbox.module.scss +157 -0
  288. package/src/components/ui/Checkbox/index.ts +2 -0
  289. package/src/components/ui/Dropdown/Dropdown.stories.mdx +232 -0
  290. package/src/components/ui/Dropdown/Dropdown.tsx +12 -0
  291. package/src/components/ui/Dropdown/DropdownButton.tsx +20 -0
  292. package/src/components/ui/Dropdown/DropdownItem.stories.mdx +139 -0
  293. package/src/components/ui/Dropdown/DropdownItem.tsx +26 -0
  294. package/src/components/ui/Dropdown/DropdownMenu.stories.mdx +115 -0
  295. package/src/components/ui/Dropdown/DropdownMenu.tsx +34 -0
  296. package/src/components/ui/Dropdown/dropdown.module.scss +101 -0
  297. package/src/components/ui/Dropdown/index.ts +4 -0
  298. package/src/components/ui/EmptyState/EmptyState.stories.mdx +146 -0
  299. package/src/components/ui/EmptyState/EmptyState.tsx +26 -0
  300. package/src/components/ui/EmptyState/empty-state.module.scss +63 -0
  301. package/src/components/ui/EmptyState/index.ts +1 -0
  302. package/src/components/ui/Gift/Gift.stories.mdx +99 -0
  303. package/src/components/ui/Gift/Gift.tsx +76 -0
  304. package/src/components/ui/Gift/gift.module.scss +94 -0
  305. package/src/components/ui/Gift/index.ts +2 -0
  306. package/src/components/ui/Icon/Icon.tsx +35 -0
  307. package/src/components/ui/Icon/index.ts +1 -0
  308. package/src/components/ui/Image/Image.tsx +59 -0
  309. package/src/components/ui/Image/index.ts +1 -0
  310. package/src/components/ui/Image/thumborUrlBuilder.ts +101 -0
  311. package/src/components/ui/Image/useImage.ts +46 -0
  312. package/src/components/ui/ImageGallery/ImageGallery.stories.mdx +173 -0
  313. package/src/components/ui/ImageGallery/ImageGallery.tsx +51 -0
  314. package/src/components/ui/ImageGallery/ImageGallerySelector.tsx +116 -0
  315. package/src/components/ui/ImageGallery/ImageZoom.tsx +12 -0
  316. package/src/components/ui/ImageGallery/image-gallery-selector.module.scss +131 -0
  317. package/src/components/ui/ImageGallery/image-gallery.module.scss +56 -0
  318. package/src/components/ui/ImageGallery/index.ts +4 -0
  319. package/src/components/ui/InputText/InputText.stories.mdx +311 -0
  320. package/src/components/ui/InputText/InputText.tsx +128 -0
  321. package/src/components/ui/InputText/index.ts +2 -0
  322. package/src/components/ui/InputText/input-text.module.scss +168 -0
  323. package/src/components/ui/Link/Link.stories.mdx +272 -0
  324. package/src/components/ui/Link/Link.tsx +68 -0
  325. package/src/components/ui/Link/index.ts +2 -0
  326. package/src/components/ui/Link/link.module.scss +98 -0
  327. package/src/components/ui/Logo/Logo.tsx +14 -0
  328. package/src/components/ui/Logo/index.ts +1 -0
  329. package/src/components/ui/Logo/logo.module.scss +12 -0
  330. package/src/components/ui/Modal/Modal.stories.mdx +142 -0
  331. package/src/components/ui/Modal/Modal.tsx +43 -0
  332. package/src/components/ui/Modal/index.ts +1 -0
  333. package/src/components/ui/Modal/modal.module.scss +46 -0
  334. package/src/components/ui/Price/Price.stories.mdx +194 -0
  335. package/src/components/ui/Price/Price.tsx +32 -0
  336. package/src/components/ui/Price/index.ts +1 -0
  337. package/src/components/ui/Price/price.module.scss +27 -0
  338. package/src/components/ui/PriceRange/PriceRange.stories.mdx +192 -0
  339. package/src/components/ui/PriceRange/PriceRange.tsx +138 -0
  340. package/src/components/ui/PriceRange/index.ts +1 -0
  341. package/src/components/ui/PriceRange/price-range.module.scss +176 -0
  342. package/src/components/ui/ProductTitle/ProductTitle.stories.mdx +107 -0
  343. package/src/components/ui/ProductTitle/ProductTitle.tsx +11 -0
  344. package/src/components/ui/ProductTitle/index.ts +1 -0
  345. package/src/components/ui/ProductTitle/product-title.module.scss +48 -0
  346. package/src/components/ui/QuantitySelector/QuantitySelector.stories.mdx +246 -0
  347. package/src/components/ui/QuantitySelector/QuantitySelector.tsx +103 -0
  348. package/src/components/ui/QuantitySelector/index.ts +1 -0
  349. package/src/components/ui/QuantitySelector/quantity-selector.module.scss +160 -0
  350. package/src/components/ui/Radio/Radio.stories.mdx +237 -0
  351. package/src/components/ui/Radio/Radio.tsx +36 -0
  352. package/src/components/ui/Radio/index.ts +2 -0
  353. package/src/components/ui/Radio/radio.module.scss +122 -0
  354. package/src/components/ui/SROnly/SROnly.tsx +20 -0
  355. package/src/components/ui/SROnly/index.ts +1 -0
  356. package/src/components/ui/SROnly/sr-only.module.scss +15 -0
  357. package/src/components/ui/Select/Select.stories.mdx +168 -0
  358. package/src/components/ui/Select/Select.tsx +70 -0
  359. package/src/components/ui/Select/index.ts +2 -0
  360. package/src/components/ui/Select/select.module.scss +85 -0
  361. package/src/components/ui/ShippingSimulation/ShippingSimulation.stories.mdx +140 -0
  362. package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx +109 -0
  363. package/src/components/ui/ShippingSimulation/index.ts +1 -0
  364. package/src/components/ui/ShippingSimulation/shipping-simulation.module.scss +96 -0
  365. package/src/components/ui/ShippingSimulation/useShippingSimulation.ts +225 -0
  366. package/src/components/ui/SkuSelector/Selectors.stories.mdx +82 -0
  367. package/src/components/ui/SkuSelector/Selectors.tsx +87 -0
  368. package/src/components/ui/SkuSelector/SkuSelector.stories.mdx +345 -0
  369. package/src/components/ui/SkuSelector/SkuSelector.tsx +46 -0
  370. package/src/components/ui/SkuSelector/index.ts +3 -0
  371. package/src/components/ui/SkuSelector/sku-selector.module.scss +172 -0
  372. package/src/components/ui/SkuSelector/skuVariants.ts +59 -0
  373. package/src/components/ui/SlideOver/SlideOver.stories.mdx +285 -0
  374. package/src/components/ui/SlideOver/SlideOver.tsx +58 -0
  375. package/src/components/ui/SlideOver/index.ts +1 -0
  376. package/src/components/ui/SlideOver/overlay.scss +14 -0
  377. package/src/components/ui/SlideOver/slide-over.module.scss +63 -0
  378. package/src/components/ui/Tiles/Tiles.stories.mdx +153 -0
  379. package/src/components/ui/Tiles/Tiles.tsx +14 -0
  380. package/src/components/ui/Tiles/index.ts +5 -0
  381. package/src/components/ui/Tiles/tiles.module.scss +60 -0
  382. package/src/components/ui/Toast/Toast.stories.mdx +158 -0
  383. package/src/components/ui/Toast/Toast.tsx +56 -0
  384. package/src/components/ui/Toast/index.ts +1 -0
  385. package/src/components/ui/Toast/toast.module.scss +112 -0
  386. package/src/components/ui/Toggle/Toggle.stories.mdx +604 -0
  387. package/src/components/ui/Toggle/Toggle.tsx +75 -0
  388. package/src/components/ui/Toggle/index.ts +2 -0
  389. package/src/components/ui/Toggle/toggle.module.scss +200 -0
  390. package/src/constants.ts +2 -0
  391. package/src/fonts/WebFonts.tsx +15 -0
  392. package/src/images/icon.png +0 -0
  393. package/src/pages/404.tsx +27 -0
  394. package/src/pages/500.tsx +31 -0
  395. package/src/pages/[...slug].tsx +186 -0
  396. package/src/pages/[slug]/p.tsx +209 -0
  397. package/src/pages/_app.tsx +38 -0
  398. package/src/pages/_document.tsx +22 -0
  399. package/src/pages/account.tsx +20 -0
  400. package/src/pages/api/graphql.ts +72 -0
  401. package/src/pages/api/preview.ts +61 -0
  402. package/src/pages/checkout.tsx +20 -0
  403. package/src/pages/index.tsx +72 -0
  404. package/src/pages/login.tsx +20 -0
  405. package/src/pages/s.tsx +83 -0
  406. package/src/sdk/analytics/hooks/useViewItemListEvent.ts +51 -0
  407. package/src/sdk/analytics/index.tsx +30 -0
  408. package/src/sdk/analytics/platform/vtex/index.ts +11 -0
  409. package/src/sdk/analytics/platform/vtex/search.ts +102 -0
  410. package/src/sdk/analytics/types.ts +22 -0
  411. package/src/sdk/cart/index.ts +187 -0
  412. package/src/sdk/cart/useBuyButton.ts +62 -0
  413. package/src/sdk/cart/useCartToggleButton.ts +23 -0
  414. package/src/sdk/cart/useCheckoutButton.ts +22 -0
  415. package/src/sdk/cart/useRemoveButton.ts +56 -0
  416. package/src/sdk/error/ErrorBoundary/ErrorBoundary.tsx +67 -0
  417. package/src/sdk/error/ErrorBoundary/index.ts +1 -0
  418. package/src/sdk/graphql/prefetchQuery.ts +20 -0
  419. package/src/sdk/graphql/request.ts +25 -0
  420. package/src/sdk/graphql/useLazyQuery.ts +29 -0
  421. package/src/sdk/graphql/useQuery.ts +40 -0
  422. package/src/sdk/newsletter/useNewsletter.ts +31 -0
  423. package/src/sdk/product/useDiscountPercent.ts +10 -0
  424. package/src/sdk/product/useFormattedPrice.ts +27 -0
  425. package/src/sdk/product/useProduct.ts +46 -0
  426. package/src/sdk/product/useProductLink.ts +69 -0
  427. package/src/sdk/product/useProductsQuery.ts +107 -0
  428. package/src/sdk/search/Sentinel.tsx +78 -0
  429. package/src/sdk/search/state.ts +11 -0
  430. package/src/sdk/search/useSearchHistory.ts +40 -0
  431. package/src/sdk/search/useSearchInput.tsx +43 -0
  432. package/src/sdk/search/useSuggestions.ts +49 -0
  433. package/src/sdk/search/useTopSearch.ts +49 -0
  434. package/src/sdk/session/index.ts +71 -0
  435. package/src/sdk/tests/mark.tsx +10 -0
  436. package/src/sdk/ui/Provider.tsx +151 -0
  437. package/src/sdk/ui/useFadeEffect.ts +21 -0
  438. package/src/sdk/ui/useOnClickOutside.ts +39 -0
  439. package/src/sdk/ui/useScrollDirection.ts +31 -0
  440. package/src/sdk/useStore.ts +24 -0
  441. package/src/server/cms.ts +66 -0
  442. package/src/server/index.ts +105 -0
  443. package/src/stories/brandless.stories.mdx +85 -0
  444. package/src/stories/changelog-template.stories.mdx +10 -0
  445. package/src/stories/colors.stories.mdx +306 -0
  446. package/src/stories/customizing.stories.mdx +113 -0
  447. package/src/stories/getting-started.stories.mdx +65 -0
  448. package/src/stories/grid-layout.stories.mdx +53 -0
  449. package/src/stories/icons.stories.mdx +237 -0
  450. package/src/stories/interactive-controls.stories.mdx +50 -0
  451. package/src/stories/midnight.stories.mdx +56 -0
  452. package/src/stories/refinements.stories.mdx +96 -0
  453. package/src/stories/soft-blue.stories.mdx +56 -0
  454. package/src/stories/spacing.stories.mdx +38 -0
  455. package/src/stories/typography.stories.mdx +224 -0
  456. package/src/styles/global/components.scss +5 -0
  457. package/src/styles/global/layout.scss +80 -0
  458. package/src/styles/global/resets.scss +48 -0
  459. package/src/styles/global/storybook-components.scss +5 -0
  460. package/src/styles/global/tokens.scss +276 -0
  461. package/src/styles/global/typography.scss +66 -0
  462. package/src/styles/global/utilities.scss +69 -0
  463. package/src/styles/scaffold.scss +7 -0
  464. package/src/styles/themes/custom-theme.scss +36 -0
  465. package/src/styles/themes/midnight.scss +123 -0
  466. package/src/styles/themes/soft-blue.scss +79 -0
  467. package/src/styles/vendors/include-media.scss +4 -0
  468. package/src/styles/vendors/include-media_overwrite.scss +9 -0
  469. package/src/styles/vendors/modern-normalize.css +270 -0
  470. package/src/typings/global.d.ts +6 -0
  471. package/src/typings/module.css.d.ts +7 -0
  472. package/store.config.js +69 -0
  473. package/stylelint.config.js +82 -0
  474. package/tsconfig.json +25 -0
  475. package/vtex.env +14 -0
package/src/components/ui/Toggle/Toggle.stories.mdx ADDED
@@ -0,0 +1,604 @@
1
+ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
2
+
3
+ import Toggle from '.'
4
+
5
+ <Meta
6
+ title="Atoms/Toggle"
7
+ argTypes={{
8
+ displayLabel: {
9
+ type: {
10
+ name: 'boolean',
11
+ },
12
+ },
13
+ disabled: {
14
+ type: {
15
+ name: 'boolean',
16
+ },
17
+ defaultValue: false,
18
+ },
19
+ variant: {
20
+ name: 'variant',
21
+ control: 'radio',
22
+ },
23
+ }}
24
+ component={Toggle}
25
+ />
26
+
27
+ export const Template = (args) => <Toggle {...args} onChange={() => {}} />
28
+
29
+ <header>
30
+
31
+ # Toggle
32
+
33
+ An input checkbox styled to look like a switch button.
34
+
35
+ </header>
36
+
37
+ ## Overview
38
+
39
+ <Canvas>
40
+ <Story
41
+ name="overview-vertical"
42
+ args={{
43
+ id: 'overview-toggle-vertical',
44
+ label: 'Label',
45
+ variant: 'vertical',
46
+ }}
47
+ >
48
+ {Template.bind({})}
49
+ </Story>
50
+ <Story
51
+ name="overview-default"
52
+ args={{
53
+ id: 'overview-toggle-default',
54
+ label: 'Label',
55
+ }}
56
+ >
57
+ {Template.bind({})}
58
+ </Story>
59
+ <Story
60
+ name="overview-checked"
61
+ args={{
62
+ id: 'overview-toggle-checked',
63
+ label: 'Label',
64
+ checked: true,
65
+ }}
66
+ >
67
+ {Template.bind({})}
68
+ </Story>
69
+ <Story
70
+ name="overview-disabled"
71
+ args={{
72
+ id: 'overview-toggle-disabled',
73
+ label: 'Label',
74
+ disabled: true,
75
+ }}
76
+ >
77
+ {Template.bind({})}
78
+ </Story>
79
+ <Story
80
+ name="overview-disabled-checked"
81
+ args={{
82
+ id: 'overview-toggle-disabled-checked',
83
+ label: 'Label',
84
+ disabled: true,
85
+ checked: true,
86
+ }}
87
+ >
88
+ {Template.bind({})}
89
+ </Story>
90
+ </Canvas>
91
+
92
+ ---
93
+
94
+ ## Usage
95
+
96
+ `import Toggle from '../components/ui/Toggle'`
97
+
98
+ <Canvas>
99
+ <Story
100
+ name="default"
101
+ args={{
102
+ id: 'toggle-default',
103
+ label: 'Label',
104
+ }}
105
+ >
106
+ {Template.bind({})}
107
+ </Story>
108
+ </Canvas>
109
+
110
+ <ArgsTable story="default" />
111
+
112
+ <table
113
+ style={{
114
+ width: '100%',
115
+ }}
116
+ >
117
+ <thead>
118
+ <tr>
119
+ <th>Local token</th>
120
+ <th>Default value/Global token linked</th>
121
+ </tr>
122
+ </thead>
123
+ <tbody>
124
+ <tr>
125
+ <td>
126
+ <code>--fs-toggle-height</code>
127
+ </td>
128
+ <td>
129
+ <code>calc(var(--fs-control-min-height) / 1.75)</code>
130
+ </td>
131
+ </tr>
132
+ <tr>
133
+ <td></td>
134
+ <td></td>
135
+ </tr>
136
+ <tr>
137
+ <td>
138
+ <code>--fs-toggle-bkg-color</code>
139
+ </td>
140
+ <td>
141
+ <div style={{ backgroundColor: 'var(--fs-control-bkg)' }} />
142
+ <code>var(--fs-control-bkg)</code>
143
+ </td>
144
+ </tr>
145
+ <tr>
146
+ <td>
147
+ <code>--fs-toggle-bkg-color-hover</code>
148
+ </td>
149
+ <td>
150
+ <div style={{ backgroundColor: 'var(--fs-color-primary-bkg-light)' }} />
151
+ <code>var(--fs-color-primary-bkg-light)</code>
152
+ </td>
153
+ </tr>
154
+ <tr>
155
+ <td></td>
156
+ <td></td>
157
+ </tr>
158
+ <tr>
159
+ <td>
160
+ <code>--fs-toggle-shadow</code>
161
+ </td>
162
+ <td>
163
+ <code>var(--fs-shadow)</code>
164
+ </td>
165
+ </tr>
166
+ <tr>
167
+ <td>
168
+ <code>--fs-toggle-shadow-hover</code>
169
+ </td>
170
+ <td>
171
+ <code>var(--fs-shadow)</code>
172
+ </td>
173
+ </tr>
174
+ <tr>
175
+ <td></td>
176
+ <td></td>
177
+ </tr>
178
+ <tr>
179
+ <td>
180
+ <code>--fs-toggle-border-color</code>
181
+ </td>
182
+ <td>
183
+ <div style={{ backgroundColor: 'var(--fs-border-color)' }} />
184
+ <code>var(--fs-border-color)</code>
185
+ </td>
186
+ </tr>
187
+ <tr>
188
+ <td>
189
+ <code>--fs-toggle-border-color-hover</code>
190
+ </td>
191
+ <td>
192
+ <div style={{ backgroundColor: 'var(--fs-border-color-hover)' }} />
193
+ <code>var(--fs-border-color-hover)</code>
194
+ </td>
195
+ </tr>
196
+ <tr>
197
+ <td>
198
+ <code>--fs-toggle-border-radius</code>
199
+ </td>
200
+ <td>
201
+ <code>var(--fs-border-radius)</code>
202
+ </td>
203
+ </tr>
204
+ <tr>
205
+ <td>
206
+ <code>--fs-toggle-border-width</code>
207
+ </td>
208
+ <td>
209
+ <code>var(--fs-border-width)</code>
210
+ </td>
211
+ </tr>
212
+ <tr>
213
+ <td></td>
214
+ <td></td>
215
+ </tr>
216
+ <tr>
217
+ <td>
218
+ <code>--fs-toggle-transition-timing</code>
219
+ </td>
220
+ <td>
221
+ <code>var(--fs-transition-timing)</code>
222
+ </td>
223
+ </tr>
224
+ <tr>
225
+ <td>
226
+ <code>--fs-toggle-transition-property</code>
227
+ </td>
228
+ <td>
229
+ <code>var(--fs-transition-property)</code>
230
+ </td>
231
+ </tr>
232
+ <tr>
233
+ <td>
234
+ <code>--fs-toggle-transition-function</code>
235
+ </td>
236
+ <td>
237
+ <code>var(--fs-transition-function)</code>
238
+ </td>
239
+ </tr>
240
+ </tbody>
241
+ </table>
242
+
243
+ ---
244
+
245
+ ## Nested Elements
246
+
247
+ ### Toggle Knob
248
+
249
+ <table
250
+ style={{
251
+ width: '100%',
252
+ }}
253
+ >
254
+ <thead>
255
+ <tr>
256
+ <th>Local token</th>
257
+ <th>Default value/Global token linked</th>
258
+ </tr>
259
+ </thead>
260
+ <tbody>
261
+ <tr>
262
+ <td>
263
+ <code>--fs-toggle-knob-shadow</code>
264
+ </td>
265
+ <td>
266
+ <code>var(--fs-shadow)</code>
267
+ </td>
268
+ </tr>
269
+ <tr>
270
+ <td>
271
+ <code>--fs-toggle-knob-bkg-color</code>
272
+ </td>
273
+ <td>
274
+ <div style={{ backgroundColor: 'var(--fs-color-primary-bkg)' }} />
275
+ <code>var(--fs-color-primary-bkg)</code>
276
+ </td>
277
+ </tr>
278
+ <tr>
279
+ <td>
280
+ <code>--fs-toggle-knob-bkg-color-hover</code>
281
+ </td>
282
+ <td>
283
+ <div style={{ backgroundColor: 'var(--fs-border-color-hover)' }} />
284
+ <code>var(--fs-toggle-border-color-hover)</code>
285
+ </td>
286
+ </tr>
287
+ <tr>
288
+ <td>
289
+ <code>--fs-toggle-knob-border-radius</code>
290
+ </td>
291
+ <td>
292
+ <code>var(--fs-border-radius-small)</code>
293
+ </td>
294
+ </tr>
295
+ <tr>
296
+ <td>
297
+ <code>--fs-toggle-knob-border-color</code>
298
+ </td>
299
+ <td>
300
+ <div style={{ backgroundColor: 'var(--fs-color-primary-bkg)' }} />
301
+ <code>var(--fs-toggle-knob-bkg-color)</code>
302
+ </td>
303
+ </tr>
304
+ <tr>
305
+ <td>
306
+ <code>--fs-toggle-knob-border-color-hover</code>
307
+ </td>
308
+ <td>
309
+ <div style={{ backgroundColor: 'var(--fs-border-color-hover)' }} />
310
+ <code>var(--fs-toggle-knob-bkg-color-hover)</code>
311
+ </td>
312
+ </tr>
313
+ <tr>
314
+ <td>
315
+ <code>--fs-toggle-knob-border-width</code>
316
+ </td>
317
+ <td>
318
+ <code>var(--fs-toggle-border-width)</code>
319
+ </td>
320
+ </tr>
321
+ <tr>
322
+ <td></td>
323
+ <td></td>
324
+ </tr>
325
+ <tr>
326
+ <td>
327
+ <code>--fs-toggle-knob-checked-bkg-color</code>
328
+ </td>
329
+ <td>
330
+ <div style={{ backgroundColor: 'var(--fs-control-bkg)' }} />
331
+ <code>var(--fs-control-bkg)</code>
332
+ </td>
333
+ </tr>
334
+ <tr>
335
+ <td>
336
+ <code>--fs-toggle-knob-checked-border-color</code>
337
+ </td>
338
+ <td>
339
+ <div style={{ backgroundColor: 'var(--fs-control-bkg)' }} />
340
+ <code>var(--fs-toggle-knob-checked-bkg-color)</code>
341
+ </td>
342
+ </tr>
343
+ <tr>
344
+ <td></td>
345
+ <td></td>
346
+ </tr>
347
+ <tr>
348
+ <td>
349
+ <code>--fs-toggle-knob-disabled-bkg-color</code>
350
+ </td>
351
+ <td>
352
+ <div
353
+ style={{
354
+ backgroundColor: 'var(--fs-color-neutral-5)',
355
+ }}
356
+ />
357
+ <code>var(--fs-color-neutral-5)</code>
358
+ </td>
359
+ </tr>
360
+ <tr>
361
+ <td>
362
+ <code>--fs-toggle-knob-disabled-border-color</code>
363
+ </td>
364
+ <td>
365
+ <div
366
+ style={{
367
+ backgroundColor: 'var(--fs-color-neutral-5)',
368
+ }}
369
+ />
370
+ <code>var(--fs-toggle-knob-disabled-bkg-color)</code>
371
+ </td>
372
+ </tr>
373
+ </tbody>
374
+ </table>
375
+
376
+ ### Toggle Knob Icon
377
+
378
+ <table
379
+ style={{
380
+ width: '100%',
381
+ }}
382
+ >
383
+ <thead>
384
+ <tr>
385
+ <th>Local token</th>
386
+ <th>Default value/Global token linked</th>
387
+ </tr>
388
+ </thead>
389
+ <tbody>
390
+ <tr>
391
+ <td>
392
+ <code>--fs-toggle-knob-icon-color</code>
393
+ </td>
394
+ <td>
395
+ <code>transparent</code>
396
+ </td>
397
+ </tr>
398
+ <tr>
399
+ <td></td>
400
+ <td></td>
401
+ </tr>
402
+ <tr>
403
+ <td>
404
+ <code>--fs-toggle-knob-icon-checked-color</code>
405
+ </td>
406
+ <td>
407
+ <div
408
+ style={{ backgroundColor: 'var(--fs-color-primary-bkg-active)' }}
409
+ />
410
+ <code>var(--fs-toggle-checked-bkg-color)</code>
411
+ </td>
412
+ </tr>
413
+ <tr>
414
+ <td>
415
+ <code>--fs-toggle-knob-icon-checked-color-hover</code>
416
+ </td>
417
+ <td>
418
+ <div
419
+ style={{
420
+ backgroundColor: 'var(--fs-color-primary-bkg-hover)',
421
+ }}
422
+ />
423
+ <code>var(--fs-toggle-checked-bkg-color-hover)</code>
424
+ </td>
425
+ </tr>
426
+ <tr>
427
+ <td></td>
428
+ <td></td>
429
+ </tr>
430
+ <tr>
431
+ <td>
432
+ <code>--fs-toggle-knob-icon-disabled-color</code>
433
+ </td>
434
+ <td>
435
+ <div
436
+ style={{
437
+ backgroundColor: 'var(--fs-color-disabled-bkg)',
438
+ }}
439
+ />
440
+ <code>var(--fs-toggle-disabled-bkg-color)</code>
441
+ </td>
442
+ </tr>
443
+ </tbody>
444
+ </table>
445
+
446
+ ---
447
+
448
+ ## Variants
449
+
450
+ ### Horizontal
451
+
452
+ <Canvas>
453
+ <Story
454
+ name="horizontal"
455
+ args={{
456
+ id: 'toggle-horizontal',
457
+ label: 'Label',
458
+ }}
459
+ >
460
+ {Template.bind({})}
461
+ </Story>
462
+ </Canvas>
463
+
464
+ ### Vertical
465
+
466
+ <Canvas>
467
+ <Story
468
+ name="vertical"
469
+ args={{
470
+ id: 'toggle-vertical',
471
+ label: 'Label',
472
+ variant: 'vertical',
473
+ }}
474
+ >
475
+ {Template.bind({})}
476
+ </Story>
477
+ </Canvas>
478
+
479
+ ### Checked
480
+
481
+ <Canvas>
482
+ <Story
483
+ name="checked"
484
+ args={{
485
+ id: 'toggle-checked',
486
+ label: 'Label',
487
+ checked: true,
488
+ }}
489
+ >
490
+ {Template.bind({})}
491
+ </Story>
492
+ </Canvas>
493
+
494
+ <table
495
+ style={{
496
+ width: '100%',
497
+ }}
498
+ >
499
+ <thead>
500
+ <tr>
501
+ <th>Local token</th>
502
+ <th>Default value/Global token linked</th>
503
+ </tr>
504
+ </thead>
505
+ <tbody>
506
+ <tr>
507
+ <td>
508
+ <code>--fs-toggle-checked-bkg-color</code>
509
+ </td>
510
+ <td>
511
+ <div
512
+ style={{ backgroundColor: 'var(--fs-color-primary-bkg-active)' }}
513
+ />
514
+ <code>var(--fs-color-primary-bkg-active)</code>
515
+ </td>
516
+ </tr>
517
+ <tr>
518
+ <td>
519
+ <code>--fs-toggle-checked-bkg-color-hover</code>
520
+ </td>
521
+ <td>
522
+ <div style={{ backgroundColor: 'var(--fs-color-primary-bkg-hover)' }} />
523
+ <code>var(--fs-color-primary-bkg-hover)</code>
524
+ </td>
525
+ </tr>
526
+ <tr>
527
+ <td>
528
+ <code>--fs-toggle-checked-border-color</code>
529
+ </td>
530
+ <td>
531
+ <div style={{ backgroundColor: 'var(--fs-color-primary-bkg-active' }} />
532
+ <code>var(--fs-toggle-checked-bkg-color)</code>
533
+ </td>
534
+ </tr>
535
+ <tr>
536
+ <td>
537
+ <code>--fs-toggle-checked-border-color-hover</code>
538
+ </td>
539
+ <td>
540
+ <div style={{ backgroundColor: 'var(--fs-color-primary-bkg-hover' }} />
541
+ <code>var(--fs-toggle-checked-bkg-color-hover)</code>
542
+ </td>
543
+ </tr>
544
+ </tbody>
545
+ </table>
546
+
547
+ ### Disabled
548
+
549
+ <Canvas>
550
+ <Story
551
+ name="disabled"
552
+ args={{
553
+ id: 'toggle-disabled',
554
+ label: 'Label',
555
+ disabled: true,
556
+ }}
557
+ >
558
+ {Template.bind({})}
559
+ </Story>
560
+ <Story
561
+ name="disabled-checked"
562
+ args={{
563
+ id: 'toggle-disabled-checked',
564
+ label: 'Label',
565
+ disabled: true,
566
+ checked: true,
567
+ }}
568
+ >
569
+ {Template.bind({})}
570
+ </Story>
571
+ </Canvas>
572
+
573
+ <table
574
+ style={{
575
+ width: '100%',
576
+ }}
577
+ >
578
+ <thead>
579
+ <tr>
580
+ <th>Local token</th>
581
+ <th>Default value/Global token linked</th>
582
+ </tr>
583
+ </thead>
584
+ <tbody>
585
+ <tr>
586
+ <td>
587
+ <code>--fs-toggle-disabled-bkg-color</code>
588
+ </td>
589
+ <td>
590
+ <div style={{ backgroundColor: 'var(--fs-color-disabled-bkg)' }} />
591
+ <code>var(--fs-color-disabled-bkg)</code>
592
+ </td>
593
+ </tr>
594
+ <tr>
595
+ <td>
596
+ <code>--fs-toggle-disabled-border-color</code>
597
+ </td>
598
+ <td>
599
+ <div style={{ backgroundColor: 'var(--fs-border-color-disabled)' }} />
600
+ <code>var(--fs-border-color-disabled)</code>
601
+ </td>
602
+ </tr>
603
+ </tbody>
604
+ </table>
package/src/components/ui/Toggle/Toggle.tsx ADDED
@@ -0,0 +1,75 @@
1
+ import { Input as UIInput, Label as UILabel } from '@faststore/ui'
2
+ import { forwardRef } from 'react'
3
+ import type { InputHTMLAttributes } from 'react'
4
+
5
+ import Icon from 'src/components/ui/Icon'
6
+ import SROnly from 'src/components/ui/SROnly'
7
+
8
+ import styles from './toggle.module.scss'
9
+
10
+ export interface ToggleProps
11
+ extends InputHTMLAttributes<Omit<HTMLInputElement, 'disabled' | 'type'>> {
12
+ /**
13
+ * ID to identify input and corresponding label.
14
+ */
15
+ id: string
16
+ /**
17
+ * The text displayed to identify the input.
18
+ */
19
+ label: string
20
+ /**
21
+ * Controls whether the label will be displayed or not.
22
+ */
23
+ displayLabel?: boolean
24
+ /**
25
+ * Specifies that this input should be disabled.
26
+ */
27
+ disabled?: boolean
28
+ /**
29
+ * Controls the component's direction.
30
+ */
31
+ variant?: 'horizontal' | 'vertical'
32
+ }
33
+
34
+ const Toggle = forwardRef<HTMLInputElement, ToggleProps>(function Toggle(
35
+ {
36
+ id,
37
+ label,
38
+ disabled,
39
+ displayLabel = true,
40
+ variant = 'horizontal',
41
+ ...otherProps
42
+ }: ToggleProps,
43
+ ref
44
+ ) {
45
+ return (
46
+ <div
47
+ data-fs-toggle
48
+ data-fs-toggle-variant={variant}
49
+ className={styles.fsToggle}
50
+ >
51
+ <div data-fs-toggle-container>
52
+ <UIInput
53
+ id={id}
54
+ ref={ref}
55
+ role="switch"
56
+ type="checkbox"
57
+ disabled={disabled}
58
+ {...otherProps}
59
+ />
60
+ <span data-fs-toggle-knob>
61
+ <Icon width={15} height={15} weight="bold" name="Checked" />
62
+ </span>
63
+ </div>
64
+ {displayLabel ? (
65
+ <UILabel data-fs-label htmlFor={id}>
66
+ {label}
67
+ </UILabel>
68
+ ) : (
69
+ <SROnly text={label} />
70
+ )}
71
+ </div>
72
+ )
73
+ })
74
+
75
+ export default Toggle
package/src/components/ui/Toggle/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default } from './Toggle'
2
+ export type { ToggleProps } from './Toggle'