Add bulma_sidenote()

NAMESPACE

 export(bulma_responsive)
 export(bulma_responsive_alignment)
 export(bulma_responsive_size)
+export(bulma_sidenote)
 export(bulma_typography)
 export(fa_icon)
 importFrom(glue,glue)

R/components.R

 #' @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.
+#' @param column_class Additional parameters passed to the `class` argument
+#'   of the `column` div. Only used if `width` is specified.
 #' @family Bulma components
 #' @references <https://bulma.io/documentation/components/message/>
 #' @export
   color = NULL,
   size = c("normal", "small", "medium", "large"),
   width = NULL,
-  centered = !is.null(width)
+  centered = !is.null(width),
+  column_class = NULL
 ) {
   size <- match.arg(size)
   if (size == "normal") size <- NULL
     tag_div(class = "message-body", ...)
   )
   if (!is.null(width)) {
-    ret <- bulma_column(ret, size = width)
+    ret <- bulma_column(ret, size = width, class = column_class)
     if (centered) ret <- bulma_columns(ret, centered = TRUE)
   }
   ret
 }
+
+#' Bulma Message as a Sidenote
+#'
+#' Creates a message block as a sidenote, pulled either left or right.
+#'
+#' @param side Should the sidenote be pulled to the left or the right?
+#' @inheritDotParams bulma_message
+#' @examples
+#' bulma_sidenote("A sidenote!", side = "left", color = "info")
+#' bulma_sidenote("A sidenote!", side = "right", color = "info",
+#'                header = "Title")
+#' @family Bulma components
+#' @seealso [bulma_message()]
+#' @export
+bulma_sidenote <- function(
+  ...,
+  side = c("right", "left"),
+  header = NULL,
+  color = NULL,
+  size = c("small", "normal", "medium", "large"),
+  width = "one-third",
+  delete = FALSE,
+  column_class = NULL
+) {
+  side <- match.arg(side)
+  column_class <- c_str("sidenote",
+                     "is-full-mobile",
+                     c_prefix(side, "is-pulled-"),
+                     "is-block is-float",
+                     column_class)
+  bulma_message(...,
+    header = header, color = color, size = match.arg(size), width = width,
+    centered = FALSE, delete = delete, column_class = column_class
+  )
+}

inst/bulma/bulma.html

   top: 2em;
   position: -webkit-sticky;
 }
+.sidenote.is-pulled-right {
+  margin-left: 2em;
+}
+.sidenote.is-pulled-left {
+  margin-right: 2em;
+}
+@media screen and (max-width: 1024px), projection and (max-width: 1024px), tv and (max-width: 1024px) {
+.sidenote {
+  margin: 0;
+}
+}
 </style>
 $for(css)$
   <link rel="stylesheet" href="$css$" />

man/bulma_message.Rd

 \usage{
 bulma_message(..., header = NULL, delete = FALSE, color = NULL,
   size = c("normal", "small", "medium", "large"), width = NULL,
-  centered = !is.null(width))
+  centered = !is.null(width), column_class = NULL)
 }
 \arguments{
 \item{...}{Message body}
 \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.}
+
+\item{column_class}{Additional parameters passed to the \code{class} argument
+of the \code{column} div. Only used if \code{width} is specified.}
 }
 \description{
 Creates a message box with optional title bar.
 \references{
 \url{https://bulma.io/documentation/components/message/}
 }
+\seealso{
+Other Bulma components: \code{\link{bulma_sidenote}}
+}
 \concept{Bulma components}

man/bulma_sidenote.Rd

+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/components.R
+\name{bulma_sidenote}
+\alias{bulma_sidenote}
+\title{Bulma Message as a Sidenote}
+\usage{
+bulma_sidenote(..., side = c("right", "left"), header = NULL,
+  color = NULL, size = c("small", "normal", "medium", "large"),
+  width = "one-third", delete = FALSE, column_class = NULL)
+}
+\arguments{
+\item{...}{Arguments passed on to \code{bulma_message}
+\describe{
+  \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.}
+  \item{column_class}{Additional parameters passed to the \code{class} argument
+of the \code{column} div. Only used if \code{width} is specified.}
+}}
+
+\item{side}{Should the sidenote be pulled to the left or the right?}
+}
+\description{
+Creates a message block as a sidenote, pulled either left or right.
+}
+\examples{
+bulma_sidenote("A sidenote!", side = "left", color = "info")
+bulma_sidenote("A sidenote!", side = "right", color = "info",
+               header = "Title")
+}
+\seealso{
+\code{\link[=bulma_message]{bulma_message()}}
+
+Other Bulma components: \code{\link{bulma_message}}
+}
+\concept{Bulma components}

tests/manual/example/bulma-test.Rmd

 knitr::kable(head(iris))
 ```
 
+## Sidenotes
+
+```{r}
+bulma::bulma_sidenote(
+  paste("Does your lorem ipsum text long for something a little meatier?", 
+        "Give our generator a try… it’s tasty!"), 
+  side = "left", color = "info")
+```
+
+Drumstick flank swine fatback. Alcatra brisket pork chop picanha flank. Tenderloin pork loin t-bone tail ham short loin tri-tip turducken landjaeger chicken boudin corned beef turkey picanha biltong. Hamburger pastrami kevin pork belly tongue. Jowl meatball beef tail bresaola drumstick. Cow alcatra jowl pork chicken swine. Ball tip jerky pork loin cow flank.
+
+Bacon ipsum dolor amet salami ball tip meatball drumstick burgdoggen. Capicola pork chop tri-tip alcatra shoulder biltong ham. Shankle bresaola pork belly tri-tip pork loin, picanha rump ribeye beef ribs pork tongue hamburger. Filet mignon capicola pancetta jowl alcatra pastrami ribeye brisket rump chicken pork chop biltong ham drumstick. Pork chop doner shankle pastrami, ham hock ham cupim cow tenderloin pig biltong. Ground round beef ribs kielbasa ball tip tongue. Pastrami beef ribs buffalo brisket, tongue kevin turkey boudin shank fatback meatball andouille ribeye kielbasa.
+
+```{r, echo=FALSE}
+bulma::bulma_sidenote(
+  paste("Does your lorem ipsum text long for something a little meatier?", 
+        "Give our generator a try… it’s tasty!"), 
+  side = "right", color = "danger", size = "medium", header = "Bacon Ipsum")
+```
+
+T-bone venison landjaeger burgdoggen, pork loin tenderloin buffalo doner shoulder fatback ribeye pig rump leberkas. Jowl andouille bacon chuck pig. Hamburger jerky andouille, boudin brisket shankle kielbasa pig strip steak burgdoggen ham hock. Shankle shoulder tenderloin pancetta pork loin, picanha meatloaf boudin salami doner sirloin ribeye pork chop pig ham. Meatloaf meatball turkey, ball tip ham drumstick short ribs pancetta pork beef short loin rump sausage. Frankfurter ground round spare ribs buffalo sirloin swine tenderloin brisket.
+
 ## Footnotes
 
 We can also write footnotes[^1].