[WIP] Filtering for tools upgrades

packages/website/ts/components/docs/feature_link.tsx

@@ -11,19 +11,18 @@ import { Heading, Paragraph } from 'ts/components/text';
 import { colors } from 'ts/style/colors';
 
 interface IFeatureLinkProps {
-    heading: string;
-    icon: string;
+    title: string;
     description?: string;
     url: string;
 }
 
 export const FeatureLink: React.FC<IFeatureLinkProps> = props => (
     <FeatureLinkWrapper to={props.url}>
-        <StyledIcon color={colors.brandLight} name={props.icon} size={60} />
+        <StyledIcon color={colors.brandLight} name="flexibleIntegration" size={60} />
         <Content>
             <div>
                 <Heading asElement="h3" size="small" marginBottom="6px">
-                    {props.heading}
+                    {props.title}
                 </Heading>
                 <Paragraph size="default" marginBottom="0">
                     {props.description}

packages/website/ts/components/docs/sidebar/filters.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import _ from 'lodash';
+
 import { FiltersGroup } from 'ts/components/docs/sidebar/filters_group';
 
 import { styled } from 'ts/style/theme';
@@ -13,10 +15,12 @@ interface IFiltersGroupProps {
     customLabel?: string;
 }
 
+const transformItems = (items: IFiltersGroupProps[]) => _.orderBy(items, 'label', 'asc');
+
 export const Filters: React.FC<IFiltersProps> = ({ filters }) => (
     <FiltersWrapper>
         {filters.map((filter: IFiltersGroupProps, index: number) => (
-            <FiltersGroup key={`filter-${index}`} {...filter} />
+            <FiltersGroup key={`filter-${index}`} transformItems={transformItems} {...filter} />
         ))}
     </FiltersWrapper>
 );

packages/website/ts/components/docs/sidebar/filters_group.tsx

@@ -11,6 +11,7 @@ interface IFilterListProps {
     customLabel?: string;
     items: IFilterProps[];
     refine: (value: string) => void;
+    transformItems: (items: IFilterProps[]) => void;
 }
 
 const FiltersList: React.FC<IFilterListProps> = ({ items, customLabel, heading, refine }) => {

packages/website/ts/pages/docs/tools.tsx

@@ -80,18 +80,3 @@ const filters = [
     { attribute: 'difficulty', heading: 'Level' },
     { attribute: 'isCommunity', heading: 'Community Maintained', customLabel: 'Include Community Maintained' },
 ];
-
-const featuredLinks = [
-    {
-        heading: '0x Code Sandbox',
-        description: 'A description could possibly go here but could be tight.',
-        icon: 'flexibleIntegration',
-        url: 'https://0x.org',
-    },
-    {
-        heading: '0x Code Sandbox',
-        description: 'A description could possibly go here but could be tight.',
-        icon: 'flexibleIntegration',
-        url: 'https://0x.org',
-    },
-];