From 98f6570bee7456a5de15361a64ffa9666c55785a Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Wed, 9 Dec 2020 00:18:28 -0500
Subject: [PATCH] docs: add filter to limit results

---
 .../stories/src/blogs/component-stats.mdx     | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/examples/stories/src/blogs/component-stats.mdx b/examples/stories/src/blogs/component-stats.mdx
index fc253966a..84b296850 100644
--- a/examples/stories/src/blogs/component-stats.mdx
+++ b/examples/stories/src/blogs/component-stats.mdx
@@ -12,28 +12,35 @@ tags:
 image: /static/components-usage-blog.jpg
 component: BlockContainer
 ---
+
 import { ComponentJSX, Playground } from '@component-controls/blocks';
-import { ComponentUsage, AttributeUsage, ComponentUsageList, AttributesUsageList } from '@component-controls/addon-stats';
+import {
+  ComponentUsage,
+  AttributeUsage,
+  ComponentUsageList,
+  AttributesUsageList,
+} from '@component-controls/addon-stats';
 import componentsUsageImg from './media/components-usage-blog.jpg';
 import { BlockContainer } from '../../../../ui/components/src/BlockContainer/BlockContainer.tsx';
 
+export const filter = ({ doc, component }) =>
+  component && doc.title.startsWith('Components');
 
 # Addon stats
 
-We just published the new jsx instrumenting feature and related cross/usage jsx components statistics for component-controls. 
+We just published the new jsx instrumenting feature and related cross/usage jsx components statistics for component-controls.
 
 This unique feature allows you to view the jsx trees of your components and answer questions such as - which of my components is the most used as a building block, and which attributes of each component are most used.
 
-
 # JSX Tree display
 
-This is displayed on the documentation page of each component, where you can see a tree of jsx nodes and the attributes used in each node. 
+This is displayed on the documentation page of each component, where you can see a tree of jsx nodes and the attributes used in each node.
 
 Here is a live example of our [BlockContainer](/api/components-blockcontainer--overview) component:
 
 <Playground>
   <ComponentJSX of={BlockContainer} />
-</Playground>  
+</Playground>
 
 # Addon-stats
 
@@ -48,7 +55,12 @@ yarn add @component-controls/addon-stats --dev
 ## Usage
 
 ```mdx:title=stats-page.mdx
-import { ComponentUsage, AttributeUsage, ComponentUsageList, AttributesUsageList } from '@component-controls/addon-stats';
+import {
+  ComponentUsage,
+  AttributeUsage,
+  ComponentUsageList,
+  AttributesUsageList,
+} from '@component-controls/addon-stats';
 
 ## Attributes usage summary
 
@@ -67,30 +79,30 @@ How many times a component is being used from another component, with a list of
 How many times an attribute is being used on a component, with a list of those components
 
 <AttributesUsageList />
-
 ```
+
 # Live examples
 
 ## Components usage summary
 
 Components usage - how many times a component is being used from another component and which of its properties are used
 
-<ComponentUsage />
+<ComponentUsage filter={filter} />
 
 ## Attributes usage summary
 
 Attributes usage - how many times an attribute is being set on a component, and the component it is being set on
 
-<AttributeUsage />
+<AttributeUsage filter={filter} />
 
 ## Components usage details
 
 How many times a component is being used from another component, with a list of the components using it
 
-<ComponentUsageList />
+<ComponentUsageList filter={filter} />
 
 ## Attributes usage details
 
 How many times an attribute is being used on a component, with a list of those components
 
-<AttributesUsageList />
+<AttributesUsageList filter={filter} />