|
4 | 4 | "description": "Hint component for displaying a tooltip over wrapped component", |
5 | 5 | "note": "You can either wrap a component or pass a specific targetFrame", |
6 | 6 | "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/HintsScreen.tsx", |
7 | | - "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true"], |
| 7 | + "images": [ |
| 8 | + "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true" |
| 9 | + ], |
8 | 10 | "props": [ |
9 | | - {"name": "visible", "type": "boolean", "description": "Control the visibility of the hint"}, |
10 | | - {"name": "color", "type": "string", "description": "The hint background color"}, |
11 | | - {"name": "message", "type": "string | ReactElement", "description": "The hint message"}, |
12 | | - {"name": "messageStyle", "type": "TextStyle", "description": "The hint message custom style"}, |
13 | | - {"name": "icon", "type": "ImageSourcePropType", "description": "Icon to show next to the hint's message"}, |
14 | | - {"name": "iconStyle", "type": "ImageStyle", "description": "The icon's style"}, |
| 11 | + { |
| 12 | + "name": "visible", |
| 13 | + "type": "boolean", |
| 14 | + "description": "Control the visibility of the hint" |
| 15 | + }, |
| 16 | + { |
| 17 | + "name": "color", |
| 18 | + "type": "string", |
| 19 | + "description": "The hint background color" |
| 20 | + }, |
| 21 | + { |
| 22 | + "name": "message", |
| 23 | + "type": "string | ReactElement", |
| 24 | + "description": "The hint message" |
| 25 | + }, |
| 26 | + { |
| 27 | + "name": "messageStyle", |
| 28 | + "type": "TextStyle", |
| 29 | + "description": "The hint message custom style" |
| 30 | + }, |
| 31 | + { |
| 32 | + "name": "icon", |
| 33 | + "type": "ImageSourcePropType", |
| 34 | + "description": "Icon to show next to the hint's message" |
| 35 | + }, |
| 36 | + { |
| 37 | + "name": "iconStyle", |
| 38 | + "type": "ImageStyle", |
| 39 | + "description": "The icon's style" |
| 40 | + }, |
15 | 41 | { |
16 | 42 | "name": "position", |
17 | 43 | "type": "TOP | BOTTOM", |
|
23 | 49 | "type": "{x?: number, y?: number, width?: number, height?: number}", |
24 | 50 | "description": "Provide custom target position instead of wrapping a child" |
25 | 51 | }, |
26 | | - {"name": "useModal", "type": "boolean", "description": "Open the hint using a Modal component"}, |
27 | | - {"name": "useSideTip", "type": "boolean", "description": "Show side tips instead of the middle tip"}, |
28 | | - {"name": "borderRadius", "type": "number", "description": "The hint's border radius"}, |
29 | | - {"name": "edgeMargins", "type": "number", "description": "Hint margins from screen edges"}, |
30 | | - {"name": "offset", "type": "number", "description": "Hint offset from target"}, |
31 | | - {"name": "onPress", "type": "() => void", "description": "Callback for Hint press"}, |
| 52 | + { |
| 53 | + "name": "useModal", |
| 54 | + "type": "boolean", |
| 55 | + "description": "Open the hint using a Modal component" |
| 56 | + }, |
| 57 | + { |
| 58 | + "name": "useSideTip", |
| 59 | + "type": "boolean", |
| 60 | + "description": "Show side tips instead of the middle tip" |
| 61 | + }, |
| 62 | + { |
| 63 | + "name": "borderRadius", |
| 64 | + "type": "number", |
| 65 | + "description": "The hint's border radius" |
| 66 | + }, |
| 67 | + { |
| 68 | + "name": "edgeMargins", |
| 69 | + "type": "number", |
| 70 | + "description": "Hint margins from screen edges" |
| 71 | + }, |
| 72 | + { |
| 73 | + "name": "offset", |
| 74 | + "type": "number", |
| 75 | + "description": "Hint offset from target" |
| 76 | + }, |
| 77 | + { |
| 78 | + "name": "onPress", |
| 79 | + "type": "() => void", |
| 80 | + "description": "Callback for Hint press" |
| 81 | + }, |
32 | 82 | { |
33 | 83 | "name": "onBackgroundPress", |
34 | 84 | "type": "(event: GestureResponderEvent) => void", |
|
39 | 89 | "type": "string", |
40 | 90 | "description": "Color for background overlay (require onBackgroundPress)" |
41 | 91 | }, |
42 | | - {"name": "containerWidth", "type": "number", "description": "The hint container width"}, |
| 92 | + { |
| 93 | + "name": "containerWidth", |
| 94 | + "type": "number", |
| 95 | + "description": "The hint container width" |
| 96 | + }, |
43 | 97 | { |
44 | 98 | "name": "customContent", |
45 | 99 | "type": "JSX.Element", |
46 | 100 | "description": "Custom content element to render inside the hint container" |
47 | 101 | }, |
48 | | - {"name": "removePaddings", "type": "boolean", "description": "Remove all hint's paddings"}, |
49 | | - {"name": "enableShadow", "type": "boolean", "description": "Enable shadow (for hint with white background only)"}, |
50 | | - {"name": "testID", "type": "string", "description": "The hint's test identifier"}, |
51 | | - {"name": "style", "type": "ViewStyle", "description": "Additional styling"} |
| 102 | + { |
| 103 | + "name": "removePaddings", |
| 104 | + "type": "boolean", |
| 105 | + "description": "Remove all hint's paddings" |
| 106 | + }, |
| 107 | + { |
| 108 | + "name": "enableShadow", |
| 109 | + "type": "boolean", |
| 110 | + "description": "Enable shadow (for hint with white background only)" |
| 111 | + }, |
| 112 | + { |
| 113 | + "name": "testID", |
| 114 | + "type": "string", |
| 115 | + "description": "The hint's test identifier" |
| 116 | + }, |
| 117 | + { |
| 118 | + "name": "style", |
| 119 | + "type": "ViewStyle", |
| 120 | + "description": "Additional styling" |
| 121 | + } |
52 | 122 | ], |
53 | 123 | "snippet": [ |
54 | 124 | "<Hint visible={isVisible$1} message={'Message goes here'$2} color={Colors.red30$3} onBackgroundPress={() => setVisible(false)$4}>", |
55 | 125 | " <Text>Text to hint</Text>", |
56 | 126 | "</Hint>" |
57 | | - ] |
| 127 | + ], |
| 128 | + "docs": { |
| 129 | + "hero": { |
| 130 | + "title": "Hint", |
| 131 | + "description": "A hint is used to draw the user’s attention to a specific part of the interface, providing information or encouraging them to take action.\nHints are typically triggered automatically at the right moment in the user journey but can also appear in response to user actions.\n\nThe hint should disappear when the user taps anywhere on the screen.", |
| 132 | + "type": "hero", |
| 133 | + "layout": "horizontal", |
| 134 | + "content": [ |
| 135 | + { |
| 136 | + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_cover.png" |
| 137 | + } |
| 138 | + ] |
| 139 | + }, |
| 140 | + "tabs": [ |
| 141 | + { |
| 142 | + "title": "Overview", |
| 143 | + "sections": [ |
| 144 | + { |
| 145 | + "type": "section", |
| 146 | + "title": "Usage Examples", |
| 147 | + "content": [ |
| 148 | + { |
| 149 | + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_usage.png" |
| 150 | + } |
| 151 | + ] |
| 152 | + }, |
| 153 | + { |
| 154 | + "type": "table", |
| 155 | + "columns": [ |
| 156 | + "Alignment", |
| 157 | + "Top", |
| 158 | + "Bottom" |
| 159 | + ], |
| 160 | + "items": [], |
| 161 | + "title": "Alignment", |
| 162 | + "description": "The Hint component supports different alignments, so it works well with elements anywhere on the screen." |
| 163 | + }, |
| 164 | + { |
| 165 | + "type": "table", |
| 166 | + "columns": [ |
| 167 | + "Prop", |
| 168 | + "Preview" |
| 169 | + ], |
| 170 | + "items": [], |
| 171 | + "title": "Accessories" |
| 172 | + }, |
| 173 | + { |
| 174 | + "type": "section", |
| 175 | + "title": "Position" |
| 176 | + }, |
| 177 | + { |
| 178 | + "type": "section", |
| 179 | + "title": "Spec" |
| 180 | + } |
| 181 | + ] |
| 182 | + } |
| 183 | + ] |
| 184 | + } |
58 | 185 | } |
0 commit comments