Feature request: specify which tabs to display #122

UX-and-I · Nov 12, 2023 · e257d41 · e257d41
1 parent 5bee027
commit e257d41
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/addon/src/hooks/useTokenTabs.ts b/addon/src/hooks/useTokenTabs.ts
@@ -39,18 +39,25 @@ export function useTokenTabs(config?: Config) {
       new Set(categories.map((category) => category?.name))
     );
 
-    return categoryNames.map((name) => ({
+    let tabs = categoryNames.map((name) => ({
       label: name,
       categories: categories.filter(
         (category) => category?.name === name
       ) as Category[],
     }));
+
+    if ((config?.tabs ?? []).length !== 0) {
+      tabs = tabs.filter(tab => config.tabs.includes(tab.label))
+    }
+
+    return tabs;
   }, [
     cssCategories,
     lessCategories,
     scssCategories,
     svgIconCategories,
     imageCategories,
+    config
   ]);
 
   useEffect(() => {

diff --git a/addon/src/stories/Button.stories.ts b/addon/src/stories/Button.stories.ts
@@ -25,5 +25,14 @@ export const Primary: Story = {
   args: {
     primary: true,
     label: "Button",
-  },
+  },  
 };
+
+export const ColorsOnly: Story = {
+  args: { ...Primary.args },
+  parameters: {
+    designToken: {
+      tabs: ['Colors']
+    }
+  }
+}
diff --git a/addon/src/types/config.types.ts b/addon/src/types/config.types.ts
@@ -6,6 +6,7 @@ export interface Config {
   styleInjection?: string;
   pageSize?: number;
   presenters?: PresenterMapType;
+  tabs?: string[];
 }
 
 export interface File {