@faststore/core 0.3.8 → 0.3.10

package/.storybook/components/SectionItem.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react'
 
-import ButtonLink from '../../src/components/ui/Button/ButtonLink'
+import { LinkButton } from '@faststore/ui'
+
 import Icon from '../../src/components/ui/Icon'
 
 type SectionItemProps = {
@@ -27,14 +28,17 @@ const SectionItem = ({
         <h3 className="sbdocs sbdocs-h3">{title}</h3>
         <p className="sbdocs sbdocs-p">{description}</p>
         {actionPath && (
-          <ButtonLink
+          <LinkButton
+            size="small"
             variant="tertiary"
             href={actionPath}
-            data-fs-button-size="small"
+            icon={
+              <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+            }
+            iconPosition="right"
           >
             See more
-            <Icon name="ArrowRight" width="18" height="18" weight="bold" />
-          </ButtonLink>
+          </LinkButton>
         )}
       </article>
     </li>

package/.storybook/storybook.css

@@ -460,7 +460,7 @@ header.sbdocs-hero + .sbdocs-callout {
   margin-bottom: var(--fs-spacing-5);
 }
 
-.sbdocs-content > header.sbdocs-hero [data-fs-button-link]:first-of-type {
+.sbdocs-content > header.sbdocs-hero [data-fs-link-button]:first-of-type {
   margin-left: calc(-1 * var(--fs-spacing-1));
 }
 

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog),
 and this project adheres to [Calendar Versioning](https://calver.org/).
 
+### [0.3.10](https://github.com/vtex-sites/nextjs.store/compare/0.3.9...0.3.10) (2022-12-19)
+
+
+### Bug Fixes
+
+* custom components on home page ([#325](https://github.com/vtex-sites/nextjs.store/issues/325)) ([c7fbdec](https://github.com/vtex-sites/nextjs.store/commit/c7fbdecd9c2730d4f474444ee086a7099fa2843f)), closes [#326](https://github.com/vtex-sites/nextjs.store/issues/326)
+
+### [0.3.9](https://github.com/vtex-sites/nextjs.store/compare/0.3.8...0.3.9) (2022-12-16)
+
+
+### Chores
+
+* Replaces `LinkButton` UI ([#322](https://github.com/vtex-sites/nextjs.store/issues/322)) ([532f20d](https://github.com/vtex-sites/nextjs.store/commit/532f20d96611254f2453bf0b29e610cb6052daa2))
+
 ### [0.3.8](https://github.com/vtex-sites/nextjs.store/compare/0.3.7...0.3.8) (2022-12-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {

package/src/components/common/Navbar/NavbarSlider.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
 import UIProvider, { useUI } from 'src/sdk/ui/Provider'
 
-import Button from 'src/components/ui/Button'
+import { Button } from '@faststore/ui'
 import Icon from 'src/components/ui/Icon'
 
 import { NavbarSlider } from '.'

package/src/components/product/ProductCard/ProductCard.stories.mdx

@@ -1,7 +1,8 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
+import { Button } from '@faststore/ui'
+
 import Icon from '../../ui/Icon'
-import Button from '../../ui/Button'
 import ProductCard from '.'
 
 import {

package/src/components/regionalization/Regionalization.stories.mdx

@@ -2,8 +2,9 @@ import UIProvider, { useUI } from 'src/sdk/ui/Provider'
 
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
+import { LinkButton } from '@faststore/ui'
+
 import RegionalizationButton from './RegionalizationButton'
-import ButtonLink from '../ui/Button/ButtonLink'
 import RegionalizationInput from './RegionalizationInput'
 import RegionalizationBar from './RegionalizationBar'
 import RegionalizationModal, {
@@ -93,14 +94,15 @@ With the Regionalization feature enabled, if a customer enters their Postal Code
           The Bar has a similar proposal for the button, usually used on mobile
           devices only. It also triggers <code>RegionalizationModal</code>.
         </p>
-        <ButtonLink
+        <LinkButton
+          size="small"
           variant="tertiary"
           href="../?path=/docs/features-regionalization-regionalizationbar--bar"
-          data-fs-button-size="small"
+          icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
+          iconPosition="right"
         >
           See more
-          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
-        </ButtonLink>
+        </LinkButton>
       </article>
     </li>
     <li>
@@ -129,14 +131,15 @@ With the Regionalization feature enabled, if a customer enters their Postal Code
           <code>RegionalizationBar</code>, shows the user the{' '}
           <code>RegionalizationInput</code> search.
         </p>
-        <ButtonLink
+        <LinkButton
+          size="small"
           variant="tertiary"
           href="../?path=/docs/features-regionalization-regionalizationmodal--overview"
-          data-fs-button-size="small"
+          icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
+          iconPosition="right"
         >
           See more
-          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
-        </ButtonLink>
+        </LinkButton>
       </article>
     </li>
   </ul>

package/src/components/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 import UIProvider, { useUI } from 'src/sdk/ui/Provider'
-import Button from 'src/components/ui/Button'
+
 import RegionalizationModal, { RegionalizationModalContent } from '.'
 import RegionalizationButton from 'src/components/regionalization/RegionalizationButton'
 

package/src/components/search/Filter/Filter.stories.mdx

@@ -7,7 +7,8 @@ import UIProvider, { useUI } from 'src/sdk/ui/Provider'
 import { validateSession } from 'src/sdk/session'
 import { useFilter } from './useFilter'
 
-import Button from 'src/components/ui/Button'
+import { Button } from '@faststore/ui'
+
 import Icon from 'src/components/ui/Icon'
 import Facets from './Facets'
 import FilterSlider from './FilterSlider'

package/src/components/search/Filter/FilterSlider.stories.mdx

@@ -7,7 +7,8 @@ import UIProvider, { useUI } from 'src/sdk/ui/Provider'
 import { validateSession } from 'src/sdk/session'
 import { useFilter } from './useFilter'
 
-import Button from 'src/components/ui/Button'
+import { Button } from '@faststore/ui'
+
 import Icon from 'src/components/ui/Icon'
 import FilterSlider from './FilterSlider'
 

package/src/components/search/SearchHistory/SearchHistory.stories.mdx

@@ -7,23 +7,18 @@ import {
 } from 'src/../.storybook/components'
 
 import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
-import Button from 'src/components/ui/Button'
-
 import { SearchHistory } from '.'
 
-<Meta
-  title="Features/Search/SearchHistory"
-  component={SearchHistory}
-/>
+<Meta title="Features/Search/SearchHistory" component={SearchHistory} />
 
 export const Template = (args) => {
   return (
     <div
       style={{
-        maxWidth: "600px",
-        margin: "0 auto",
-        padding: "0 16px",
-        background: "white",
+        maxWidth: '600px',
+        margin: '0 auto',
+        padding: '0 16px',
+        background: 'white',
       }}
     >
       <SearchInputProvider>

package/src/components/sections/BannerText/BannerText.tsx

@@ -1,8 +1,6 @@
-import { Banner, BannerContent, BannerLink } from '@faststore/ui'
+import { Banner, BannerContent, BannerLink, LinkButton } from '@faststore/ui'
 import type { HTMLAttributes } from 'react'
 
-import { ButtonLink } from 'src/components/ui/Button'
-
 import Section from '../Section'
 import styles from './banner-text.module.scss'
 
@@ -70,13 +68,13 @@ function BannerText({
             {variant === 'secondary' && caption && <p>{caption}</p>}
           </div>
           <BannerLink data-fs-banner-text-link>
-            <ButtonLink
+            <LinkButton
               href={actionPath}
               variant={variant}
               inverse={colorVariant === 'main'}
             >
               {actionLabel}
-            </ButtonLink>
+            </LinkButton>
           </BannerLink>
         </BannerContent>
       </Banner>

package/src/components/sections/BannerText/banner-text.module.scss

@@ -59,7 +59,7 @@
     height: 100%;
   }
 
-  [data-fs-banner-text-link] [data-fs-button-link] {
+  [data-fs-banner-text-link] [data-fs-link-button] {
     min-width: var(--fs-banner-button-link-min-width);
     margin-top: var(--fs-banner-button-link-margin-top);
   }

package/src/components/sections/Hero/Hero.tsx

@@ -3,9 +3,9 @@ import {
   Hero as UIHero,
   HeroHeading as UIHeroHeading,
   HeroImage as UIHeroImage,
+  LinkButton as UILinkButton,
 } from '@faststore/ui'
 
-import { ButtonLink } from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import Image from 'src/components/ui/Image/Image'
 
@@ -91,9 +91,14 @@ const Hero = ({
               <h1 data-fs-hero-title>{title}</h1>
               <p data-fs-hero-subtitle>{subtitle}</p>
               {!!link && (
-                <ButtonLink href={link} inverse={colorVariant === 'main'}>
-                  {linkText} <Icon name="ArrowRight" width={24} height={24} />
-                </ButtonLink>
+                <UILinkButton
+                  href={link}
+                  inverse={colorVariant === 'main'}
+                  icon={<Icon name="ArrowRight" width={24} height={24} />}
+                  iconPosition="right"
+                >
+                  {linkText}
+                </UILinkButton>
               )}
             </div>
             {icon && variant === 'secondary' && (

package/src/components/sections/ProductGallery/EmptyGallery.tsx

@@ -1,4 +1,5 @@
-import { ButtonLink } from 'src/components/ui/Button'
+import { LinkButton } from '@faststore/ui'
+
 import EmptyState from 'src/components/ui/EmptyState'
 import Icon from 'src/components/ui/Icon'
 
@@ -11,7 +12,7 @@ function EmptyGallery() {
         <p>Nothing matches with your search</p>
       </header>
 
-      <ButtonLink
+      <LinkButton
         data-fs-empty-state-link
         href="/office"
         variant="secondary"
@@ -21,8 +22,8 @@ function EmptyGallery() {
         iconPosition="left"
       >
         Browse Offers
-      </ButtonLink>
-      <ButtonLink
+      </LinkButton>
+      <LinkButton
         data-fs-empty-state-link
         href="/technology"
         variant="secondary"
@@ -30,7 +31,7 @@ function EmptyGallery() {
         iconPosition="left"
       >
         Just Arrived
-      </ButtonLink>
+      </LinkButton>
     </EmptyState>
   )
 }

package/src/components/sections/ProductGallery/ProductGallery.tsx

@@ -2,14 +2,13 @@ import { useSearch } from '@faststore/sdk'
 import { NextSeo } from 'next-seo'
 import { lazy, Suspense } from 'react'
 import type { MouseEvent } from 'react'
-import { Button as UIButton } from '@faststore/ui'
+import { Button as UIButton, LinkButton as UILinkButton } from '@faststore/ui'
 
 import Filter from 'src/components/search/Filter'
 import Sort from 'src/components/search/Sort'
 import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 import Skeleton from 'src/components/skeletons/Skeleton'
-import { ButtonLink } from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import { mark } from 'src/sdk/tests/mark'
 import { useUI } from 'src/sdk/ui/Provider'
@@ -121,7 +120,7 @@ function ProductGallery({ title, searchTerm }: Props) {
               <NextSeo
                 additionalLinkTags={[{ rel: 'prev', href: prev.link }]}
               />
-              <ButtonLink
+              <UILinkButton
                 onClick={(e: MouseEvent<HTMLElement>) => {
                   e.currentTarget.blur()
                   e.preventDefault()
@@ -136,7 +135,7 @@ function ProductGallery({ title, searchTerm }: Props) {
                 }
               >
                 Previous Page
-              </ButtonLink>
+              </UILinkButton>
             </div>
           )}
 
@@ -162,8 +161,8 @@ function ProductGallery({ title, searchTerm }: Props) {
               <NextSeo
                 additionalLinkTags={[{ rel: 'next', href: next.link }]}
               />
-              <ButtonLink
-                data-testid="show-more"
+              <UILinkButton
+                testId="show-more"
                 onClick={(e: MouseEvent<HTMLElement>) => {
                   e.currentTarget.blur()
                   e.preventDefault()
@@ -174,7 +173,7 @@ function ProductGallery({ title, searchTerm }: Props) {
                 variant="secondary"
               >
                 Load more products
-              </ButtonLink>
+              </UILinkButton>
             </div>
           )}
         </div>

package/src/components/skeletons/Skeletons.stories.mdx

@@ -8,7 +8,6 @@ import FilterSkeleton from './FilterSkeleton'
 import ProductCardSkeleton from './ProductCardSkeleton'
 
 import Icon from 'src/components/ui/Icon'
-import ButtonLink from 'src/components/ui/Icon'
 
 export const TemplateSkeleton = ({ ...args }) => <Skeleton {...args} />
 

package/src/components/ui/Accordion/Accordion.stories.mdx

@@ -1,9 +1,8 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import { List as UIList } from '@faststore/ui'
+import { List as UIList, LinkButton as UILinkButton } from '@faststore/ui'
 import { useState } from 'react'
 
 import Accordion, { AccordionItem } from '.'
-import ButtonLink from '../Button/ButtonLink'
 import Icon from '../Icon'
 
 <Meta
@@ -166,14 +165,15 @@ The `Accordion` component uses [FastStore UI Accordion](https://www.faststore.de
         <p>
           An item of the <code>Accordion</code> component.
         </p>
-        <ButtonLink
+        <UILinkButton
+          size="small"
           variant="tertiary"
           href="../?path=/docs/molecules-accordion-accordionitem--default-story"
-          data-fs-button-size="small"
+          icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
+          iconPosition="right"
         >
           See more
-          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
-        </ButtonLink>
+        </UILinkButton>
       </article>
     </li>
   </ul>
@@ -189,31 +189,34 @@ The `Accordion` component uses [FastStore UI Accordion](https://www.faststore.de
       <article className="sbdocs-list-text">
         <h3>ProductDetailsContent</h3>
         <p>
-          Used by the <code>ProductDetailsContent</code> component to organize product information in different sections.
+          Used by the <code>ProductDetailsContent</code> component to organize
+          product information in different sections.
         </p>
-        <ButtonLink
+        <UILinkButton
+          size="small"
           variant="tertiary"
           href="../?path=/docs/organisms-productdetailscontent--default-story"
-          data-fs-button-size="small"
+          icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
+          iconPosition="right"
         >
           See more
-          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
-        </ButtonLink>
+        </UILinkButton>
       </article>
       <article className="sbdocs-list-text">
         <h3>Footer</h3>
         <p>
           Used by the <code>Footer</code> component on mobile devices.
         </p>
-        <ButtonLink
+        <UILinkButton
+          size="small"
           variant="tertiary"
           href="../?path=/docs/organisms-footer--default-story"
-          data-fs-button-size="small"
+          icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
+          iconPosition="right"
         >
           See more
-          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
-        </ButtonLink>
+        </UILinkButton>
       </article>
-    </li> 
+    </li>
   </ul>
-</section>
+</section>

package/src/components/ui/Button/Button.stories.mdx

@@ -1,7 +1,6 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
 
-import { ButtonLink } from '.'
-import { Button, BuyButton } from '@faststore/ui'
+import { Button, BuyButton, LinkButton } from '@faststore/ui'
 import Icon from 'src/components/ui/Icon'
 
 import {
@@ -611,7 +610,7 @@ export const Usage = ({ inverse, ...args }) => {
     title="Button Link"
     description="A button that acts as a link to navigate users between pages."
   >
-    <ButtonLink href="/">Button Link</ButtonLink>
+    <LinkButton href="/">Button Link</LinkButton>
   </SectionItem>
 </SectionList>
 

package/src/components/ui/Button/{ButtonLink/ButtonSignIn → ButtonSignIn}/ButtonSignIn.tsx

@@ -1,4 +1,5 @@
-import { ButtonLink } from 'src/components/ui/Button'
+import { LinkButton } from '@faststore/ui'
+
 import styles from 'src/components/ui/Button/button.module.scss'
 import Icon from 'src/components/ui/Icon'
 import { useSession } from 'src/sdk/session'
@@ -7,15 +8,16 @@ const ButtonSignIn = () => {
   const { person } = useSession()
 
   return (
-    <ButtonLink
+    <LinkButton
       data-fs-button-signin-link
       href={person?.id ? '/account' : '/login'}
       className={`${styles.fsButton} text__title-mini`}
       variant="tertiary"
+      icon={<Icon name="User" width={18} height={18} weight="bold" />}
+      iconPosition="left"
     >
-      <Icon name="User" width={18} height={18} weight="bold" />
       <span>{person?.id ? 'My Account' : 'Sign In'}</span>
-    </ButtonLink>
+    </LinkButton>
   )
 }
 

package/src/components/ui/Button/{ButtonLink/ButtonSignIn → ButtonSignIn}/ButtonSignInFallback/ButtonSignInFallback.tsx

@@ -1,17 +1,19 @@
+import { LinkButton } from '@faststore/ui'
+
 import Icon from 'src/components/ui/Icon'
-import ButtonLink from 'src/components/ui/Button/ButtonLink'
 
 function ButtonSignInFallback() {
   return (
-    <ButtonLink
+    <LinkButton
       data-fs-button-signin-link
       href="/login"
       className="text__title-mini"
       variant="tertiary"
+      icon={<Icon name="User" width={18} height={18} weight="bold" />}
+      iconPosition="left"
     >
-      <Icon name="User" width={18} height={18} weight="bold" />
       <span>{'Sign In'}</span>
-    </ButtonLink>
+    </LinkButton>
   )
 }
 

package/src/components/ui/Button/index.ts

@@ -1,3 +1,2 @@
-export { default as ButtonLink } from './ButtonLink'
-export { default as ButtonSignIn } from './ButtonLink/ButtonSignIn'
-export { default as ButtonSignInFallback } from './ButtonLink/ButtonSignIn/ButtonSignInFallback'
+export { default as ButtonSignIn } from './ButtonSignIn'
+export { default as ButtonSignInFallback } from './ButtonSignIn/ButtonSignInFallback'

package/src/components/ui/EmptyState/EmptyState.stories.mdx

@@ -2,9 +2,9 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
 
 import { TokenTable, TokenRow } from 'src/../.storybook/components'
 
-import Button from 'src/components/ui/Button'
+import { Button, LinkButton } from '@faststore/ui'
+
 import Icon from 'src/components/ui/Icon'
-import { ButtonLink } from 'src/components/ui/Button'
 
 import EmptyState from '.'
 
@@ -115,7 +115,7 @@ export const TemplateEmptyGallery = (args) => {
         <Icon name="CircleWavyWarning" width={56} height={56} weight="thin" />
         <p>Nothing matches with your search</p>
       </header>
-      <ButtonLink
+      <LinkButton
         data-fs-empty-state-link
         href="#"
         variant="secondary"
@@ -125,8 +125,8 @@ export const TemplateEmptyGallery = (args) => {
         iconPosition="left"
       >
         Browse Offers
-      </ButtonLink>
-      <ButtonLink
+      </LinkButton>
+      <LinkButton
         data-fs-empty-state-link
         href="#"
         variant="secondary"
@@ -134,7 +134,7 @@ export const TemplateEmptyGallery = (args) => {
         iconPosition="left"
       >
         Just Arrived
-      </ButtonLink>
+      </LinkButton>
     </EmptyState>
   )
 }

package/src/components/ui/Modal/Modal.stories.mdx

@@ -1,7 +1,8 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { Button, LinkButton } from '@faststore/ui'
+
 import UIProvider, { useUI } from 'src/sdk/ui/Provider'
-import Button from 'src/components/ui/Button'
-import ButtonLink from 'src/components/ui/Button/ButtonLink'
 import { RegionalizationModalContent } from 'src/components/regionalization/RegionalizationModal'
 
 import Modal from '.'
@@ -128,14 +129,15 @@ The `Modal` component uses [FastStore UI Modal](https://www.faststore.dev/refere
           <code>RegionalizationBar</code>, shows the user the{' '}
           <code>RegionalizationInput</code> search.
         </p>
-        <ButtonLink
+        <LinkButton
+          size="small"
           variant="tertiary"
           href="../?path=/docs/features-regionalization-regionalizationmodal--overview"
-          data-fs-button-size="small"
+          icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
+          iconPosition="right"
         >
           See more
-          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
-        </ButtonLink>
+        </LinkButton>
       </article>
     </li>
   </ul>

package/src/components/ui/Toast/Toast.stories.mdx

@@ -8,7 +8,7 @@ import {
 import UIProvider, { useUI } from 'src/sdk/ui/Provider'
 
 import Toast from '.'
-import Button from 'src/components/ui/Button'
+import { Button } from '@faststore/ui'
 
 <Meta title="Atoms/Toast" component={Toast} />
 

package/src/pages/[slug]/p.tsx

@@ -1,24 +1,24 @@
 import { isNotFoundError } from '@faststore/api'
 import { gql } from '@faststore/graphql-utils'
-import { BreadcrumbJsonLd, NextSeo, ProductJsonLd } from 'next-seo'
+import type { Locator } from '@vtex/client-cms'
 import type { GetStaticPaths, GetStaticProps } from 'next'
+import { BreadcrumbJsonLd, NextSeo, ProductJsonLd } from 'next-seo'
 import type { ComponentType } from 'react'
-import type { Locator } from '@vtex/client-cms'
 
+import type {
+  ServerProductPageQueryQuery,
+  ServerProductPageQueryQueryVariables,
+} from '@generated/graphql'
 import RenderPageSections from 'src/components/cms/RenderPageSections'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
 import CrossSellingShelf from 'src/components/sections/CrossSellingShelf'
 import ProductDetails from 'src/components/sections/ProductDetails'
+import CUSTOM_COMPONENTS from 'src/customizations/components'
 import { useSession } from 'src/sdk/session'
 import { mark } from 'src/sdk/tests/mark'
 import { execute } from 'src/server'
-import { getPage } from 'src/server/cms'
 import type { PDPContentType } from 'src/server/cms'
-import CUSTOM_SECTIONS from 'src/customizations'
-import type {
-  ServerProductPageQueryQuery,
-  ServerProductPageQueryQueryVariables,
-} from '@generated/graphql'
+import { getPage } from 'src/server/cms'
 
 import storeConfig from '../../../store.config'
 
@@ -30,7 +30,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   ProductDetails,
   BannerNewsletter,
   CrossSellingShelf,
-  ...CUSTOM_SECTIONS,
+  ...CUSTOM_COMPONENTS,
 }
 
 type Props = ServerProductPageQueryQuery & PDPContentType

package/src/pages/index.tsx

@@ -1,7 +1,7 @@
+import type { Locator } from '@vtex/client-cms'
+import type { GetStaticProps } from 'next'
 import { NextSeo, SiteLinksSearchBoxJsonLd } from 'next-seo'
 import type { ComponentType } from 'react'
-import type { GetStaticProps } from 'next'
-import type { Locator } from '@vtex/client-cms'
 
 import RenderPageSections from 'src/components/cms/RenderPageSections'
 import BannerText from 'src/components/sections/BannerText'
@@ -10,17 +10,14 @@ import IncentivesHeader from 'src/components/sections/Incentives/IncentivesHeade
 import Newsletter from 'src/components/sections/Newsletter'
 import ProductShelf from 'src/components/sections/ProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
+import CUSTOM_COMPONENTS from 'src/customizations/components'
 import { mark } from 'src/sdk/tests/mark'
-import { getPage } from 'src/server/cms'
 import type { PageContentType } from 'src/server/cms'
-import CUSTOM_SECTIONS from 'src/customizations'
+import { getPage } from 'src/server/cms'
 
 import storeConfig from '../../store.config'
 
-/**
- * Sections: Components imported from each store's custom components and '../components/sections'.
- * Do not import or render components from any other folder in here.
- */
+/* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   Hero,
   BannerText,
@@ -28,7 +25,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   ProductShelf,
   ProductTiles,
   Newsletter,
-  ...CUSTOM_SECTIONS,
+  ...CUSTOM_COMPONENTS,
 }
 
 type Props = PageContentType

package/src/stories/brandless.stories.mdx

@@ -1,6 +1,7 @@
 import { Description, Meta } from '@storybook/addon-docs'
 
-import ButtonLink from '../components/ui/Button/ButtonLink'
+import { LinkButton } from '@faststore/ui'
+
 import Icon from '../components/ui/Icon'
 
 <Meta
@@ -14,14 +15,15 @@ import Icon from '../components/ui/Icon'
 
 This themeable structure is made of two complementary layers: a useful and assorted library of templates for the components and sections, alongside a comprehensive set of design tokens to further customize them.
 
-<ButtonLink
+<LinkButton
+  size="small"
   variant="tertiary"
   href="../?path=/docs/theming-customizing--page"
-  data-fs-button-size="small"
+  icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
+  iconPosition="right"
 >
   Customizing your store
-  <Icon name="ArrowRight" width="18" height="18" weight="bold" />
-</ButtonLink>
+</LinkButton>
 
 </header>
 

package/src/stories/getting-started.stories.mdx

@@ -1,7 +1,8 @@
 import { Description, Meta } from '@storybook/addon-docs'
 import { Callout } from 'src/../.storybook/components'
 
-import ButtonLink from '../components/ui/Button/ButtonLink'
+import { LinkButton } from '@faststore/ui'
+
 import Icon from '../components/ui/Icon'
 
 <Meta
@@ -15,23 +16,25 @@ import Icon from '../components/ui/Icon'
 
 FastStore NextJS Starter's components library is an ecommerce-focused library **created by VTEX** that provides best-of-breed components, blazing-fast performance, and a frictionless development experience to create storefronts using FastStore UI library as base.
 
-<ButtonLink
+<LinkButton
+  size="small"
   variant="tertiary"
   href="https://nextjs.vtex.app/"
-  data-fs-button-size="small"
+  icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
+  iconPosition="right"
 >
   NextJS Store Starter
-  <Icon name="ArrowRight" width="18" height="18" weight="bold" />
-</ButtonLink>
+</LinkButton>
 
-<ButtonLink
+<LinkButton
+  size="small"
   variant="tertiary"
   href="https://www.faststore.dev/reference/ui/faststore-ui"
-  data-fs-button-size="small"
+  icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
+  iconPosition="right"
 >
   FastStore UI library
-  <Icon name="ArrowRight" width="18" height="18" weight="bold" />
-</ButtonLink>
+</LinkButton>
 
 </header>
 

package/src/components/ui/Button/ButtonLink/ButtonLink.tsx

@@ -1,50 +0,0 @@
-import { useRef } from 'react'
-import type { FocusEvent } from 'react'
-import { Icon as UIIcon } from '@faststore/ui'
-import type { ButtonProps } from '@faststore/ui'
-
-import Link from 'src/components/ui/Link'
-import type { LinkProps } from 'src/components/ui/Link'
-
-import styles from '../button.module.scss'
-
-type ButtonLinkProps = ButtonProps & Omit<LinkProps, 'variant'>
-
-function ButtonLink({
-  variant = 'primary',
-  inverse,
-  icon,
-  iconPosition,
-  children,
-  disabled = false,
-  ...otherProps
-}: ButtonLinkProps) {
-  const linkRef = useRef<HTMLAnchorElement | null>(null)
-
-  return (
-    <Link
-      ref={linkRef}
-      className={styles.fsButton}
-      data-fs-button
-      data-fs-button-link
-      data-fs-link={null}
-      data-fs-button-variant={variant}
-      data-fs-button-inverse={inverse}
-      data-fs-button-disabled={disabled}
-      onFocus={(e: FocusEvent) => {
-        e.preventDefault()
-
-        if (disabled) {
-          linkRef.current?.blur()
-        }
-      }}
-      {...otherProps}
-    >
-      {iconPosition === 'left' && <UIIcon component={icon} />}
-      {children}
-      {iconPosition === 'right' && <UIIcon component={icon} />}
-    </Link>
-  )
-}
-
-export default ButtonLink

package/src/components/ui/Button/ButtonLink/index.ts

@@ -1 +0,0 @@
-export { default } from './ButtonLink'