feat(component-index): 1555-component-index-filter-ui-functionality

[andreancardona]

Closes #1555

Updates

This is the final step for a soft release on the component filter. This PR should have the following functionality:

• Filter by different categories

• Filter and sort different categories

• Match the following filter

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

undefined – ./

🔍 Inspect: https://vercel.com/carbon-design-system/carbondesignsystem/epilspahd
✅ Preview: https://carbondesignsy-git-fork-andreancardona-1555-component-in-f09851.carbon-design-system.vercel.app

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

carbon-website – ./

🔍 Inspect: In Progress
✅ Preview: In Progress

carbondesignsystem – ./

🔍 Inspect: In Progress
✅ Preview: In Progress

[aagonzales]

Its looks good, its needs a few tweaks though.

1. The left page alignment is off.
   As-is:
   
   To-be:
   The type should be inset and the search and tiles should be the things that hang. This is similar to the alignment like on the Icon library page.
   

2. The border between cards shouldn't just be a space. It actually needs to be a color (gray20, $ui-03). The resource cards on the website will have this same treatment
   

3. The bottom of the cards are breaking at around 1060px screen size. Can we just drop the maintainer tag when they start getting close? Is that possible or do wee need to figure out a wrap of some sort?
   

4. It looks like there's a little extra space around the maintainer tags and is causing it items on the bottom to sit a little high. The framework and maintainer tag are also misaligne.
   

5. In mobile the cards should be flush to edge. Looks like its got about 32px on both sides right now.

6. The notification at the top of the page should actually go below the intro text to be consistent with how it place it else where.

[joshblack]

You should be able to pull this into the outer scope and provide the selected options 👀 Maybe something like:

function filterItems(items, filters) {
  // ...
}

And then later on it becomes:

results = (
  <ComponentIndexList
    items={
      filterItems(searchOptions.slice(), selected)
        .sort(sortBy[activeSortOption])
    }
  />
);

filterItems could look like:

function filterItems(items, filters) {
  return items.filter(item => {
    // If there are no filters, return true
    if (filters.length === 0) {
      return true;
    }

    const { framework, designAsset, availability, maintainer } = item;
    const fields = [framework, designAsset, availability, maintainer];
    return filters.every(filter => {
      return fields.includes(filter);
    });
  });
}

In it, the idea is that you go through every item to be displayed and grab the relevant fields to be filtered by. The AND operation is the filters.every bit, in other words for every filter we need to see if the item has the corresponding field available.

[aagonzales]

Good work, looks awesome!

[joshblack]

@andreancardona just saw the review re-request, still had those comments from above but beside that should be good 👍

[joshblack]

Side-note, do we want to add it to the side nav with this PR? @aagonzales @andreancardona ?

[vpicone]

The search filter styles are different than we have on the icon search page. @aagonzales should we try and normalize them? Our search pattern shows dropdowns inline.

[aagonzales]

@vpicone Its purposefully different. The icons dropdown is a sub category of search. In the index sort is a different function and didn't make sense to be inline with search. It also throws off page alignment. The design team talked it through awhile ago and Mike was also involved.

We could normalize the border bottom however. And make it the lighter gray in the index.

[vpicone]

@aagonzales okay thanks for clarifying, let me know if we'd rather have the index use the darker border.

[jillianhowarth]

Just one small change but otherwise it looks awesome, @andreancardona!! 🎉

[vpicone]

Not sure about the border, but we can always tweak that later.

Looks good to me once search and dropdown are the same height!