From f7a4079f576015065494f047cc8278d878b1ccb2 Mon Sep 17 00:00:00 2001 From: Tiago Gimenes Date: Mon, 14 Mar 2022 16:16:34 -0300 Subject: [PATCH] unify svg --- src/components/cart/CartItem/CartItem.tsx | 4 +- .../cart/CartSidebar/CartSidebar.tsx | 8 +-- src/components/cart/CartToggle/CartToggle.tsx | 4 +- src/components/cart/EmptyCart/EmptyCart.tsx | 6 +- src/components/common/Alert/Alert.tsx | 4 +- src/components/common/Footer/Footer.tsx | 63 ++++++++----------- src/components/common/Footer/footer.scss | 5 ++ src/components/common/IconSVG/index.tsx | 1 - src/components/common/Navbar/Navbar.tsx | 8 +-- .../common/SearchInput/SearchInput.tsx | 4 +- .../product/OutOfStock/OutOfStock.tsx | 8 +-- src/components/search/Filter/Filter.tsx | 4 +- src/components/sections/Hero/Hero.tsx | 5 +- .../sections/Incentives/IncentivesFooter.tsx | 12 ++-- .../sections/Incentives/IncentivesHeader.tsx | 12 ++-- .../sections/ProductGallery/EmptyGallery.tsx | 22 ++----- .../ProductGallery/ProductGallery.tsx | 11 +--- .../ScrollToTopButton/ScrollToTopButton.tsx | 6 +- src/components/ui/Accordion/AccordionItem.tsx | 6 +- src/components/ui/Alert/Alert.tsx | 4 +- src/components/ui/Breadcrumb/Breadcrumb.tsx | 4 +- src/components/ui/BuyButton/BuyButton.tsx | 4 +- .../{common => ui}/EmptyState/EmptyState.tsx | 0 .../EmptyState/empty-state.scss | 0 .../{common => ui}/EmptyState/index.tsx | 0 .../IconSVG/IconSVG.tsx => ui/Icon/Icon.tsx} | 6 +- src/components/ui/Icon/index.tsx | 1 + .../ui/QuantitySelector/QuantitySelector.tsx | 6 +- src/components/ui/Select/Select.tsx | 4 +- src/components/ui/SignInLink/SignInLink.tsx | 4 +- src/pages/{StoreCollection.slug}.tsx | 6 +- static/icons/ApplePay.svg | 19 ------ static/icons/Diners.svg | 19 ------ static/icons/EloCard.svg | 31 --------- static/icons/Facebook.svg | 14 ----- static/icons/GooglePay.svg | 35 ----------- static/icons/Instagram.svg | 12 ---- static/icons/Mastercard.svg | 31 --------- static/icons/PayPal.svg | 37 ----------- static/icons/Pinterest.svg | 12 ---- static/icons/Stripe.svg | 19 ------ static/icons/Twitter.svg | 14 ----- static/icons/Visa.svg | 19 ------ static/icons/icons.svg | 12 ++++ 44 files changed, 116 insertions(+), 390 deletions(-) delete mode 100644 src/components/common/IconSVG/index.tsx rename src/components/{common => ui}/EmptyState/EmptyState.tsx (100%) rename src/components/{common => ui}/EmptyState/empty-state.scss (100%) rename src/components/{common => ui}/EmptyState/index.tsx (100%) rename src/components/{common/IconSVG/IconSVG.tsx => ui/Icon/Icon.tsx} (82%) create mode 100644 src/components/ui/Icon/index.tsx delete mode 100644 static/icons/ApplePay.svg delete mode 100644 static/icons/Diners.svg delete mode 100644 static/icons/EloCard.svg delete mode 100644 static/icons/Facebook.svg delete mode 100644 static/icons/GooglePay.svg delete mode 100644 static/icons/Instagram.svg delete mode 100644 static/icons/Mastercard.svg delete mode 100644 static/icons/PayPal.svg delete mode 100644 static/icons/Pinterest.svg delete mode 100644 static/icons/Stripe.svg delete mode 100644 static/icons/Twitter.svg delete mode 100644 static/icons/Visa.svg diff --git a/src/components/cart/CartItem/CartItem.tsx b/src/components/cart/CartItem/CartItem.tsx index f0530e8ce..1d3a602a0 100644 --- a/src/components/cart/CartItem/CartItem.tsx +++ b/src/components/cart/CartItem/CartItem.tsx @@ -8,7 +8,7 @@ import { useCart } from 'src/sdk/cart/useCart' import { useRemoveButton } from 'src/sdk/cart/useRemoveButton' import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice' import type { CartItem as ICartItem } from 'src/sdk/cart/validate' -import IconSVG from 'src/components/common/IconSVG' +import Icon from 'src/components/ui/Icon' import './cart-item.scss' @@ -72,7 +72,7 @@ function CartItem({ item }: Props) { )} diff --git a/src/components/ui/Breadcrumb/Breadcrumb.tsx b/src/components/ui/Breadcrumb/Breadcrumb.tsx index 1af171b22..0c0fc9975 100644 --- a/src/components/ui/Breadcrumb/Breadcrumb.tsx +++ b/src/components/ui/Breadcrumb/Breadcrumb.tsx @@ -2,7 +2,7 @@ import React, { memo } from 'react' import { Breadcrumb as UIBreadcrumb } from '@faststore/ui' import Link from 'src/components/ui/Link' import type { BreadcrumbProps as UIBreadcrumbProps } from '@faststore/ui' -import IconSVG from 'src/components/common/IconSVG' +import Icon from 'src/components/ui/Icon' import './breadcrumb.scss' @@ -19,7 +19,7 @@ function Breadcrumb({ breadcrumbList }: BreadcrumbProps) { return ( - + {breadcrumbList.map(({ item, name }, index) => { diff --git a/src/components/ui/BuyButton/BuyButton.tsx b/src/components/ui/BuyButton/BuyButton.tsx index 705ba582f..b3600acad 100644 --- a/src/components/ui/BuyButton/BuyButton.tsx +++ b/src/components/ui/BuyButton/BuyButton.tsx @@ -1,7 +1,7 @@ import React from 'react' import { Button as UIButton } from '@faststore/ui' import type { ButtonProps } from '@faststore/ui' -import IconSVG from 'src/components/common/IconSVG' +import Icon from 'src/components/ui/Icon' import './buy-button.scss' @@ -10,7 +10,7 @@ type Props = ButtonProps function BuyButton({ children, ...props }: Props) { return ( - + {children} ) diff --git a/src/components/common/EmptyState/EmptyState.tsx b/src/components/ui/EmptyState/EmptyState.tsx similarity index 100% rename from src/components/common/EmptyState/EmptyState.tsx rename to src/components/ui/EmptyState/EmptyState.tsx diff --git a/src/components/common/EmptyState/empty-state.scss b/src/components/ui/EmptyState/empty-state.scss similarity index 100% rename from src/components/common/EmptyState/empty-state.scss rename to src/components/ui/EmptyState/empty-state.scss diff --git a/src/components/common/EmptyState/index.tsx b/src/components/ui/EmptyState/index.tsx similarity index 100% rename from src/components/common/EmptyState/index.tsx rename to src/components/ui/EmptyState/index.tsx diff --git a/src/components/common/IconSVG/IconSVG.tsx b/src/components/ui/Icon/Icon.tsx similarity index 82% rename from src/components/common/IconSVG/IconSVG.tsx rename to src/components/ui/Icon/Icon.tsx index 2f1f64a81..488d5d47f 100644 --- a/src/components/common/IconSVG/IconSVG.tsx +++ b/src/components/ui/Icon/Icon.tsx @@ -14,7 +14,7 @@ interface Props extends SVGProps { /** * Symbol id from element to render. Take a look at `/static/icons/icons.svg`. * - * Example: + * Example: */ name: string /** @@ -25,7 +25,7 @@ interface Props extends SVGProps { weight?: IconWeight } -function IconSVG({ name, weight = 'regular', ...otherProps }: Props) { +function Icon({ name, weight = 'regular', ...otherProps }: Props) { return ( @@ -33,4 +33,4 @@ function IconSVG({ name, weight = 'regular', ...otherProps }: Props) { ) } -export default IconSVG +export default Icon diff --git a/src/components/ui/Icon/index.tsx b/src/components/ui/Icon/index.tsx new file mode 100644 index 000000000..17f79ac55 --- /dev/null +++ b/src/components/ui/Icon/index.tsx @@ -0,0 +1 @@ +export { default } from './Icon' diff --git a/src/components/ui/QuantitySelector/QuantitySelector.tsx b/src/components/ui/QuantitySelector/QuantitySelector.tsx index 2c4c76201..f61a91ddd 100644 --- a/src/components/ui/QuantitySelector/QuantitySelector.tsx +++ b/src/components/ui/QuantitySelector/QuantitySelector.tsx @@ -1,6 +1,6 @@ import React, { memo, useEffect, useState } from 'react' import { QuantitySelector as UIQuantitySelector } from '@faststore/ui' -import IconSVG from 'src/components/common/IconSVG' +import Icon from 'src/components/ui/Icon' import './quantity-selector.scss' @@ -65,12 +65,12 @@ export function QuantitySelector({ leftButtonProps={{ onClick: decrease, disabled: isLeftDisabled || disabled, - icon: , + icon: , }} rightButtonProps={{ onClick: increase, disabled: isRightDisabled || disabled, - icon: , + icon: , }} inputProps={{ onChange: validateInput, diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx index 5f9987989..9b2a2550e 100644 --- a/src/components/ui/Select/Select.tsx +++ b/src/components/ui/Select/Select.tsx @@ -1,7 +1,7 @@ import React from 'react' import { Select as UISelect } from '@faststore/ui' import type { SelectProps } from '@faststore/ui' -import IconSVG from 'src/components/common/IconSVG' +import Icon from 'src/components/ui/Icon' import './select.scss' @@ -50,7 +50,7 @@ export default function Select({ ))} - + ) } diff --git a/src/components/ui/SignInLink/SignInLink.tsx b/src/components/ui/SignInLink/SignInLink.tsx index 8abf87f47..8cb1b68fa 100644 --- a/src/components/ui/SignInLink/SignInLink.tsx +++ b/src/components/ui/SignInLink/SignInLink.tsx @@ -1,5 +1,5 @@ import React from 'react' -import IconSVG from 'src/components/common/IconSVG' +import Icon from 'src/components/ui/Icon' import { LinkButton } from '../Button' @@ -11,7 +11,7 @@ const SignInLink: React.FC = () => { className="title-sub-subsection signin-link" variant="tertiary" > - + Sign In ) diff --git a/src/pages/{StoreCollection.slug}.tsx b/src/pages/{StoreCollection.slug}.tsx index 2240971f0..4befb3988 100644 --- a/src/pages/{StoreCollection.slug}.tsx +++ b/src/pages/{StoreCollection.slug}.tsx @@ -7,10 +7,10 @@ import Hero from 'src/components/sections/Hero' import ProductGallery from 'src/components/sections/ProductGallery' import ProductShelf from 'src/components/sections/ProductShelf' import ScrollToTopButton from 'src/components/sections/ScrollToTopButton' +import Icon from 'src/components/ui/Icon' import { ITEMS_PER_PAGE } from 'src/constants' import { applySearchState } from 'src/sdk/search/state' import { mark } from 'src/sdk/tests/mark' -import IconSVG from 'src/components/common/IconSVG' import type { CollectionPageQueryQuery, CollectionPageQueryQueryVariables, @@ -107,9 +107,7 @@ function Page(props: Props) { subtitle={`All the amazing ${title} from the brands we partner with.`} imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg" imageAlt="Quest 2 Controller on a table" - icon={ - - } + icon={} /> diff --git a/static/icons/ApplePay.svg b/static/icons/ApplePay.svg deleted file mode 100644 index c1ca1afaf..000000000 --- a/static/icons/ApplePay.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - diff --git a/static/icons/Diners.svg b/static/icons/Diners.svg deleted file mode 100644 index a14fa6f32..000000000 --- a/static/icons/Diners.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - diff --git a/static/icons/EloCard.svg b/static/icons/EloCard.svg deleted file mode 100644 index 3650f2e8e..000000000 --- a/static/icons/EloCard.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - diff --git a/static/icons/Facebook.svg b/static/icons/Facebook.svg deleted file mode 100644 index 59d01891c..000000000 --- a/static/icons/Facebook.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/static/icons/GooglePay.svg b/static/icons/GooglePay.svg deleted file mode 100644 index 8d74fa790..000000000 --- a/static/icons/GooglePay.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - diff --git a/static/icons/Instagram.svg b/static/icons/Instagram.svg deleted file mode 100644 index a4530291f..000000000 --- a/static/icons/Instagram.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/static/icons/Mastercard.svg b/static/icons/Mastercard.svg deleted file mode 100644 index b8087afc7..000000000 --- a/static/icons/Mastercard.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - diff --git a/static/icons/PayPal.svg b/static/icons/PayPal.svg deleted file mode 100644 index 81b3f66bc..000000000 --- a/static/icons/PayPal.svg +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - diff --git a/static/icons/Pinterest.svg b/static/icons/Pinterest.svg deleted file mode 100644 index 749cf0ff1..000000000 --- a/static/icons/Pinterest.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/static/icons/Stripe.svg b/static/icons/Stripe.svg deleted file mode 100644 index 7d24f550a..000000000 --- a/static/icons/Stripe.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - diff --git a/static/icons/Twitter.svg b/static/icons/Twitter.svg deleted file mode 100644 index 8190e2d2e..000000000 --- a/static/icons/Twitter.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/static/icons/Visa.svg b/static/icons/Visa.svg deleted file mode 100644 index 2d9bb6629..000000000 --- a/static/icons/Visa.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - diff --git a/static/icons/icons.svg b/static/icons/icons.svg index eb15d5003..b88896fda 100644 --- a/static/icons/icons.svg +++ b/static/icons/icons.svg @@ -28,4 +28,16 @@ + + + + + + + + + + + +