Share docs between compound component of the same parent

docuilib/src/components/ComponentPage.tsx

@@ -73,12 +73,10 @@ export default function ComponentPage({component}) {
     const hero = component.docs?.hero;
 
     if (hero) {
-      // TODO: align hero's image to page title
-      // const name = component.category === 'incubator' ? `Incubator.${component.name}` : component.name;
       const section = {
-        // title: name,
         layout: 'horizontal',
         ...hero,
+        title: component.name,
         type: 'hero'
       };
 

scripts/docs/buildDocsCommon.js

@@ -49,9 +49,13 @@ function resetDocsDir() {
   fs.mkdirSync(COMPONENTS_DOCS_DIR, {recursive: true});
 }
 
+function isCompoundComponent(componentName) {
+  return componentName.includes('.');
+}
+
 function processComponents(components) {
   /** Break into compound components (TabController.TabPage) and parent components (TabController) */
-  const compoundComponents = components.filter(c => c.name.includes('.'));
+  const compoundComponents = components.filter(c => isCompoundComponent(c.name));
   const parentComponents = _.flow(components => _.map(components, c => c.name.split('.')[0]),
     _.uniq)(compoundComponents);
 

src/components/tabController/apis/tabBar.api.json

@@ -105,9 +105,7 @@
       "description": "The component test id"
     }
   ],
-  "snippet": [
-    "<TabController.TabBar activeBackgroundColor={Colors.blue30$1}/>"
-  ],
+  "snippet": ["<TabController.TabBar activeBackgroundColor={Colors.blue30$1}/>"],
   "docs": {
     "hero": {
       "title": "TabController.TabBar",
@@ -159,10 +157,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Counter Badge",

src/components/tabController/apis/tabController.api.json

@@ -36,5 +36,180 @@
     "    <TabController.TabPage index={2} lazy>{renderThirdPage()}</TabController.TabPage>",
     "  </View>",
     "</TabController>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "TabController",
+      "description": "Tabs organize and navigate between related content groups at the same hierarchy level, helping users easily find different information types.\n\nA Tab Bar can start with 2 tabs and accommodate more, with horizontal scrolling if the tabs exceed the screen width.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_preview.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Tabs Layout",
+                "description": "Fixed tabs usually have 2-3 tabs that fit on the screen without scrolling.\nWhen the total size of the tabs exceeds the screen width (usually more than 3 tabs), a horizontal scroll is implemented.\n\nWhen scrolling through tabs, add an overlay to indicate more tabs are available off-screen. The overlay should disappear once the first or last tab is reached. It should be the top layer, covering all tab elements, including the indicator and badge.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_behaviour.png"
+                  }
+                ]
+              }
+            ],
+            "title": "Behaviour",
+            "description": "TabBar behavior and style are identical in both iOS and Android. ",
+            "layout": "horizontal"
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "",
+                "description": "**Inactive Tab**\nText: BodySmall $textDefault\nBackground: $backgroundElevated  \n\n**Active Tab**\nText: BodySmallBold $textPrimary\nBackground: $backgroundElevated\nIndicator: $outlinePrimary  \n\n**Shadow**\nsh10\n\n**Dark Skin**\nText: BodySmall, System White\nBackground: System Grey10\nDivider: System Grey20",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_styling.png"
+                  }
+                ]
+              }
+            ],
+            "layout": "horizontal",
+            "title": "Styling"
+          },
+          {
+            "type": "table",
+            "columns": ["Property", "Component"],
+            "items": [
+              {
+                "title": "Counter Badge",
+                "description": "A Counter Badge can be added to indicate the amount of activity within the tab.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_accessories_badge.png"
+                  }
+                ]
+              },
+              {
+                "title": "Pimple Badge ",
+                "description": "A Pimple Badge can be added to a tab to draw the user's attention to activity within it.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_accessories_pimple.png"
+                  }
+                ]
+              },
+              {
+                "title": "Action Icon",
+                "description": "Admins can add and edit tabs using an action button that can be added after the last tab.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_accessories_action.png"
+                  }
+                ]
+              }
+            ],
+            "title": "Accessories"
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Indicator",
+                "description": "Indicator width: cell width minus S5 padding.\nIndicator height: 2px\nIndicator coloring: $outlinePrimary",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_spec1.png"
+                  }
+                ]
+              },
+              {
+                "title": "Badge Component",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_spec2.png"
+                  }
+                ]
+              }
+            ],
+            "title": "Spec",
+            "layout": "horizontal"
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "TabBar width",
+                "description": "The TabBar width is full width but the tabs container is aligned with the content.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_tablet1.png"
+                  }
+                ]
+              },
+              {
+                "title": "Scrollable TabBar",
+                "description": "If the sum of elements is larger than screen width (usually when there’s more than 6 tabs), indicator gets the label Width.\n\nTab cell minimum width: 70px\nLabel minimum padding: S7 (28px)",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_tablet2.png"
+                  }
+                ]
+              },
+              {
+                "title": "Fixed TabBar",
+                "description": "Up to 6 tabs can typically fit within the screen width without scrolling.\nThe indicator gets the cell width with 20px padding",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_overview_tablet3.png"
+                  }
+                ]
+              }
+            ],
+            "layout": "vertical",
+            "title": "Tablet"
+          }
+        ]
+      },
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Tab Content",
+                "description": "Tab text is stretched to fill the tab without line breaks or ellipses.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_UX_dosdonts.png"
+                  }
+                ]
+              }
+            ],
+            "title": "Do’s & Don'ts"
+          },
+          {
+            "type": "section",
+            "title": "Optical Spacing",
+            "description": "To create visual alignment across tabs with different content, create an optical space of 28pt from the TabBar to the content. Actual component spacing is rounded to the nearest spacing preset. For example, the screen heading is placed at 28pt distance from the TabBar, but the actual text container is placed at 20px distance (S5).",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/TabBar/tabBar_UX_opticalSpacing.png"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }