From 4be231f1b756acca3d55dec4e13b45f5767a1ece Mon Sep 17 00:00:00 2001 From: renatamottam Date: Wed, 20 Mar 2024 11:28:11 -0300 Subject: [PATCH 01/25] feat: Organizes icons files --- packages/core/public/icons.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/public/icons.svg b/packages/core/public/icons.svg index f0c616e74d..9ba376f178 100644 --- a/packages/core/public/icons.svg +++ b/packages/core/public/icons.svg @@ -88,13 +88,13 @@ + - From 8ce60cb726ea62b28c1640f56b9637899d23349f Mon Sep 17 00:00:00 2001 From: renatamottam Date: Mon, 22 Apr 2024 17:50:07 -0300 Subject: [PATCH 02/25] fix: `Info` and `ArrowUpRight` icons --- apps/site/public/icons.svg | 4 ++-- packages/core/public/icons.svg | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/site/public/icons.svg b/apps/site/public/icons.svg index 50a10851c5..9aa8041c0c 100644 --- a/apps/site/public/icons.svg +++ b/apps/site/public/icons.svg @@ -9,7 +9,7 @@ - + @@ -51,7 +51,7 @@ - + diff --git a/packages/core/public/icons.svg b/packages/core/public/icons.svg index 9ba376f178..c6563227f3 100644 --- a/packages/core/public/icons.svg +++ b/packages/core/public/icons.svg @@ -9,7 +9,7 @@ - + @@ -51,7 +51,7 @@ - + From ae104da7cf44e8bba18653626e44f8bd6a35249f Mon Sep 17 00:00:00 2001 From: renatamottam Date: Mon, 22 Apr 2024 17:50:18 -0300 Subject: [PATCH 03/25] feat: add all new icons --- apps/site/public/icons.svg | 302 ++++++++++++++++++++++++++++++++- packages/core/public/icons.svg | 301 +++++++++++++++++++++++++++++++- 2 files changed, 594 insertions(+), 9 deletions(-) diff --git a/apps/site/public/icons.svg b/apps/site/public/icons.svg index 9aa8041c0c..f5a8b867c7 100644 --- a/apps/site/public/icons.svg +++ b/apps/site/public/icons.svg @@ -29,10 +29,6 @@ - - - - @@ -75,8 +71,14 @@ + + + + + + @@ -95,7 +97,6 @@ - @@ -126,4 +127,295 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/core/public/icons.svg b/packages/core/public/icons.svg index c6563227f3..f5a8b867c7 100644 --- a/packages/core/public/icons.svg +++ b/packages/core/public/icons.svg @@ -29,10 +29,6 @@ - - - - @@ -75,8 +71,14 @@ + + + + + + @@ -125,4 +127,295 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 9f7d641ec3e055d69adf6a235613cb371315a1a8 Mon Sep 17 00:00:00 2001 From: renatamottam Date: Mon, 22 Apr 2024 17:51:46 -0300 Subject: [PATCH 04/25] feat: Updates `Icon` component to accept new format --- packages/components/src/atoms/Icon/Icon.tsx | 29 ++++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/components/src/atoms/Icon/Icon.tsx b/packages/components/src/atoms/Icon/Icon.tsx index e94909ded0..023ce2e016 100644 --- a/packages/components/src/atoms/Icon/Icon.tsx +++ b/packages/components/src/atoms/Icon/Icon.tsx @@ -2,6 +2,7 @@ import type { SVGProps } from 'react' import React, { forwardRef } from 'react' type IconWeight = 'thin' | 'light' | 'regular' | 'bold' +type IconSize = 20 | 24 | 32 const mapWeightToValue: Record = { bold: 24, @@ -25,35 +26,55 @@ export interface IconProps extends SVGProps { * SVG weight. * * @default 'regular' + * @deprecated 'weight' prop will be removed in the next major version. */ weight?: IconWeight /** * SVG width. * * @default '24' + * @deprecated 'width' prop will be removed in the next major version. Use 'size' instead. */ width?: number /** * SVG height. * * @default '24' + * @deprecated 'height' prop will be removed in the next major version. Use 'size' instead. */ height?: number + /** + * SVG size. + * + * @default '20' + */ + size?: IconSize } const Icon = forwardRef(function Icon( { testId = 'fs-icon', name, weight = 'regular', ...otherProps }: IconProps, ref ) { - const { width, height } = otherProps + let { width, height, size } = otherProps + let library: string = '' + + if (name.startsWith('fs-')) { + library = 'material' + name = `${name}${size ?? 20}` + } + else { + library = 'phosphor' + } + return ( From 0c1e4b1a48aacd1bbbea341096db180fa2b1b73c Mon Sep 17 00:00:00 2001 From: renatamottam Date: Mon, 22 Apr 2024 18:10:01 -0300 Subject: [PATCH 05/25] fix: Add missing icons on the doc list --- apps/site/pages/docs/icons.mdx | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/apps/site/pages/docs/icons.mdx b/apps/site/pages/docs/icons.mdx index 854ab681d5..c97c3c449c 100644 --- a/apps/site/pages/docs/icons.mdx +++ b/apps/site/pages/docs/icons.mdx @@ -120,5 +120,25 @@ You can find more details about the `Icon` component [here](/components/atoms/ic } name="Bell" /> } name="MapPin" /> } name="ArrowSquareOut" /> - } name="Envelope" /> + } name="Envelop" /> + } name="ArrowsClockwise" /> + } name="ArrowUpRight" /> + } name="Bag" /> + } name="Calendar" /> + } name="CircleWavyCheck" /> + } name="CircleWavyWarning" /> + } name="ClockClockwise" /> + } name="Ellipsis" /> + } name="Gift" /> + } name="Headphones" /> + } name="Info" /> + } name="List" /> + } name="Medal" /> + } name="RocketLaunch" /> + } name="SealCheck" /> + } name="Sealwarning" /> + } name="ShieldCheck" /> + } name="Storefront" /> + } name="Truck" /> + } name="User" /> From ffba1c938c0bf9656804d5e23859c2023a3850c9 Mon Sep 17 00:00:00 2001 From: renatamottam Date: Tue, 23 Apr 2024 11:35:04 -0300 Subject: [PATCH 06/25] doc: Update Icons page on old doc Should be used as reference --- apps/site/pages/docs/icons.mdx | 126 +++++++++++++++------------------ 1 file changed, 57 insertions(+), 69 deletions(-) diff --git a/apps/site/pages/docs/icons.mdx b/apps/site/pages/docs/icons.mdx index c97c3c449c..87ccedcc5c 100644 --- a/apps/site/pages/docs/icons.mdx +++ b/apps/site/pages/docs/icons.mdx @@ -27,27 +27,15 @@ You can find more details about the `Icon` component [here](/components/atoms/ic ## Usage - - - + + + ```tsx copy - - - -``` - - - - - - - -```tsx copy - - - + + + ``` --- @@ -55,30 +43,30 @@ You can find more details about the `Icon` component [here](/components/atoms/ic ### UI Actions - } name="X" /> - } name="Plus" /> - } name="PlusCircle" /> - } name="Minus" /> - } name="MinusCircle" /> - } name="XCircle" /> - } name="ArrowLeft" /> - } name="ArrowRight" /> + } name="fs-x" /> + } name="fs-plus" /> + } name="fs-pluscircle" /> + } name="fs-minus" /> + } name="fs-minuscircle" /> + } name="fs-xcircle" /> + } name="fs-arrowleft" /> + } name="fs-arrowright" /> } - name="ArrowElbowDownRight" + icon={} + name="fs-arrowelbowdownright" /> - } name="CaretDown" /> - } name="CaretRight" /> - } name="CaretLeft" /> - } name="CaretUp" /> - } name="Checked" /> + } name="fs-caretdown" /> + } name="fs-caretright" /> + } name="fs-caretleft" /> + } name="fs-caretup" /> + } name="fs-checked" /> } - name="MagnifyingGlass" + icon={} + name="fs-magnifyingglass" /> } - name="FadersHorizontal" + icon={} + name="fs-fadershorizontal" /> @@ -109,36 +97,36 @@ You can find more details about the `Icon` component [here](/components/atoms/ic ### Others - } name="House" /> - } name="Star" /> - } name="Heart" /> - } name="DotsThree" /> - } name="Ruler" /> - } name="ShoppingCart" /> - } name="Tag" /> - } name="BellRinging" /> - } name="Bell" /> - } name="MapPin" /> - } name="ArrowSquareOut" /> - } name="Envelop" /> - } name="ArrowsClockwise" /> - } name="ArrowUpRight" /> - } name="Bag" /> - } name="Calendar" /> - } name="CircleWavyCheck" /> - } name="CircleWavyWarning" /> - } name="ClockClockwise" /> - } name="Ellipsis" /> - } name="Gift" /> - } name="Headphones" /> - } name="Info" /> - } name="List" /> - } name="Medal" /> - } name="RocketLaunch" /> - } name="SealCheck" /> - } name="Sealwarning" /> - } name="ShieldCheck" /> - } name="Storefront" /> - } name="Truck" /> - } name="User" /> + } name="fs-house" /> + } name="fs-star" /> + } name="fs-heart" /> + } name="fs-dotsthree" /> + } name="fs-ruler" /> + } name="fs-shoppingcart" /> + } name="fs-tag" /> + } name="fs-bellringing" /> + } name="fs-bell" /> + } name="fs-mappin" /> + } name="fs-arrowsquareout" /> + } name="fs-envelop" /> + } name="fs-arrowsclockwise" /> + } name="fs-arrowupright" /> + } name="fs-bag" /> + } name="fs-calendar" /> + } name="fs-circlewavycheck" /> + } name="fs-circlewavywarning" /> + } name="fs-clockclockwise" /> + } name="fs-ellipsis" /> + } name="fs-gift" /> + } name="fs-headphones" /> + } name="fs-info" /> + } name="fs-list" /> + } name="fs-medal" /> + } name="fs-rocketlaunch" /> + } name="fs-sealcheck" /> + } name="fs-sealwarning" /> + } name="fs-shieldcheck" /> + } name="fs-storefront" /> + } name="fs-truck" /> + } name="fs-user" /> From 635aef29feb85d9bb7a3347c17d08c99a42b66a1 Mon Sep 17 00:00:00 2001 From: renatamottam Date: Wed, 24 Apr 2024 16:48:44 -0300 Subject: [PATCH 07/25] fix: Updates icon naming to use kebab case --- apps/site/pages/docs/icons.mdx | 61 ++--- apps/site/public/icons.svg | 288 ++++++++++---------- packages/components/src/atoms/Icon/Icon.tsx | 2 +- packages/core/public/icons.svg | 288 ++++++++++---------- 4 files changed, 315 insertions(+), 324 deletions(-) diff --git a/apps/site/pages/docs/icons.mdx b/apps/site/pages/docs/icons.mdx index 87ccedcc5c..42bbdc75e0 100644 --- a/apps/site/pages/docs/icons.mdx +++ b/apps/site/pages/docs/icons.mdx @@ -45,29 +45,20 @@ You can find more details about the `Icon` component [here](/components/atoms/ic } name="fs-x" /> } name="fs-plus" /> - } name="fs-pluscircle" /> + } name="fs-plus-circle" /> } name="fs-minus" /> - } name="fs-minuscircle" /> - } name="fs-xcircle" /> - } name="fs-arrowleft" /> - } name="fs-arrowright" /> - } - name="fs-arrowelbowdownright" - /> - } name="fs-caretdown" /> - } name="fs-caretright" /> - } name="fs-caretleft" /> - } name="fs-caretup" /> + } name="fs-minus-circle" /> + } name="fs-x-circle" /> + } name="fs-arrow-left" /> + } name="fs-arrow-right" /> + } name="fs-arrow-elbow-down-right" /> + } name="fs-caret-down" /> + } name="fs-caret-right" /> + } name="fs-caret-left" /> + } name="fs-caret-up" /> } name="fs-checked" /> - } - name="fs-magnifyingglass" - /> - } - name="fs-fadershorizontal" - /> + } name="fs-magnifying-glass" /> + } name="fs-faders-horizontal" /> ### Payment Flags @@ -100,32 +91,32 @@ You can find more details about the `Icon` component [here](/components/atoms/ic } name="fs-house" /> } name="fs-star" /> } name="fs-heart" /> - } name="fs-dotsthree" /> + } name="fs-dots-three" /> } name="fs-ruler" /> - } name="fs-shoppingcart" /> + } name="fs-shopping-cart" /> } name="fs-tag" /> - } name="fs-bellringing" /> + } name="fs-bell-ringing" /> } name="fs-bell" /> - } name="fs-mappin" /> - } name="fs-arrowsquareout" /> + } name="fs-map-pin" /> + } name="fs-arrow-square-out" /> } name="fs-envelop" /> - } name="fs-arrowsclockwise" /> - } name="fs-arrowupright" /> + } name="fs-arrows-clockwise" /> + } name="fs-arrow-up-right" /> } name="fs-bag" /> } name="fs-calendar" /> - } name="fs-circlewavycheck" /> - } name="fs-circlewavywarning" /> - } name="fs-clockclockwise" /> + } name="fs-circle-wavy-check" /> + } name="fs-circle-wavy-warning" /> + } name="fs-clock-clockwise" /> } name="fs-ellipsis" /> } name="fs-gift" /> } name="fs-headphones" /> } name="fs-info" /> } name="fs-list" /> } name="fs-medal" /> - } name="fs-rocketlaunch" /> - } name="fs-sealcheck" /> - } name="fs-sealwarning" /> - } name="fs-shieldcheck" /> + } name="fs-rocket-launch" /> + } name="fs-seal-check" /> + } name="fs-seal-warning" /> + } name="fs-shield-check" /> } name="fs-storefront" /> } name="fs-truck" /> } name="fs-user" /> diff --git a/apps/site/public/icons.svg b/apps/site/public/icons.svg index f5a8b867c7..e97cd696a4 100644 --- a/apps/site/public/icons.svg +++ b/apps/site/public/icons.svg @@ -129,293 +129,293 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/packages/components/src/atoms/Icon/Icon.tsx b/packages/components/src/atoms/Icon/Icon.tsx index 023ce2e016..1f75662731 100644 --- a/packages/components/src/atoms/Icon/Icon.tsx +++ b/packages/components/src/atoms/Icon/Icon.tsx @@ -60,7 +60,7 @@ const Icon = forwardRef(function Icon( if (name.startsWith('fs-')) { library = 'material' - name = `${name}${size ?? 20}` + name = `${name}-${size ?? 20}` } else { library = 'phosphor' diff --git a/packages/core/public/icons.svg b/packages/core/public/icons.svg index f5a8b867c7..e97cd696a4 100644 --- a/packages/core/public/icons.svg +++ b/packages/core/public/icons.svg @@ -129,293 +129,293 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + From 6ed52bfc8a1de3dfe181c052a2fdc3ddd0c0a696 Mon Sep 17 00:00:00 2001 From: Fanny Chien Date: Mon, 13 Jan 2025 10:18:25 -0300 Subject: [PATCH 08/25] chore: Replace icons props (#2292) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit > ⚠️ This PR is `in draft` because it is part of a standby feature, New Icons; we will return to it. - Replace Icon components declarations: - Renames `name` prop to add `fs-` prefix and convert to kebab-case - Removes `weight` prop if exists - Replaces `width` and `height` props with `size`. (Allowed size values: `20, 24, 32`. If the previous value is <= 20, the value will be 20, if the value is >= 32, the new value will be 32. Else, we don't need to add the size prop - the default value will be`24`. **Updates** - [x] faststore/components/atoms - [x] faststore/components/molecules - [x] faststore/components/organisms - [x] faststore/core - Core components - Icons in `sections.json` - Renames Envelop for `Envelop` -> fs-envelop **TO-DOs**: - [x] Renames PaymentMethods icons - [x] Renames Social icons - [ ] [Rating.tsx](https://github.com/vtex/faststore/pull/2292#diff-d8f89293f23b9854bfcce4f5fca5b01808adb1200eca179bcc5104e5d47e203a) : We will have to fix this component and its SVG on another PR. [Update Icons to Material Symbols](https://vtex-dev.atlassian.net/browse/SFS-760?atlOrigin=eyJpIjoiMzBkZThjZDYzMjkxNGUyZmFkNmY0MTI0NjU0OTVkNjkiLCJwIjoiaiJ9) --------- Co-authored-by: renatamottam Co-authored-by: Renata Motta --- apps/site/pages/components/atoms/button.mdx | 8 +- apps/site/pages/components/atoms/select.mdx | 5 - apps/site/pages/components/index.mdx | 18 +- .../site/pages/components/molecules/alert.mdx | 2 - .../components/organisms/payment-methods.mdx | 40 ++-- apps/site/pages/docs/icons.mdx | 28 +-- apps/site/public/icons.svg | 54 +++-- packages/components/src/atoms/Icon/Icon.tsx | 15 +- .../components/src/atoms/Select/Select.tsx | 2 +- .../molecules/Accordion/AccordionButton.tsx | 4 +- .../components/src/molecules/Alert/Alert.tsx | 5 +- .../molecules/Breadcrumb/BreadcrumbBase.tsx | 4 +- .../src/molecules/Carousel/Carousel.tsx | 10 +- .../src/molecules/CartItem/CartItem.tsx | 2 +- .../src/molecules/InputField/InputField.tsx | 3 +- .../src/molecules/Modal/ModalHeader.tsx | 2 +- .../ProductCard/ProductCardContent.tsx | 4 +- .../QuantitySelector/QuantitySelector.tsx | 4 +- .../SearchAutoCompleteTerm.tsx | 2 +- .../SearchHistory/SearchHistoryTerm.tsx | 2 +- .../SearchInputField/SearchInputField.tsx | 6 +- packages/components/src/molecules/Tag/Tag.tsx | 2 +- .../src/molecules/Toggle/Toggle.tsx | 2 +- .../src/organisms/Hero/HeroHeader.tsx | 2 +- .../ImageGallery/ImageGallerySelector.tsx | 4 +- .../src/organisms/OutOfStock/OutOfStock.tsx | 4 +- .../PaymentMethods/PaymentMethods.tsx | 2 +- .../ShippingSimulation/ShippingSimulation.tsx | 5 +- .../organisms/SlideOver/SlideOverHeader.tsx | 2 +- packages/components/tsconfig.json | 1 + packages/core/cms/faststore/sections.json | 193 +++++++++--------- packages/core/public/icons.svg | 54 +++-- .../cart/CartSidebar/CartSidebar.tsx | 2 - .../components/cart/CartToggle/CartToggle.tsx | 2 +- .../components/cart/EmptyCart/EmptyCart.tsx | 4 +- .../components/navigation/Navbar/Navbar.tsx | 4 +- .../product/OutOfStock/OutOfStock.tsx | 2 +- .../region/RegionButton/RegionButton.tsx | 2 +- .../region/RegionModal/RegionModal.tsx | 3 +- .../sections/ProductGallery/EmptyGallery.tsx | 22 +- .../ScrollToTopButton/ScrollToTopButton.tsx | 4 +- .../components/ui/Breadcrumb/Breadcrumb.tsx | 4 +- .../ui/Button/ButtonSignIn/ButtonSignIn.tsx | 2 +- .../components/ui/Incentives/Incentives.tsx | 2 - .../components/ui/Newsletter/Newsletter.tsx | 7 +- .../src/components/atoms/Button/styles.scss | 11 +- .../src/components/atoms/Select/styles.scss | 4 - .../components/molecules/Alert/styles.scss | 4 - .../organisms/SlideOver/styles.scss | 5 - 49 files changed, 271 insertions(+), 304 deletions(-) diff --git a/apps/site/pages/components/atoms/button.mdx b/apps/site/pages/components/atoms/button.mdx index bdc7b68f46..15e821361b 100644 --- a/apps/site/pages/components/atoms/button.mdx +++ b/apps/site/pages/components/atoms/button.mdx @@ -139,7 +139,7 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c value="calc(var(--fs-spacing-1) - (var(--fs-button-border-width) * 2)) var(--fs-spacing-3)" /> - + @@ -735,12 +735,6 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c /> - - - --- diff --git a/apps/site/pages/components/atoms/select.mdx b/apps/site/pages/components/atoms/select.mdx index a30dcce757..84be311278 100644 --- a/apps/site/pages/components/atoms/select.mdx +++ b/apps/site/pages/components/atoms/select.mdx @@ -206,11 +206,6 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c token="--fs-select-icon-position-right" value="var(--fs-spacing-2)" /> - - ### Variants diff --git a/apps/site/pages/components/index.mdx b/apps/site/pages/components/index.mdx index de81e10af6..fd4fdd8188 100644 --- a/apps/site/pages/components/index.mdx +++ b/apps/site/pages/components/index.mdx @@ -165,14 +165,16 @@ export const imagesUsage = [ ] export const flags = [ - { icon: { icon: 'Visa' }, alt: 'Visa' }, - { icon: { icon: 'Diners' }, alt: 'Diners Club' }, - { icon: { icon: 'Mastercard' }, alt: 'Mastercard' }, - { icon: { icon: 'EloCard' }, alt: 'Elo Card' }, - { icon: { icon: 'PayPal' }, alt: 'PayPal' }, - { icon: { icon: 'Stripe' }, alt: 'Stripe' }, - { icon: { icon: 'GooglePay' }, alt: 'GooglePay' }, - { icon: { icon: 'ApplePay' }, alt: 'ApplePay' }, + { icon: { icon: 'fs-pay-method-amex' }, alt: 'Amex' }, + { icon: { icon: 'fs-pay-method-applepay' }, alt: 'ApplePay' }, + { icon: { icon: 'fs-pay-method-elocard' }, alt: 'Elo Card' }, + { icon: { icon: 'fs-pay-method-diners' }, alt: 'Diners Club' }, + { icon: { icon: 'fs-pay-method-googlepay' }, alt: 'GooglePay' }, + { icon: { icon: 'fs-pay-method-mastercard' }, alt: 'Mastercard' }, + { icon: { icon: 'fs-pay-method-paypal' }, alt: 'PayPal' }, + { icon: { icon: 'fs-pay-method-pix' }, alt: 'Pix' }, + { icon: { icon: 'fs-pay-method-stripe' }, alt: 'Stripe' }, + { icon: { icon: 'fs-pay-method-visa' }, alt: 'Visa' }, ] export const options = [ diff --git a/apps/site/pages/components/molecules/alert.mdx b/apps/site/pages/components/molecules/alert.mdx index e0e8f156e9..35f628c5e1 100644 --- a/apps/site/pages/components/molecules/alert.mdx +++ b/apps/site/pages/components/molecules/alert.mdx @@ -175,8 +175,6 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c #### Icon - - ```tsx export const flags = [ - { icon: { icon: 'Amex' }, alt: 'Amex' }, - { icon: { icon: 'ApplePay' }, alt: 'ApplePay' }, - { icon: { icon: 'EloCard' }, alt: 'Elo Card' }, - { icon: { icon: 'Diners' }, alt: 'Diners Club' }, - { icon: { icon: 'GooglePay' }, alt: 'GooglePay' }, - { icon: { icon: 'Mastercard' }, alt: 'Mastercard' }, - { icon: { icon: 'PayPal' }, alt: 'PayPal' }, - { icon: { icon: 'Pix' }, alt: 'Pix' }, - { icon: { icon: 'Stripe' }, alt: 'Stripe' }, - { icon: { icon: 'Visa' }, alt: 'Visa' }, + { icon: { icon: 'fs-pay-method-amex' }, alt: 'Amex' }, + { icon: { icon: 'fs-pay-method-applepay' }, alt: 'ApplePay' }, + { icon: { icon: 'fs-pay-method-elocard' }, alt: 'Elo Card' }, + { icon: { icon: 'fs-pay-method-diners' }, alt: 'Diners Club' }, + { icon: { icon: 'fs-pay-method-googlepay' }, alt: 'GooglePay' }, + { icon: { icon: 'fs-pay-method-mastercard' }, alt: 'Mastercard' }, + { icon: { icon: 'fs-pay-method-paypal' }, alt: 'PayPal' }, + { icon: { icon: 'fs-pay-method-pix' }, alt: 'Pix' }, + { icon: { icon: 'fs-pay-method-stripe' }, alt: 'Stripe' }, + { icon: { icon: 'fs-pay-method-visa' }, alt: 'Visa' }, ] Payment Methods} flagList={flags} /> @@ -103,16 +103,16 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c export const flags = [ - { icon: { icon: 'Amex' }, alt: 'Amex' }, - { icon: { icon: 'ApplePay' }, alt: 'ApplePay' }, - { icon: { icon: 'EloCard' }, alt: 'Elo Card' }, - { icon: { icon: 'Diners' }, alt: 'Diners Club' }, - { icon: { icon: 'GooglePay' }, alt: 'GooglePay' }, - { icon: { icon: 'Mastercard' }, alt: 'Mastercard' }, - { icon: { icon: 'PayPal' }, alt: 'PayPal' }, - { icon: { icon: 'Pix' }, alt: 'Pix' }, - { icon: { icon: 'Stripe' }, alt: 'Stripe' }, - { icon: { icon: 'Visa' }, alt: 'Visa' }, + { icon: { icon: 'fs-pay-method-amex' }, alt: 'Amex' }, + { icon: { icon: 'fs-pay-method-applepay' }, alt: 'ApplePay' }, + { icon: { icon: 'fs-pay-method-elocard' }, alt: 'Elo Card' }, + { icon: { icon: 'fs-pay-method-diners' }, alt: 'Diners Club' }, + { icon: { icon: 'fs-pay-method-googlepay' }, alt: 'GooglePay' }, + { icon: { icon: 'fs-pay-method-mastercard' }, alt: 'Mastercard' }, + { icon: { icon: 'fs-pay-method-paypal' }, alt: 'PayPal' }, + { icon: { icon: 'fs-pay-method-pix' }, alt: 'Pix' }, + { icon: { icon: 'fs-pay-method-stripe' }, alt: 'Stripe' }, + { icon: { icon: 'fs-pay-method-visa' }, alt: 'Visa' }, ] --- diff --git a/apps/site/pages/docs/icons.mdx b/apps/site/pages/docs/icons.mdx index 42bbdc75e0..1acc5e1ab5 100644 --- a/apps/site/pages/docs/icons.mdx +++ b/apps/site/pages/docs/icons.mdx @@ -64,25 +64,25 @@ You can find more details about the `Icon` component [here](/components/atoms/ic ### Payment Flags - } name="Amex" /> - } name="ApplePay" /> - } name="EloCard" /> - } name="Diners" /> - } name="GooglePay" /> - } name="Mastercard" /> - } name="PayPal" /> - } name="Pix" /> - } name="Stripe" /> - } name="Visa" /> + } name="fs-pay-method-amex" /> + } name="fs-pay-method-applepay" /> + } name="fs-pay-method-elocard" /> + } name="fs-pay-method-diners" /> + } name="fs-pay-method-googlepay" /> + } name="fs-pay-method-mastercard" /> + } name="fs-pay-method-paypal" /> + } name="fs-pay-method-pix" /> + } name="fs-pay-method-stripe" /> + } name="fs-pay-method-visa" /> ### Social - } name="Facebook" /> - } name="Instagram" /> - } name="Twitter" /> - } name="Pinterest" /> + } name="fs-social-facebook" /> + } name="fs-social-instagram" /> + } name="fs-social-pinterest" /> + } name="fs-social-twitter" /> ### Others diff --git a/apps/site/public/icons.svg b/apps/site/public/icons.svg index e97cd696a4..213a7c4e70 100644 --- a/apps/site/public/icons.svg +++ b/apps/site/public/icons.svg @@ -11,8 +11,6 @@ - - @@ -69,14 +67,15 @@ + + - + - @@ -120,7 +119,7 @@ - + @@ -219,14 +218,12 @@ - - @@ -353,18 +350,6 @@ - - - - - - - - - - - - @@ -418,4 +403,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/src/atoms/Icon/Icon.tsx b/packages/components/src/atoms/Icon/Icon.tsx index 1f75662731..8cc353655e 100644 --- a/packages/components/src/atoms/Icon/Icon.tsx +++ b/packages/components/src/atoms/Icon/Icon.tsx @@ -19,7 +19,7 @@ export interface IconProps extends SVGProps { /** * Symbol id from element to render. Take a look at `/static/icons.svg`. * - * Example: + * Example: */ name: string /** @@ -46,7 +46,7 @@ export interface IconProps extends SVGProps { /** * SVG size. * - * @default '20' + * @default '24' */ size?: IconSize } @@ -60,9 +60,8 @@ const Icon = forwardRef(function Icon( if (name.startsWith('fs-')) { library = 'material' - name = `${name}-${size ?? 20}` - } - else { + name = `${name}-${size ?? 24}` + } else { library = 'phosphor' } @@ -71,9 +70,9 @@ const Icon = forwardRef(function Icon( ref={ref} data-fs-icon data-testid={testId} - size={size ?? 20} - width={library === 'phosphor' ? width ?? 24 : size ?? 20} // TODO: Remove this after width prop is removed - height={library === 'phosphor' ? height ?? 24 : size ?? 20} // TODO: Remove this after height prop is removed + size={size ?? 24} + width={library === 'phosphor' ? width ?? 24 : size ?? 24} // TODO: Remove this after width prop is removed + height={library === 'phosphor' ? height ?? 24 : size ?? 24} // TODO: Remove this after height prop is removed strokeWidth={mapWeightToValue[weight]} // TODO: Remove this after weight prop is removed {...otherProps} > diff --git a/packages/components/src/atoms/Select/Select.tsx b/packages/components/src/atoms/Select/Select.tsx index fcda3b7bef..099707e830 100644 --- a/packages/components/src/atoms/Select/Select.tsx +++ b/packages/components/src/atoms/Select/Select.tsx @@ -32,7 +32,7 @@ const Select = forwardRef(function Select( ))} - + ) }) diff --git a/packages/components/src/molecules/Accordion/AccordionButton.tsx b/packages/components/src/molecules/Accordion/AccordionButton.tsx index 5990b71a0a..8bd8f24a3a 100644 --- a/packages/components/src/molecules/Accordion/AccordionButton.tsx +++ b/packages/components/src/molecules/Accordion/AccordionButton.tsx @@ -26,8 +26,8 @@ const AccordionButton = forwardRef( function AccordionButton( { testId = 'fs-accordion-button', - expandedIcon = , - collapsedIcon = , + expandedIcon = , + collapsedIcon = , children, ...otherProps }, diff --git a/packages/components/src/molecules/Alert/Alert.tsx b/packages/components/src/molecules/Alert/Alert.tsx index 988cab3e38..4f46481a4f 100644 --- a/packages/components/src/molecules/Alert/Alert.tsx +++ b/packages/components/src/molecules/Alert/Alert.tsx @@ -63,17 +63,14 @@ const Alert = forwardRef(function Alert( {...otherProps} > {!!icon && icon} -

{children}

- {link && } - {dismissible && ( } + icon={} onClick={handleClose} /> )} diff --git a/packages/components/src/molecules/Breadcrumb/BreadcrumbBase.tsx b/packages/components/src/molecules/Breadcrumb/BreadcrumbBase.tsx index 094f4a92e8..566e60df79 100644 --- a/packages/components/src/molecules/Breadcrumb/BreadcrumbBase.tsx +++ b/packages/components/src/molecules/Breadcrumb/BreadcrumbBase.tsx @@ -96,9 +96,9 @@ const BreadcrumbBase = forwardRef( isDesktop = false, renderLink, homeLink, - dropdownButtonIcon = , + dropdownButtonIcon = , collapsedItemsIcon = ( - + ), ...otherProps }, diff --git a/packages/components/src/molecules/Carousel/Carousel.tsx b/packages/components/src/molecules/Carousel/Carousel.tsx index 126c36c1d1..65490eceb2 100644 --- a/packages/components/src/molecules/Carousel/Carousel.tsx +++ b/packages/components/src/molecules/Carousel/Carousel.tsx @@ -353,7 +353,6 @@ function Carousel({ ))} - {showNavigationArrows && (
- ) + navigationIcons?.left ?? } onClick={() => { isSlideCarousel && slidePrevious() @@ -381,9 +378,7 @@ function Carousel({ } aria-label="next" icon={ - navigationIcons?.right ?? ( - - ) + navigationIcons?.right ?? } onClick={() => { isSlideCarousel && slideNext() @@ -393,7 +388,6 @@ function Carousel({ />
)} - {showPaginationBullets && ( (function CartItem(
{children}
} + icon={} aria-label="Remove" {...removeBtnProps} /> diff --git a/packages/components/src/molecules/InputField/InputField.tsx b/packages/components/src/molecules/InputField/InputField.tsx index 136126ea09..94b7be7d01 100644 --- a/packages/components/src/molecules/InputField/InputField.tsx +++ b/packages/components/src/molecules/InputField/InputField.tsx @@ -103,13 +103,12 @@ const InputField = ({ {...otherProps} /> - {shouldDisplayButton && (displayClearButton || error ? ( } + icon={} onClick={() => { onClear?.() inputRef?.current?.focus() diff --git a/packages/components/src/molecules/Modal/ModalHeader.tsx b/packages/components/src/molecules/Modal/ModalHeader.tsx index 051eb23745..b2e57b2e92 100644 --- a/packages/components/src/molecules/Modal/ModalHeader.tsx +++ b/packages/components/src/molecules/Modal/ModalHeader.tsx @@ -33,7 +33,7 @@ const ModalHeader = ({ } + icon={} onClick={() => onClose?.()} {...closeBtnProps} /> diff --git a/packages/components/src/molecules/ProductCard/ProductCardContent.tsx b/packages/components/src/molecules/ProductCard/ProductCardContent.tsx index cec244f7c8..9234515efd 100644 --- a/packages/components/src/molecules/ProductCard/ProductCardContent.tsx +++ b/packages/components/src/molecules/ProductCard/ProductCardContent.tsx @@ -129,7 +129,7 @@ const ProductCardContent = forwardRef( )} {ratingValue && ( - } /> + } /> )} {showDiscountBadge && !outOfStock && ( @@ -140,7 +140,7 @@ const ProductCardContent = forwardRef(
) diff --git a/packages/components/src/molecules/Toggle/Toggle.tsx b/packages/components/src/molecules/Toggle/Toggle.tsx index 857dddedf4..2c64218fb3 100644 --- a/packages/components/src/molecules/Toggle/Toggle.tsx +++ b/packages/components/src/molecules/Toggle/Toggle.tsx @@ -43,7 +43,7 @@ const Toggle = forwardRef(function Toggle( {...otherProps} /> - +
) diff --git a/packages/components/src/organisms/Hero/HeroHeader.tsx b/packages/components/src/organisms/Hero/HeroHeader.tsx index c4dbdb5681..e526ecf0aa 100644 --- a/packages/components/src/organisms/Hero/HeroHeader.tsx +++ b/packages/components/src/organisms/Hero/HeroHeader.tsx @@ -66,7 +66,7 @@ const HeroHeader = forwardRef( } + icon={} iconPosition="right" target={linkTargetBlank ? '_blank' : undefined} > diff --git a/packages/components/src/organisms/ImageGallery/ImageGallerySelector.tsx b/packages/components/src/organisms/ImageGallery/ImageGallerySelector.tsx index 6fa85e384f..35b70e2a9f 100644 --- a/packages/components/src/organisms/ImageGallery/ImageGallerySelector.tsx +++ b/packages/components/src/organisms/ImageGallery/ImageGallerySelector.tsx @@ -96,7 +96,7 @@ function ImageGallerySelector({ } + icon={} onClick={() => moveScroll(elementsRef.current, -SCROLL_MARGIN_VALUE) } @@ -132,7 +132,7 @@ function ImageGallerySelector({ } + icon={} onClick={() => moveScroll(elementsRef.current, +SCROLL_MARGIN_VALUE) } diff --git a/packages/components/src/organisms/OutOfStock/OutOfStock.tsx b/packages/components/src/organisms/OutOfStock/OutOfStock.tsx index c6f8521811..5e9560e8e5 100644 --- a/packages/components/src/organisms/OutOfStock/OutOfStock.tsx +++ b/packages/components/src/organisms/OutOfStock/OutOfStock.tsx @@ -67,7 +67,7 @@ const OutOfStock = forwardRef(

{title}

{subtitle && (

- + {subtitle}

)} @@ -86,7 +86,7 @@ const OutOfStock = forwardRef( loadingLabel={loadingLabel} disabled={disabled} variant="primary" - icon={} + icon={} iconPosition="left" > {buttonLabel} diff --git a/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx b/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx index 8635c9bbdd..c014055fd7 100644 --- a/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx +++ b/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx @@ -66,7 +66,7 @@ const PaymentMethods = forwardRef( data-fs-payment-methods-flag key={`fs-payment-method-${index}-${text}`} > - + {text && } ))} diff --git a/packages/components/src/organisms/ShippingSimulation/ShippingSimulation.tsx b/packages/components/src/organisms/ShippingSimulation/ShippingSimulation.tsx index 82c8649269..8a48486473 100644 --- a/packages/components/src/organisms/ShippingSimulation/ShippingSimulation.tsx +++ b/packages/components/src/organisms/ShippingSimulation/ShippingSimulation.tsx @@ -166,7 +166,6 @@ function ShippingSimulation({ {...otherProps} >

{title}

- onClear?.()} displayClearButton={displayClearButton} /> - {"I don't know my Postal Code"} - + )} - {hasShippingOptions && ( <>
diff --git a/packages/components/src/organisms/SlideOver/SlideOverHeader.tsx b/packages/components/src/organisms/SlideOver/SlideOverHeader.tsx index f60d4945ee..403faa9855 100644 --- a/packages/components/src/organisms/SlideOver/SlideOverHeader.tsx +++ b/packages/components/src/organisms/SlideOver/SlideOverHeader.tsx @@ -30,7 +30,7 @@ const SlideOverHeader = ({ } + icon={} onClick={onClose} {...closeBtnProps} /> diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 9cd349a9fd..36a1a2504d 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "@faststore/shared/tsconfig.json", "compilerOptions": { + "jsx": "react", "outDir": "dist", "types": ["@testing-library/jest-dom/jest-globals"] }, diff --git a/packages/core/cms/faststore/sections.json b/packages/core/cms/faststore/sections.json index 8c4f1cf1dd..300de3521a 100644 --- a/packages/core/cms/faststore/sections.json +++ b/packages/core/cms/faststore/sections.json @@ -30,8 +30,8 @@ "title": "Icon", "type": "string", "enumNames": ["Magnifying Glass"], - "enum": ["MagnifyingGlass"], - "default": "MagnifyingGlass" + "enum": ["fs-magnifying-glass"], + "default": "fs-magnifying-glass" }, "alt": { "title": "Alternative Label", @@ -64,8 +64,8 @@ "title": "Icon", "type": "string", "enumNames": ["Clock Clockwise"], - "enum": ["ClockClockwise"], - "default": "ClockClockwise" + "enum": ["fs-clock-clockwise"], + "default": "fs-clock-clockwise" }, "alt": { "type": "string", @@ -109,7 +109,7 @@ "title": "Icon", "type": "string", "enumNames": ["Magnifying Glass"], - "enum": ["MagnifyingGlass"] + "enum": ["fs-magnifying-glass"] }, "alt": { "type": "string", @@ -236,8 +236,8 @@ "title": "Icon", "type": "string", "enumNames": ["User"], - "enum": ["User"], - "default": "User" + "enum": ["fs-user"], + "default": "fs-user" }, "alt": { "title": "Alternative Label", @@ -266,8 +266,8 @@ "title": "Icon", "type": "string", "enumNames": ["Shopping Cart"], - "enum": ["ShoppingCart"], - "default": "ShoppingCart" + "enum": ["fs-shopping-cart"], + "default": "fs-shopping-cart" }, "alt": { "title": "Alternative Label", @@ -297,13 +297,13 @@ "title": "Icon", "type": "string", "enumNames": ["Map Pin"], - "enum": ["MapPin"], - "default": "MapPin" + "enum": ["fs-map-pin"], + "default": "fs-map-pin" }, "alt": { "title": "Alternative Label", "type": "string", - "default": "MapPin" + "default": "fs-map-pin" } } }, @@ -346,8 +346,8 @@ "title": "Icon", "type": "string", "enumNames": ["List"], - "enum": ["List"], - "default": "List" + "enum": ["fs-list"], + "default": "fs-list" }, "alt": { "title": "Alternative Label", @@ -394,7 +394,14 @@ "Truck", "User" ], - "enum": ["Bell", "BellRinging", "Checked", "Info", "Truck", "User"] + "enum": [ + "fs-bell", + "fs-bell-ringing", + "fs-checked", + "fs-info", + "fs-truck", + "fs-user" + ] }, "content": { "type": "string", @@ -463,11 +470,11 @@ "Shield Check" ], "enum": [ - "Truck", - "Calendar", - "Gift", - "Storefront", - "ShieldCheck" + "fs-truck", + "fs-calendar", + "fs-gift", + "fs-storefront", + "fs-shield-check" ] }, "alt": { @@ -547,10 +554,10 @@ "Twitter" ], "enum": [ - "Facebook", - "Instagram", - "Pinterest", - "Twitter" + "fs-social-facebook", + "fs-social-instagram", + "fs-social-pinterest", + "fs-social-twitter" ] } } @@ -634,24 +641,28 @@ "title": "Icon", "type": "string", "enumNames": [ - "Visa", - "Diners Club", + "Amex", + "ApplePay", + "Elo", + "Diners", + "GooglePay", "Mastercard", - "Elo Card", "PayPal", + "Pix", "Stripe", - "GooglePay", - "ApplePay" + "Visa" ], "enum": [ - "Visa", - "Diners", - "Mastercard", - "EloCard", - "PayPal", - "Stripe", - "GooglePay", - "ApplePay" + "fs-pay-method-amex", + "fs-pay-method-applepay", + "fs-pay-method-elocard", + "fs-pay-method-diners", + "fs-pay-method-googlepay", + "fs-pay-method-mastercard", + "fs-pay-method-paypal", + "fs-pay-method-pix", + "fs-pay-method-stripe", + "fs-pay-method-visa" ] } } @@ -829,11 +840,11 @@ "Shield Check" ], "enum": [ - "Truck", - "Calendar", - "Gift", - "Storefront", - "ShieldCheck" + "fs-truck", + "fs-calendar", + "fs-gift", + "fs-storefront", + "fs-shield-check" ] }, "alt": { @@ -1127,14 +1138,14 @@ "icon": { "title": "Icon", "type": "string", - "enumNames": ["Envelope"], - "enum": ["Envelope"], - "default": "Envelope" + "enumNames": ["Envelop"], + "enum": ["fs-envelop"], + "default": "fs-envelop" }, "alt": { "type": "string", "title": "Alternative Label", - "default": "Envelope" + "default": "Envelop" } } }, @@ -1211,9 +1222,9 @@ "icon": { "title": "Icon", "type": "string", - "enumNames": ["CircleWavyCheck"], - "enum": ["CircleWavyCheck"], - "default": "CircleWavyCheck" + "enumNames": ["Seal Check"], + "enum": ["fs-seal-check"], + "default": "fs-seal-check" } } }, @@ -1236,9 +1247,9 @@ "icon": { "title": "Icon", "type": "string", - "enumNames": ["CircleWavyWarning"], - "enum": ["CircleWavyWarning"], - "default": "CircleWavyWarning" + "enumNames": ["Seal Warning"], + "enum": ["fs-seal-warning"], + "default": "fs-seal-warning" } } } @@ -1322,14 +1333,14 @@ "icon": { "title": "Icon", "type": "string", - "enumNames": ["Envelope"], - "enum": ["Envelope"], - "default": "Envelope" + "enumNames": ["Envelop"], + "enum": ["fs-envelop"], + "default": "fs-envelop" }, "alt": { "type": "string", "title": "Alternative Label", - "default": "Envelope" + "default": "Envelop" } } }, @@ -1401,9 +1412,9 @@ "icon": { "title": "Icon", "type": "string", - "enumNames": ["CircleWavyCheck"], - "enum": ["CircleWavyCheck"], - "default": "CircleWavyCheck" + "enumNames": ["Seal Check"], + "enum": ["fs-seal-check"], + "default": "fs-seal-check" } } }, @@ -1426,9 +1437,9 @@ "icon": { "title": "Icon", "type": "string", - "enumNames": ["CircleWavyWarning"], - "enum": ["CircleWavyWarning"], - "default": "CircleWavyWarning" + "enumNames": ["Seal Warning"], + "enum": ["fs-seal-warning"], + "default": "fs-seal-warning" } } } @@ -1450,7 +1461,7 @@ "title": "Icon", "type": "string", "enumNames": ["House"], - "enum": ["House"] + "enum": ["fs-house"] }, "alt": { "title": "Alternative Label", @@ -1512,7 +1523,7 @@ "title": "Icon", "type": "string", "enumNames": ["Shopping Cart"], - "enum": ["ShoppingCart"] + "enum": ["fs-shopping-cart"] }, "alt": { "type": "string", @@ -1737,9 +1748,9 @@ "icon": { "title": "Icon", "type": "string", - "enumNames": ["ArrowLeft"], - "enum": ["ArrowLeft"], - "default": "ArrowLeft" + "enumNames": ["Arrow Left"], + "enum": ["fs-arrow-left"], + "default": "fs-arrow-left" }, "alt": { "title": "Alternative label", @@ -1804,9 +1815,9 @@ "icon": { "title": "Icon", "type": "string", - "enumNames": ["FadersHorizontal"], - "enum": ["FadersHorizontal"], - "default": "FadersHorizontal" + "enumNames": ["Faders Horizontal"], + "enum": ["fs-faders-horizontal"], + "default": "fs-faders-horizontal" }, "alt": { "title": "Alternative label", @@ -1894,7 +1905,7 @@ "icon": { "title": "Icon", "type": "string", - "default": "CircleWavyWarning" + "default": "fs-seal-warning" } } }, @@ -1915,7 +1926,7 @@ "icon": { "title": "Icon", "type": "string", - "default": "RocketLaunch" + "default": "fs-rocket-launch" } } } @@ -1958,19 +1969,19 @@ "User" ], "enum": [ - "Bell", - "BellRinging", - "Checked", - "Info", - "Truck", - "User" + "fs-bell", + "fs-bell-ringing", + "fs-checked", + "fs-info", + "fs-truck", + "fs-user" ], - "default": "Truck" + "default": "fs-truck" }, "alt": { "title": "Alternative label", "type": "string", - "default": "Arrow Right icon" + "default": "Truck icon" } } }, @@ -2005,8 +2016,8 @@ "title": "Icon", "type": "string", "enumNames": ["ArrowRight"], - "enum": ["ArrowRight"], - "default": "ArrowRight" + "enum": ["fs-arrow-right"], + "default": "fs-arrow-right" }, "alt": { "title": "Alternative label", @@ -2064,8 +2075,8 @@ "title": "Icon", "type": "string", "enumNames": ["Map Pin"], - "enum": ["MapPin"], - "default": "MapPin" + "enum": ["fs-map-pin"], + "default": "fs-map-pin" }, "alt": { "title": "Alternative Label", @@ -2092,8 +2103,8 @@ "title": "Icon", "type": "string", "enumNames": ["Caret Right"], - "enum": ["CaretRight"], - "default": "CaretRight" + "enum": ["fs-caret-right"], + "default": "fs-caret-right" }, "alt": { "title": "Alternative Label", @@ -2165,8 +2176,8 @@ "title": "Icon", "type": "string", "enumNames": ["Arrow Square Out"], - "enum": ["ArrowSquareOut"], - "default": "ArrowSquareOut" + "enum": ["fs-arrow-square-out"], + "default": "fs-arrow-square-out" }, "alt": { "title": "Alternative Label", @@ -2198,8 +2209,8 @@ "icon": { "title": "Icon", "type": "string", - "enumNames": ["CircleWavy Warning"], - "enum": ["CircleWavyWarning"] + "enumNames": ["Seal Warning"], + "enum": ["fs-seal-warning"] }, "alt": { "title": "Alternative Label", @@ -2213,7 +2224,7 @@ }, "showLoader": { "type": "boolean", - "title": "Show loader?", + "title": "Show Loader?", "default": false }, "errorState": { diff --git a/packages/core/public/icons.svg b/packages/core/public/icons.svg index e97cd696a4..213a7c4e70 100644 --- a/packages/core/public/icons.svg +++ b/packages/core/public/icons.svg @@ -11,8 +11,6 @@ - - @@ -69,14 +67,15 @@ + + - + - @@ -120,7 +119,7 @@ - + @@ -219,14 +218,12 @@ - - @@ -353,18 +350,6 @@ - - - - - - - - - - - - @@ -418,4 +403,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/core/src/components/cart/CartSidebar/CartSidebar.tsx b/packages/core/src/components/cart/CartSidebar/CartSidebar.tsx index d6f6994026..1bc09253ce 100644 --- a/packages/core/src/components/cart/CartSidebar/CartSidebar.tsx +++ b/packages/core/src/components/cart/CartSidebar/CartSidebar.tsx @@ -222,8 +222,6 @@ function CartSidebar({ ) } diff --git a/packages/core/src/components/cart/CartToggle/CartToggle.tsx b/packages/core/src/components/cart/CartToggle/CartToggle.tsx index f8ee4a2660..9981a1acb3 100644 --- a/packages/core/src/components/cart/CartToggle/CartToggle.tsx +++ b/packages/core/src/components/cart/CartToggle/CartToggle.tsx @@ -14,7 +14,7 @@ function CartToggle({ alt, icon }: { alt: string; icon: string }) { } + icon={} {...btnProps} > {totalItems} diff --git a/packages/core/src/components/cart/EmptyCart/EmptyCart.tsx b/packages/core/src/components/cart/EmptyCart/EmptyCart.tsx index d2ee4cdede..7f16322089 100644 --- a/packages/core/src/components/cart/EmptyCart/EmptyCart.tsx +++ b/packages/core/src/components/cart/EmptyCart/EmptyCart.tsx @@ -15,9 +15,7 @@ function EmptyCart({ onDismiss }: Props) { return ( - } + titleIcon={} > Start Shopping diff --git a/packages/core/src/components/navigation/Navbar/Navbar.tsx b/packages/core/src/components/navigation/Navbar/Navbar.tsx index 6a5a4d6263..eb272923f2 100644 --- a/packages/core/src/components/navigation/Navbar/Navbar.tsx +++ b/packages/core/src/components/navigation/Navbar/Navbar.tsx @@ -124,7 +124,7 @@ function Navbar({ } + icon={} {...IconButton.props} aria-label={menuIconAlt ?? IconButton.props['aria-label']} /> @@ -154,7 +154,7 @@ function Navbar({ } + icon={} {...IconButton.props} // Dynamic props, shouldn't be overridable // This decision can be reviewed later if needed diff --git a/packages/core/src/components/product/OutOfStock/OutOfStock.tsx b/packages/core/src/components/product/OutOfStock/OutOfStock.tsx index 157f614508..23710f9c1e 100644 --- a/packages/core/src/components/product/OutOfStock/OutOfStock.tsx +++ b/packages/core/src/components/product/OutOfStock/OutOfStock.tsx @@ -28,7 +28,7 @@ function OutOfStock() { title: 'Subscribed successfully!', message: "You'll be notified when this product is back to stock.", status: 'INFO', - icon: , + icon: , }) } catch (err) { setError(err.message) diff --git a/packages/core/src/components/region/RegionButton/RegionButton.tsx b/packages/core/src/components/region/RegionButton/RegionButton.tsx index 6c4cfd64ae..9b8454e2dd 100644 --- a/packages/core/src/components/region/RegionButton/RegionButton.tsx +++ b/packages/core/src/components/region/RegionButton/RegionButton.tsx @@ -11,7 +11,7 @@ function RegionButton({ icon, label }: { icon: string; label: string }) { } + icon={} iconPosition="left" onClick={openModal} > diff --git a/packages/core/src/components/region/RegionModal/RegionModal.tsx b/packages/core/src/components/region/RegionModal/RegionModal.tsx index 220b28efcd..fc72643c5c 100644 --- a/packages/core/src/components/region/RegionModal/RegionModal.tsx +++ b/packages/core/src/components/region/RegionModal/RegionModal.tsx @@ -85,8 +85,7 @@ function RegionModal({ )} diff --git a/packages/core/src/components/sections/ProductGallery/EmptyGallery.tsx b/packages/core/src/components/sections/ProductGallery/EmptyGallery.tsx index 3bbe990304..4e285c3e4d 100644 --- a/packages/core/src/components/sections/ProductGallery/EmptyGallery.tsx +++ b/packages/core/src/components/sections/ProductGallery/EmptyGallery.tsx @@ -23,21 +23,12 @@ function EmptyGallery({ title, firstButton, secondButton }: EmptyGalleryProps) { - } + titleIcon={} > - } + icon={} iconPosition="left" > {firstButton?.label ?? 'Browse Offers'} @@ -45,14 +36,7 @@ function EmptyGallery({ title, firstButton, secondButton }: EmptyGalleryProps) { - } + icon={} iconPosition="left" > {secondButton?.label ?? 'Just Arrived'} diff --git a/packages/core/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx b/packages/core/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx index c0b1fe2c8d..06a62aeeeb 100644 --- a/packages/core/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx +++ b/packages/core/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx @@ -12,7 +12,7 @@ interface ScrollToTopButtonProps { text?: string /** * Button's icon. - * @default + * @default */ icon?: ButtonProps['icon'] /** @@ -24,7 +24,7 @@ interface ScrollToTopButtonProps { function ScrollToTopButton({ text = 'Scroll to top', - icon = , + icon = , iconPosition = 'left', }: ScrollToTopButtonProps) { return ( diff --git a/packages/core/src/components/ui/Breadcrumb/Breadcrumb.tsx b/packages/core/src/components/ui/Breadcrumb/Breadcrumb.tsx index 84406fdc81..fcc3a1e8f4 100644 --- a/packages/core/src/components/ui/Breadcrumb/Breadcrumb.tsx +++ b/packages/core/src/components/ui/Breadcrumb/Breadcrumb.tsx @@ -29,9 +29,7 @@ const Breadcrumb = ({ prefetch={false} > diff --git a/packages/core/src/components/ui/Button/ButtonSignIn/ButtonSignIn.tsx b/packages/core/src/components/ui/Button/ButtonSignIn/ButtonSignIn.tsx index c373fe172b..7f046eae75 100644 --- a/packages/core/src/components/ui/Button/ButtonSignIn/ButtonSignIn.tsx +++ b/packages/core/src/components/ui/Button/ButtonSignIn/ButtonSignIn.tsx @@ -20,7 +20,7 @@ const ButtonSignIn = ({ className="text__title-mini" aria-label={alt} variant="tertiary" - icon={} + icon={} iconPosition="left" > {person?.id ? myAccountLabel : label} diff --git a/packages/core/src/components/ui/Incentives/Incentives.tsx b/packages/core/src/components/ui/Incentives/Incentives.tsx index b8da296f11..59a6184c9e 100644 --- a/packages/core/src/components/ui/Incentives/Incentives.tsx +++ b/packages/core/src/components/ui/Incentives/Incentives.tsx @@ -49,8 +49,6 @@ function Incentives({ data-fs-incentive-icon aria-label={incentive.alt} name={incentive.icon} - width={32} - height={32} />

{incentive.title}

diff --git a/packages/core/src/components/ui/Newsletter/Newsletter.tsx b/packages/core/src/components/ui/Newsletter/Newsletter.tsx index 191c4836a5..13e540ffcc 100644 --- a/packages/core/src/components/ui/Newsletter/Newsletter.tsx +++ b/packages/core/src/components/ui/Newsletter/Newsletter.tsx @@ -63,8 +63,6 @@ function Newsletter({ status: 'INFO', icon: ( @@ -76,8 +74,6 @@ function Newsletter({ status: 'ERROR', icon: ( @@ -104,8 +100,7 @@ function Newsletter({ description={description} icon={ [data-fs-icon] { - width: var(--fs-alert-icon-width); - height: var(--fs-alert-icon-height); margin-right: var(--fs-alert-icon-margin-right); color: var(--fs-alert-icon-color); } diff --git a/packages/ui/src/components/organisms/SlideOver/styles.scss b/packages/ui/src/components/organisms/SlideOver/styles.scss index 9043bb64bd..0b84f40ac2 100644 --- a/packages/ui/src/components/organisms/SlideOver/styles.scss +++ b/packages/ui/src/components/organisms/SlideOver/styles.scss @@ -74,11 +74,6 @@ [data-fs-slide-over-header-icon] { margin-right: calc(-1 * var(--fs-spacing-1)); - - svg { - width: 32px; - height: 32px; - } } } } From 0050f443bcd48a45a8c83594b7b9989583de4be6 Mon Sep 17 00:00:00 2001 From: Renata Motta Date: Wed, 15 Jan 2025 11:25:06 -0300 Subject: [PATCH 09/25] feat: change `circle-wavy` to `seal` --- apps/site/pages/docs/icons.mdx | 4 ++-- apps/site/public/icons.svg | 17 ++++++++--------- packages/core/public/icons.svg | 17 ++++++++--------- .../product/OutOfStock/OutOfStock.tsx | 2 +- .../sections/ProductGallery/EmptyGallery.tsx | 4 ++-- 5 files changed, 21 insertions(+), 23 deletions(-) diff --git a/apps/site/pages/docs/icons.mdx b/apps/site/pages/docs/icons.mdx index 1acc5e1ab5..f43487bbd9 100644 --- a/apps/site/pages/docs/icons.mdx +++ b/apps/site/pages/docs/icons.mdx @@ -104,8 +104,8 @@ You can find more details about the `Icon` component [here](/components/atoms/ic } name="fs-arrow-up-right" /> } name="fs-bag" /> } name="fs-calendar" /> - } name="fs-circle-wavy-check" /> - } name="fs-circle-wavy-warning" /> + } name="fs-seal-check" /> + } name="fs-seal-warning" /> } name="fs-clock-clockwise" /> } name="fs-ellipsis" /> } name="fs-gift" /> diff --git a/apps/site/public/icons.svg b/apps/site/public/icons.svg index 213a7c4e70..0392662023 100644 --- a/apps/site/public/icons.svg +++ b/apps/site/public/icons.svg @@ -67,15 +67,14 @@ - - + - + @@ -218,17 +217,17 @@ - + - + - + - + - + - + diff --git a/packages/core/public/icons.svg b/packages/core/public/icons.svg index 213a7c4e70..0392662023 100644 --- a/packages/core/public/icons.svg +++ b/packages/core/public/icons.svg @@ -67,15 +67,14 @@ - - + - + @@ -218,17 +217,17 @@ - + - + - + - + - + - + diff --git a/packages/core/src/components/product/OutOfStock/OutOfStock.tsx b/packages/core/src/components/product/OutOfStock/OutOfStock.tsx index 23710f9c1e..84d46b92e1 100644 --- a/packages/core/src/components/product/OutOfStock/OutOfStock.tsx +++ b/packages/core/src/components/product/OutOfStock/OutOfStock.tsx @@ -28,7 +28,7 @@ function OutOfStock() { title: 'Subscribed successfully!', message: "You'll be notified when this product is back to stock.", status: 'INFO', - icon: , + icon: , }) } catch (err) { setError(err.message) diff --git a/packages/core/src/components/sections/ProductGallery/EmptyGallery.tsx b/packages/core/src/components/sections/ProductGallery/EmptyGallery.tsx index 4e285c3e4d..5ce077c0d0 100644 --- a/packages/core/src/components/sections/ProductGallery/EmptyGallery.tsx +++ b/packages/core/src/components/sections/ProductGallery/EmptyGallery.tsx @@ -23,12 +23,12 @@ function EmptyGallery({ title, firstButton, secondButton }: EmptyGalleryProps) { } + titleIcon={} > } + icon={} iconPosition="left" > {firstButton?.label ?? 'Browse Offers'} From be64eb6937fc060e703f5393952d9ae69d89fc99 Mon Sep 17 00:00:00 2001 From: Renata Motta Date: Wed, 15 Jan 2025 11:25:45 -0300 Subject: [PATCH 10/25] test: temporarily disable documentation redirects --- apps/site/middleware.ts | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/apps/site/middleware.ts b/apps/site/middleware.ts index 5fcf566fd4..f050db10c7 100644 --- a/apps/site/middleware.ts +++ b/apps/site/middleware.ts @@ -1,21 +1,21 @@ -import { NextResponse, NextRequest } from 'next/server' +// import { NextResponse, NextRequest } from 'next/server' -export function middleware(request: NextRequest) { - const { pathname } = new URL(request.url) - if (pathname.startsWith('/docs')) { - return NextResponse.redirect( - `https://developers.vtex.com/docs/guides/faststore${pathname.replace( - '/docs', - '' - )}` - ) - } - if (pathname.startsWith('/components')) { - return NextResponse.redirect( - `https://developers.vtex.com/docs/guides/faststore${pathname - .replace('/components', '') - .replace(/\/([^\/]*)\//, '/$1-')}` - ) - } - return NextResponse.next() -} +// export function middleware(request: NextRequest) { +// const { pathname } = new URL(request.url) +// if (pathname.startsWith('/docs')) { +// return NextResponse.redirect( +// `https://developers.vtex.com/docs/guides/faststore${pathname.replace( +// '/docs', +// '' +// )}` +// ) +// } +// if (pathname.startsWith('/components')) { +// return NextResponse.redirect( +// `https://developers.vtex.com/docs/guides/faststore${pathname +// .replace('/components', '') +// .replace(/\/([^\/]*)\//, '/$1-')}` +// ) +// } +// return NextResponse.next() +// } From 5d7f29facc11c0b76aaa74307ddba0195051c559 Mon Sep 17 00:00:00 2001 From: Renata Motta Date: Wed, 15 Jan 2025 11:33:32 -0300 Subject: [PATCH 11/25] test: temporarily disable documentation redirects --- apps/site/middleware.ts | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/apps/site/middleware.ts b/apps/site/middleware.ts index f050db10c7..b3167eaec0 100644 --- a/apps/site/middleware.ts +++ b/apps/site/middleware.ts @@ -1,21 +1,21 @@ -// import { NextResponse, NextRequest } from 'next/server' +import { NextResponse, NextRequest } from 'next/server' -// export function middleware(request: NextRequest) { -// const { pathname } = new URL(request.url) -// if (pathname.startsWith('/docs')) { -// return NextResponse.redirect( -// `https://developers.vtex.com/docs/guides/faststore${pathname.replace( -// '/docs', -// '' -// )}` -// ) -// } -// if (pathname.startsWith('/components')) { -// return NextResponse.redirect( -// `https://developers.vtex.com/docs/guides/faststore${pathname -// .replace('/components', '') -// .replace(/\/([^\/]*)\//, '/$1-')}` -// ) -// } -// return NextResponse.next() -// } +export function middleware(request: NextRequest) { + // const { pathname } = new URL(request.url) + // if (pathname.startsWith('/docs')) { + // return NextResponse.redirect( + // `https://developers.vtex.com/docs/guides/faststore${pathname.replace( + // '/docs', + // '' + // )}` + // ) + // } + // if (pathname.startsWith('/components')) { + // return NextResponse.redirect( + // `https://developers.vtex.com/docs/guides/faststore${pathname + // .replace('/components', '') + // .replace(/\/([^\/]*)\//, '/$1-')}` + // ) + // } + return NextResponse.next() +} From 38c6d1737301d4dd8da46fb0af79145f022a8fcd Mon Sep 17 00:00:00 2001 From: Renata Motta Date: Wed, 15 Jan 2025 11:37:47 -0300 Subject: [PATCH 12/25] fix: Icons ordering --- apps/site/public/icons.svg | 38 +++++++++++++++++----------------- packages/core/public/icons.svg | 38 +++++++++++++++++----------------- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/apps/site/public/icons.svg b/apps/site/public/icons.svg index 0392662023..fc06bc1035 100644 --- a/apps/site/public/icons.svg +++ b/apps/site/public/icons.svg @@ -145,17 +145,11 @@ - - - - - - - + @@ -163,6 +157,12 @@ + + + + + + @@ -217,18 +217,6 @@ - - - - - - - - - - - - @@ -349,6 +337,18 @@ + + + + + + + + + + + + diff --git a/packages/core/public/icons.svg b/packages/core/public/icons.svg index 0392662023..fc06bc1035 100644 --- a/packages/core/public/icons.svg +++ b/packages/core/public/icons.svg @@ -145,17 +145,11 @@ - - - - - - - + @@ -163,6 +157,12 @@ + + + + + + @@ -217,18 +217,6 @@ - - - - - - - - - - - - @@ -349,6 +337,18 @@ + + + + + + + + + + + + From 7c2ed4d8d3e6e1271f09cc400eb8a19bbf160155 Mon Sep 17 00:00:00 2001 From: Renata Motta Date: Wed, 15 Jan 2025 11:41:18 -0300 Subject: [PATCH 13/25] fix: IconItem documentation --- apps/site/components/Icon/icon.module.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/apps/site/components/Icon/icon.module.css b/apps/site/components/Icon/icon.module.css index 213aa54148..d34fc705bb 100644 --- a/apps/site/components/Icon/icon.module.css +++ b/apps/site/components/Icon/icon.module.css @@ -13,10 +13,6 @@ border-radius: var(--fs-border-radius-medium); background-color: var(--fs-color-neutral-0); } -.icon svg { - width: 20px; - height: 20px; -} .iconList { display: grid; From 4dbf641b5a3b68fa6d7946fb540d4a76618e1a8d Mon Sep 17 00:00:00 2001 From: Renata Motta Date: Wed, 15 Jan 2025 13:14:47 -0300 Subject: [PATCH 14/25] feat: add `Social` and `PaymentMethod` icons' sizes --- apps/site/public/icons.svg | 28 ++++++++++++++-------------- packages/core/public/icons.svg | 28 ++++++++++++++-------------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/apps/site/public/icons.svg b/apps/site/public/icons.svg index fc06bc1035..3abc861296 100644 --- a/apps/site/public/icons.svg +++ b/apps/site/public/icons.svg @@ -404,33 +404,33 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/packages/core/public/icons.svg b/packages/core/public/icons.svg index fc06bc1035..3abc861296 100644 --- a/packages/core/public/icons.svg +++ b/packages/core/public/icons.svg @@ -404,33 +404,33 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + From e8a34c4c09f49c95f4d121151f02dcd13b4d058d Mon Sep 17 00:00:00 2001 From: Renata Motta Date: Wed, 15 Jan 2025 15:38:31 -0300 Subject: [PATCH 15/25] fix: `PaymentMethod` icon size --- .../components/src/organisms/PaymentMethods/PaymentMethods.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx b/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx index c014055fd7..c924ebbce4 100644 --- a/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx +++ b/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx @@ -66,7 +66,7 @@ const PaymentMethods = forwardRef( data-fs-payment-methods-flag key={`fs-payment-method-${index}-${text}`} > - + {text && } ))} From d8529a0eb71a7c0f16b0aa84d4979d5325ec62e6 Mon Sep 17 00:00:00 2001 From: Renata Motta Date: Wed, 15 Jan 2025 17:54:47 -0300 Subject: [PATCH 16/25] fix: Change `pay-method` to `flag` and add new icon flag size --- apps/site/pages/components/index.mdx | 20 +++++----- .../components/organisms/payment-methods.mdx | 40 +++++++++---------- apps/site/pages/docs/icons.mdx | 20 +++++----- apps/site/public/icons.svg | 40 ++++++++++++++----- packages/components/src/atoms/Icon/Icon.tsx | 3 +- .../PaymentMethods/PaymentMethods.tsx | 2 +- packages/core/cms/faststore/sections.json | 20 +++++----- packages/core/public/icons.svg | 40 ++++++++++++++----- 8 files changed, 113 insertions(+), 72 deletions(-) diff --git a/apps/site/pages/components/index.mdx b/apps/site/pages/components/index.mdx index fd4fdd8188..73d092f751 100644 --- a/apps/site/pages/components/index.mdx +++ b/apps/site/pages/components/index.mdx @@ -165,16 +165,16 @@ export const imagesUsage = [ ] export const flags = [ - { icon: { icon: 'fs-pay-method-amex' }, alt: 'Amex' }, - { icon: { icon: 'fs-pay-method-applepay' }, alt: 'ApplePay' }, - { icon: { icon: 'fs-pay-method-elocard' }, alt: 'Elo Card' }, - { icon: { icon: 'fs-pay-method-diners' }, alt: 'Diners Club' }, - { icon: { icon: 'fs-pay-method-googlepay' }, alt: 'GooglePay' }, - { icon: { icon: 'fs-pay-method-mastercard' }, alt: 'Mastercard' }, - { icon: { icon: 'fs-pay-method-paypal' }, alt: 'PayPal' }, - { icon: { icon: 'fs-pay-method-pix' }, alt: 'Pix' }, - { icon: { icon: 'fs-pay-method-stripe' }, alt: 'Stripe' }, - { icon: { icon: 'fs-pay-method-visa' }, alt: 'Visa' }, + { icon: { icon: 'fs-flag-amex' }, alt: 'Amex' }, + { icon: { icon: 'fs-flag-applepay' }, alt: 'ApplePay' }, + { icon: { icon: 'fs-flag-elocard' }, alt: 'Elo Card' }, + { icon: { icon: 'fs-flag-diners' }, alt: 'Diners Club' }, + { icon: { icon: 'fs-flag-googlepay' }, alt: 'GooglePay' }, + { icon: { icon: 'fs-flag-mastercard' }, alt: 'Mastercard' }, + { icon: { icon: 'fs-flag-paypal' }, alt: 'PayPal' }, + { icon: { icon: 'fs-flag-pix' }, alt: 'Pix' }, + { icon: { icon: 'fs-flag-stripe' }, alt: 'Stripe' }, + { icon: { icon: 'fs-flag-visa' }, alt: 'Visa' }, ] export const options = [ diff --git a/apps/site/pages/components/organisms/payment-methods.mdx b/apps/site/pages/components/organisms/payment-methods.mdx index a133d2425f..41ebd13e13 100644 --- a/apps/site/pages/components/organisms/payment-methods.mdx +++ b/apps/site/pages/components/organisms/payment-methods.mdx @@ -84,16 +84,16 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c ```tsx export const flags = [ - { icon: { icon: 'fs-pay-method-amex' }, alt: 'Amex' }, - { icon: { icon: 'fs-pay-method-applepay' }, alt: 'ApplePay' }, - { icon: { icon: 'fs-pay-method-elocard' }, alt: 'Elo Card' }, - { icon: { icon: 'fs-pay-method-diners' }, alt: 'Diners Club' }, - { icon: { icon: 'fs-pay-method-googlepay' }, alt: 'GooglePay' }, - { icon: { icon: 'fs-pay-method-mastercard' }, alt: 'Mastercard' }, - { icon: { icon: 'fs-pay-method-paypal' }, alt: 'PayPal' }, - { icon: { icon: 'fs-pay-method-pix' }, alt: 'Pix' }, - { icon: { icon: 'fs-pay-method-stripe' }, alt: 'Stripe' }, - { icon: { icon: 'fs-pay-method-visa' }, alt: 'Visa' }, + { icon: { icon: 'fs-flag-amex' }, alt: 'Amex' }, + { icon: { icon: 'fs-flag-applepay' }, alt: 'ApplePay' }, + { icon: { icon: 'fs-flag-elocard' }, alt: 'Elo Card' }, + { icon: { icon: 'fs-flag-diners' }, alt: 'Diners Club' }, + { icon: { icon: 'fs-flag-googlepay' }, alt: 'GooglePay' }, + { icon: { icon: 'fs-flag-mastercard' }, alt: 'Mastercard' }, + { icon: { icon: 'fs-flag-paypal' }, alt: 'PayPal' }, + { icon: { icon: 'fs-flag-pix' }, alt: 'Pix' }, + { icon: { icon: 'fs-flag-stripe' }, alt: 'Stripe' }, + { icon: { icon: 'fs-flag-visa' }, alt: 'Visa' }, ] Payment Methods} flagList={flags} /> @@ -103,16 +103,16 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c export const flags = [ - { icon: { icon: 'fs-pay-method-amex' }, alt: 'Amex' }, - { icon: { icon: 'fs-pay-method-applepay' }, alt: 'ApplePay' }, - { icon: { icon: 'fs-pay-method-elocard' }, alt: 'Elo Card' }, - { icon: { icon: 'fs-pay-method-diners' }, alt: 'Diners Club' }, - { icon: { icon: 'fs-pay-method-googlepay' }, alt: 'GooglePay' }, - { icon: { icon: 'fs-pay-method-mastercard' }, alt: 'Mastercard' }, - { icon: { icon: 'fs-pay-method-paypal' }, alt: 'PayPal' }, - { icon: { icon: 'fs-pay-method-pix' }, alt: 'Pix' }, - { icon: { icon: 'fs-pay-method-stripe' }, alt: 'Stripe' }, - { icon: { icon: 'fs-pay-method-visa' }, alt: 'Visa' }, + { icon: { icon: 'fs-flag-amex' }, alt: 'Amex' }, + { icon: { icon: 'fs-flag-applepay' }, alt: 'ApplePay' }, + { icon: { icon: 'fs-flag-elocard' }, alt: 'Elo Card' }, + { icon: { icon: 'fs-flag-diners' }, alt: 'Diners Club' }, + { icon: { icon: 'fs-flag-googlepay' }, alt: 'GooglePay' }, + { icon: { icon: 'fs-flag-mastercard' }, alt: 'Mastercard' }, + { icon: { icon: 'fs-flag-paypal' }, alt: 'PayPal' }, + { icon: { icon: 'fs-flag-pix' }, alt: 'Pix' }, + { icon: { icon: 'fs-flag-stripe' }, alt: 'Stripe' }, + { icon: { icon: 'fs-flag-visa' }, alt: 'Visa' }, ] --- diff --git a/apps/site/pages/docs/icons.mdx b/apps/site/pages/docs/icons.mdx index f43487bbd9..a6c631f366 100644 --- a/apps/site/pages/docs/icons.mdx +++ b/apps/site/pages/docs/icons.mdx @@ -64,16 +64,16 @@ You can find more details about the `Icon` component [here](/components/atoms/ic ### Payment Flags - } name="fs-pay-method-amex" /> - } name="fs-pay-method-applepay" /> - } name="fs-pay-method-elocard" /> - } name="fs-pay-method-diners" /> - } name="fs-pay-method-googlepay" /> - } name="fs-pay-method-mastercard" /> - } name="fs-pay-method-paypal" /> - } name="fs-pay-method-pix" /> - } name="fs-pay-method-stripe" /> - } name="fs-pay-method-visa" /> + } name="fs-flag-amex" /> + } name="fs-flag-applepay" /> + } name="fs-flag-elocard" /> + } name="fs-flag-diners" /> + } name="fs-flag-googlepay" /> + } name="fs-flag-mastercard" /> + } name="fs-flag-paypal" /> + } name="fs-flag-pix" /> + } name="fs-flag-stripe" /> + } name="fs-flag-visa" /> ### Social diff --git a/apps/site/public/icons.svg b/apps/site/public/icons.svg index 3abc861296..40b1c29f69 100644 --- a/apps/site/public/icons.svg +++ b/apps/site/public/icons.svg @@ -413,24 +413,44 @@ - + - + - + + + + + + + - + + + + + + + + + + + + + + + - + - + - + - + - + - + diff --git a/packages/components/src/atoms/Icon/Icon.tsx b/packages/components/src/atoms/Icon/Icon.tsx index 8cc353655e..937aeba192 100644 --- a/packages/components/src/atoms/Icon/Icon.tsx +++ b/packages/components/src/atoms/Icon/Icon.tsx @@ -1,9 +1,10 @@ import type { SVGProps } from 'react' import React, { forwardRef } from 'react' -type IconWeight = 'thin' | 'light' | 'regular' | 'bold' +type IconWeight = 'thin' | 'light' | 'regular' | 'bold' // TODO: Remove this after weight prop is removed type IconSize = 20 | 24 | 32 +// TODO: Remove this after weight prop is removed const mapWeightToValue: Record = { bold: 24, regular: 16, diff --git a/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx b/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx index c924ebbce4..c014055fd7 100644 --- a/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx +++ b/packages/components/src/organisms/PaymentMethods/PaymentMethods.tsx @@ -66,7 +66,7 @@ const PaymentMethods = forwardRef( data-fs-payment-methods-flag key={`fs-payment-method-${index}-${text}`} > - + {text && } ))} diff --git a/packages/core/cms/faststore/sections.json b/packages/core/cms/faststore/sections.json index 300de3521a..a75960b929 100644 --- a/packages/core/cms/faststore/sections.json +++ b/packages/core/cms/faststore/sections.json @@ -653,16 +653,16 @@ "Visa" ], "enum": [ - "fs-pay-method-amex", - "fs-pay-method-applepay", - "fs-pay-method-elocard", - "fs-pay-method-diners", - "fs-pay-method-googlepay", - "fs-pay-method-mastercard", - "fs-pay-method-paypal", - "fs-pay-method-pix", - "fs-pay-method-stripe", - "fs-pay-method-visa" + "fs-flag-amex", + "fs-flag-applepay", + "fs-flag-elocard", + "fs-flag-diners", + "fs-flag-googlepay", + "fs-flag-mastercard", + "fs-flag-paypal", + "fs-flag-pix", + "fs-flag-stripe", + "fs-flag-visa" ] } } diff --git a/packages/core/public/icons.svg b/packages/core/public/icons.svg index 3abc861296..40b1c29f69 100644 --- a/packages/core/public/icons.svg +++ b/packages/core/public/icons.svg @@ -413,24 +413,44 @@ - + - + - + + + + + + + - + + + + + + + + + + + + + + + - + - + - + - + - + - + From 01c856936bcd53428934c8fc72fe5b0d11857270 Mon Sep 17 00:00:00 2001 From: Renata Motta Date: Wed, 15 Jan 2025 18:41:41 -0300 Subject: [PATCH 17/25] fix: Couple Icons sizes after svg update --- .../components/src/molecules/ProductCard/ProductCardContent.tsx | 2 +- packages/components/src/molecules/Tag/Tag.tsx | 2 +- packages/components/src/molecules/Toggle/Toggle.tsx | 2 +- packages/core/public/icons.svg | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/molecules/ProductCard/ProductCardContent.tsx b/packages/components/src/molecules/ProductCard/ProductCardContent.tsx index 9234515efd..73b35ef842 100644 --- a/packages/components/src/molecules/ProductCard/ProductCardContent.tsx +++ b/packages/components/src/molecules/ProductCard/ProductCardContent.tsx @@ -129,7 +129,7 @@ const ProductCardContent = forwardRef( )} {ratingValue && ( - } /> + } /> )} {showDiscountBadge && !outOfStock && ( diff --git a/packages/components/src/molecules/Tag/Tag.tsx b/packages/components/src/molecules/Tag/Tag.tsx index 25285eecab..8b93475834 100644 --- a/packages/components/src/molecules/Tag/Tag.tsx +++ b/packages/components/src/molecules/Tag/Tag.tsx @@ -43,7 +43,7 @@ const Tag = forwardRef(function Tag( aria-label={iconButtonLabel ? iconButtonLabel : 'remove'} onClick={onClose} > - {!!icon ? icon : } + {!!icon ? icon : } ) diff --git a/packages/components/src/molecules/Toggle/Toggle.tsx b/packages/components/src/molecules/Toggle/Toggle.tsx index 2c64218fb3..bab703ddd8 100644 --- a/packages/components/src/molecules/Toggle/Toggle.tsx +++ b/packages/components/src/molecules/Toggle/Toggle.tsx @@ -43,7 +43,7 @@ const Toggle = forwardRef(function Toggle( {...otherProps} /> - + ) diff --git a/packages/core/public/icons.svg b/packages/core/public/icons.svg index 40b1c29f69..eb6ace7a26 100644 --- a/packages/core/public/icons.svg +++ b/packages/core/public/icons.svg @@ -404,7 +404,7 @@ - + From 0ca3825d8c3d607879ea2db437043ad65f99f36c Mon Sep 17 00:00:00 2001 From: Renata Motta Date: Wed, 15 Jan 2025 18:52:20 -0300 Subject: [PATCH 18/25] fix: remove `Tag` icon styles --- packages/ui/src/components/molecules/Tag/styles.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/ui/src/components/molecules/Tag/styles.scss b/packages/ui/src/components/molecules/Tag/styles.scss index cf9d254696..251cb4530e 100644 --- a/packages/ui/src/components/molecules/Tag/styles.scss +++ b/packages/ui/src/components/molecules/Tag/styles.scss @@ -33,9 +33,7 @@ color: var(--fs-tag-text-color); > [data-fs-icon] { - border: var(--fs-border-width) solid transparent; border-radius: var(--fs-border-radius-circle); - padding: 3px; transition: var(--fs-badge-transition-property) var(--fs-badge-transition-timing) var(--fs-badge-transition-function); } @@ -48,9 +46,6 @@ } svg { - width: var(--fs-tag-icon-size); - height: var(--fs-tag-icon-size); - stroke-width: var(--fs-tag-icon-stroke-width); color: var(--fs-tag-text-color); vertical-align: middle; } From 0b52adb1ad355f913b63cab9225e966326c325d7 Mon Sep 17 00:00:00 2001 From: Renata Motta Date: Wed, 15 Jan 2025 19:10:03 -0300 Subject: [PATCH 19/25] feat: Adds new icon size --- .../components/organisms/empty-state.mdx | 26 ++-- apps/site/pages/docs/icons.mdx | 2 + apps/site/public/icons.svg | 124 ++++++++++++++--- packages/components/src/atoms/Icon/Icon.tsx | 2 +- packages/core/public/icons.svg | 126 +++++++++++++++--- .../components/cart/EmptyCart/EmptyCart.tsx | 2 +- .../sections/ProductGallery/EmptyGallery.tsx | 2 +- 7 files changed, 230 insertions(+), 54 deletions(-) diff --git a/apps/site/pages/components/organisms/empty-state.mdx b/apps/site/pages/components/organisms/empty-state.mdx index 4c397773eb..f650a060fe 100644 --- a/apps/site/pages/components/organisms/empty-state.mdx +++ b/apps/site/pages/components/organisms/empty-state.mdx @@ -57,7 +57,7 @@ This component can be used to represent an empty state. + } >