Tree

let simpleTreeTest =
    Html.div [
        Fui.tree [
            tree.defaultOpenItems ["subtree-1"]
            tree.ariaLabel "Default Layout"
            tree.children [
                Fui.treeItem [
                    treeItem.itemType.branch
                    treeItem.value "subtree-1"
                    treeItem.children [
                        Fui.treeItemLayout [
                            Fui.text "Tree using TreeItemLayout"
                        ]
                        Fui.tree [
                            Fui.treeItem [
                                treeItem.itemType.leaf
                                treeItem.children [
                                    Fui.treeItemLayout [
                                        Fui.text "level 2, item 1"
                                    ]
                                ]
                            ]
                            Fui.treeItem [
                                treeItem.itemType.leaf
                                treeItem.children [
                                    Fui.treeItemLayout [
                                        Fui.text "level 2, item 2"
                                    ]
                                ]
                            ]
                            Fui.treeItem [
                                treeItem.itemType.leaf
                                treeItem.children [
                                    Fui.treeItemLayout [
                                        Fui.text "level 2, item 3"
                                    ]
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ]

        Fui.tree [
            tree.ariaLabel "Persona Layout"
            tree.defaultOpenItems ["subtree-2"]
            tree.children [
                Fui.treeItem [
                    treeItem.value "subtree-2"
                    treeItem.itemType.branch
                    treeItem.children [
                        Fui.treeItemPersonaLayout  [
                            treeItemPersonaLayout.media (
                                Fui.avatar [
                                    avatar.image [
                                        image.alt "avatar"
                                    ]
                                ]
                            )
                            treeItemPersonaLayout.children [
                                Fui.text "Tree using TreeItemLayout"
                            ]
                        ]
                        Fui.tree [
                            Fui.treeItem [
                                treeItem.itemType.leaf
                                treeItem.children [
                                    Fui.treeItemPersonaLayout [
                                        treeItemPersonaLayout.media (
                                            Fui.avatar [
                                                avatar.image [
                                                    image.alt "avatar"
                                                ]
                                            ]
                                        )
                                        treeItemPersonaLayout.description "with description"
                                        treeItemPersonaLayout.children [
                                            Fui.text "level 2, item 1"
                                        ]
                                    ]
                                ]
                            ]
                            Fui.treeItem [
                                treeItem.itemType.leaf
                                treeItem.children [
                                    Fui.treeItemPersonaLayout [
                                        treeItemPersonaLayout.media (
                                            Fui.avatar [
                                                avatar.image [
                                                    image.alt "avatar"
                                                ]
                                                avatar.shape.square
                                            ]
                                        )
                                        treeItemPersonaLayout.description "square shape media"
                                        treeItemPersonaLayout.children [
                                            Fui.text "level 2, item 2"
                                        ]
                                    ]
                                ]
                            ]
                            Fui.treeItem [
                                treeItem.itemType.leaf
                                treeItem.children [
                                    Fui.treeItemPersonaLayout [
                                        treeItemPersonaLayout.description "without media"
                                        treeItemPersonaLayout.children [
                                            Fui.text "level 2, item 3"
                                        ]
                                    ]
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ]
    ]