788-feat: Add filter for merch #904
Conversation
antonina220590
requested review from
andron13,
dzmitry-varabei,
SpaNb4,
Quiddlee,
ansivgit and
natanchik
as code owners
|
We have a problem when we use the search: |
| @@ -1,5 +1,5 @@ | |||
| 'use client'; | |||
| import { useState } from 'react'; | |||
| import React, { useState } from 'react'; | |||
There was a problem hiding this comment.
Why do we need to import a React here?
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| height: 5px; |
There was a problem hiding this comment.
We have Clear button here. It appears conditionally when at least one filter is active. And these styles are for button and title positioning. But you are right about height: 5px. I had layout jump issue when hovering over the 'Clear' button. I've removed that fixed height now.
| const showTagsSection = !isMobileLayout || areTagsExpandedMobile; | ||
|
|
||
| return ( | ||
| <div> |
There was a problem hiding this comment.
We don't need this div, lets delete it and use <></> for wrap components
| )} | ||
|
|
||
| {(!initialProducts || initialProducts.length === 0) && !hasActiveFilters && ( | ||
| <p>No merch found</p> |
There was a problem hiding this comment.
use the Paragraph component instead of p-tag, pls
| onToggleTagsExpansionMobile={toggleMobileFiltersExpansion} | ||
| /> | ||
| </div> | ||
| <main> |
There was a problem hiding this comment.
why main-tag here? all content between header and footer have to be in main, isn't it?
|
|
||
| return ( | ||
| <div> | ||
| <div className={cx('filter-container', { mobile: isMobileLayout })}> |
There was a problem hiding this comment.
I think we can use aside-tag here
There was a problem hiding this comment.
I initially used aside-tag. I've changed it to a div because on mobile, it's no longer a sidebar but a full-width section above the content, and looks like div semantically more appropriate in this case.
|
|
||
| width: 18px; | ||
| height: 18px; | ||
| margin-right: 10px; |
There was a problem hiding this comment.
lets delete it and add gap for .filter-tag-label
| .filter-checkbox-original:checked + .filter-checkbox-custom { | ||
| border-color: $color-yellow; | ||
| background-color: $color-yellow; | ||
|
|
||
| &::after { | ||
| display: block; | ||
| } | ||
| } |
There was a problem hiding this comment.
lets move it into .filter-checkbox-original :
&:checked + .filter-checkbox-custom {
border-color: $color-yellow;
background-color: $color-yellow;
&::after {
display: block;
}
}
What type of PR is this? (select all that apply)
Description
Add filter for merch page for desktop and mobile view
Add tests for filter component
Related Tickets & Documents
Screenshots, Recordings
Added/updated tests?
[optional] Are there any post deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?