MessageBar

[<ReactComponent>]
let MessageBarTest() =
    let intents = [ messageBar.intent.error; messageBar.intent.info; messageBar.intent.success; messageBar.intent.warning ]

    Html.div [
        prop.style [ style.width 600; style.height 200; style.overflowY.scroll ]
        prop.children [
            Fui.messageBarGroup [
                messageBarGroup.animate.both
                messageBarGroup.children [
                    yield! intents |> List.map (fun intent ->
                        Fui.messageBar [
                            messageBar.shape.square
                            messageBar.layout.multiline
                            messageBar.politeness.assertive
                            intent
                            messageBar.children [
                                Fui.messageBarBody [
                                    Fui.messageBarTitle "Descriptive title"
                                    Fui.link [
                                        link.text "Link"
                                    ]
                                    Fui.text "Message providing information to the user with actionable"
                                ]
                                Fui.messageBarActions [
                                    messageBarActions.containerAction (
                                        Fui.button [
                                            button.onClick (fun _ -> printfn "Clicked")
                                            button.appearance.transparent
                                            button.icon (
                                                Fui.icon.dismissRegular []
                                            )
                                        ]
                                    )
                                ]
                            ]
                        ]
                    )
                ]
            ]
        ]
    ]