{
  "name": "Tests",
  "category": "dev",
  "description": "This is just a tests page for the new docs component page",
  "extends": [
    "Text",
    "View"
  ],
  "extendsLink": [
    "https://reactnative.dev/docs/text",
    "https://reactnative.dev/docs/view"
  ],
  "modifiers": [
    "margins",
    "color",
    "typography"
  ],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextScreen.tsx",
  "images": [
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Modifiers.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Highlights.png?raw=true",
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Transformation.png?raw=true"
  ],
  "props": [
    {
      "name": "color",
      "type": "string",
      "description": "Color of the text",
      "default": "Black",
      "required": "true",
      "platform": "iOS",
      "note": "This is an important information"
    },
    {
      "name": "center",
      "type": "boolean",
      "description": "Whether to center the text (using textAlign)"
    },
    {
      "name": "uppercase",
      "type": "boolean",
      "description": "Whether to change the text to uppercase"
    },
    {
      "name": "underline",
      "type": "boolean",
      "description": "Whether to add an underline"
    },
    {
      "name": "highlightString",
      "type": "HighlightString | HighlightString[]",
      "description": "Substring to highlight. Can be a simple string or a HighlightStringProps object, or an array of the above"
    },
    {
      "name": "highlightStyle",
      "type": "TextStyle",
      "description": "Custom highlight style for highlight string"
    },
    {
      "name": "recorderTag",
      "type": "'mask' | 'unmask'",
      "description": "Recorder Tag"
    },
    {
      "name": "animated",
      "type": "boolean",
      "description": "Use Animated.Text as a container"
    }
  ],
  "snippet": [
    "<Text text30$1>Text goes here$2</Text>"
  ],
  "docs": {
    "hero": {
      "description": "A wrapper for Text component with extra functionality like modifiers support",
      "content": [
        {
          "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true",
          "background": "pink"
        }
      ],
      "title": "Tests",
      "type": "hero",
      "layout": "horizontal"
    },
    "tabs": [
      {
        "title": "Overview",
        "sections": [
          {
            "type": "section",
            "title": "Rendering uilib component",
            "description": "Examples of using the Uilib web components",
            "content": [
              {
                "component": "Text",
                "props": {
                  "children": "This is a Text"
                },
                "background": "yellow"
              },
              {
                "component": "Button",
                "props": {
                  "label": "This is a Button"
                }
              },
              {
                "component": "Chip",
                "props": {
                  "label": "This is a Chip"
                }
              }
            ]
          },
          {
            "type": "table",
            "title": "Table",
            "description": "Examples of using the Text component",
            "name": "Table Name",
            "columns": [
              "Item",
              "Content[0]",
              "Content[1]"
            ],
            "items": [
              {
                "title": "Item #1",
                "description": "Item #1 Subtitle",
                "content": [
                  {
                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true",
                    "background": "red"
                  },
                  {
                    "height": 170,
                    "value": "https://embed.figma.com/design/BDoSosBJDaE14hmGwD0sCY/Re-Docs?node-id=433-15903&embed-host=share"
                  }
                ]
              },
              {
                "title": "Item #2",
                "description": "Item #2 Subtitle",
                "content": [
                  {
                    "snippet": "<Text text30>This is a code snippet</Text>"
                  }
                ]
              },
              {
                "title": "Item #3",
                "description": "Item #3 Subtitle",
                "content": [
                  {
                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
                  },
                  {
                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
                  }
                ]
              }
            ]
          },
          {
            "type": "table",
            "title": "",
            "description": "",
            "columns": [
              "Item",
              "Content[0]",
              "Content[1]"
            ],
            "items": [
              {
                "title": "Item #1",
                "description": "Item #1 Subtitle",
                "content": [
                  {
                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
                  },
                  {
                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
                  }
                ]
              },
              {
                "title": "Item #2",
                "description": "Item #2 Subtitle",
                "content": [
                  {
                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "title": "Guidelines",
        "sections": [
          {
            "type": "section",
            "title": "Section",
            "description": "Examples of using the Text component",
            "content": [
              {
                "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-veryWide.png?raw=true"
              }
            ]
          },
          {
            "type": "section",
            "layout": "horizontal",
            "title": "Horizontal Section",
            "description": "Examples of using the Text component",
            "content": [
              {
                "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
              },
              {
                "value": "https://embed.figma.com/design/BDoSosBJDaE14hmGwD0sCY/Re-Docs?node-id=433-15903&embed-host=share"
              }
            ]
          },
          {
            "type": "list",
            "title": "List",
            "description": "Examples of using the Text component",
            "items": [
              {
                "title": "Item #1",
                "description": "This is item #1",
                "content": [
                  {
                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-veryWide.png?raw=true"
                  }
                ]
              },
              {
                "title": "Item #2",
                "description": "This is item #2",
                "content": [
                  {
                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-veryWide.png?raw=true"
                  }
                ]
              }
            ]
          },
          {
            "type": "list",
            "layout": "horizontal",
            "title": "List Horizontal Items",
            "description": "Examples of using the Text component",
            "items": [
              {
                "title": "Item #1",
                "description": "This is item #1",
                "content": [
                  {
                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
                  }
                ]
              },
              {
                "title": "Item #2",
                "description": "This is item #2",
                "content": [
                  {
                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
                  }
                ]
              }
            ]
          },
          {
            "type": "section",
            "title": "Markdown support",
            "description": "markdown:##Title\n\nThis is a markdown content\n\n With a list:\n- item 1\n- item 2"
          },
          {
            "type": "section",
            "title": "HTML support",
            "description": "html:<h2>Title</h2><p>This is a html content</p><ul><li>item 1</li><li>item 2</li></ul>"
          }
        ]
      }
    ]
  }
}