linting error / filtered variations by type

gsoft-inc · Mar 1, 2024 · 5783414 · 5783414
1 parent 770dddf
commit 5783414
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json
@@ -14,7 +14,7 @@
       "Card": true,
       "Table": true,
       "TypographyTable": true,
-      "TypographyTableVariation": true,
+      "TypographyVariantTable": true,
       "Tabs": true,
       "TableSection": true,
       "Switcher": true,

diff --git a/apps/docs/components/ui/table/TypographyVariantTable.tsx b/apps/docs/components/ui/table/TypographyVariantTable.tsx
@@ -8,18 +8,24 @@ import "./table.css";
 
 interface TypographyVariantTableProps {
     data: Record<string, { name: string; value: string }[]>;
+    type: string;
 }
 
-const TypographyVariantTable = ({ data }: TypographyVariantTableProps) => {
+const TypographyVariantTable = ({ type, data }: TypographyVariantTableProps) => {
     const tokenData = data["fontWeight"];
+    console.log(type);
 
-    const filteredData: Array<{ name: string; value: string }> = tokenData.filter(item =>
+    const filteredDataByType: Array<{ name: string; value: string }> = tokenData.filter(item =>
+        item.name.includes(type)
+    );
+
+    const filteredDataByWeightVariation: Array<{ name: string; value: string }> = filteredDataByType.filter(item =>
         item.name.includes("bold") ||
         item.name.includes("semibold") ||
         item.name.includes("medium")
     );
 
-    const listItems = filteredData.map(item => {
+    const listItems = filteredDataByWeightVariation.map(item => {
         const fontWeight = item.value;
 
         return (

diff --git a/apps/docs/content/tokens/semantic/typography.mdx b/apps/docs/content/tokens/semantic/typography.mdx
@@ -31,6 +31,10 @@ Headings are used to create a hierarchy of content. They are used to help users
 
 <TypographyTable type="heading" data={tokens.semantic} />
 
+### Variations
+
+<TypographyVariantTable type="heading" data={tokens.semantic} />
+
 ## Overline
 
 Used to introduce a headline.
@@ -45,12 +49,13 @@ Body text is used to communicate the main content of a page.
 
 <TypographyTable type="body" data={tokens.semantic} />
 
+### Variations
+
+<TypographyVariantTable type="body" data={tokens.semantic} />
+
 ## Accent
 
 Accent text is used to highlight important information on a page.
 
 <TypographyTable type="accent" data={tokens.semantic} />
 
-## Font Weight Variations
-
-<TypographyVariantTable data={tokens.semantic} />