Feat: Add css modules, tokens and refactor Search components

[ArthurTriis1]

Signed-off-by: Arthur Andrade [email protected]

What's the purpose of this pull request?

How does it work?

This PR renames the components from Search feature to follow the Pattern Search[ComponentName], and relocates the components to group in search folder, as that's components share the same states provided for useInputSearch and belong to the same feature.

The refactored components are:

Before	After
src/components/common/SearchInput	src/components/search/SearchInput
src/components/search/History	src/components/search/SearchHistory
src/components/search/Suggestions	src/components/search/SearchDropdown
src/components/search/SuggestionProductCard	src/components/search/SearchProductCard
src/components/ui/Search/Suggestions	src/components/search/SearchSuggestions
src/components/search/TopSuggestions/index.ts	src/components/search/SearchTop/index.ts

Also, this PR adds tokens to SearchHistory, but when it was done, it was perceived that the SearchHistory style is shared with SearchTop, SearchDropdown and SearchSuggestions, so file src/components/search/search-common.module.scss was created to be added to these 4 components.

To finish, storybook documentation was created for all search components, with an Overview documentation for the feature using API mocks add-on.

How to test it?

To test, you can check the feature Search in storybook documentation and check the style and behaviours of the feature in preview.

Checklist

You may erase this after checking them all ;)

Changelog

• Added an entry in the CHANGELOG.md at the beginning of its due section. The latest version should comes first.
• Added the PR number with the PR link at the entry in the CHANGELOG.md. E.g., New items in the pull_request_template.md (#4)

PR Description

• Added a label according to the PR goal - Breaking change, Enhancement, Bug or Chore.
• Added the component, hook, or pathname in-between backticks (``) - If applicable. E.g., ComponentName component.
• Identified the function or parameter in the PR - If applicable. E.g., useWindowDimensions hook.

Documentation

• PR description
• Added to/Updated the Storybook - if applicable.
• For documentation changes, ping @ carolinamenezes, @ PedroAntunesCosta or @ Mariana-Caetano to review and update.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
gatsby-store-storybook	✅ Ready (Inspect)	Visit Preview	Jul 21, 2022 at 5:31PM (UTC)

[vtex-sites]

Preview is ready

This pull request generated a Preview

👀   Preview: https://preview-150--gatsby.preview.vtex.app
🔬   Go deeper by inspecting the Build Logs
📝   based on commit 85406bb

[hellofanny]

Approving because it's has the same changes made on vtex-sites/nextjs.store#173 👍

[vtex-sites]

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

📝 Based on commit 85406bb

Lighthouse Report by page
📎   /
📎   /apple-magic-mouse/p
📎   /office

[renatamottam]

LGTM!