Feat: Brandless Tests

gatsby-browser.tsx

@@ -4,6 +4,11 @@ import './src/styles/global/resets.scss'
 import './src/styles/global/typography.scss'
 import './src/styles/global/layout.scss'
 
+import '@fontsource/orelega-one'
+
+import '@fontsource/roboto-mono'
+import '@fontsource/roboto-mono/700.css'
+
 import { CartProvider, SessionProvider, UIProvider } from '@faststore/sdk'
 import Layout from 'src/Layout'
 import AnalyticsHandler from 'src/sdk/analytics'

package.json

@@ -25,6 +25,8 @@
     "node": ">=14"
   },
   "dependencies": {
+    "@fontsource/orelega-one": "^4.5.2",
+    "@fontsource/roboto-mono": "^4.5.1",
     "@builder.io/partytown": "^0.5.4",
     "@envelop/core": "^1.2.0",
     "@envelop/graphql-jit": "^1.1.1",

src/Layout.tsx

@@ -22,7 +22,7 @@ function Layout({ children }: PropsWithChildren<unknown>) {
 
   return (
     <>
-      <div id="layout">
+      <div className="body new-theme" id="layout">
         <Alert
           icon="Bell"
           content={

src/components/sections/Incentives/IncentivesHeader.tsx

@@ -15,7 +15,7 @@ interface Props {
 function IncentivesHeader({ incentives }: Props) {
   return (
     <Section>
-      <Incentives incentives={incentives} colored />
+      <Incentives incentives={incentives} />
     </Section>
   )
 }

src/components/ui/Checkbox/checkbox.module.scss

@@ -16,7 +16,9 @@
 
   --fs-checkbox-transition                   : border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function);
 
+  --fs-checkbox-bkg-color                    : var(--fs-color-body-bkg);
   --fs-checkbox-bkg-color-hover              : var(--fs-color-primary-bkg-light);
+
   --fs-checkbox-shadow-hover                 : 0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active);
 
   // Checked
@@ -47,6 +49,7 @@
   width: var(--fs-checkbox-width);
   height: var(--fs-checkbox-height);
   cursor: pointer;
+  background-color: var(--fs-checkbox-bkg-color);
   border: var(--fs-checkbox-border-width) solid var(--fs-checkbox-border-color);
   border-radius: var(--fs-checkbox-border-radius);
   outline: none;

src/pages/theming.tsx

@@ -0,0 +1,165 @@
+import { useSession } from '@faststore/sdk'
+import { graphql } from 'gatsby'
+import { GatsbySeo, JsonLd } from 'gatsby-plugin-next-seo'
+import BannerText from 'src/components/sections/BannerText'
+import Hero from 'src/components/sections/Hero'
+import IncentivesHeader from 'src/components/sections/Incentives/IncentivesHeader'
+import ProductShelf from 'src/components/sections/ProductShelf'
+import ProductTiles from 'src/components/sections/ProductTiles'
+import { mark } from 'src/sdk/tests/mark'
+import { ITEMS_PER_SECTION } from 'src/constants'
+import type { PageProps } from 'gatsby'
+import type { HomePageQueryQuery } from '@generated/graphql'
+import IncentivesMock from 'src/components/sections/Incentives/incentivesMock'
+import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
+import { Suspense } from 'react'
+import ProductTilesSkeleton from 'src/components/skeletons/ProductTilesSkeleton'
+
+import InputText from '../components/ui/InputText'
+import Button from '../components/ui/Button'
+import Checkbox from '../components/ui/Checkbox'
+
+import 'src/styles/pages/homepage.scss'
+import 'src/styles/pages/theming.scss'
+import 'src/styles/global/new-theme.scss'
+
+export type Props = PageProps<HomePageQueryQuery>
+
+function Page(props: Props) {
+  const {
+    data: { site },
+    location: { pathname, host },
+  } = props
+
+  const { locale } = useSession()
+
+  const title = site?.siteMetadata?.title ?? ''
+  const siteUrl = `https://${host}${pathname}`
+
+  return (
+    <div className="content">
+      {/* SEO */}
+      <GatsbySeo
+        title={title}
+        description={site?.siteMetadata?.description ?? ''}
+        titleTemplate={site?.siteMetadata?.titleTemplate ?? ''}
+        language={locale}
+        canonical={siteUrl}
+        openGraph={{
+          type: 'website',
+          url: siteUrl,
+          title: title ?? '',
+          description: site?.siteMetadata?.description ?? '',
+        }}
+      />
+      <JsonLd
+        json={{
+          '@context': 'https://schema.org',
+          '@type': 'WebSite',
+          url: siteUrl,
+          potentialAction: {
+            '@type': 'SearchAction',
+            target: `${siteUrl}/s/?q={search_term_string}`,
+            'query-input': 'required name=search_term_string',
+          },
+        }}
+      />
+      <Hero
+        title="New Products Available"
+        subtitle="At BaseStore you can shop the best tech of 2022. Enjoy and get 10% off on your first purchase."
+        linkText="See all"
+        link="/"
+        imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
+        imageAlt="Quest 2 Controller on a table"
+        colorVariant="light"
+      />
+
+      <IncentivesHeader incentives={IncentivesMock} />
+
+      <Suspense fallback={<ProductShelfSkeleton loading />}>
+        <ProductShelf
+          first={ITEMS_PER_SECTION}
+          selectedFacets={[{ key: 'productClusterIds', value: '140' }]}
+          title="Most Wanted"
+          suspenseData
+        />
+      </Suspense>
+
+      <Suspense fallback={<ProductTilesSkeleton loading />}>
+        <ProductTiles
+          first={3}
+          selectedFacets={[{ key: 'productClusterIds', value: '141' }]}
+          title="Just Arrived"
+        />
+      </Suspense>
+
+      <BannerText
+        title="Receive our news and promotions in advance. Enjoy and get 10% off on your first purchase."
+        actionPath="/"
+        actionLabel="Call to action"
+      />
+
+      <Suspense fallback={<ProductShelfSkeleton loading />}>
+        <ProductShelf
+          first={ITEMS_PER_SECTION}
+          selectedFacets={[{ key: 'productClusterIds', value: '142' }]}
+          title="Deals & Promotions"
+          suspenseData
+        />
+      </Suspense>
+
+      <section className="form section layout__section">
+        <div className="form__wrapper">
+          <div className="layout__content">
+            <article>
+              <h2>Get News and Special Offers!</h2>
+              <p>
+                Receive our news and promotions in advance. Enjoy and get 10%
+                off your first purchase. For more information click here.
+              </p>
+            </article>
+            <form>
+              <InputText
+                id="default-input-text"
+                label="Name"
+                errorMessage="Please add a valid email"
+              />
+              <InputText
+                id="default-input-phone"
+                label="Phone"
+                type="number"
+                errorMessage="Please add a valid number"
+              />
+              <InputText
+                id="default-input-email"
+                label="Email"
+                type="email"
+                errorMessage="Please add a valid email"
+              />
+              <div className="checkbox__wrapper">
+                <Checkbox id="remember" />
+                <label htmlFor="remember">Remember me</label>
+              </div>
+              <Button variant="primary">Subscribe</Button>
+            </form>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export const querySSG = graphql`
+  query ThemingQuery {
+    site {
+      siteMetadata {
+        title
+        description
+        titleTemplate
+      }
+    }
+  }
+`
+
+Page.displayName = 'Page'
+export default mark(Page)