diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b707aa5..96f74ff4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,6 +38,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Removed +- `ButtonIcon` component ([#181](https://github.com/vtex-sites/nextjs.store/pull/181)) + ### Fixed - priceCurrency field on SEO meta data ([#161](https://github.com/vtex-sites/nextjs.store/pull/161)) diff --git a/src/components/cart/CartSidebar/CartSidebar.tsx b/src/components/cart/CartSidebar/CartSidebar.tsx index 98387633..70e41b27 100644 --- a/src/components/cart/CartSidebar/CartSidebar.tsx +++ b/src/components/cart/CartSidebar/CartSidebar.tsx @@ -2,7 +2,7 @@ import { List } from '@faststore/ui' import Alert from 'src/components/ui/Alert' import { Badge } from 'src/components/ui/Badge' -import Button, { ButtonIcon } from 'src/components/ui/Button' +import Button from 'src/components/ui/Button' import Icon from 'src/components/ui/Icon' import SlideOver from 'src/components/ui/SlideOver' import { useCart } from 'src/sdk/cart/useCart' @@ -42,7 +42,9 @@ function CartSidebar() {

{totalItems} - } {...btnProps} diff --git a/src/components/common/Navbar/Navbar.tsx b/src/components/common/Navbar/Navbar.tsx index c71ecbe3..2f076b35 100644 --- a/src/components/common/Navbar/Navbar.tsx +++ b/src/components/common/Navbar/Navbar.tsx @@ -3,8 +3,7 @@ import { Suspense, useRef, useState } from 'react' import CartToggle from 'src/components/cart/CartToggle' import SearchInput from 'src/components/search/SearchInput' -import { - ButtonIcon, +import Button, { ButtonSignIn, ButtonSignInFallback, } from 'src/components/ui/Button' @@ -37,7 +36,9 @@ function Navbar() {
{!searchExpanded && ( <> - } @@ -59,7 +60,9 @@ function Navbar() { data-fs-navbar-search-expanded={searchExpanded} > {searchExpanded && ( - } diff --git a/src/components/common/Navbar/NavbarSlider.stories.mdx b/src/components/common/Navbar/NavbarSlider.stories.mdx index 3c5d0a86..49cf07f9 100644 --- a/src/components/common/Navbar/NavbarSlider.stories.mdx +++ b/src/components/common/Navbar/NavbarSlider.stories.mdx @@ -3,7 +3,7 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs' import { CartProvider, SessionProvider } from '@faststore/sdk' import UIProvider, { useUI } from 'src/sdk/ui/Provider' -import { ButtonIcon } from 'src/components/ui/Button' +import Button from 'src/components/ui/Button' import Icon from 'src/components/ui/Icon' import { NavbarSlider } from '.' @@ -20,7 +20,9 @@ export const TemplateNavbarSlider = () => { const { openNavbar, navbar: displayNavbar } = useUI() return (
- } diff --git a/src/components/common/Navbar/NavbarSlider.tsx b/src/components/common/Navbar/NavbarSlider.tsx index ce9db242..58566c59 100644 --- a/src/components/common/Navbar/NavbarSlider.tsx +++ b/src/components/common/Navbar/NavbarSlider.tsx @@ -1,7 +1,6 @@ import { Suspense } from 'react' -import { - ButtonIcon, +import Button, { ButtonSignIn, ButtonSignInFallback, } from 'src/components/ui/Button' @@ -41,7 +40,9 @@ function NavbarSlider() { - } diff --git a/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx b/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx index e5d1c7b7..0039ba2e 100644 --- a/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx +++ b/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx @@ -1,5 +1,5 @@ import RegionalizationInput from 'src/components/regionalization/RegionalizationInput' -import { ButtonIcon } from 'src/components/ui/Button' +import Button from 'src/components/ui/Button' import Icon from 'src/components/ui/Icon' import Link from 'src/components/ui/Link' @@ -19,7 +19,9 @@ function RegionalizationModalContent({ >
{onClose && ( - onClose?.()} data-fs-regionalization-modal-button aria-label="Close Regionalization Modal" diff --git a/src/components/search/Filter/FilterSlider.tsx b/src/components/search/Filter/FilterSlider.tsx index 2b554912..5245f494 100644 --- a/src/components/search/Filter/FilterSlider.tsx +++ b/src/components/search/Filter/FilterSlider.tsx @@ -1,7 +1,7 @@ import { useSearch } from '@faststore/sdk' import type { Filter_FacetsFragment } from '@generated/graphql' -import Button, { ButtonIcon } from 'src/components/ui/Button' +import Button from 'src/components/ui/Button' import Icon from 'src/components/ui/Icon' import SlideOver from 'src/components/ui/SlideOver' import { useUI } from 'src/sdk/ui/Provider' @@ -48,7 +48,9 @@ function FilterSlider({

Filters

- } diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx index 50b02cbb..404db347 100644 --- a/src/components/ui/Button/Button.tsx +++ b/src/components/ui/Button/Button.tsx @@ -51,6 +51,8 @@ function Button({ disabled, ...props }: ButtonProps) { + const isButtonIcon = icon && !iconPosition + return ( - {iconPosition === 'left' && } + {(isButtonIcon || iconPosition === 'left') && } {children} {iconPosition === 'right' && } diff --git a/src/components/ui/Button/ButtonIcon.tsx b/src/components/ui/Button/ButtonIcon.tsx deleted file mode 100644 index b866c4d8..00000000 --- a/src/components/ui/Button/ButtonIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { IconButton as UIIconButton } from '@faststore/ui' -import type { IconButtonProps as UIIconButtonProps } from '@faststore/ui' - -import styles from './button.module.scss' - -type Props = UIIconButtonProps - -function ButtonIcon({ icon, ...otherProps }: Props) { - return ( - - ) -} - -export default ButtonIcon diff --git a/src/components/ui/Button/index.ts b/src/components/ui/Button/index.ts index 448b34a0..b986761d 100644 --- a/src/components/ui/Button/index.ts +++ b/src/components/ui/Button/index.ts @@ -1,6 +1,5 @@ export { default } from './Button' export type { ButtonProps } from './Button' -export { default as ButtonIcon } from './ButtonIcon' export { default as ButtonBuy } from './ButtonBuy' export { default as ButtonLink } from './ButtonLink' export { default as ButtonSignIn } from './ButtonLink/ButtonSignIn' diff --git a/src/components/ui/InputText/InputText.tsx b/src/components/ui/InputText/InputText.tsx index 5c91ce2f..0b40e88b 100644 --- a/src/components/ui/InputText/InputText.tsx +++ b/src/components/ui/InputText/InputText.tsx @@ -3,7 +3,6 @@ import type { MutableRefObject } from 'react' import type { InputProps } from '@faststore/ui' import Button from 'src/components/ui/Button' -import ButtonIcon from 'src/components/ui/Button/ButtonIcon' import Icon from 'src/components/ui/Icon' type DefaultProps = { @@ -96,7 +95,9 @@ const InputText = ({ {shouldDisplayButton && (error ? ( - } diff --git a/src/components/ui/SlideOver/SlideOver.stories.mdx b/src/components/ui/SlideOver/SlideOver.stories.mdx index cc76b1dc..1fc5f775 100644 --- a/src/components/ui/SlideOver/SlideOver.stories.mdx +++ b/src/components/ui/SlideOver/SlideOver.stories.mdx @@ -12,13 +12,10 @@ import { useCart } from 'src/sdk/cart/useCart' import { NavbarSlider } from 'src/components/common/Navbar' -import { ButtonIcon } from 'src/components/ui/Button' import Icon from 'src/components/ui/Icon' import CartToggle from 'src/components/cart/CartToggle' import CartSidebar from 'src/components/cart/CartSidebar' -import { ButtonBuy } from 'src/components/ui/Button' - import { cartItem } from 'src/../.storybook/mocks/cart-sidebar' import { facets as facetsMock } from 'src/../.storybook/mocks/filter-slider' @@ -27,7 +24,7 @@ import storeConfig from 'store.config' import { validateSession } from 'src/sdk/session/validate' import { useFilter } from 'src/components/search/Filter/useFilter' -import Button from 'src/components/ui/Button' +import Button, { ButtonBuy } from 'src/components/ui/Button' import { FilterSlider } from 'src/components/search/Filter' import SlideOver from '.' @@ -65,7 +62,9 @@ export function SlideOverTemplate() {

SlideOver

- } onClick={fadeOut}