Add bulma_message()

NAMESPACE

@@ -12,6 +12,7 @@ export(bulma_level)
 export(bulma_level_item)
 export(bulma_level_item_header)
 export(bulma_level_items_header)
+export(bulma_message)
 export(bulma_modifier)
 export(bulma_responsive)
 export(bulma_responsive_alignment)

R/components.R

@@ -0,0 +1,58 @@
+
+# Bulma Messages ----------------------------------------------------------
+# https://bulma.io/documentation/components/message/
+
+#' Bulma Message
+#'
+#' Creates a message box with optional title bar.
+#'
+#' @param ... Message body
+#' @param header Message header
+#' @param delete Should delete button be displayed in upper right corner?
+#' @param size Text size, one of `"small"`, `"normal"` (default),
+#'  `"medium"`, or `"large"`.
+#' @param width Width of the message. If `NULL` then width is 100% of container.
+#'   If specified, the message is wrapped in a `column` div (see [bulma_column()]
+#'   for more information and for valid column sizes).
+#' @param centered Should the message container be centered horizontally?
+#'   Requires `width` to be specified. If `TRUE`, the message container is
+#'   inside a `column` div inside a `columns` div.
+#' @family Bulma components
+#' @references <https://bulma.io/documentation/components/message/>
+#' @export
+bulma_message <- function(
+  ...,
+  header = NULL,
+  delete = FALSE,
+  color = NULL,
+  size = c("normal", "small", "medium", "large"),
+  width = NULL,
+  centered = !is.null(width)
+) {
+  size <- match.arg(size)
+  if (size == "normal") size <- NULL
+  article <- tag_function("article")
+  color <- validate_color(color, "color", "is-")
+  width <- validate_col_size(width, "width")
+  if (is.null(header) && delete) header <- tag_p()
+  if (!is.null(header) && !(is_htmlish(header) | is.character(header))) {
+    rlang::abort("`header` must be character or HTML.")
+  }
+  ret <- article(
+    class = c_str("message", c_prefix(size, "is-"), c_prefix(color)),
+    if (!is.null(header)) tag_div(
+      class = "message-header",
+      header,
+      if (delete) tag_function("button")(
+        class = c_str("delete", c_prefix(size, "is-")),
+        "aria-label" = "delete"
+      )
+    ),
+    tag_div(class = "message-body", ...)
+  )
+  if (!is.null(width)) {
+    ret <- bulma_column(ret, size = width)
+    if (centered) ret <- bulma_columns(ret, centered = TRUE)
+  }
+  ret
+}

man/bulma_message.Rd

@@ -0,0 +1,35 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/components.R
+\name{bulma_message}
+\alias{bulma_message}
+\title{Bulma Message}
+\usage{
+bulma_message(..., header = NULL, delete = FALSE, color = NULL,
+  size = c("normal", "small", "medium", "large"), width = NULL,
+  centered = !is.null(width))
+}
+\arguments{
+\item{...}{Message body}
+
+\item{header}{Message header}
+
+\item{delete}{Should delete button be displayed in upper right corner?}
+
+\item{size}{Text size, one of \code{"small"}, \code{"normal"} (default),
+\code{"medium"}, or \code{"large"}.}
+
+\item{width}{Width of the message. If \code{NULL} then width is 100% of container.
+If specified, the message is wrapped in a \code{column} div (see \code{\link[=bulma_column]{bulma_column()}}
+for more information and for valid column sizes).}
+
+\item{centered}{Should the message container be centered horizontally?
+Requires \code{width} to be specified. If \code{TRUE}, the message container is
+inside a \code{column} div inside a \code{columns} div.}
+}
+\description{
+Creates a message box with optional title bar.
+}
+\references{
+\url{https://bulma.io/documentation/components/message/}
+}
+\concept{Bulma components}

tests/manual/components/bulma-test-components.Rmd

@@ -0,0 +1,97 @@
+---
+title: "Bulma Components"
+subtitle: "A Bulma Test Document"
+author: 
+  - name: Garrick Aden-Buie
+    url: https://garrickadenbuie.com
+    extra: 
+      - "First Affiliation"
+      - "@tweeter345"
+date: '`r strftime(Sys.time(), "%A, %B %e, %Y")`'
+bulma:
+  hero: ["info"]
+  hero_body: "has-text-left"
+  hero_button: "outlined"
+  hero_links:
+    - name: Github
+      url: https://github.com/gadenbuie
+      icon: '`r bulma::fa_icon("github")`'
+    - name: Home
+      url: https://garrickadenbuie.com
+      icon: '`r bulma::fa_icon("home")`'
+output: bulma::bulma_document
+---
+
+```{r setup, include=FALSE}
+knitr::opts_chunk$set(echo = TRUE)
+library(bulma)
+```
+
+## Messages
+
+### message full with title and delete button
+
+```{r}
+bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+              header = "Hello World", delete = TRUE)
+
+bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+              header = "Hello World", delete = TRUE, width = "two-thirds", centered = TRUE)
+
+bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+              header = "Hello World", delete = TRUE, width = "half", centered = FALSE)
+```
+
+### message full with title no delete button
+
+```{r}
+bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+              header = "Hello World")
+```
+
+### message full no title with delete button
+
+```{r}
+bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.", delete = TRUE)
+```
+
+<article class="message">
+<div class="message-header">
+<p></p>
+<button class="delete" aria-label="delete"></button>
+</div>
+<div class="message-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+</article>
+
+### message errors with bad header
+
+```{r, error=TRUE}
+bulma_message("Test", header = TRUE)
+```
+
+### message with colors
+
+```{r}
+m <- lapply(bulma_constants("colors")[1:10],  function(color) {
+  bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                header = paste("Color:", color), color = color)
+})
+htmltools::tagList(m)
+```
+
+### message body only
+
+```{r, results="asis"}
+bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
+```
+
+### message with size
+
+```{r, results="asis"}
+m <- lapply(c("small", "medium", "large"), function (size) {
+  bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                header = paste("Size:", size), size = size)
+})
+htmltools::tagList(m)
+```
+

tests/testthat/test-components.R

@@ -0,0 +1,116 @@
+context("test-components")
+
+
+# Messages ----------------------------------------------------------------
+
+msg_with_title_delete <- '
+<article class="message">
+  <div class="message-header">
+    Hello World
+    <button class="delete" aria-label="delete"></button>
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </div>
+</article>'
+
+msg_with_title_delete_color <- '
+<article class="message is-{color}">
+  <div class="message-header">
+    Colors Test
+    <button class="delete" aria-label="delete"></button>
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </div>
+</article>'
+
+msg_body_only <- '
+<article class="message">
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </div>
+</article>'
+
+msg_with_size <- '
+<article class="message {size}">
+  <div class="message-header">
+    Size Test
+    <button class="delete {size}" aria-label="delete"></button>
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </div>
+</article>'
+
+test_that("message full with title and delete button", {
+  expect_html_chr(
+    bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                  header = "Hello World", delete = TRUE),
+    msg_with_title_delete
+  )
+})
+
+test_that("message full with title no delete button", {
+  expect_html_chr(
+    bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.", delete = TRUE),
+    sub("Hello World", "<p></p>", msg_with_title_delete, perl = TRUE)
+  )
+})
+
+test_that("message errors with bad header", {
+  expect_error(bulma_message("Test", header = TRUE))
+})
+
+test_that("message with colors", {
+  for (color in bulma_constants("colors")[1:10]) {
+    expect_html_chr(
+      bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                    header = "Colors Test", delete = TRUE, color = color),
+      glue::glue(msg_with_title_delete_color)
+    )
+  }
+})
+
+test_that("message body only", {
+  expect_html_chr(
+    bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
+    msg_body_only
+  )
+})
+
+test_that("message with size", {
+  for (size in c("small", "medium", "large")) {
+    expect_html_chr(
+      bulma_message("Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                    header = "Size Test", delete = TRUE, size = size),
+      glue::glue(msg_with_size, size = paste0("is-", size))
+    )
+  }
+})
+
+test_that("message with maximum width", {
+  # Centered by default
+  expect_html_chr(
+    bulma_message("Lorem ipsum dolor sit amet.", width = "half"),
+    '<div class="columns is-tablet is-multiline is-centered">
+    <div class="column is-half">
+    <article class="message">
+    <div class="message-body">Lorem ipsum dolor sit amet.</div>
+    </article>
+    </div>
+    </div>'
+  )
+
+  # Not centered
+  expect_html_chr(
+    bulma_message("Lorem ipsum dolor sit amet.", width = "half", centered = FALSE),
+    '<div class="column is-half">
+    <article class="message">
+    <div class="message-body">Lorem ipsum dolor sit amet.</div>
+    </article>
+    </div>'
+  )
+})
+
+