Docs - Added figma embed links for missing pages

src/components/WheelPicker/wheelPicker.api.json

@@ -6,16 +6,58 @@
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WheelPickerScreen.tsx",
   "images": [],
   "props": [
-    {"name": "initialValue", "type": "number | string", "description": "Initial value (uncontrolled)"},
-    {"name": "items", "type": "WheelPickerItemProps[]", "description": "Data source for WheelPicker"},
-    {"name": "itemHeight", "type": "number", "description": "Height of each item in the WheelPicker", "default": "44"},
-    {"name": "numberOfVisibleRows", "type": "number", "description": "Number of rows visible", "default": "5"},
-    {"name": "activeTextColor", "type": "string", "description": "Text color for the focused row"},
-    {"name": "inactiveTextColor", "type": "string", "description": "Text color for other, non-focused rows"},
-    {"name": "textStyle", "type": "TextStyle", "description": "Row text custom style"},
-    {"name": "label", "type": "string", "description": "Additional label to render next to the items text"},
-    {"name": "labelStyle", "type": "TextStyle", "description": "Additional label's style"},
-    {"name": "labelProps", "type": "TextProps", "description": "Additional label's props"},
+    {
+      "name": "initialValue",
+      "type": "number | string",
+      "description": "Initial value (uncontrolled)"
+    },
+    {
+      "name": "items",
+      "type": "WheelPickerItemProps[]",
+      "description": "Data source for WheelPicker"
+    },
+    {
+      "name": "itemHeight",
+      "type": "number",
+      "description": "Height of each item in the WheelPicker",
+      "default": "44"
+    },
+    {
+      "name": "numberOfVisibleRows",
+      "type": "number",
+      "description": "Number of rows visible",
+      "default": "5"
+    },
+    {
+      "name": "activeTextColor",
+      "type": "string",
+      "description": "Text color for the focused row"
+    },
+    {
+      "name": "inactiveTextColor",
+      "type": "string",
+      "description": "Text color for other, non-focused rows"
+    },
+    {
+      "name": "textStyle",
+      "type": "TextStyle",
+      "description": "Row text custom style"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "Additional label to render next to the items text"
+    },
+    {
+      "name": "labelStyle",
+      "type": "TextStyle",
+      "description": "Additional label's style"
+    },
+    {
+      "name": "labelProps",
+      "type": "TextProps",
+      "description": "Additional label's props"
+    },
     {
       "name": "onChange",
       "type": "(item: string | number, index: number) => void",
@@ -33,8 +75,16 @@
       "description": "Align the content to center, right ot left",
       "default": "center"
     },
-    {"name": "separatorsStyle", "type": "ViewStyle", "description": "Extra style for the separators"},
-    {"name": "testID", "type": "string", "description": "test identifier"},
+    {
+      "name": "separatorsStyle",
+      "type": "ViewStyle",
+      "description": "Extra style for the separators"
+    },
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "test identifier"
+    },
     {
       "name": "flatListProps",
       "type": "FlatListProps",
@@ -47,5 +97,27 @@
     "  initialValue={'yes'$2}",
     "  onChange={() => console.log('changed')$3}",
     "/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "WheelPicker",
+      "description": "A customizable WheelPicker component"
+    },
+    "tabs": [
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "section",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=13-134250&embed-host=share",
+                "height": 1600
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

src/components/chipsInput/chipsInput.api.json

@@ -2,12 +2,22 @@
   "name": "ChipsInput",
   "category": "form",
   "description": "A chips input",
-  "extends": ["form/TextField"],
-  "modifiers": ["margin", "color", "typography"],
+  "extends": [
+    "form/TextField"
+  ],
+  "modifiers": [
+    "margin",
+    "color",
+    "typography"
+  ],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipsInputScreen.tsx",
   "images": [],
   "props": [
-    {"name": "chips", "type": "ChipProps[]", "description": "List of chips to render"},
+    {
+      "name": "chips",
+      "type": "ChipProps[]",
+      "description": "List of chips to render"
+    },
     {
       "name": "defaultChipProps",
       "type": "ChipProps",
@@ -18,12 +28,38 @@
       "type": "(newChips, changeReason, updatedChip) => void",
       "description": "Callback for chips change (adding or removing chip)"
     },
-    {"name": "maxChips", "type": "number", "description": "The maximum chips to allow adding"}
+    {
+      "name": "maxChips",
+      "type": "number",
+      "description": "The maximum chips to allow adding"
+    }
   ],
   "snippet": [
     "<ChipsInput",
     "  placeholder={'Placeholder'$1}",
     "  chips={[{label: 'Falcon 9'}, {label: 'Enterprise'}, {label: 'Challenger', borderRadius: 0}]$2}",
     "/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "ChipsInput",
+      "description": "A chips input"
+    },
+    "tabs": [
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "section",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=13-114418&embed-host=share",
+                "height": 1600
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

src/components/drawer/drawer.api.json

@@ -3,7 +3,9 @@
   "category": "lists",
   "description": "Drawer Component",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DrawerScreen.tsx",
-  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true"],
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true"
+  ],
   "props": [
     {
       "name": "rightItems",
@@ -15,20 +17,53 @@
       "type": "ItemProps",
       "description": "The bottom layer's item to appear when opened from the left (a single item)"
     },
-    {"name": "bounciness", "type": "number", "description": "The drawer animation bounciness"},
-    {"name": "itemsMinWidth", "type": "number", "description": "Set a different minimum width"},
+    {
+      "name": "bounciness",
+      "type": "number",
+      "description": "The drawer animation bounciness"
+    },
+    {
+      "name": "itemsMinWidth",
+      "type": "number",
+      "description": "Set a different minimum width"
+    },
     {
       "name": "itemsTintColor",
       "type": "string",
       "description": "The color for the text and icon tint of the items",
       "default": "Colors.white"
     },
-    {"name": "itemsIconSize", "type": "number", "description": "The items' icon size", "default": "24"},
-    {"name": "itemsTextStyle", "type": "TextStyle", "description": "The items' text style"},
-    {"name": "useNativeAnimations", "type": "boolean", "description": "Perform the animation in natively"},
-    {"name": "fullSwipeLeft", "type": "boolean", "description": "Whether to allow a full left swipe"},
-    {"name": "fullLeftThreshold", "type": "number", "description": "Threshold for a left full swipe (0-1)"},
-    {"name": "onFullSwipeLeft", "type": "() => void", "description": "Callback for left item full swipe"},
+    {
+      "name": "itemsIconSize",
+      "type": "number",
+      "description": "The items' icon size",
+      "default": "24"
+    },
+    {
+      "name": "itemsTextStyle",
+      "type": "TextStyle",
+      "description": "The items' text style"
+    },
+    {
+      "name": "useNativeAnimations",
+      "type": "boolean",
+      "description": "Perform the animation in natively"
+    },
+    {
+      "name": "fullSwipeLeft",
+      "type": "boolean",
+      "description": "Whether to allow a full left swipe"
+    },
+    {
+      "name": "fullLeftThreshold",
+      "type": "number",
+      "description": "Threshold for a left full swipe (0-1)"
+    },
+    {
+      "name": "onFullSwipeLeft",
+      "type": "() => void",
+      "description": "Callback for left item full swipe"
+    },
     {
       "name": "onWillFullSwipeLeft",
       "type": "() => void",
@@ -39,24 +74,82 @@
       "type": "() => {rowWidth, leftWidth, dragX, resetItemPosition}",
       "description": "Callback for left item toggle swipe"
     },
-    {"name": "fullSwipeRight", "type": "boolean", "description": "Whether to allow a full right swipe"},
-    {"name": "fullRightThreshold", "type": "number", "description": "Threshold for a right full swipe (0-1)"},
-    {"name": "onFullSwipeRight", "type": "() => void", "description": "Callback for right item full swipe"},
+    {
+      "name": "fullSwipeRight",
+      "type": "boolean",
+      "description": "Whether to allow a full right swipe"
+    },
+    {
+      "name": "fullRightThreshold",
+      "type": "number",
+      "description": "Threshold for a right full swipe (0-1)"
+    },
+    {
+      "name": "onFullSwipeRight",
+      "type": "() => void",
+      "description": "Callback for right item full swipe"
+    },
     {
       "name": "onWillFullSwipeRight",
       "type": "() => void",
       "description": "Callback for just before right item full swipe"
     },
-    {"name": "disableHaptic", "type": "boolean", "description": "Whether to disable the haptic"},
-    {"name": "onDragStart", "type": "() => any", "description": "Called when drag gesture starts"},
-    {"name": "onSwipeableWillOpen", "type": "() => void", "description": "Callback for open action"},
-    {"name": "onSwipeableWillClose", "type": "() => void", "description": "Callback for close action"},
+    {
+      "name": "disableHaptic",
+      "type": "boolean",
+      "description": "Whether to disable the haptic"
+    },
+    {
+      "name": "onDragStart",
+      "type": "() => any",
+      "description": "Called when drag gesture starts"
+    },
+    {
+      "name": "onSwipeableWillOpen",
+      "type": "() => void",
+      "description": "Callback for open action"
+    },
+    {
+      "name": "onSwipeableWillClose",
+      "type": "() => void",
+      "description": "Callback for close action"
+    },
     {
       "name": "customValue",
       "type": "any",
       "description": "Custom value of any type to pass on to the component and receive back in the action callbacks"
     },
-    {"name": "style", "type": "ViewStyle", "description": "Component's style"},
-    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
-  ]
+    {
+      "name": "style",
+      "type": "ViewStyle",
+      "description": "Component's style"
+    },
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "The test id for e2e tests"
+    }
+  ],
+  "docs": {
+    "hero": {
+      "title": "Drawer",
+      "description": "Drawer Component"
+    },
+    "tabs": [
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "section",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=5958-379805&embed-host=share",
+                "height": 1600
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }