Package 'shinyGovstyle'

Description

This function inserts a accordion

Usage

accordion(inputId, titles, descriptions)

Arguments

Value

an accordion html shiny object

Examples

if (interactive()) {

  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
      inputId = "banner", type = "beta", 'This is a new service'),
    shinyGovstyle::gov_layout(size = "two-thirds",
    accordion(
      "acc1",
      c("Writing well for the web",
        "Writing well for specialists",
        "Know your audience",
        "How people read"
       ),
      c("This is the content for Writing well for the web.",
        "This is the content for Writing well for specialists.",
        "This is the content for Know your audience.",
        "This is the content for How people read."
       ))),

    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}

  shinyApp(ui = ui, server = server)
}

Description

This function adds a back link to the page

Usage

backlink_Input(inputId, label = "Back")

Arguments

Value

a backlink html shiny object

Examples

if (interactive()) {
  ui <- fluidPage(
    header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shiny::navlistPanel(
      "",
      id="nav",
      widths = c(2, 10),
      well = FALSE,

      #Create first panel
      shiny::tabPanel(
        "Select Types",
        value = "panel1",
        gov_layout(size = "two-thirds",
          backlink_Input("link1"),
          shiny::tags$br(), shiny::tags$br()
       )),
       shiny::tabPanel(
         "Tab2",
         value = "panel2")),
   shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {
    #Slightly confused in that it goes forward rather than back, but shows how
    #to use
    observeEvent(input$link1,{
      updateTabsetPanel(session, "nav", selected = "panel2")
    })
  }
  shinyApp(ui = ui, server = server)
}

Description

A single column data frame, listing out known examples of bad link text that check for in the 'external_link()' function.

Usage

bad_link_text

Format

## 'bad_link_text' A data frame with 53 rows and 1 columns:

bad_link_text

Lower cased examples of non-descriptive link text

Details

We've started curating this list so we can create automated checks to help all link text to be as descriptive as possible in line with [WCAG 2.2 success criteria 2.4.4: Link Purpose (In Context)]( https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context).

Source

Curated by [email protected]

Description

This function create a detail component that you can click for further details.

Usage

banner(inputId, type, label)

Arguments

Value

a banner html shiny object

Examples

if (interactive()) {

  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
      inputId = "banner", type = "Beta", 'This is a new service')
  )

  server <- function(input, output, session) {}

  shinyApp(ui = ui, server = server)
}

Description

This function create a gov style button

Usage

button_Input(inputId, label, type = "default")

Arguments

Value

a html button shiny object

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "two-thirds",
      shinyGovstyle::button_Input(
        inputId = "btn1",
        label = "Continue",
        type = "default")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function inserts a checkbox group

Usage

checkbox_Input(
  inputId,
  cb_labels,
  checkboxIds,
  label,
  hint_label = NULL,
  small = FALSE,
  error = FALSE,
  error_message = NULL
)

Arguments

Value

a checkbox html shiny object

Examples

if (interactive()) {

  ui <- fluidPage(
    # Required for error handling function
    shinyjs::useShinyjs(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
      inputId = "banner", type = "beta", 'This is a new service'),
    shinyGovstyle::gov_layout(size = "two-thirds",
      # Simple checkbox
      shinyGovstyle::checkbox_Input(
        inputId = "check1",
        cb_labels = c("Option 1", "Option 2", "Option 3"),
        checkboxIds = c("op1", "op2", "op3"),
        label = "Choice option"),
       # Error checkbox
      shinyGovstyle::checkbox_Input(
        inputId = "check2",
        cb_labels = c("Option 1", "Option 2", "Option 3"),
        checkboxIds = c("op1", "op2", "op3"),
        label = "Choice option",
        hint_label = "Select the best fit",
        error = TRUE,
        error_message = "Select one"),
      # Button to trigger error
      shinyGovstyle::button_Input(inputId = "submit", label = "Submit")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {
    #'Trigger error on blank submit of eventId2
    observeEvent(input$submit, {
      if (is.null(input$check2)){
        shinyGovstyle::error_on(inputId = "check2")
      } else {
        shinyGovstyle::error_off(inputId = "check2")
      }
    })
  }

  shinyApp(ui = ui, server = server)
}

Description

This function creates an action link to nav between tabs and optionally link to subcontents headers.

Usage

contents_link(link_text, input_id, subcontents_text_list, subcontents_id_list)

Arguments

Value

an action button html shiny object

Examples

if (interactive()) {
     ui <- shiny::fluidPage(
     title="ShinyGovstyle",
       cookieBanner("Run Example"),
       header("MOJ", "ShinyGovstyle Example",
              logo="shinyGovstyle/images/moj_logo-1.png", logo_width = 66),
       banner(
         "banner",
         "Beta",
         'This is a new service \u002D your <a class="govuk-link" href="#">
             feedback</a> will help us to improve it.'),

       #Need this to make the error and word count work
       shinyjs::useShinyjs(),

       #Add a message to show users how to see this code
       shiny::tags$br(),
       shiny::markdown(
         "Run ```View(run_example)``` in console to see the code for this app"),


       gov_row(
         # Nav columns
         shiny::column(

           width = 3,
           id = "nav", # DO NOT REMOVE ID

           # Contents box
           shiny::tags$div(
             id = "govuk-contents-box", #DO NOT REMOVE ID
             class = "govuk-contents-box",  #DO NOT REMOVE CLASS

             shiny::tags$h2("Contents"),

             # Text types tab
             contents_link(
               "Text Types",
               "text_types_button",
               subcontents_text_list = c("date_Input",
               "text_Input",
               "text_area_Input",
               "button_Input"),
               subcontents_id_list = c(NA, NA, NA, "button_input_text_types")
             ),

             # Tables tabs and accordions tab
             contents_link(
               "Tables, tabs and accordions",
               "tables_tabs_and_accordions_button",
               subcontents_text_list = c("govTable", "govTabs", "accordions", "button_Input"),
               subcontents_id_list = c(NA, NA, NA, "button_input_tables_tabs_accordions")
             ),


             contents_link(
               "Cookies",
               "cookies_button"),

           )
         ),


         shiny::column( width = 9,

                        id = "main_col", # DO NOT REMOVE ID

                        #Set up a nav panel so everything not on single page
                        shiny::tabsetPanel(
                          type = "hidden",
                          id = "tab-container", # DO NOT REMOVE ID

                          shiny::tabPanel(
                            "Text Types",
                            value = "text_types",
                            gov_layout(
                              size = "two-thirds",
                              backlink_Input("back1"),
                              heading_text("Page 2", size = "l"),
                              label_hint("label2", "These are some examples of the types of user
                        text inputs that you can use"),
                              heading_text("date_Input", size = "s"),
                              date_Input(
                                inputId = "date1",
                                label = "What is your date of birth?",
                                hint_label = "For example, 31 3 1980"),
                              heading_text("text_Input", size = "s"),
                              text_Input(inputId = "txt1", label = "Event name"),
                              heading_text("text_area_Input", size = "s"),
                              text_area_Input(
                                inputId = "text_area1",
                                label = "Can you provide more detail?",
                                hint_label = "Do not include personal or financial information,
               like your National Insurance number or credit card details."),
                              text_area_Input(
                                inputId = "text_area2",
                                label = "How are you today?",
                                hint_label = "Leave blank to trigger error",
                                error = T,
                                error_message = "Please do not leave blank",
                                word_limit = 300),
                              heading_text(
                              "button_Input", size = "s",
                              id = "button_input_text_types"),
                              button_Input("btn2", "Go to next page"),
                              button_Input("btn3", "Check for errors", type = "warning")
                            )
                          ),

                          shiny::tabPanel(
                            "Tables, tabs and accordions",
                            value = "tables_tabs_and_accordions",
                            gov_layout(
                            size = "two-thirds",
                              backlink_Input("back2"),
                              heading_text("Page 3", size = "l"),
                              label_hint("label3", "These are some examples of using tabs and
                            tables"),
                              heading_text("govTable", size = "s"),
                              heading_text("govTabs", size = "s"),
                              heading_text("accordions", size = "s"),
                              shinyGovstyle::  accordion(
                                "acc1",
                                c("Writing well for the web",
                                  "Writing well for specialists",
                                  "Know your audience",
                                  "How people read"
                                ),
                                c("This is the content for Writing well for the web.",
                                  "This is the content for Writing well for specialists.",
                                  "This is the content for Know your audience.",
                                  "This is the content for How people read."
                                )),

                              heading_text(
                              "button_Input", size = "s",
                               id = "button_input_tables_tabs_accordions"),
                              button_Input("btn4", "Go to next page"),
                            )
                          ),


                          #####################Create cookie panel################################
                          shiny::tabPanel(
                            "Cookies",
                            value = "panel-cookies",
                            gov_layout(
                              size = "two-thirds",
                              heading_text("Cookie page", size = "l"),
                              label_hint("label-cookies", "This an example cookie page that could be
                            expanded")
                            )
                          )))


       ), #end of gov row

       footer(TRUE)


     ) #end of fluid page

     server <- function(input, output, session) {


       # Tab nav
       shiny::observeEvent(input$back2, {
         shiny::updateTabsetPanel(session, "tab-container", selected = "text_types")
       })

       shiny::observeEvent(input$tables_tabs_and_accordions_button, {
         shiny::updateTabsetPanel(session, "tab-container", selected = "tables_tabs_and_accordions")
       })

       shiny::observeEvent(input$cookies_button, {
         shiny::updateTabsetPanel(session, "tab-container", selected = "panel-cookies")
       })

     }

  shiny::shinyApp(ui = ui, server = server)
}

Description

This function creates a cookie banner. You need to have shinyjs::useShinyjs() enabled to work. All the ids are pre set. See example for how to structure.

Usage

cookieBanner(service_name)

Arguments

Value

a cookie banner html shiny object.

Examples

if (interactive()) {
ui <- fluidPage(
  shinyGovstyle::header(
    main_text = "Example",
    secondary_text = "User Examples",
    logo="shinyGovstyle/images/moj_logo.png"),
  #Needs shinyjs to work
  shinyjs::useShinyjs(),
  shinyGovstyle::cookieBanner("The best thing"),
  shinyGovstyle::gov_layout(size = "two-thirds"),
  shinyGovstyle::footer(full = TRUE)
)

server <- function(input, output, session) {

  #Need these set of observeEvent to create a path through the cookie banner
  observeEvent(input$cookieAccept, {
    shinyjs::show(id = "cookieAcceptDiv")
    shinyjs::hide(id = "cookieMain")
  })

  observeEvent(input$cookieReject, {
    shinyjs::show(id = "cookieRejectDiv")
    shinyjs::hide(id = "cookieMain")
  })

  observeEvent(input$hideAccept, {
    shinyjs::toggle(id = "cookieDiv")
  })

  observeEvent(input$hideReject, {
    shinyjs::toggle(id = "cookieDiv")
  })

  observeEvent(input$cookieLink, {
    #Need to link here to where further info is located.  You can use
    #updateTabsetPanel to have a cookie page for instance
  })

}
shinyApp(ui = ui, server = server)
}

Description

This function create a date input that follows GDS component

Usage

date_Input(
  inputId,
  label,
  hint_label = NULL,
  error = FALSE,
  error_message = NULL,
  day = NULL,
  month = NULL,
  year = NULL
)

Arguments

Value

a data input html shiny object

Examples

if (interactive()) {

  ui <- fluidPage(
    # Required for error handling function.
    shinyjs::useShinyjs(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
      inputId = "banner", type = "beta", 'This is a new service'),
    shinyGovstyle::gov_layout(size = "two-thirds",
       # Simple date input
      shinyGovstyle::date_Input(
        inputId = "dob_input",
        label = "Please enter your birthday"),
       # Error date input
       shinyGovstyle::date_Input(
         inputId = "dob_input2",
         label = "Please enter your birthday",
         hint_label = "For example, 12 11 2007",
         error = TRUE),
       # Button to trigger error
       shinyGovstyle::button_Input(inputId = "submit", label = "Submit")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {
    #'Trigger error on blank submit of dob_input2
    observeEvent(input$submit, {
      if (input$dob_input2 == "//"){
        shinyGovstyle::error_on(inputId = "dob_input2")
      } else {
        shinyGovstyle::error_off(
          inputId = "dob_input2")
      }
    })
  }
  shinyApp(ui = ui, server = server)
}

Description

This function create a detail component that you can click for further details.

Usage

details(inputId, label, help_text)

Arguments

Value

a details box html shiny object

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "two-thirds",
      shinyGovstyle::details(
        inputId = "help_div",
        label = "Help with form",
        help_text = "To complete the form you need to fill it in...")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function turns off the the error o the component, once issues have been sorted.

Usage

error_off(inputId)

Arguments

Value

no return value. This toggles off error css

Examples

## Only run examples in interactive R sessions
if (interactive()) {

  ui <- fluidPage(
    # Required for error handling function
    shinyjs::useShinyjs(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
      inputId = "banner", type = "beta", 'This is a new service'),
    shinyGovstyle::gov_layout(size = "two-thirds",
      # Error text box
      shinyGovstyle::text_Input(
        inputId = "eventId",
        label = "Event Name",
        error = TRUE),
      # Button to trigger error
      shinyGovstyle::button_Input(inputId = "submit", label = "Submit")
    ),
    shinyGovstyle::footer(full = TRUE)
  )


  server <- function(input, output, session) {
    #Trigger error on blank submit of eventId2
    observeEvent(input$submit, {
      if (input$eventId != ""){
        shinyGovstyle::error_off(inputId = "eventId")
      } else {
        shinyGovstyle::error_on(
          inputId = "eventId",
          error_message = "Please complete")
      }
    })
  }

  # Run the application
  shinyApp(ui = ui, server = server)
}

Description

This function turns on the the error o the component. Can be used to validate inputs.

Usage

error_on(inputId, error_message = NULL)

Arguments

Value

no return value. This toggles on error css

Examples

## Only run examples in interactive R sessions
if (interactive()) {

  ui <- fluidPage(
    # Required for error handling function
    shinyjs::useShinyjs(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
      inputId = "banner", type = "beta", 'This is a new service'),
    shinyGovstyle::gov_layout(size = "two-thirds",
      # Error text box
      shinyGovstyle::text_Input(
        inputId = "eventId",
        label = "Event Name",
        error = TRUE),
      # Button to trigger error
      shinyGovstyle::button_Input(inputId = "submit", label = "Submit")
    ),
    shinyGovstyle::footer(full = TRUE)
  )


  server <- function(input, output, session) {
    #Trigger error on blank submit of eventId2
    observeEvent(input$submit, {
      if (input$eventId != ""){
        shinyGovstyle::error_off(inputId = "eventId")
      } else {
        shinyGovstyle::error_on(
          inputId = "eventId",
          error_message = "Please complete")
      }
    })
  }

  # Run the application
  shinyApp(ui = ui, server = server)
}

Description

This function loads the error summary component to display error text. This replicates the gov style error boxes linked below: https://design-system.service.gov.uk/components/error-summary/

Usage

error_summary(inputId, error_title, error_list)

Arguments

Value

an error_summary html shiny object

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyjs::useShinyjs(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo = "shinyGovstyle/images/moj_logo.png"
    ),
    shinyGovstyle::gov_layout(
      size = "two-thirds",
      error_summary(
        inputId = "errorId",
        error_title = "Error title",
        error_list = c("error item1", "error item2")
      )
    ),
    shinyGovstyle::button_Input("btn1", "Change error summary"),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {

    shiny::observeEvent(input$btn1, {
      error_summary_update(
        "errorId",
        c("error item1", "error item2", "error item3")
      )},
      ignoreInit = TRUE
    )
  }
  shinyApp(ui = ui, server = server)
}

Description

This function changes the text that displays in the error summary box. Requires shinyjs::useShinyjs() to work.

Usage

error_summary_update(inputId, error_list)

Arguments

Value

an update error summary box

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyjs::useShinyjs(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo = "shinyGovstyle/images/moj_logo.png"
    ),
    shinyGovstyle::gov_layout(
      size = "two-thirds",
      error_summary(
        inputId = "errorId",
        error_title = "Error title",
        error_list = c("error item1", "error item2")
      )
    ),
    shinyGovstyle::button_Input("btn1", "Change error summary"),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {

    shiny::observeEvent(input$btn1, {
      error_summary_update(
        "errorId",
        c("error item1", "error item2", "error item3")
      )},
      ignoreInit = TRUE
    )
  }
  shinyApp(ui = ui, server = server)
}

Description

It is commonplace for external links to open in a new tab, and when we do this we should be careful...

This function automatically adds the following to your link: * 'target="_blank"' to open in new tab * 'rel="noopener noreferrer"' to prevent [reverse tabnabbing]( https://owasp.org/www-community/attacks/Reverse_Tabnabbing)

By default this function also adds "(opens in new tab)" to your link text to warn users of the behaviour.

This also adds "This link opens in a new tab" as a visually hidden span element within the HTML outputted to warn non-visual users of the behaviour.

The function will error if you end with a full stop, give a warning for particularly short link text and will automatically trim any leading or trailing white space inputted into link_text.

If you are displaying lots of links together and want to save space by avoiding repeating (opens in new tab), then you can set add_warning = FALSE and add a line of text above all of the links saying something like 'The following links open in a new tab'.

Related links and guidance:

* [Government digital services guidelines on the use of links]( https://design-system.service.gov.uk/styles/links/)

* [Anchor tag HTML element and its properties]( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)

* [WCAG 2.2 success criteria 2.4.4: Link Purpose (In Context)]( https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context)

* [Web Accessibility standards link text behaviour]( https://www.w3.org/TR/WCAG20-TECHS/G200.html)

Usage

external_link(href, link_text, add_warning = TRUE)

Arguments

Details

Intentionally basic wrapper for HTML anchor elements making it easier to create safe external links with standard and accessible behaviour. For more information on how the tag is generated, see tags.

Value

shiny.tag object

Examples

external_link("https://shiny.posit.co/", "R Shiny")

external_link(
  "https://shiny.posit.co/",
  "R Shiny",
  add_warning = FALSE
)

# This will trim and show as 'R Shiny'
external_link("https://shiny.posit.co/", "  R Shiny")

# Example of within text
shiny::tags$p(
  "Oi, ", external_link("https://shiny.posit.co/", "R Shiny"), " is great."
)

# Example of multiple links together
shiny::tags$h2("Related resources")
shiny::tags$p("The following links open in a new tab.")
shiny::tags$ul(
  shiny::tags$li(
    external_link(
      "https://shiny.posit.co/",
      "R Shiny documentation",
      add_warning = FALSE
    )
  ),
  shiny::tags$li(
    external_link(
      "https://www.python.org/",
      "Python documentation",
      add_warning = FALSE
    )
  ),
  shiny::tags$li(
    external_link(
      "https://nextjs.org/",
      "Next.js documentation",
      add_warning = FALSE
    )
  )
)

Description

This function create a file upload component. It uses the basis of the shiny fileInput function, but restyles the label and adds error onto it. It doesn't look like the www.gov.uk/ style one, although this www.gov.uk/ doesn't seem to have a settle style as, for example it changes between Firefox and Chrome

Usage

file_Input(
  inputId,
  label,
  multiple = FALSE,
  accept = NULL,
  width = NULL,
  buttonLabel = "Choose file",
  placeholder = "No file chosen",
  error = FALSE,
  error_message = NULL
)

Arguments

Value

a file input html shiny object

Examples

if (interactive()) {
  ui <- fluidPage(
    # Required for error handling function
    shinyjs::useShinyjs(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
    inputId = "banner", type = "beta", 'This is a new service'),
    shinyGovstyle::gov_layout(size = "two-thirds",
      # Simple file input
      shinyGovstyle::file_Input(inputId = "file1", label = "Upload a file"),
      # Error file
      shinyGovstyle::file_Input(
        inputId = "file2",
        label = "Upload a file",
        error = TRUE),
      # Button to trigger error
      shinyGovstyle::button_Input(inputId = "submit", label = "Submit")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {
    #'Trigger error on blank submit of file2
    observeEvent(input$submit, {
      if (is.null(input$file2)){
        shinyGovstyle::error_on(inputId = "file2")
      } else {
        shinyGovstyle::error_off(
          inputId = "file2")
      }
    })
  }
  shinyApp(ui = ui, server = server)
}

Description

This function adds rge nta fonts to the app. See https://design-system.service.gov.uk/styles/typography/ for when they are allowed.

Usage

font()

Value

no value returned. This loads the font css file

Examples

if (interactive()) {

  ui <- fluidPage(
    font(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png")
  )

  server <- function(input, output, session) {}

  shinyApp(ui = ui, server = server)
}

Description

This function create a gov style footer for your page

Usage

footer(full = FALSE)

Arguments

Value

a footer html shiny object

Examples

if (interactive()) {

  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
      inputId = "banner", type = "beta", 'This is a new service'),
    tags$br(),
    tags$br(),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}

  shinyApp(ui = ui, server = server)
}

Description

This function loads the page layout, This doesn't work as well as the 'gov_main_layout' and associated functions. This is being kept for now as a simpler version where grids are not needed.

Usage

gov_layout(..., inputID = "main", size = "full")

Arguments

Value

a html shiny layout div

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "full",
      shinyGovstyle::panel_output(
        inputId = "panel1",
        main_text = "Application Complete",
        sub_text = "Thank you for submitting your application.
        Your reference is xvsiq")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function creates a tabs based table. It requires a single dataframe with a grouping variable

Usage

gov_summary(inputId, headers, info, action = FALSE, border = TRUE)

Arguments

Value

a summary list table html shiny object.

Examples

if (interactive()) {

  # Create an example dataset
  headers <- c("Name", "Date of birth", "Contact information", "Contact details")
  info <- c(
    "Sarah Philips",
    "5 January 1978",
    "72 Guild Street <br> London <br> SE23 6FH",
    "07700 900457 <br> [email protected]")

  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "two-thirds",
      shinyGovstyle::gov_summary("sumID", headers, info, action = FALSE)),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function inserts a gov styled table. Format is with header looking rows and columns

Usage

govTable(
  inputId,
  df,
  caption,
  caption_size = "l",
  num_col = NULL,
  width_overwrite = NULL
)

Arguments

Value

an table html shiny object

Examples

if (interactive()) {

  Months <- c("January", "February", "March")
  Bikes <- c("£85", "£75", "£165")
  Cars <- c("£95", "£55", "£125")

  example_data <- data.frame(Months, Bikes, Cars)

  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
      inputId = "banner", type = "beta", 'This is a new service'),
    shinyGovstyle::gov_layout(size = "two-thirds",
    shinyGovstyle::govTable(
      "tab1", example_data, "Test", "l", num_col = c(2,3),
      width_overwrite = c("one-half", "one-quarter", "one-quarter"))
    ),

    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}

  shinyApp(ui = ui, server = server)
}

Description

This function creates a tabs based table. It requires a single dataframe with a grouping variable

Usage

govTabs(inputId, df, group_col)

Arguments

Value

a tab table html shiny object.

Examples

if (interactive()) {

  # Create an example dataset
  tabs <- c(rep("Past Day", 3),
            rep("Past Week", 3),
            rep("Past Month", 3),
            rep("Past Year", 3))
  Case_manager <- rep(c("David Francis", "Paul Farmer", "Rita Patel"),4)
  Cases_open <- c(3, 1, 2, 24, 16, 24, 98, 122, 126, 1380, 1129, 1539)
  Cases_closed <- c(0, 0, 0, 18, 20, 27, 95, 131, 142, 1472, 1083, 1265)
  data <- data.frame(tabs, Case_manager, Cases_open, Cases_closed)

  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "two-thirds",
      shinyGovstyle::govTabs(data, "tabs")),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function create a header banner. For use at top of the screen

Usage

header(
  main_text,
  secondary_text,
  logo = NULL,
  main_link = "#",
  secondary_link = "#",
  logo_width = 36,
  logo_height = 32
)

Arguments

Value

a header html shiny object

Examples

if (interactive()) {

  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png")
  )

  server <- function(input, output, session) {}

  shinyApp(ui = ui, server = server)
}

Description

This function create a heading text

Usage

heading_text(text_input, size = "xl", id)

Arguments

Value

a heading text html shiny object

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "two-thirds",
      shinyGovstyle::heading_text("This is great text", "m")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function inserts number of text inputs. Useful for addresses.

Usage

input_field(
  legend,
  labels,
  inputIds,
  widths = NULL,
  types = "text",
  error = FALSE,
  error_message = NULL
)

Arguments

Value

a input field of html as a shiny object

Examples

if (interactive()) {

  ui <- fluidPage(
    # Required for error handling function
    shinyjs::useShinyjs(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
      inputId = "banner", type = "beta", 'This is a new service'),
    shinyGovstyle::gov_layout(size = "two-thirds",
      shinyGovstyle::input_field(
        legend ="List of three text boxes in a field",
        labels = c("Field 1", "Field 2", "Field 3"),
        inputIds = c("field1", "field2", "field3"),
        widths = c(30,20,10),
        error = TRUE),
     # Button to trigger error
     shinyGovstyle::button_Input(inputId = "submit", label = "Submit")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {
    # Trigger error on blank submit of field2
    observeEvent(input$submit, {
      if (input$field2 == ""){
        shinyGovstyle::error_on(inputId = "field2",
                                error_message = "Please complete")
      } else {
        shinyGovstyle::error_off(
          inputId = "field2")
      }
    })
  }
  shinyApp(ui = ui, server = server)
}

Description

This function loads the insert text component to display additional information in a special format.

Usage

insert_text(inputId, text)

Arguments

Value

a insert text html shiny object

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "two-thirds",
      shinyGovstyle::insert_text(
        inputId = "note",
        text = "It can take up to 8 weeks to register a lasting power of
                attorney if there are no mistakes in the application."
      )
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function inserts a label and optional hint

Usage

label_hint(inputId, label, hint_input = NULL)

Arguments

Value

a label hint html shiny object

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "two-thirds",
      label_hint(
        inputId = "label1",
        label = "This is a label",
        hint_input = "This is a hint")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

These function loads the page layout in a gov layout. There is a selection of components that can sit within each other. The gov_main_layout is the overarching layout. The gov_row creates a each row and gov_box creates a box within the row. The gov_text is a container for text bodies.

Usage

gov_main_layout(..., inputID = "main")

gov_row(...)

gov_box(..., size = "full")

gov_text(...)

Arguments

Value

a html shiny layout div

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_main_layout(
      shinyGovstyle::gov_row(
        shinyGovstyle::gov_box(
          size = "full",
          shinyGovstyle::gov_text("govuk-grid-column-full")
        )
      ),
      shinyGovstyle::gov_row(
        shinyGovstyle::gov_box(
          size = "one-half",
          shinyGovstyle::gov_text("govuk-grid-column-one-half")
        ),
        shinyGovstyle::gov_box(
          size = "one-half",
          shinyGovstyle::gov_text("govuk-grid-column-one-half")
        )
      ),
      shinyGovstyle::gov_row(
        shinyGovstyle::gov_box(
          size = "one-third",
          shinyGovstyle::gov_text("govuk-grid-column-one-third")
        ),
        shinyGovstyle::gov_box(
          size = "two-third",
          shinyGovstyle::gov_text("govuk-grid-column-two-third")
        )
      ),
      shinyGovstyle::gov_row(
        shinyGovstyle::gov_box(
          size = "one-quarter",
          shinyGovstyle::gov_text("govuk-grid-column-one-quarter")
        ),
        shinyGovstyle::gov_box(
          size = "three-quarters",
          shinyGovstyle::gov_text("govuk-grid-column-three-quarters")
        )
      )
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function create a notification banner

Usage

noti_banner(
  inputId,
  title_txt = "Important",
  body_txt = NULL,
  type = "standard"
)

Arguments

Value

a notification html shiny object

Examples

if (interactive()) {

  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::noti_banner(
      inputId = "banner", title_txt = "Important", body_txt = "Example text")
  )

  server <- function(input, output, session) {}

  shinyApp(ui = ui, server = server)
}

Description

This function inserts a panel. Normally used for confirmation screens

Usage

panel_output(inputId, main_text, sub_text)

Arguments

Value

a panel html shiny object

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "full",
      shinyGovstyle::panel_output(
        inputId = "panel1",
        main_text = "Application Complete",
        sub_text = "Thank you for submitting your application.
                    Your reference is xvsiq")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function create radio buttons

Usage

radio_button_Input(
  inputId,
  label,
  choices = NULL,
  selected = NULL,
  inline = FALSE,
  small = FALSE,
  choiceNames = NULL,
  choiceValues = NULL,
  hint_label = NULL,
  error = FALSE,
  error_message = NULL,
  custom_class = ""
)

Arguments

Value

radio buttons html shiny object

Examples

if (interactive()) {

  ui <- fluidPage(
    # Required for error handling function
    shinyjs::useShinyjs(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
      inputId = "banner", type = "beta", 'This is a new service'),
    shinyGovstyle::gov_layout(size = "two-thirds",
      #Simple radio
      shinyGovstyle::radio_button_Input(
        inputId = "radio1",
        choices = c("Yes", "No", "Maybe"),
        label = "Choice option"),
      # Error radio
      shinyGovstyle::radio_button_Input(
        inputId = "radio2",
        choices = c("Yes", "No", "Maybe"),
        label = "Choice option",
        hint_label = "Select the best fit",
        inline = TRUE,
        error = TRUE,
        error_message = "Select one"),
      # Button to trigger error
      shinyGovstyle::button_Input(inputId = "submit", label = "Submit")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {
    #Trigger error on blank submit of eventId2
    observeEvent(input$submit, {
      if (is.null(input$radio2)){
        shinyGovstyle::error_on(inputId = "radio2")
      } else {
        shinyGovstyle::error_off(
          inputId = "radio2")
      }
    })
  }
  shinyApp(ui = ui, server = server)
}

Description

This function runs a shiny example using different parts of the package

Usage

run_example()

Value

a shiny app with examples in

Examples

if (interactive()) {
run_example()
}

Description

This function inserts a select box

Usage

select_Input(inputId, label, select_text, select_value)

Arguments

Value

a select input html shiny object

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "full",
      select_Input(
        inputId = "sorter",
        label = "Sort by",
        select_text = c("Recently published",
                        "Recently updated",
                        "Most views",
                        "Most comments"),
        select_value = c("published", "updated", "view", "comments")),
        tags$br()
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function generates an accessible 'Skip to main content' link, which is typically used by keyboard-only users to bypass content and navigate directly to the main content of a page. Important: your main column will need an id of "main_col" for this to work

Usage

skip_to_main()

Value

a skip button that skips to section with id of "main_col"

Examples

if (interactive()) {
  ui <- fluidPage(
    cookieBanner("Run Example"),
    skip_to_main(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"
    ),
    shinyjs::useShinyjs(),  # shinyjs is needed to manage visibility of elements
    gov_row(
    shiny::column(
    width = 3,
    id = "nav",

   # Contents box
     shiny::tags$div(
       id = "govuk-contents-box", #DO NOT REMOVE ID
       class = "govuk-contents-box",  #DO NOT REMOVE CLASS
       shiny::tags$h2("Contents"),
       p("Your contents links go here"),
     )
    ),

    shiny::column(
    width = 9,
    id = "main_col",
    shiny::tabsetPanel(
     type = "hidden",
     id = "tab-container", # DO NOT REMOVE ID
     shiny::tabPanel(
       "Your main content",
       value = "your_main_content",
         gov_layout(
           size = "two-thirds",
           heading_text("Your main content", size = "l"),
           heading_text("accordions", size = "s"),
           shinyGovstyle::  accordion(
             "acc1",
             c("Writing well for the web",
               "Writing well for specialists",
               "Know your audience",
               "How people read"
             ),
             c("This is the content for Writing well for the web.",
               "This is the content for Writing well for specialists.",
               "This is the content for Know your audience.",
               "This is the content for How people read."
             )),

         )
       )
     )
   )

)
)
  server <- function(input, output, session){
  }
  shinyApp(ui = ui, server = server)

}

Description

This function creates a tag

Usage

tag_Input(inputId, text, colour = "navy")

Arguments

Value

a tag html shiny object.

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "two-thirds",
      shinyGovstyle::tag_Input("tag1", "Complete"),
      shinyGovstyle::tag_Input("tag2", "Incomplete", "red")),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function create a text area input

Usage

text_area_Input(
  inputId,
  label,
  hint_label = NULL,
  row_no = 5,
  error = FALSE,
  error_message = NULL,
  word_limit = NULL
)

Arguments

Value

a text area box html shiny object

Examples

text_area_Input("taId", "Can you provide more detail?",
"Do not include personal or financial information, like your
National Insurance number or credit card details.")

Description

This function create a text area input

Usage

text_Input(
  inputId,
  label,
  hint_label = NULL,
  type = "text",
  width = NULL,
  error = FALSE,
  error_message = NULL,
  prefix = NULL,
  suffix = NULL
)

Arguments

Value

a text input html shiny object

Examples

## Only run examples in interactive R sessions
if (interactive()) {

  ui <- fluidPage(
    # Required for error handling function
    shinyjs::useShinyjs(),
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::banner(
      inputId = "banner", type = "beta", 'This is a new service'),
    shinyGovstyle::gov_layout(size = "two-thirds",
      # Simple text box
      shinyGovstyle::text_Input(inputId = "eventId", label = "Event Name"),
      # Error text box
      shinyGovstyle::text_Input(
        inputId = "eventId2",
        label = "Event Name",
        hint_label = "This can be found on the letter",
        error = TRUE),
      # Button to trigger error
      shinyGovstyle::button_Input(inputId = "submit", label = "Submit")
    ),
    shinyGovstyle::footer(full = TRUE)
  )


  server <- function(input, output, session) {
    #Trigger error on blank submit of eventId2
    observeEvent(input$submit, {
      if (input$eventId2 != ""){
        shinyGovstyle::error_off(inputId = "eventId2")
      } else {
        shinyGovstyle::error_on(
          inputId = "eventId2",
          error_message = "Please complete")
      }
    })
  }

  # Run the application
  shinyApp(ui = ui, server = server)
}

Description

This function generates a value text box with an optional description and customisable colour. The text box can be used in Shiny applications to display highlighted information, such as statistics or key metrics.

Usage

value_box(inputId, value = "your value goes here", text = NA, colour = "blue")

Arguments

Value

A Shiny 'div' tag representing the value box, styled according to the specified parameters.

Examples

if (interactive()) {
  ui <- fluidPage(
    value_text(
      inputId = "value1",
      value = "1,000,000",
      text = "This is the latest value for the selected inputs.",
      colour = "purple"
    )
  )
  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function create warning text

Usage

warning_text(inputId, text)

Arguments

Value

a warning box html shiny object

Examples

if (interactive()) {
  ui <- fluidPage(
    shinyGovstyle::header(
      main_text = "Example",
      secondary_text = "User Examples",
      logo="shinyGovstyle/images/moj_logo.png"),
    shinyGovstyle::gov_layout(size = "two-thirds",
      shinyGovstyle::warning_text(
        inputId = "warn1",
        text = "You can be fined up to £5,000 if you do not register.")
    ),
    shinyGovstyle::footer(full = TRUE)
  )

  server <- function(input, output, session) {}
  shinyApp(ui = ui, server = server)
}

Description

This function create tracks the word count and should be used with the text area function

Usage

word_count(inputId, input, word_limit = NULL)

Arguments

Value

no value returned. Updates the word count in a shiny app

Examples

if (interactive()) {

  ui <- shiny::fluidPage(
  shinyjs::useShinyjs(),
  shinyGovstyle::header(
    "Justice", "", logo="shinyGovstyle/images/moj_logo.png"),
  gov_layout(size = "full",
           text_area_Input(
             inputId = "text_area",
             label = "Can you provide more detail?",
             hint_label =  "Do not include personal or financial information
                            , like your National Insurance number or credit
                            card details.",
             word_limit = 300)
  ),
  footer(TRUE)
  )

  server <- function(input, output, session) {
  shiny::observeEvent(input$text_area,
               word_count(inputId = "text_area",
                          input = input$text_area
               )
  )
  }
  shinyApp(ui = ui, server = server)
}