bulma.R: Bulma CSS Framework for R

bulma_demo_components <- function() {

  bulma_demo_nav(
    size = "small",
    "Breadcrumb" = bulma_demo_components_breadcrumb(),
    "Card"       = bulma_demo_components_card(),
    "Dropdown"   = bulma_demo_components_dropdown(),
    "Menu"       = bulma_demo_components_menu(),
    "Message"    = bulma_demo_components_message(),
    "Modal"      = bulma_demo_components_modal(),
    "Navbar"     = bulma_demo_components_navbar(),
    "Pagination" = bulma_demo_components_pagination(),
    "Panel"      = bulma_demo_components_panel(),
    "Tabs"       = bulma_demo_components_tabs()
  )

}

bulma_demo_components_breadcrumb <- function() {
  bulma_container(
    bulma_title("Breadcrumb"),
    bulma_subtitle("For improved navigation experience"),
    bulma_demo_side(
      bulma_breadcrumb(
        bulma_breadcrumb_item("Bulma"),
        bulma_breadcrumb_item("Documentation"),
        bulma_breadcrumb_item("Components"),
        bulma_breadcrumb_item("Breadcrumb", active = TRUE)
      )
    ),
    bulma_demo_side(
      bulma_breadcrumb(
        separator = "arrow",
        size = "large",
        bulma_breadcrumb_item("Bulma"),
        bulma_breadcrumb_item("Documentation"),
        bulma_breadcrumb_item("Components"),
        bulma_breadcrumb_item("Breadcrumb", active = TRUE)
      )
    )
  )
}

bulma_demo_components_card <- function() {
  bulma_container(
    bulma_title("Card"),
    bulma_subtitle("Flexible and composable component"),
    bulma_demo_side(
      bulma_card(
        bulma_card_image(
          ratio = "2by1",
          src = "https://via.placeholder.com/600x300"
        ),
        bulma_card_content(
          bulma_media(
            bulma_media_left(
              bulma_image(
                square = 48L,
                src = "https://via.placeholder.com/96"
              )
            ),
            bulma_media_content(
              bulma_title("Juan de la Cruz", size = 4L),
              bulma_subtitle("@juandelacruz", size = 6L)
            )
          ),
          bulma_content(
            stri_rand_lipsum(1)
          )
        )
      )
    ),
    bulma_demo_side(
      bulma_card(
        bulma_card_header(
          bulma_card_header_icon("fas fa-info"),
          bulma_card_header_title("Information")
        ),
        bulma_card_content(
          "Card information body"
        ),
        bulma_card_footer(
          bulma_card_footer_item("Save"),
          bulma_card_footer_item("Edit"),
          bulma_card_footer_item("Delete")
        )
      )
    ),
    bulma_demo_side(
      bulma_card(
        bulma_card_content(
          bulma_title(
            "There are two hard things in computer science: cache invalidation,
            naming things, and off-by-one errors."
          ),
          bulma_subtitle("- Jeff Atwood")
        ),
        bulma_card_footer(
          bulma_card_footer_item(
            bulma_icon("fab fa-facebook fa-2x", size = "large")
          ),
          bulma_card_footer_item(
            bulma_icon("fab fa-twitter fa-2x", size = "large")
          ),
          bulma_card_footer_item(
            bulma_icon("fab fa-pinterest fa-2x", size = "large")
          )
        )
      )
    )
  )
}

bulma_demo_components_dropdown <- function() {
  bulma_container(
    bulma_title("Dropdown"),
    bulma_subtitle("An interactive dropdown menu for discoverable content"),
    bulma_demo_side(
      bulma_dropdown(
        active = TRUE,
        bulma_dropdown_trigger(
          bulma_button(
            tags$span("Dropdown Trigger"),
            bulma_icon("fas fa-angle-down", size = "small")
          )
        ),
        bulma_dropdown_menu(
          bulma_dropdown_content(
            bulma_dropdown_item("Dropdown Item 1"),
            bulma_dropdown_item("Dropdown Item 2"),
            bulma_dropdown_item("Active Dropdown Item", active = TRUE),
            bulma_dropdown_divider(),
            bulma_dropdown_item("Divided dropdown item"),
            bulma_dropdown_divider(),
            bulma_dropdown_item(
              link = FALSE,
              bulma_content(
                "Just some random text content",
                tags$strong("Some bolded ones")
              )
            )
          )
        )
      )
    ),
    bulma_demo_side(
      bulma_dropdown(
        hoverable = TRUE,
        align = "right",
        dropup = TRUE,
        bulma_dropdown_trigger(
          bulma_button(
            tags$span("Hoverable Dropdown Trigger"),
            bulma_icon("fas fa-angle-down", size = "small")
          )
        ),
        bulma_dropdown_menu(
          bulma_dropdown_content(
            bulma_dropdown_item("Dropdown Item 1"),
            bulma_dropdown_item("Active Dropdown Item", active = TRUE)
          )
        )
      )
    )
  )
}

bulma_demo_components_menu <- function() {
  bulma_container(
    bulma_title("Menu"),
    bulma_subtitle("A simple menu, for any type of vertical navigation"),
    bulma_demo_side(
      bulma_menu(
        bulma_menu_label("General"),
        bulma_menu_list(
          bulma_menu_list_item("Dashboard"),
          bulma_menu_list_item("Customers")
        ),
        bulma_menu_label("Administration"),
        bulma_menu_list(
          bulma_menu_list_item("Team Settings"),
          bulma_menu_list_item(
            "Manage Your Team",
            active = TRUE,
            menu = bulma_menu_list_item_menu(
              bulma_menu_list_item("Members"),
              bulma_menu_list_item("Plugins"),
              bulma_menu_list_item("Add a member")
            )
          )
        )
      )
    )
  )
}

bulma_demo_components_message <- function() {
  bulma_container(
    bulma_title("Message"),
    bulma_subtitle("Colored message blocks, to emphasize part of your page"),
    bulma_demo_side(
      bulma_message(
        bulma_message_header(
          tags$p("Hello World!"),
          bulma_button_delete()
        ),
        bulma_message_body(
          stri_rand_lipsum(1)
        )
      )
    ),
    bulma_demo_side(
      bulma_message(
        color = "info",
        size = "small",
        bulma_message_body(
          stri_rand_lipsum(1)
        )
      )
    )
  )
}

bulma_demo_components_modal <- function() {
  bulma_container(
    bulma_title("Modal"),
    bulma_subtitle("A classic modal overlay, in which you can include any
                   content you want"),
    bulma_demo_modal(
      bulma_modal(
        bulma_modal_background(),
        bulma_modal_content(
          bulma_card(
            bulma_card_content(
              stri_rand_lipsum(1)
            )
          )
        ),
        bulma_modal_close(size = "large")
      )
    ),
    bulma_demo_modal(
      bulma_modal(
        bulma_modal_background(),
        bulma_modal_content(
          bulma_image(
            ratio = "4by3",
            src = "https://via.placeholder.com/1280x960"
          )
        ),
        bulma_modal_close(size = "large")
      )
    ),
    bulma_demo_modal(
      bulma_modal(
        bulma_modal_background(),
        bulma_modal_card(
          bulma_modal_card_head(
            bulma_modal_card_title("Modal Card")
          ),
          bulma_modal_card_body(
            stri_rand_lipsum(1)
          ),
          bulma_modal_card_foot(
            bulma_button(color = "success", "Save Changes"),
            bulma_button(color = "danger", "Cancel")
          )
        ),
        bulma_modal_close(size = "large")
      )
    )
  )
}

bulma_demo_components_navbar <- function() {
  bulma_container(
    bulma_title("Navbar"),
    bulma_subtitle("A responsive horizontal navbar that can support images,
                   links, buttons, and dropdowns"),
    bulma_demo_down(
      bulma_navbar(
        bulma_navbar_brand(
          bulma_navbar_item("Bulma for R")
        ),
        bulma_navbar_menu(
          bulma_navbar_start(
            bulma_navbar_item("Home"),
            bulma_navbar_item("Documentation"),
            bulma_navbar_item(
              dropdown = TRUE,
              dropdown_hoverable = TRUE,
              bulma_navbar_link("More"),
              bulma_navbar_dropdown(
                bulma_navbar_item("About"),
                bulma_navbar_item("Jobs"),
                bulma_navbar_divider(),
                bulma_navbar_item("Contact")
              )
            ),
            bulma_navbar_item(
              dropdown = TRUE,
              dropdown_hoverable = TRUE,
              bulma_navbar_link("No more arrow", arrow = FALSE),
              bulma_navbar_dropdown(
                bulma_navbar_item("About more"),
                bulma_navbar_item("Jobs more"),
                bulma_navbar_item("Contact more")
              )
            ),
            bulma_navbar_item(
              bulma_form_field(
                grouped = TRUE,
                bulma_form_control(
                  tag = tags$p,
                  bulma_form_button(
                    name = "tweet",
                    bulma_icon("fab fa-twitter"),
                    span("Tweet!")
                  )
                ),
                bulma_form_control(
                  tag = tags$p,
                  bulma_form_button(
                    name = "download",
                    color = "primary",
                    bulma_icon("fas fa-download"),
                    span("Download!")
                  )
                )
              )
            )
          ),
          bulma_navbar_end(
            bulma_navbar_item(
              bulma_buttons(
                bulma_button(color = "primary", "Sign Up"),
                bulma_button("Log In")
              )
            )
          )
        )
      )
    ),
    bulma_demo_side(
      bulma_navbar(
        bulma_navbar_brand(
          bulma_navbar_burger(style = css(display = "block")),
          bulma_navbar_burger(style = css(display = "block"),
                              class = "is-active")
        )
      )
    ),
    bulma_demo_side(
      bulma_navbar(
        fixed = "bottom",
        bulma_navbar_brand(
          bulma_navbar_burger(style = css(display = "block")),
          bulma_navbar_burger(style = css(display = "block"),
                              class = "is-active")
        )
      )
    )
  )
}

bulma_demo_components_pagination <- function() {
  bulma_container(
    bulma_title("Pagination"),
    bulma_subtitle("A responsive, usable, and flexible pagination"),
    bulma_demo_down(
      bulma_pagination(
        bulma_pagination_list(
          bulma_pagination_link("1"),
          bulma_pagination_ellipsis(),
          bulma_pagination_link("45"),
          bulma_pagination_link("46", current = TRUE),
          bulma_pagination_link("47"),
          bulma_pagination_ellipsis(),
          bulma_pagination_link("80")
        ),
        bulma_pagination_previous("Previous Page"),
        bulma_pagination_next("Next Page")
      )
    ),
    bulma_demo_down(
      bulma_pagination(
        rounded = TRUE,
        bulma_pagination_list(
          bulma_pagination_link("1"),
          bulma_pagination_ellipsis(),
          bulma_pagination_link("45"),
          bulma_pagination_link("46", current = TRUE),
          bulma_pagination_link("47"),
          bulma_pagination_ellipsis(),
          bulma_pagination_link("80")
        ),
        bulma_pagination_previous("Previous Page"),
        bulma_pagination_next("Next Page")
      )
    ),
    bulma_demo_down(
      bulma_pagination(
        size = "large",
        bulma_pagination_list(
          bulma_pagination_link("1"),
          bulma_pagination_ellipsis(),
          bulma_pagination_link("45"),
          bulma_pagination_link("46", current = TRUE),
          bulma_pagination_link("47"),
          bulma_pagination_ellipsis(),
          bulma_pagination_link("80")
        ),
        bulma_pagination_previous("Previous Page"),
        bulma_pagination_next("Next Page")
      )
    )
  )
}

bulma_demo_components_panel <- function() {
  bulma_container(
    bulma_title("Panel"),
    bulma_subtitle("A composable panel, for compact controls"),
    bulma_demo_side(
      bulma_panel(
        color = "warning",
        bulma_panel_heading("Panel Heading"),
        bulma_panel_block(
          bulma_form_control(
            icons = "left",
            bulma_form_input(name = "search",
                             placeholder = "Search"),
            bulma_form_icon("fas fa-search")
          )
        ),
        bulma_panel_tabs(
          bulma_panel_tabs_item("All", active = TRUE),
          bulma_panel_tabs_item("Public"),
          bulma_panel_tabs_item("Private")
        ),
        bulma_panel_block(
          active = TRUE,
          bulma_panel_icon("fas fa-book"),
          "Bulma"
        ),
        bulma_panel_block(
          bulma_panel_icon("fas fa-code-branch"),
          "Bootstrap"
        ),
        bulma_panel_block(
          bulma_panel_icon("fas fa-inbox"),
          "Semantic UI"
        ),
        bulma_panel_block(
          bulma_form_checkbox(name = "remember",
                              "Remember this repo")
        ),
        bulma_panel_block(
          bulma_form_button("Reset all filters",
                            color = "primary",
                            full_width = TRUE,
                            outlined = TRUE)
        )
      )
    )
  )
}

bulma_demo_components_tabs <- function() {
  bulma_container(
    bulma_title("Tabs"),
    bulma_subtitle("Simple responsive horizontal navigation tabs, with
                   different styles"),
    bulma_demo_side(
      bulma_tabs(
        bulma_tabs_item(active = TRUE, "Pictures"),
        bulma_tabs_item("Music"),
        bulma_tabs_item("Videos"),
        bulma_tabs_item("Documents")
      )
    ),
    bulma_demo_side(
      bulma_tabs(
        align = "centered",
        size = "medium",
        bulma_tabs_item(active = TRUE, bulma_icon("fas fa-image"), "Pictures"),
        bulma_tabs_item(bulma_icon("fas fa-music"), "Music"),
        bulma_tabs_item(bulma_icon("fas fa-film"), "Videos"),
        bulma_tabs_item(bulma_icon("fas fa-file-alt"), "Documents")
      )
    ),
    bulma_demo_side(
      bulma_tabs(
        boxed = TRUE,
        align = "right",
        bulma_tabs_item(active = TRUE, bulma_icon("fas fa-image"), "Pictures"),
        bulma_tabs_item(bulma_icon("fas fa-music"), "Music"),
        bulma_tabs_item(bulma_icon("fas fa-film"), "Videos"),
        bulma_tabs_item(bulma_icon("fas fa-file-alt"), "Documents")
      )
    ),
    bulma_demo_side(
      bulma_tabs(
        toggle = TRUE,
        toggle_rounded = TRUE,
        align = "right",
        bulma_tabs_item(active = TRUE, bulma_icon("fas fa-image"), "Pictures"),
        bulma_tabs_item(bulma_icon("fas fa-music"), "Music"),
        bulma_tabs_item(bulma_icon("fas fa-film"), "Videos"),
        bulma_tabs_item(bulma_icon("fas fa-file-alt"), "Documents")
      )
    ),
    bulma_demo_side(
      bulma_tabs(
        boxed = TRUE,
        full_width = TRUE,
        bulma_tabs_item(active = TRUE, bulma_icon("fas fa-image"), "Pictures"),
        bulma_tabs_item(bulma_icon("fas fa-music"), "Music"),
        bulma_tabs_item(bulma_icon("fas fa-film"), "Videos"),
        bulma_tabs_item(bulma_icon("fas fa-file-alt"), "Documents")
      )
    )
  )
}