Skip to content
This repository has been archived by the owner on Aug 1, 2022. It is now read-only.

Add metadata from Figma api to Icon search #113

Open
wants to merge 3 commits into
base: v1-docs
Choose a base branch
from
Open

Conversation

wp-aberg
Copy link

@wp-aberg wp-aberg commented Jul 18, 2022

This PR enhances search by providing metadata pulled from Figma via its API.

The page for all foundations pages conditionally fetches the api data on the icons page and provides it as a static prop that is then passed to the MDXRemote element's scope prop. This allows the IconSamples component to use the component data from that scope via a prop.

Client side fuzzy searching is handled by Fuse.js from the provided metadata allowing for expanded search terms.

Eg: a search for "social" will return the social icons based on their assigned category description in Figma
image

Where previously this would have no results
image

@vercel
Copy link

vercel bot commented Jul 18, 2022

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

Name Status Preview Updated
wpds-docs ✅ Ready (Inspect) Visit Preview Jul 26, 2022 at 1:59PM (UTC)

@clairehhelms clairehhelms requested review from clairehhelms and removed request for clairehhelms July 22, 2022 20:23
@wp-aberg wp-aberg changed the title WIP - add metadata from Figma api to Icon search Add metadata from Figma api to Icon search Jul 25, 2022
Copy link

@clairehhelms clairehhelms left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The filtering is awesome! I think for some search terms (like social) it works really well, but for other terms (for example: food, time, heart), the results aren't super helpful/specific, though. Maybe we'd get more specific results if the threshold was lowered a bit? Idk

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants