Feat: Adds tokens to Filter

.storybook/components/SectionItem.tsx

@@ -0,0 +1,39 @@
+import React, { PropsWithChildren, ReactNode } from 'react'
+
+import ButtonLink from '../../src/components/ui/Button/ButtonLink'
+import Icon from '../../src/components/ui/Icon'
+
+type SectionItemProps = {
+  title: string
+  description: string | ReactNode
+  actionPath?: string
+}
+
+const SectionItem = ({
+  title,
+  description,
+  children,
+  actionPath,
+}: PropsWithChildren<SectionItemProps>) => {
+  return (
+    <li className="sbdocs-li">
+      <div className="sbdocs-div">{children}</div>
+      <article className="sbdocs-list-text">
+        <h3 className="sbdocs sbdocs-h3">{title}</h3>
+        <p>{description}</p>
+        {actionPath && (
+          <ButtonLink
+            variant="tertiary"
+            href={actionPath}
+            data-fs-button-size="small"
+          >
+            See more
+            <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+          </ButtonLink>
+        )}
+      </article>
+    </li>
+  )
+}
+
+export default SectionItem

.storybook/components/SectionList.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+
+type SectionListProps = {
+  grid?: 'row' | 'grid'
+}
+
+const SectionList = ({
+  children,
+  grid = 'row',
+}: PropsWithChildren<SectionListProps>) => {
+  return (
+    <section className="sbdocs-list">
+      <ul
+        className={`sbdocs-ul ${
+          grid === 'grid' ? 'sbdocs-ul-grid' : 'sbdocs-ul-row'
+        }`}
+      >
+        {children}
+      </ul>
+    </section>
+  )
+}
+
+export default SectionList

.storybook/components/index.ts

@@ -3,3 +3,5 @@ export { default as TokenRow } from './TokenRow'
 export { default as BestPractices } from './BestPractices'
 export { default as BestPracticesRule } from './BestPracticesRule'
 export { default as TokenDivider } from './TokenDivider'
+export { default as SectionList } from './SectionList'
+export { default as SectionItem } from './SectionItem'

.storybook/storybook.css

@@ -210,40 +210,30 @@ h3.sbdocs.sbdocs-h3 {
 
 .sbdocs-list .sbdocs-ul {
   display: flex;
-  flex-direction: column;
   row-gap: var(--fs-spacing-4);
+  column-gap: var(--fs-spacing-4);
   justify-content: center;
   width: 100%;
   padding: 0;
   margin-top: var(--fs-spacing-4);
 }
 
-.sbdocs-list .sbdocs-li {
-  display: flex;
-  flex-basis: 100%;
-  column-gap: var(--fs-spacing-4);
-  align-items: center;
-  justify-content: space-between;
-}
-
-.sbdocs-list .sbdocs-li > * {
-  flex-shrink: 0;
-  width: 48%;
-}
-
 .sbdocs-list .sbdocs-li > div {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
   height: 100%;
   min-height: 140px;
+  max-height: 300px;
   padding: var(--fs-spacing-3);
   background-color: var(--fs-color-neutral-1);
   border-radius: var(--fs-border-radius);
 }
 
 .sbdocs-list .sbdocs-div > img {
+  width: auto;
   max-height: 100%;
   border-radius: var(--fs-border-radius);
 }
@@ -264,6 +254,49 @@ h3.sbdocs.sbdocs-h3 {
   margin-left: calc(-1 * var(--fs-spacing-1));
 }
 
+.sbdocs-list .sbdocs-li {
+  display: flex;
+  flex-basis: 100%;
+  row-gap: var(--fs-spacing-4);
+  column-gap: var(--fs-spacing-4);
+}
+
+/* List Row */
+
+.sbdocs-ul.sbdocs-ul-row {
+  flex-direction: column;
+}
+
+.sbdocs-ul.sbdocs-ul-row .sbdocs-li {
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sbdocs-ul.sbdocs-ul-row .sbdocs-li > * {
+  flex-shrink: 0;
+  width: 48%;
+}
+
+/* List Grid */
+
+.sbdocs-ul.sbdocs-ul-grid .sbdocs-li {
+  flex-direction: column;
+  align-items: baseline;
+}
+
+.sbdocs-ul.sbdocs-ul-grid .sbdocs-list-text {
+  display: flex;
+  flex-basis: 40%;
+  flex-direction: column;
+  align-items: baseline;
+}
+
+.sbdocs-ul.sbdocs-ul-grid .sbdocs-list-text p { margin-bottom: var(--fs-spacing-3); }
+
+.sbdocs-ul.sbdocs-ul-grid .sbdocs-list-text [data-fs-button] {
+  margin-top: auto;
+}
+
 /* Callout */
 
 .sbdocs-callout {

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Applies new local tokens to `Filter` ([#139](https://github.com/vtex-sites/nextjs.store/pull/139))
 - Applies new local tokens to `ProductGrid` ([#144](https://github.com/vtex-sites/nextjs.store/pull/144))
 - Applies new local tokens to `Accordion` ([#130](https://github.com/vtex-sites/nextjs.store/pull/130))
 - Applies new local tokens to `ImageGallery` ([#143](https://github.com/vtex-sites/nextjs.store/pull/143))

cypress/integration/plp.test.js

@@ -35,7 +35,7 @@ describe('Search page Filters and Sorting options', () => {
         const value = $checkbox.attr('data-value')
         // const quantity = $checkbox.attr('data-quantity')
 
-        cy.getById('filter-modal-button-apply')
+        cy.getById('filter-slider-button-apply')
           .click()
 
           .then(() => {

src/components/regionalization/Regionalization.stories.mdx

@@ -64,7 +64,7 @@ With the Regionalization feature enabled, if a customer enters their ZIP code wh
 ## Components
 
 <section className="sbdocs-list">
-  <ul>
+  <ul className="sbdocs-ul-row">
     <li>
       <div>
         <SessionProvider>