London
SE23 6FH", + "07700 900457
sarah.phillips@example.com" + ), + action = FALSE + ), + + ) ), - #####################Create fourth panel################################ + #####################Create cookie panel################################ shiny::tabPanel( "Cookies", - value = "panel4", + value = "panel-cookies", gov_layout( size = "two-thirds", - heading_text("Page 3", size = "l"), - label_hint("label3", "This an example cookie page that could be + 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) - # Add a full footer - footer(TRUE)), + +), #end of fluid page server = function(input, output, session) { - # Nav to next tab - shiny::observeEvent(input$btn1, { - shiny::updateTabsetPanel(session, "nav", - selected = "panel2") + + + # Tab nav + shiny::observeEvent(input$select_types_button, { + shiny::updateTabsetPanel(session, "tab-container", selected = "select_types") }) - # Nav to next tab - shiny::observeEvent(input$btn2, { - shiny::updateTabsetPanel(session, "nav", - selected = "panel3") + shiny::observeEvent(input$text_types_button, { + 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$feedback_types_button, { + shiny::updateTabsetPanel(session, "tab-container", selected = "feedback_types") + }) + + shiny::observeEvent(input$cookies_button, { + shiny::updateTabsetPanel(session, "tab-container", selected = "panel-cookies") + }) + + + # Back buttons shiny::observeEvent(input$back1, { - shiny::updateTabsetPanel(session, "nav", - selected = "panel1") + shiny::updateTabsetPanel(session, "tab-container", selected = "select_types") }) shiny::observeEvent(input$back2, { - shiny::updateTabsetPanel(session, "nav", - selected = "panel2") + shiny::updateTabsetPanel(session, "tab-container", selected = "text_types") + }) + + shiny::observeEvent(input$back3, { + shiny::updateTabsetPanel(session, "tab-container", selected = "tables_tabs_and_accordions") }) + # Next page buttons + shiny::observeEvent(input$btn1, { + shiny::updateTabsetPanel(session, "tab-container", selected = "text_types") + }) + + shiny::observeEvent(input$btn1, { + shiny::updateTabsetPanel(session, "tab-container", selected = "tables_tabs_and_accordions") + }) + + shiny::observeEvent(input$btn1, { + shiny::updateTabsetPanel(session, "tab-container", selected = "feedback_types") + }) + # Need this to use live update the word counter shiny::observeEvent( input$text_area2, diff --git a/R/tag.R b/R/tag.R index e81eb13..af2caaf 100644 --- a/R/tag.R +++ b/R/tag.R @@ -16,8 +16,8 @@ #' 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::tag_Input("tag1", "Complete"), +#' shinyGovstyle::tag_Input("tag2", "Incomplete", "red")), #' shinyGovstyle::footer(full = TRUE) #' ) #' diff --git a/R/utils-pipe.R b/R/utils-pipe.R new file mode 100644 index 0000000..fd0b1d1 --- /dev/null +++ b/R/utils-pipe.R @@ -0,0 +1,14 @@ +#' Pipe operator +#' +#' See \code{magrittr::\link[magrittr:pipe]{\%>\%}} for details. +#' +#' @name %>% +#' @rdname pipe +#' @keywords internal +#' @export +#' @importFrom magrittr %>% +#' @usage lhs \%>\% rhs +#' @param lhs A value or the magrittr placeholder. +#' @param rhs A function call using the magrittr semantics. +#' @return The result of calling `rhs(lhs)`. +NULL diff --git a/R/warning_text.R b/R/warning_text.R index 11ef0d5..ef80dc6 100644 --- a/R/warning_text.R +++ b/R/warning_text.R @@ -31,7 +31,7 @@ warning_text <- function(inputId, text){ "!", class="govuk-warning-text__icon", `aria-hidden`="true" ), shiny::tags$strong(text, class="govuk-warning-text__text", - shiny::tags$span("Warning", class="govuk-warning-text__assistive") + shiny::tags$span("Warning", class="govuk-visually-hidden") ) ) attachDependency(govWarning) diff --git a/README.md b/README.md index 8c10605..171dd6c 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ [](https://cran.r-project.org/package=shinyGovstyle) - +[](https://github.com/moj-analytical-services/shinyGovstyle/actions/workflows/R-CMD-check.yaml) > Apply Gov styled components and formats in shiny @@ -44,6 +44,8 @@ To use error and word count elements you will need to load useShinyjs from shiny - [Gov style layout](#gov-style-layout) - [Banner](#banner) + - [Contents links](#contents-links) + - [Header text](#header-text) - [Radio button](#radio-button) - [Checkbox](#checkbox) - [Button](#button) @@ -111,6 +113,165 @@ ui <- fluidPage( server <- function(input, output, session) {} ``` +### Contents links + +Create contents and subcontents links to sidebar to navigate page. + + + +Important: `contents_link()` requires the following UI structure to enable the js to work as it relies on the IDs for each section to then point a users focus to. This can also be found in `run_example()`: + +``` +shiny::fluidpage( + shinygovstyle::header( + main_text = "example", + secondary_text = "user examples", + logo = "shinygovstyle/images/moj_logo.png" + ), + gov_row( + shiny::column( + width = 3, + id = "nav", # DO NOT REMOVE ID + shiny::tags$div( + id = "govuk-contents-box", # DO NOT REMOVE ID + class = "govuk-contents-box", # DO NOT REMOVE CLASS + shiny::tags$h2("contents"), + + # CONTENTS LINKS GO HERE + ) + ), + shiny::column( + width = 9, + id = "main-col", # DO NOT REMOVE ID + shiny::tabsetpanel( + type = "hidden", + id = "tab-container", # DO NOT REMOVE ID + + # TAB PANELS GO HERE + ) + ) + ) +) +``` + +You can create a content links without subcontents links: + +``` +contents_link( + link_text = "Cookies", + input_id = "cookies_button") +``` + +Or with subcontents links: + +``` +contents_link( + link_text = "Feedback types", + input_id = "feedback_types_button", + subcontents_text_list = c("tag_Input", "details")) +``` + +If you use `subcontents_text_list` without specifying `subcontents_id_list` then the subcontents links will automatically link to `shinyGovstyle::heading_text()` elements where the header label matches the `subcontents_text_list` label. + +Use `subcontents_id_list` to link a subcontents link to a `shinyGovstyle::heading_text()` with a custom `id` argument. The order needs to match that of `subcontents_text_list`. + +Add as a `NA` to your vector any subcontents links where you still want to use the automatic link id for. + +``` +contents_link( + link_text = "Tables, tabs and accordions", + input_id = "tables_tabs_and_accordions_button", + subcontents_text_list = c("govTable", "govTabs", "button_Input"), + subcontents_id_list = c(NA, NA, "button_input_tables_tabs_accordions") +) +``` + +Contents links will need a `shiny::observeEvent()` in the server to switch between tabset panels. + +``` +ui <- shiny::fluidPage( + shinyGovstyle::header( + main_text = "Example", + secondary_text = "User Examples", + logo = "shinyGovstyle/images/moj_logo.png" + ), + gov_row( + shiny::column( + width = 3, + id = "nav", # DO NOT REMOVE ID + + shiny::tags$div( # DO NOT REMOVE DIV + shiny::tags$h2("Contents"), + contents_link( + "Tables, tabs and accordions", + "tables_tabs_and_accordions_button", + ), + contents_link("Feedback types", "feedback_types_button"), + ) + ), + shiny::column( + width = 9, + id = "main_col", # DO NOT REMOVE ID + shiny::tabsetPanel( + type = "hidden", + id = "tab-container", # DO NOT REMOVE ID + + shiny::tabPanel( + "Tables, tabs and accordions", + value = "tables_tabs_and_accordions", + gov_layout(size = "Tables, tabs and accordions", + heading_text("Tables, tabs and accordions", size = "l")) + ), + + shiny::tabPanel( + "Feedback Types", + value = "feedback_types", + gov_layout(size = "two-thirds", + heading_text("Feedback types", size = "l")) + ), + ) + + ) + ) +) + +server <- function(input, output, session) { + shiny::observeEvent(input$tables_tabs_and_accordions_button, { + shiny::updateTabsetPanel(session, "tab-container", selected = "tables_tabs_and_accordions") + }) + + shiny::observeEvent(input$feedback_types_button, { + shiny::updateTabsetPanel(session, "tab-container", selected = "feedback_types") + }) + +} +shiny::shinyApp(ui = ui, server = server) +} +``` + +Subcontents links work automatically and do not need to a `shiny::observeEvent()` in the server. + +### Heading text + +Use heading text to create headings. + + + +You can adjust the text size by setting `size` to 'xl', 'l', 'm', or 's'. `size` defaults to 'xl'. + +``` +heading_text(text_input = "I am the default extra large text", size = "xl"), +heading_text(text_input = "I am large text", size = "l"), +heading_text(text_input = "I am medium text", size = "m"), +heading_text(text_input = "I am small text", size = "s") +``` + +You can use `id` to create a custom id to link with `subcontents_id_list` from `shinyGovstyle::contents_link`. This can be helpful when you have identically named headings. + +``` +heading_text(text_input = "I am the default extra large text", id = "custom_id") +``` + ### Radio button Create a gov style radio button :
@@ -118,7 +279,7 @@ Create a gov style radio button :
```r radio_button_Input(inputId = "name_changed", label = "Have you changed your name?", - choices = c("Yes", "No"), inline = TRUE, + choices= c("Yes", "No"), inline = TRUE, hint_label = "This includes changing your last name or spelling your name differently.") ``` @@ -445,8 +606,17 @@ Add a gov style tag component :  ```r -shinyGovstyle::tag_Input("tag1", "COMPLETE"), -shinyGovstyle::tag_Input("tag2", "INCOMPLETE", "red") +tag_Input(inputId = "tag1", text = "Default"), +tag_Input(inputId = "tag2", text = "Grey", colour = "grey"), +tag_Input(inputId = "tag3", text = "Green", colour = "green"), +tag_Input(inputId = "tag4", text = "Turquoise", colour = "turquoise"), +tag_Input(inputId = "tag5", text = "Blue", colour = "blue"), +tag_Input(inputId = "tag6", text = "Light-blue", colour = "light-blue"), +tag_Input(inputId = "tag7", text = "Purple", colour = "purple"), +tag_Input(inputId = "tag8", text = "Pink", colour = "pink"), +tag_Input(inputId = "tag9", text = "Red", colour = "red"), +tag_Input(inputId = "tag10", text = "Orange", colour = "orange"), +tag_Input(inputId = "tag11", text = "Yellow", colour = "yellow") ``` ### Error diff --git a/_pkgdown.yml b/_pkgdown.yml new file mode 100644 index 0000000..d71acfb --- /dev/null +++ b/_pkgdown.yml @@ -0,0 +1,4 @@ +url: ~ +template: + bootstrap: 5 + diff --git a/cran-comments.md b/cran-comments.md index 73518a3..3c9237a 100644 --- a/cran-comments.md +++ b/cran-comments.md @@ -2,23 +2,8 @@ This is a minor release to update the style sheets to the latest release plus adding a couple of new components. -## Test environments -- R-hub windows-x86_64-devel (r-devel) -- R-hub ubuntu-gcc-release (r-release) -- R-hub fedora-clang-devel (r-devel) -- win-builder (devel and release) - -One note from Windows Server 2022, R-devel, 64 bit - -``` -* checking for detritus in the temp directory ... NOTE -Found the following files/directories: - 'lastMiKTeXException' -``` -A github search suggests this is isolate to that setup on rhub and is not an -issue. In addition, I can't replicate the issue on any local builds. - ## R CMD check results 0 errors v | 0 warnings v | 0 note v - +## revdepcheck results +There are currently no downstream dependencies for this package. diff --git a/css_changes.md b/css_changes.md index 83d1cc9..1780401 100644 --- a/css_changes.md +++ b/css_changes.md @@ -24,25 +24,174 @@ color: #0b0c0c; ``` * Move fonts css to the font css -*Change url links +* Change url links -* For accordion need to fix the norem by: +* For accordion need to fix the css by: + + Finding and replacing all `.govuk-frontend-supported .govuk-accordion` with `.js-enabled .govuk-accordion` + + and adding this chunk to the accordion section of css: + +``` +.js-enabled .govuk-accordion__section-toggle { + pointer-events: none; +} ``` -.js-enabled .govuk-accordion-nav__chevron { - width: 20px; - height: 20px; - border: 1px solid; -.js-enabled .govuk-accordion-nav__chevron:after{ - bottom: 5px; - left: 6px; - width: 6px; - height: 6px; - border-top: 2px solid; - border-right: 2px solid +* Change filepaths for crown copyright logo: +``` +.govuk-footer__copyright-logo { + display: inline-block; + min-width: 125px; + padding-top: 112px; + background-image: url(../images/govuk-crest.png); + background-repeat: no-repeat; + background-position: 50% 0; + background-size: 125px 102px; + text-align: center; + white-space: nowrap } -.js-enabled .govuk-accordion__section-toggle { - pointer-events: none; +@media only screen and (-webkit-min-device-pixel-ratio:2), +only screen and (min-resolution:192dpi), +only screen and (min-resolution:2dppx) { + .govuk-footer__copyright-logo { + background-image: url(../images/govuk-crest-2x.png) + } +} +``` + +* Fix alignment on the radio button item labels +``` +.govuk-radios__input { + z-index: 1; + width: 44px; + height: 44px; + margin: 0; + opacity: 0; + vertical-align: middle; + cursor: pointer +} + +.govuk-radios__label { + align-self: center; + max-width: calc(100% - 74px); + display: inline-block; + padding: 7px 15px; + cursor: pointer; + touch-action: manipulation +} +``` + +* Fix selected tab panel border gap +``` +.govuk-frontend-supported .govuk-tabs__list-item--selected { + position: relative; + margin-top: -5px; + margin-bottom: -2px; + padding: 14px 19px 16px; + border: 1px solid #b1b4b6; + border-bottom: none; + background-color: #fff +} +``` + +* govTable caption colour: + +``` +.govuk-table__caption { + font-weight: 700; + display: table-caption; + text-align: left; + color: #000; +} +``` + +* contents box: + +``` +/*Match margin in main-wrapper so "Contents" is level*/ +@media (max-width:40.0625em) { + .govuk-contents-box { + margin-right: 30px; + margin-left: 30px + + } +} + +/*Match margin in main-wrapper so "Contents" is level*/ +@media (min-width:40.0625em) and (max-width:48.0625em) { + .govuk-contents-box { + margin-right: 45px; + margin-left: 45px + + } +} + + +/*Match margin in main-wrapper so "Contents" is level*/ +@media (min-width:40.0625em) { + .govuk-contents-box { + margin-top: 40px; + + } +} + + +/*Do not apply stickyness on smaller screen*/ +@media (min-width:48.0625em) { +.govuk-contents-box_sticky { + position: fixed; + /*Guess? - probably could put exact pixels to make smooth*/ + top: 26px; + /* Margin 0 to stop the contents box bopping around */ + margin: 0; + padding: 0; +} +} + + +/*Contents link formatting*/ +.govuk-contents { + top: 0.5rem; + padding: 0.25rem; +} + +.govuk-contents__link { + padding-left: 0; + font-size: 1rem; +} + +.govuk-subcontents { + list-style-type: none; + padding-left: 0; + font-size: 1rem; +} + +/*Only display subcontents for first one - on load*/ +.govuk-contents ~ .govuk-contents > .govuk-subcontents { + display: none; +} +``` + +* Updated govuk-link--no-visited-state to still have a clear focus highlight (copied from the govuk-link formatting) + +``` +.govuk-link--no-visited-state:focus { + outline: 3px solid transparent; + background-color: #fd0; + box-shadow: 0 -2px #fd0, 0 4px #0b0c0c; + text-decoration: none; + -webkit-box-decoration-break: clone; + box-decoration-break: clone +} + +.govuk-link--no-visited-state:hover { + text-decoration-thickness: max(3px, .1875rem, .12em); + -webkit-text-decoration-skip-ink: none; + text-decoration-skip-ink: none; + -webkit-text-decoration-skip: none; + text-decoration-skip: none; + color: #003078 } ``` diff --git a/docs/404.html b/docs/404.html new file mode 100644 index 0000000..a22911f --- /dev/null +++ b/docs/404.html @@ -0,0 +1,110 @@ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/apple-touch-icon-120x120.png b/docs/apple-touch-icon-120x120.png
new file mode 100644
index 0000000..8660c0e
Binary files /dev/null and b/docs/apple-touch-icon-120x120.png differ
diff --git a/docs/apple-touch-icon-152x152.png b/docs/apple-touch-icon-152x152.png
new file mode 100644
index 0000000..3466d2e
Binary files /dev/null and b/docs/apple-touch-icon-152x152.png differ
diff --git a/docs/apple-touch-icon-180x180.png b/docs/apple-touch-icon-180x180.png
new file mode 100644
index 0000000..eadce2a
Binary files /dev/null and b/docs/apple-touch-icon-180x180.png differ
diff --git a/docs/apple-touch-icon-60x60.png b/docs/apple-touch-icon-60x60.png
new file mode 100644
index 0000000..57ba63e
Binary files /dev/null and b/docs/apple-touch-icon-60x60.png differ
diff --git a/docs/apple-touch-icon-76x76.png b/docs/apple-touch-icon-76x76.png
new file mode 100644
index 0000000..577efb8
Binary files /dev/null and b/docs/apple-touch-icon-76x76.png differ
diff --git a/docs/apple-touch-icon.png b/docs/apple-touch-icon.png
new file mode 100644
index 0000000..f926b33
Binary files /dev/null and b/docs/apple-touch-icon.png differ
diff --git a/docs/authors.html b/docs/authors.html
new file mode 100644
index 0000000..9d23dc9
--- /dev/null
+++ b/docs/authors.html
@@ -0,0 +1,98 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Content not found. Please use links in the navbar.
+
+ Page not found (404)
+`, then ``, etc.) that has more than one element. Defaults to 1 (for ``).
+ getTopLevel: function($scope) {
+ for (var i = 1; i <= 6; i++) {
+ var $headings = this.findOrFilter($scope, 'h' + i);
+ if ($headings.length > 1) {
+ return i;
+ }
+ }
+
+ return 1;
+ },
+
+ // returns the elements for the top level, and the next below it
+ getHeadings: function($scope, topLevel) {
+ var topSelector = 'h' + topLevel;
+
+ var secondaryLevel = topLevel + 1;
+ var secondarySelector = 'h' + secondaryLevel;
+
+ return this.findOrFilter($scope, topSelector + ',' + secondarySelector);
+ },
+
+ getNavLevel: function(el) {
+ return parseInt(el.tagName.charAt(1), 10);
+ },
+
+ populateNav: function($topContext, topLevel, $headings) {
+ var $context = $topContext;
+ var $prevNav;
+
+ var helpers = this;
+ $headings.each(function(i, el) {
+ var $newNav = helpers.generateNavItem(el);
+ var navLevel = helpers.getNavLevel(el);
+
+ // determine the proper $context
+ if (navLevel === topLevel) {
+ // use top level
+ $context = $topContext;
+ } else if ($prevNav && $context === $topContext) {
+ // create a new level of the tree and switch to it
+ $context = helpers.createChildNavList($prevNav);
+ } // else use the current $context
+
+ $context.append($newNav);
+
+ $prevNav = $newNav;
+ });
+ },
+
+ parseOps: function(arg) {
+ var opts;
+ if (arg.jquery) {
+ opts = {
+ $nav: arg
+ };
+ } else {
+ opts = arg;
+ }
+ opts.$scope = opts.$scope || $(document.body);
+ return opts;
+ }
+ },
+
+ // accepts a jQuery object, or an options object
+ init: function(opts) {
+ opts = this.helpers.parseOps(opts);
+
+ // ensure that the data attribute is in place for styling
+ opts.$nav.attr('data-toggle', 'toc');
+
+ var $topContext = this.helpers.createChildNavList(opts.$nav);
+ var topLevel = this.helpers.getTopLevel(opts.$scope);
+ var $headings = this.helpers.getHeadings(opts.$scope, topLevel);
+ this.helpers.populateNav($topContext, topLevel, $headings);
+ }
+ };
+
+ $(function() {
+ $('nav[data-toggle="toc"]').each(function(i, el) {
+ var $nav = $(el);
+ Toc.init($nav);
+ });
+ });
+})();
diff --git a/docs/css_changes.html b/docs/css_changes.html
new file mode 100644
index 0000000..55fe099
--- /dev/null
+++ b/docs/css_changes.html
@@ -0,0 +1,112 @@
+
+NA • shinyGovstyle
+
+
+
+
+
+
+
+
+
+
+ NA
+
+
+
+These the things needed when updating the gov.uk css to make it work.
+- add to
.govuk-back-link for backlink
+
border: none;
+background: white;
+color: #0b0c0c;
+- error summary change
+
.govuk-error-summary__list {
+ color: #d4351c;
+ font-weight: 700;
+ text-decoration: underline;
+ text-underline-offset: 0.1em
+- add
+
.govuk-link {
+ border:none
+}
+Move fonts css to the font css *Change url links
For accordion need to fix the norem by:
.js-enabled .govuk-accordion-nav__chevron {
+ width: 20px;
+ height: 20px;
+ border: 1px solid;
+
+.js-enabled .govuk-accordion-nav__chevron:after{
+ bottom: 5px;
+ left: 6px;
+ width: 6px;
+ height: 6px;
+ border-top: 2px solid;
+ border-right: 2px solid
+}
+
+.js-enabled .govuk-accordion__section-toggle {
+ pointer-events: none;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/docsearch.css b/docs/docsearch.css
new file mode 100644
index 0000000..e5f1fe1
--- /dev/null
+++ b/docs/docsearch.css
@@ -0,0 +1,148 @@
+/* Docsearch -------------------------------------------------------------- */
+/*
+ Source: https://github.com/algolia/docsearch/
+ License: MIT
+*/
+
+.algolia-autocomplete {
+ display: block;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1
+}
+
+.algolia-autocomplete .ds-dropdown-menu {
+ width: 100%;
+ min-width: none;
+ max-width: none;
+ padding: .75rem 0;
+ background-color: #fff;
+ background-clip: padding-box;
+ border: 1px solid rgba(0, 0, 0, .1);
+ box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
+}
+
+@media (min-width:768px) {
+ .algolia-autocomplete .ds-dropdown-menu {
+ width: 175%
+ }
+}
+
+.algolia-autocomplete .ds-dropdown-menu::before {
+ display: none
+}
+
+.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] {
+ padding: 0;
+ background-color: rgb(255,255,255);
+ border: 0;
+ max-height: 80vh;
+}
+
+.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
+ margin-top: 0
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion {
+ padding: 0;
+ overflow: visible
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+ padding: .125rem 1rem;
+ margin-top: 0;
+ font-size: 1.3em;
+ font-weight: 500;
+ color: #00008B;
+ border-bottom: 0
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
+ float: none;
+ padding-top: 0
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+ float: none;
+ width: auto;
+ padding: 0;
+ text-align: left
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--content {
+ float: none;
+ width: auto;
+ padding: 0
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--content::before {
+ display: none
+}
+
+.algolia-autocomplete .ds-suggestion:not(:first-child) .algolia-docsearch-suggestion--category-header {
+ padding-top: .75rem;
+ margin-top: .75rem;
+ border-top: 1px solid rgba(0, 0, 0, .1)
+}
+
+.algolia-autocomplete .ds-suggestion .algolia-docsearch-suggestion--subcategory-column {
+ display: block;
+ padding: .1rem 1rem;
+ margin-bottom: 0.1;
+ font-size: 1.0em;
+ font-weight: 400
+ /* display: none */
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+ display: block;
+ padding: .25rem 1rem;
+ margin-bottom: 0;
+ font-size: 0.9em;
+ font-weight: 400
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
+ padding: 0 1rem .5rem;
+ margin-top: -.25rem;
+ font-size: 0.8em;
+ font-weight: 400;
+ line-height: 1.25
+}
+
+.algolia-autocomplete .algolia-docsearch-footer {
+ width: 110px;
+ height: 20px;
+ z-index: 3;
+ margin-top: 10.66667px;
+ float: right;
+ font-size: 0;
+ line-height: 0;
+}
+
+.algolia-autocomplete .algolia-docsearch-footer--logo {
+ background-image: url("data:image/svg+xml;utf8,");
+ background-repeat: no-repeat;
+ background-position: 50%;
+ background-size: 100%;
+ overflow: hidden;
+ text-indent: -9000px;
+ width: 100%;
+ height: 100%;
+ display: block;
+ transform: translate(-8px);
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+ color: #FF8C00;
+ background: rgba(232, 189, 54, 0.1)
+}
+
+
+.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+ box-shadow: inset 0 -2px 0 0 rgba(105, 105, 105, .5)
+}
+
+.algolia-autocomplete .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
+ background-color: rgba(192, 192, 192, .15)
+}
diff --git a/docs/docsearch.js b/docs/docsearch.js
new file mode 100644
index 0000000..b35504c
--- /dev/null
+++ b/docs/docsearch.js
@@ -0,0 +1,85 @@
+$(function() {
+
+ // register a handler to move the focus to the search bar
+ // upon pressing shift + "/" (i.e. "?")
+ $(document).on('keydown', function(e) {
+ if (e.shiftKey && e.keyCode == 191) {
+ e.preventDefault();
+ $("#search-input").focus();
+ }
+ });
+
+ $(document).ready(function() {
+ // do keyword highlighting
+ /* modified from https://jsfiddle.net/julmot/bL6bb5oo/ */
+ var mark = function() {
+
+ var referrer = document.URL ;
+ var paramKey = "q" ;
+
+ if (referrer.indexOf("?") !== -1) {
+ var qs = referrer.substr(referrer.indexOf('?') + 1);
+ var qs_noanchor = qs.split('#')[0];
+ var qsa = qs_noanchor.split('&');
+ var keyword = "";
+
+ for (var i = 0; i < qsa.length; i++) {
+ var currentParam = qsa[i].split('=');
+
+ if (currentParam.length !== 2) {
+ continue;
+ }
+
+ if (currentParam[0] == paramKey) {
+ keyword = decodeURIComponent(currentParam[1].replace(/\+/g, "%20"));
+ }
+ }
+
+ if (keyword !== "") {
+ $(".contents").unmark({
+ done: function() {
+ $(".contents").mark(keyword);
+ }
+ });
+ }
+ }
+ };
+
+ mark();
+ });
+});
+
+/* Search term highlighting ------------------------------*/
+
+function matchedWords(hit) {
+ var words = [];
+
+ var hierarchy = hit._highlightResult.hierarchy;
+ // loop to fetch from lvl0, lvl1, etc.
+ for (var idx in hierarchy) {
+ words = words.concat(hierarchy[idx].matchedWords);
+ }
+
+ var content = hit._highlightResult.content;
+ if (content) {
+ words = words.concat(content.matchedWords);
+ }
+
+ // return unique words
+ var words_uniq = [...new Set(words)];
+ return words_uniq;
+}
+
+function updateHitURL(hit) {
+
+ var words = matchedWords(hit);
+ var url = "";
+
+ if (hit.anchor) {
+ url = hit.url_without_anchor + '?q=' + escape(words.join(" ")) + '#' + hit.anchor;
+ } else {
+ url = hit.url + '?q=' + escape(words.join(" "));
+ }
+
+ return url;
+}
diff --git a/docs/favicon-16x16.png b/docs/favicon-16x16.png
new file mode 100644
index 0000000..e371dd7
Binary files /dev/null and b/docs/favicon-16x16.png differ
diff --git a/docs/favicon-32x32.png b/docs/favicon-32x32.png
new file mode 100644
index 0000000..7b899d3
Binary files /dev/null and b/docs/favicon-32x32.png differ
diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 0000000..919fba3
Binary files /dev/null and b/docs/favicon.ico differ
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..9b131d3
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,567 @@
+
+
+
+
+
+
+
+Custom Gov Style Inputs for Shiny • shinyGovstyle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Apply Gov styled components and formats in shiny
+
+
+Overview
+
+This package provides some custom widgets to style your app like gov.uk. There are a variety of widgets available, including select, radio, checkboxes as well as styling for headers and footers.
+To view details of gov.uk components please visit https://design-system.service.gov.uk/. Most components from https://design-system.service.gov.uk/components/ are available to use through this package.
+Installation :
+
+install.packages("shinyGovstyle")
+This is also available on conda
+conda install r-shinygovstyle
+If you want to make use of the development then
+
+remotes::install_github("moj-analytical-services/shinyGovstyle")
+To use error and word count elements you will need to load useShinyjs from shinyjs in the UI:
+
+ shinyjs::useShinyjs()
+
+
+Components available :
+
+
+- Gov style layout
+- Banner
+- Radio button
+- Checkbox
+- Button
+- Select
+- Date
+- File input
+- Text input
+- Text area input
+- Warning
+- Insert text
+- Details
+- Panel
+- Notification Banner
+- Accordion
+- Table
+- Tabs
+- Summary List
+- Cookie Banner
+- Tags
+- Error
+- Example Version
+
+
+Gov style layout
+
+Create a gov style look to the page with a header, footer, font and layout:
+
+ui <- fluidPage(
+ #font(),
+ shinyGovstyle::header("Justice", "Prototype", logo="shinyGovstyle/images/moj_logo.png"),
+ gov_layout(size = "full",
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br()
+ ),
+ footer(TRUE)
+)
+
+server <- function(input, output, session) {}
+Note: You can only use gov.uk font on service.gov.uk (see https://design-system.service.gov.uk/styles/typography/)
+
+
+Banner
+
+Add a banner to the header to state in beta or alpha :
+
+ui <- fluidPage(
+ shinyGovstyle::header("Justice", "Prototype", logo="shinyGovstyle/images/moj_logo.png"),
+ banner("banner", "beta", 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'),
+ gov_layout(size = "full",
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br()
+ ),
+ footer(TRUE)
+)
+
+server <- function(input, output, session) {}
+
+
+Radio button
+
+Create a gov style radio button :
+
+radio_button_Input(inputId = "name_changed", label = "Have you changed your name?",
+ choices = c("Yes", "No"), inline = TRUE,
+ hint_label = "This includes changing your last name or spelling your name differently.")
+
+
+Checkbox
+
+Turn checkboxes into gov style ones :
+
+checkbox_Input(
+ inputId = "checkID",
+ cb_labels = c("Waste from animal carcasses", "Waste from mines or quarries", "Farm or agricultural waste"),
+ checkboxIds = c("op1", "op2", "op3"),
+ label = "Which types of waste do you transport?",
+ hint_label = "Select all that apply.")
+Note that you currently access the values separately through the inputIds you supply or all values through the main inputID.
+
+
+Button
+
+Gov style button with different styles : 
+shinyGovstyle::button_Input(inputId = "btn1", label = "default"),
+shinyGovstyle::button_Input(inputId = "btn1", label = "start", type = "start"),
+shinyGovstyle::button_Input(inputId = "btn1", label = "secondary", type = "secondary"),
+shinyGovstyle::button_Input(inputId = "btn1", label = "warning", type = "warning")
+
+
+Select
+
+Gov style drop down select : 
+
+shinyGovstyle::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"))
+
+
+Date
+
+Gov style date input : 
+
+date_Input(
+ inputId = "date1",
+ label = "What is your date of birth?",
+ hint_label = "For example, 31 3 1980")
+Note that you currently access the individual values by adding an affix of _day, _month and _year or the full date in dd/mm/yy by using the inputID.
+
+
+File input
+
+Gov style file input component : 
+
+file_Input(inputId = "file1", label = "Upload a file")
+
+
+Text input
+
+Gov style text input component : 
+
+text_Input(inputId = "txt1", label = "Event name")
+
+
+Text area input
+
+Gov style text area input component : 
+
+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.")
+You can also add a word count to the options, which requires an additional argument in the server : 
+
+ui <- 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)
+)
+
+# Define server logic required to draw a histogram
+server <- function(input, output, session) {
+ observeEvent(input$text_area,
+ word_count(inputId = "text_area", input = input$text_area, word_limit = 300)
+ )
+}
+
+
+Warning
+
+Gov style warning component : 
+
+warning_text(inputId = "warn", text = "You can be fined up to £5,000 if you do not register.")
+
+
+Insert text
+
+Gov style insert text component : 
+
+insert_text(inputId = "insertId",
+ text = "It can take up to 8 weeks to register a lasting power of attorney
+ if there are no mistakes in the application.")
+
+
+Details
+
+Gov style details component : 
+
+ details(
+ inputId = "detID",
+ label = "Help with nationality",
+ help_text = "We need to know your nationality so we can work out which elections you’re
+ entitled to vote in. If you cannot provide your nationality, you’ll have to
+ send copies of identity documents through the post.")
+
+
+Panel
+
+Gov style panel component : 
+
+panel_output(
+ inputId = "panId",
+ main_text = "Application complete",
+ sub_text = "Your reference number <br> <strong>HDJ2123F</strong>")
+
+
+
+Accordion
+
+Gov style accordion component : 
+
+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."
+ ))
+
+
+Table
+
+Gov style table component : 
+
+Months <- c("January", "February", "March")
+Bikes <- c("£85", "£75", "£165")
+Cars <- c("£95", "£55", "£125")
+example_data <- data.frame(Months, Bikes, Cars)
+
+shinyGovstyle::govTable(
+ "tab1", example_data, "Test", "l", num_col = c(2,3),
+ width_overwrite = c("one-half", "one-quarter", "one-quarter"))
+
+
+Tabs
+
+Gov style tabs component : 
+
+ # 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("tabsID", data, "tabs")),
+ shinyGovstyle::footer(full = TRUE)
+ )
+
+ server <- function(input, output, session) {}
+ shinyApp(ui = ui, server = server)
+
+
+Summary List
+
+Gov style summary list : 
+
+ # 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> sarah.phillips@example.com")
+
+ 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 = TRUE)),
+ shinyGovstyle::footer(full = TRUE)
+ )
+
+ server <- function(input, output, session) {}
+ shinyApp(ui = ui, server = server)
+
+
+Cookie Banner
+
+Gov style cookie banner : 
+
+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
+ #updateTabsetPanel to have a cookie page for instance
+ })
+
+}
+shinyApp(ui = ui, server = server)
+
+
+
+Error
+
+Add errors to components when not filled in correctly. Most components have an option to add : 
+
+ui <- fluidPage(
+ shinyjs::useShinyjs(),
+ shinyGovstyle::header("Justice", "", logo="shinyGovstyle/images/moj_logo.png"),
+ gov_layout(size = "full",
+ text_area_Input(
+ "text_area",
+ "Can you provide more detail?",
+ "Do not include personal or financial information, like your National Insurance number or credit card details.",
+ word_limit = 300, error = TRUE, error_message = "Error"),
+
+ button_Input("btn1", "Toggle error")
+ ),
+ footer(TRUE)
+)
+
+server <- function(input, output, session) {
+ err <<- FALSE
+ observeEvent(input$btn1,{
+ if (err) {
+ err <<- FALSE
+ error_off("text_area")
+ }
+ else {
+ err <<- TRUE
+ error_on("text_area", "You have an error")
+ }
+ }
+ )
+}
+
+
+Example Version
+
+You can run an example dashboard. This is very rough and will be improved. 
+
+run_example()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/link.svg b/docs/link.svg
new file mode 100644
index 0000000..88ad827
--- /dev/null
+++ b/docs/link.svg
@@ -0,0 +1,12 @@
+
+
+
diff --git a/docs/logo.png b/docs/logo.png
new file mode 100644
index 0000000..d87cda6
Binary files /dev/null and b/docs/logo.png differ
diff --git a/docs/news/index.html b/docs/news/index.html
new file mode 100644
index 0000000..b68e88c
--- /dev/null
+++ b/docs/news/index.html
@@ -0,0 +1,106 @@
+
+Changelog • shinyGovstyle
+
+
+
+
+
+
+
+
+
+
+ Changelog
+ Source: NEWS.md
+
+
+
+shinyGovstyle 0.0.82022-02-22
+- Update the css to v4.0.0 and made fixes associated with that.
+- One of the major changes in the css is a change in look for the accordion.
+- Added new functions
gov_main_layout, gov_row, gov_box and gov_text to give better control over the layouts.
+- Added tabs as a component using the
govTab command
+- Added summary list as a component using the
gov_summary command
+- Added error summary component (
error_summary) and error summary update (error_summary_update)
+
+
+shinyGovstyle 0.0.72021-11-04
+- Improved the header so that you can adjust the logo size to suit
+- Fix some errors that appeared in the footer
+- Fix the word count function so that you only need to enter word count limit on the
text_area function. You can change the limit on word_count if needed.
+- Change the
run_example to a better versions that show more ways you can you the package.
+- Change the
backlink_Input to a button so that you can use server to move between panels etc.
+- Added tags through the
tag_Input function plus added to the use_example.
+- Added cookie banner through the
cookieBanner function.
+- Added accordion through the
accordion function.
+- Added tables through the
govTable function.
+
+
+shinyGovstyle 0.0.62021-10-25
+- Fix minor bugs from the issues list including data default and radio default
+- Added units test
+- Added an example function
+- Added a
NEWS.md file to track changes to the package.
+- Added a notification banner function
+- Got ready for CRAN release.
+- Added output value to the documentation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/pkgdown.css b/docs/pkgdown.css
new file mode 100644
index 0000000..80ea5b8
--- /dev/null
+++ b/docs/pkgdown.css
@@ -0,0 +1,384 @@
+/* Sticky footer */
+
+/**
+ * Basic idea: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
+ * Details: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css
+ *
+ * .Site -> body > .container
+ * .Site-content -> body > .container .row
+ * .footer -> footer
+ *
+ * Key idea seems to be to ensure that .container and __all its parents__
+ * have height set to 100%
+ *
+ */
+
+html, body {
+ height: 100%;
+}
+
+body {
+ position: relative;
+}
+
+body > .container {
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+}
+
+body > .container .row {
+ flex: 1 0 auto;
+}
+
+footer {
+ margin-top: 45px;
+ padding: 35px 0 36px;
+ border-top: 1px solid #e5e5e5;
+ color: #666;
+ display: flex;
+ flex-shrink: 0;
+}
+footer p {
+ margin-bottom: 0;
+}
+footer div {
+ flex: 1;
+}
+footer .pkgdown {
+ text-align: right;
+}
+footer p {
+ margin-bottom: 0;
+}
+
+img.icon {
+ float: right;
+}
+
+/* Ensure in-page images don't run outside their container */
+.contents img {
+ max-width: 100%;
+ height: auto;
+}
+
+/* Fix bug in bootstrap (only seen in firefox) */
+summary {
+ display: list-item;
+}
+
+/* Typographic tweaking ---------------------------------*/
+
+.contents .page-header {
+ margin-top: calc(-60px + 1em);
+}
+
+dd {
+ margin-left: 3em;
+}
+
+/* Section anchors ---------------------------------*/
+
+a.anchor {
+ display: none;
+ margin-left: 5px;
+ width: 20px;
+ height: 20px;
+
+ background-image: url(./link.svg);
+ background-repeat: no-repeat;
+ background-size: 20px 20px;
+ background-position: center center;
+}
+
+h1:hover .anchor,
+h2:hover .anchor,
+h3:hover .anchor,
+h4:hover .anchor,
+h5:hover .anchor,
+h6:hover .anchor {
+ display: inline-block;
+}
+
+/* Fixes for fixed navbar --------------------------*/
+
+.contents h1, .contents h2, .contents h3, .contents h4 {
+ padding-top: 60px;
+ margin-top: -40px;
+}
+
+/* Navbar submenu --------------------------*/
+
+.dropdown-submenu {
+ position: relative;
+}
+
+.dropdown-submenu>.dropdown-menu {
+ top: 0;
+ left: 100%;
+ margin-top: -6px;
+ margin-left: -1px;
+ border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover>.dropdown-menu {
+ display: block;
+}
+
+.dropdown-submenu>a:after {
+ display: block;
+ content: " ";
+ float: right;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 5px 0 5px 5px;
+ border-left-color: #cccccc;
+ margin-top: 5px;
+ margin-right: -10px;
+}
+
+.dropdown-submenu:hover>a:after {
+ border-left-color: #ffffff;
+}
+
+.dropdown-submenu.pull-left {
+ float: none;
+}
+
+.dropdown-submenu.pull-left>.dropdown-menu {
+ left: -100%;
+ margin-left: 10px;
+ border-radius: 6px 0 6px 6px;
+}
+
+/* Sidebar --------------------------*/
+
+#pkgdown-sidebar {
+ margin-top: 30px;
+ position: -webkit-sticky;
+ position: sticky;
+ top: 70px;
+}
+
+#pkgdown-sidebar h2 {
+ font-size: 1.5em;
+ margin-top: 1em;
+}
+
+#pkgdown-sidebar h2:first-child {
+ margin-top: 0;
+}
+
+#pkgdown-sidebar .list-unstyled li {
+ margin-bottom: 0.5em;
+}
+
+/* bootstrap-toc tweaks ------------------------------------------------------*/
+
+/* All levels of nav */
+
+nav[data-toggle='toc'] .nav > li > a {
+ padding: 4px 20px 4px 6px;
+ font-size: 1.5rem;
+ font-weight: 400;
+ color: inherit;
+}
+
+nav[data-toggle='toc'] .nav > li > a:hover,
+nav[data-toggle='toc'] .nav > li > a:focus {
+ padding-left: 5px;
+ color: inherit;
+ border-left: 1px solid #878787;
+}
+
+nav[data-toggle='toc'] .nav > .active > a,
+nav[data-toggle='toc'] .nav > .active:hover > a,
+nav[data-toggle='toc'] .nav > .active:focus > a {
+ padding-left: 5px;
+ font-size: 1.5rem;
+ font-weight: 400;
+ color: inherit;
+ border-left: 2px solid #878787;
+}
+
+/* Nav: second level (shown on .active) */
+
+nav[data-toggle='toc'] .nav .nav {
+ display: none; /* Hide by default, but at >768px, show it */
+ padding-bottom: 10px;
+}
+
+nav[data-toggle='toc'] .nav .nav > li > a {
+ padding-left: 16px;
+ font-size: 1.35rem;
+}
+
+nav[data-toggle='toc'] .nav .nav > li > a:hover,
+nav[data-toggle='toc'] .nav .nav > li > a:focus {
+ padding-left: 15px;
+}
+
+nav[data-toggle='toc'] .nav .nav > .active > a,
+nav[data-toggle='toc'] .nav .nav > .active:hover > a,
+nav[data-toggle='toc'] .nav .nav > .active:focus > a {
+ padding-left: 15px;
+ font-weight: 500;
+ font-size: 1.35rem;
+}
+
+/* orcid ------------------------------------------------------------------- */
+
+.orcid {
+ font-size: 16px;
+ color: #A6CE39;
+ /* margins are required by official ORCID trademark and display guidelines */
+ margin-left:4px;
+ margin-right:4px;
+ vertical-align: middle;
+}
+
+/* Reference index & topics ----------------------------------------------- */
+
+.ref-index th {font-weight: normal;}
+
+.ref-index td {vertical-align: top; min-width: 100px}
+.ref-index .icon {width: 40px;}
+.ref-index .alias {width: 40%;}
+.ref-index-icons .alias {width: calc(40% - 40px);}
+.ref-index .title {width: 60%;}
+
+.ref-arguments th {text-align: right; padding-right: 10px;}
+.ref-arguments th, .ref-arguments td {vertical-align: top; min-width: 100px}
+.ref-arguments .name {width: 20%;}
+.ref-arguments .desc {width: 80%;}
+
+/* Nice scrolling for wide elements --------------------------------------- */
+
+table {
+ display: block;
+ overflow: auto;
+}
+
+/* Syntax highlighting ---------------------------------------------------- */
+
+pre, code, pre code {
+ background-color: #f8f8f8;
+ color: #333;
+}
+pre, pre code {
+ white-space: pre-wrap;
+ word-break: break-all;
+ overflow-wrap: break-word;
+}
+
+pre {
+ border: 1px solid #eee;
+}
+
+pre .img, pre .r-plt {
+ margin: 5px 0;
+}
+
+pre .img img, pre .r-plt img {
+ background-color: #fff;
+}
+
+code a, pre a {
+ color: #375f84;
+}
+
+a.sourceLine:hover {
+ text-decoration: none;
+}
+
+.fl {color: #1514b5;}
+.fu {color: #000000;} /* function */
+.ch,.st {color: #036a07;} /* string */
+.kw {color: #264D66;} /* keyword */
+.co {color: #888888;} /* comment */
+
+.error {font-weight: bolder;}
+.warning {font-weight: bolder;}
+
+/* Clipboard --------------------------*/
+
+.hasCopyButton {
+ position: relative;
+}
+
+.btn-copy-ex {
+ position: absolute;
+ right: 0;
+ top: 0;
+ visibility: hidden;
+}
+
+.hasCopyButton:hover button.btn-copy-ex {
+ visibility: visible;
+}
+
+/* headroom.js ------------------------ */
+
+.headroom {
+ will-change: transform;
+ transition: transform 200ms linear;
+}
+.headroom--pinned {
+ transform: translateY(0%);
+}
+.headroom--unpinned {
+ transform: translateY(-100%);
+}
+
+/* mark.js ----------------------------*/
+
+mark {
+ background-color: rgba(255, 255, 51, 0.5);
+ border-bottom: 2px solid rgba(255, 153, 51, 0.3);
+ padding: 1px;
+}
+
+/* vertical spacing after htmlwidgets */
+.html-widget {
+ margin-bottom: 10px;
+}
+
+/* fontawesome ------------------------ */
+
+.fab {
+ font-family: "Font Awesome 5 Brands" !important;
+}
+
+/* don't display links in code chunks when printing */
+/* source: https://stackoverflow.com/a/10781533 */
+@media print {
+ code a:link:after, code a:visited:after {
+ content: "";
+ }
+}
+
+/* Section anchors ---------------------------------
+ Added in pandoc 2.11: https://github.com/jgm/pandoc-templates/commit/9904bf71
+*/
+
+div.csl-bib-body { }
+div.csl-entry {
+ clear: both;
+}
+.hanging-indent div.csl-entry {
+ margin-left:2em;
+ text-indent:-2em;
+}
+div.csl-left-margin {
+ min-width:2em;
+ float:left;
+}
+div.csl-right-inline {
+ margin-left:2em;
+ padding-left:1em;
+}
+div.csl-indent {
+ margin-left: 2em;
+}
diff --git a/docs/pkgdown.js b/docs/pkgdown.js
new file mode 100644
index 0000000..6f0eee4
--- /dev/null
+++ b/docs/pkgdown.js
@@ -0,0 +1,108 @@
+/* http://gregfranko.com/blog/jquery-best-practices/ */
+(function($) {
+ $(function() {
+
+ $('.navbar-fixed-top').headroom();
+
+ $('body').css('padding-top', $('.navbar').height() + 10);
+ $(window).resize(function(){
+ $('body').css('padding-top', $('.navbar').height() + 10);
+ });
+
+ $('[data-toggle="tooltip"]').tooltip();
+
+ var cur_path = paths(location.pathname);
+ var links = $("#navbar ul li a");
+ var max_length = -1;
+ var pos = -1;
+ for (var i = 0; i < links.length; i++) {
+ if (links[i].getAttribute("href") === "#")
+ continue;
+ // Ignore external links
+ if (links[i].host !== location.host)
+ continue;
+
+ var nav_path = paths(links[i].pathname);
+
+ var length = prefix_length(nav_path, cur_path);
+ if (length > max_length) {
+ max_length = length;
+ pos = i;
+ }
+ }
+
+ // Add class to parent
`).
+ getTopLevel: function($scope) {
+ for (var i = 1; i <= 6; i++) {
+ var $headings = this.findOrFilter($scope, 'h' + i);
+ if ($headings.length > 1) {
+ return i;
+ }
+ }
+
+ return 1;
+ },
+
+ // returns the elements for the top level, and the next below it
+ getHeadings: function($scope, topLevel) {
+ var topSelector = 'h' + topLevel;
+
+ var secondaryLevel = topLevel + 1;
+ var secondarySelector = 'h' + secondaryLevel;
+
+ return this.findOrFilter($scope, topSelector + ',' + secondarySelector);
+ },
+
+ getNavLevel: function(el) {
+ return parseInt(el.tagName.charAt(1), 10);
+ },
+
+ populateNav: function($topContext, topLevel, $headings) {
+ var $context = $topContext;
+ var $prevNav;
+
+ var helpers = this;
+ $headings.each(function(i, el) {
+ var $newNav = helpers.generateNavItem(el);
+ var navLevel = helpers.getNavLevel(el);
+
+ // determine the proper $context
+ if (navLevel === topLevel) {
+ // use top level
+ $context = $topContext;
+ } else if ($prevNav && $context === $topContext) {
+ // create a new level of the tree and switch to it
+ $context = helpers.createChildNavList($prevNav);
+ } // else use the current $context
+
+ $context.append($newNav);
+
+ $prevNav = $newNav;
+ });
+ },
+
+ parseOps: function(arg) {
+ var opts;
+ if (arg.jquery) {
+ opts = {
+ $nav: arg
+ };
+ } else {
+ opts = arg;
+ }
+ opts.$scope = opts.$scope || $(document.body);
+ return opts;
+ }
+ },
+
+ // accepts a jQuery object, or an options object
+ init: function(opts) {
+ opts = this.helpers.parseOps(opts);
+
+ // ensure that the data attribute is in place for styling
+ opts.$nav.attr('data-toggle', 'toc');
+
+ var $topContext = this.helpers.createChildNavList(opts.$nav);
+ var topLevel = this.helpers.getTopLevel(opts.$scope);
+ var $headings = this.helpers.getHeadings(opts.$scope, topLevel);
+ this.helpers.populateNav($topContext, topLevel, $headings);
+ }
+ };
+
+ $(function() {
+ $('nav[data-toggle="toc"]').each(function(i, el) {
+ var $nav = $(el);
+ Toc.init($nav);
+ });
+ });
+})();
diff --git a/docs/css_changes.html b/docs/css_changes.html
new file mode 100644
index 0000000..55fe099
--- /dev/null
+++ b/docs/css_changes.html
@@ -0,0 +1,112 @@
+
+NA • shinyGovstyle
+
+
+
+
+
+
+
+
+
+
+ NA
+
+
+
+These the things needed when updating the gov.uk css to make it work.
+- add to
.govuk-back-link for backlink
+
border: none;
+background: white;
+color: #0b0c0c;
+- error summary change
+
.govuk-error-summary__list {
+ color: #d4351c;
+ font-weight: 700;
+ text-decoration: underline;
+ text-underline-offset: 0.1em
+- add
+
.govuk-link {
+ border:none
+}
+Move fonts css to the font css *Change url links
For accordion need to fix the norem by:
.js-enabled .govuk-accordion-nav__chevron {
+ width: 20px;
+ height: 20px;
+ border: 1px solid;
+
+.js-enabled .govuk-accordion-nav__chevron:after{
+ bottom: 5px;
+ left: 6px;
+ width: 6px;
+ height: 6px;
+ border-top: 2px solid;
+ border-right: 2px solid
+}
+
+.js-enabled .govuk-accordion__section-toggle {
+ pointer-events: none;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/docsearch.css b/docs/docsearch.css
new file mode 100644
index 0000000..e5f1fe1
--- /dev/null
+++ b/docs/docsearch.css
@@ -0,0 +1,148 @@
+/* Docsearch -------------------------------------------------------------- */
+/*
+ Source: https://github.com/algolia/docsearch/
+ License: MIT
+*/
+
+.algolia-autocomplete {
+ display: block;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1
+}
+
+.algolia-autocomplete .ds-dropdown-menu {
+ width: 100%;
+ min-width: none;
+ max-width: none;
+ padding: .75rem 0;
+ background-color: #fff;
+ background-clip: padding-box;
+ border: 1px solid rgba(0, 0, 0, .1);
+ box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
+}
+
+@media (min-width:768px) {
+ .algolia-autocomplete .ds-dropdown-menu {
+ width: 175%
+ }
+}
+
+.algolia-autocomplete .ds-dropdown-menu::before {
+ display: none
+}
+
+.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] {
+ padding: 0;
+ background-color: rgb(255,255,255);
+ border: 0;
+ max-height: 80vh;
+}
+
+.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
+ margin-top: 0
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion {
+ padding: 0;
+ overflow: visible
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+ padding: .125rem 1rem;
+ margin-top: 0;
+ font-size: 1.3em;
+ font-weight: 500;
+ color: #00008B;
+ border-bottom: 0
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
+ float: none;
+ padding-top: 0
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+ float: none;
+ width: auto;
+ padding: 0;
+ text-align: left
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--content {
+ float: none;
+ width: auto;
+ padding: 0
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--content::before {
+ display: none
+}
+
+.algolia-autocomplete .ds-suggestion:not(:first-child) .algolia-docsearch-suggestion--category-header {
+ padding-top: .75rem;
+ margin-top: .75rem;
+ border-top: 1px solid rgba(0, 0, 0, .1)
+}
+
+.algolia-autocomplete .ds-suggestion .algolia-docsearch-suggestion--subcategory-column {
+ display: block;
+ padding: .1rem 1rem;
+ margin-bottom: 0.1;
+ font-size: 1.0em;
+ font-weight: 400
+ /* display: none */
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+ display: block;
+ padding: .25rem 1rem;
+ margin-bottom: 0;
+ font-size: 0.9em;
+ font-weight: 400
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
+ padding: 0 1rem .5rem;
+ margin-top: -.25rem;
+ font-size: 0.8em;
+ font-weight: 400;
+ line-height: 1.25
+}
+
+.algolia-autocomplete .algolia-docsearch-footer {
+ width: 110px;
+ height: 20px;
+ z-index: 3;
+ margin-top: 10.66667px;
+ float: right;
+ font-size: 0;
+ line-height: 0;
+}
+
+.algolia-autocomplete .algolia-docsearch-footer--logo {
+ background-image: url("data:image/svg+xml;utf8,");
+ background-repeat: no-repeat;
+ background-position: 50%;
+ background-size: 100%;
+ overflow: hidden;
+ text-indent: -9000px;
+ width: 100%;
+ height: 100%;
+ display: block;
+ transform: translate(-8px);
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+ color: #FF8C00;
+ background: rgba(232, 189, 54, 0.1)
+}
+
+
+.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+ box-shadow: inset 0 -2px 0 0 rgba(105, 105, 105, .5)
+}
+
+.algolia-autocomplete .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
+ background-color: rgba(192, 192, 192, .15)
+}
diff --git a/docs/docsearch.js b/docs/docsearch.js
new file mode 100644
index 0000000..b35504c
--- /dev/null
+++ b/docs/docsearch.js
@@ -0,0 +1,85 @@
+$(function() {
+
+ // register a handler to move the focus to the search bar
+ // upon pressing shift + "/" (i.e. "?")
+ $(document).on('keydown', function(e) {
+ if (e.shiftKey && e.keyCode == 191) {
+ e.preventDefault();
+ $("#search-input").focus();
+ }
+ });
+
+ $(document).ready(function() {
+ // do keyword highlighting
+ /* modified from https://jsfiddle.net/julmot/bL6bb5oo/ */
+ var mark = function() {
+
+ var referrer = document.URL ;
+ var paramKey = "q" ;
+
+ if (referrer.indexOf("?") !== -1) {
+ var qs = referrer.substr(referrer.indexOf('?') + 1);
+ var qs_noanchor = qs.split('#')[0];
+ var qsa = qs_noanchor.split('&');
+ var keyword = "";
+
+ for (var i = 0; i < qsa.length; i++) {
+ var currentParam = qsa[i].split('=');
+
+ if (currentParam.length !== 2) {
+ continue;
+ }
+
+ if (currentParam[0] == paramKey) {
+ keyword = decodeURIComponent(currentParam[1].replace(/\+/g, "%20"));
+ }
+ }
+
+ if (keyword !== "") {
+ $(".contents").unmark({
+ done: function() {
+ $(".contents").mark(keyword);
+ }
+ });
+ }
+ }
+ };
+
+ mark();
+ });
+});
+
+/* Search term highlighting ------------------------------*/
+
+function matchedWords(hit) {
+ var words = [];
+
+ var hierarchy = hit._highlightResult.hierarchy;
+ // loop to fetch from lvl0, lvl1, etc.
+ for (var idx in hierarchy) {
+ words = words.concat(hierarchy[idx].matchedWords);
+ }
+
+ var content = hit._highlightResult.content;
+ if (content) {
+ words = words.concat(content.matchedWords);
+ }
+
+ // return unique words
+ var words_uniq = [...new Set(words)];
+ return words_uniq;
+}
+
+function updateHitURL(hit) {
+
+ var words = matchedWords(hit);
+ var url = "";
+
+ if (hit.anchor) {
+ url = hit.url_without_anchor + '?q=' + escape(words.join(" ")) + '#' + hit.anchor;
+ } else {
+ url = hit.url + '?q=' + escape(words.join(" "));
+ }
+
+ return url;
+}
diff --git a/docs/favicon-16x16.png b/docs/favicon-16x16.png
new file mode 100644
index 0000000..e371dd7
Binary files /dev/null and b/docs/favicon-16x16.png differ
diff --git a/docs/favicon-32x32.png b/docs/favicon-32x32.png
new file mode 100644
index 0000000..7b899d3
Binary files /dev/null and b/docs/favicon-32x32.png differ
diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 0000000..919fba3
Binary files /dev/null and b/docs/favicon.ico differ
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..9b131d3
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,567 @@
+
+
+
+
+
+
+
+Custom Gov Style Inputs for Shiny • shinyGovstyle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Apply Gov styled components and formats in shiny
+
+
+Overview
+
+This package provides some custom widgets to style your app like gov.uk. There are a variety of widgets available, including select, radio, checkboxes as well as styling for headers and footers.
+To view details of gov.uk components please visit https://design-system.service.gov.uk/. Most components from https://design-system.service.gov.uk/components/ are available to use through this package.
+Installation :
+
+install.packages("shinyGovstyle")
+This is also available on conda
+conda install r-shinygovstyle
+If you want to make use of the development then
+
+remotes::install_github("moj-analytical-services/shinyGovstyle")
+To use error and word count elements you will need to load useShinyjs from shinyjs in the UI:
+
+ shinyjs::useShinyjs()
+
+
+Components available :
+
+
+- Gov style layout
+- Banner
+- Radio button
+- Checkbox
+- Button
+- Select
+- Date
+- File input
+- Text input
+- Text area input
+- Warning
+- Insert text
+- Details
+- Panel
+- Notification Banner
+- Accordion
+- Table
+- Tabs
+- Summary List
+- Cookie Banner
+- Tags
+- Error
+- Example Version
+
+
+Gov style layout
+
+Create a gov style look to the page with a header, footer, font and layout:
+
+ui <- fluidPage(
+ #font(),
+ shinyGovstyle::header("Justice", "Prototype", logo="shinyGovstyle/images/moj_logo.png"),
+ gov_layout(size = "full",
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br()
+ ),
+ footer(TRUE)
+)
+
+server <- function(input, output, session) {}
+Note: You can only use gov.uk font on service.gov.uk (see https://design-system.service.gov.uk/styles/typography/)
+
+
+Banner
+
+Add a banner to the header to state in beta or alpha :
+
+ui <- fluidPage(
+ shinyGovstyle::header("Justice", "Prototype", logo="shinyGovstyle/images/moj_logo.png"),
+ banner("banner", "beta", 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'),
+ gov_layout(size = "full",
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br()
+ ),
+ footer(TRUE)
+)
+
+server <- function(input, output, session) {}
+
+
+Radio button
+
+Create a gov style radio button :
+
+radio_button_Input(inputId = "name_changed", label = "Have you changed your name?",
+ choices = c("Yes", "No"), inline = TRUE,
+ hint_label = "This includes changing your last name or spelling your name differently.")
+
+
+Checkbox
+
+Turn checkboxes into gov style ones :
+
+checkbox_Input(
+ inputId = "checkID",
+ cb_labels = c("Waste from animal carcasses", "Waste from mines or quarries", "Farm or agricultural waste"),
+ checkboxIds = c("op1", "op2", "op3"),
+ label = "Which types of waste do you transport?",
+ hint_label = "Select all that apply.")
+Note that you currently access the values separately through the inputIds you supply or all values through the main inputID.
+
+
+Button
+
+Gov style button with different styles :
+shinyGovstyle::button_Input(inputId = "btn1", label = "default"),
+shinyGovstyle::button_Input(inputId = "btn1", label = "start", type = "start"),
+shinyGovstyle::button_Input(inputId = "btn1", label = "secondary", type = "secondary"),
+shinyGovstyle::button_Input(inputId = "btn1", label = "warning", type = "warning")
+
+
+Select
+
+Gov style drop down select :
+
+shinyGovstyle::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"))
+
+
+Date
+
+Gov style date input :
+
+date_Input(
+ inputId = "date1",
+ label = "What is your date of birth?",
+ hint_label = "For example, 31 3 1980")
+Note that you currently access the individual values by adding an affix of _day, _month and _year or the full date in dd/mm/yy by using the inputID.
+
+
+File input
+
+Gov style file input component :
+
+file_Input(inputId = "file1", label = "Upload a file")
+
+
+Text input
+
+Gov style text input component :
+
+text_Input(inputId = "txt1", label = "Event name")
+
+
+Text area input
+
+Gov style text area input component :
+
+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.")
+You can also add a word count to the options, which requires an additional argument in the server :
+
+ui <- 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)
+)
+
+# Define server logic required to draw a histogram
+server <- function(input, output, session) {
+ observeEvent(input$text_area,
+ word_count(inputId = "text_area", input = input$text_area, word_limit = 300)
+ )
+}
+
+
+Warning
+
+Gov style warning component :
+
+warning_text(inputId = "warn", text = "You can be fined up to £5,000 if you do not register.")
+
+
+Insert text
+
+Gov style insert text component :
+
+insert_text(inputId = "insertId",
+ text = "It can take up to 8 weeks to register a lasting power of attorney
+ if there are no mistakes in the application.")
+
+
+Details
+
+Gov style details component :
+
+ details(
+ inputId = "detID",
+ label = "Help with nationality",
+ help_text = "We need to know your nationality so we can work out which elections you’re
+ entitled to vote in. If you cannot provide your nationality, you’ll have to
+ send copies of identity documents through the post.")
+
+
+Panel
+
+Gov style panel component :
+
+panel_output(
+ inputId = "panId",
+ main_text = "Application complete",
+ sub_text = "Your reference number <br> <strong>HDJ2123F</strong>")
+
+
+
+Accordion
+
+Gov style accordion component :
+
+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."
+ ))
+
+
+Table
+
+Gov style table component :
+
+Months <- c("January", "February", "March")
+Bikes <- c("£85", "£75", "£165")
+Cars <- c("£95", "£55", "£125")
+example_data <- data.frame(Months, Bikes, Cars)
+
+shinyGovstyle::govTable(
+ "tab1", example_data, "Test", "l", num_col = c(2,3),
+ width_overwrite = c("one-half", "one-quarter", "one-quarter"))
+
+
+Tabs
+
+Gov style tabs component :
+
+ # 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("tabsID", data, "tabs")),
+ shinyGovstyle::footer(full = TRUE)
+ )
+
+ server <- function(input, output, session) {}
+ shinyApp(ui = ui, server = server)
+
+
+Summary List
+
+Gov style summary list :
+
+ # 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> sarah.phillips@example.com")
+
+ 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 = TRUE)),
+ shinyGovstyle::footer(full = TRUE)
+ )
+
+ server <- function(input, output, session) {}
+ shinyApp(ui = ui, server = server)
+
+
+Cookie Banner
+
+Gov style cookie banner :
+
+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
+ #updateTabsetPanel to have a cookie page for instance
+ })
+
+}
+shinyApp(ui = ui, server = server)
+
+
+
+Error
+
+Add errors to components when not filled in correctly. Most components have an option to add :
+
+ui <- fluidPage(
+ shinyjs::useShinyjs(),
+ shinyGovstyle::header("Justice", "", logo="shinyGovstyle/images/moj_logo.png"),
+ gov_layout(size = "full",
+ text_area_Input(
+ "text_area",
+ "Can you provide more detail?",
+ "Do not include personal or financial information, like your National Insurance number or credit card details.",
+ word_limit = 300, error = TRUE, error_message = "Error"),
+
+ button_Input("btn1", "Toggle error")
+ ),
+ footer(TRUE)
+)
+
+server <- function(input, output, session) {
+ err <<- FALSE
+ observeEvent(input$btn1,{
+ if (err) {
+ err <<- FALSE
+ error_off("text_area")
+ }
+ else {
+ err <<- TRUE
+ error_on("text_area", "You have an error")
+ }
+ }
+ )
+}
+
+
+Example Version
+
+You can run an example dashboard. This is very rough and will be improved.
+
+run_example()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/link.svg b/docs/link.svg
new file mode 100644
index 0000000..88ad827
--- /dev/null
+++ b/docs/link.svg
@@ -0,0 +1,12 @@
+
+
+
diff --git a/docs/logo.png b/docs/logo.png
new file mode 100644
index 0000000..d87cda6
Binary files /dev/null and b/docs/logo.png differ
diff --git a/docs/news/index.html b/docs/news/index.html
new file mode 100644
index 0000000..b68e88c
--- /dev/null
+++ b/docs/news/index.html
@@ -0,0 +1,106 @@
+
+Changelog • shinyGovstyle
+
+
+
+
+
+
+
+
+
+
+ Changelog
+ Source: NEWS.md
+
+
+
+shinyGovstyle 0.0.82022-02-22
+- Update the css to v4.0.0 and made fixes associated with that.
+- One of the major changes in the css is a change in look for the accordion.
+- Added new functions
gov_main_layout, gov_row, gov_box and gov_text to give better control over the layouts.
+- Added tabs as a component using the
govTab command
+- Added summary list as a component using the
gov_summary command
+- Added error summary component (
error_summary) and error summary update (error_summary_update)
+
+
+shinyGovstyle 0.0.72021-11-04
+- Improved the header so that you can adjust the logo size to suit
+- Fix some errors that appeared in the footer
+- Fix the word count function so that you only need to enter word count limit on the
text_area function. You can change the limit on word_count if needed.
+- Change the
run_example to a better versions that show more ways you can you the package.
+- Change the
backlink_Input to a button so that you can use server to move between panels etc.
+- Added tags through the
tag_Input function plus added to the use_example.
+- Added cookie banner through the
cookieBanner function.
+- Added accordion through the
accordion function.
+- Added tables through the
govTable function.
+
+
+shinyGovstyle 0.0.62021-10-25
+- Fix minor bugs from the issues list including data default and radio default
+- Added units test
+- Added an example function
+- Added a
NEWS.md file to track changes to the package.
+- Added a notification banner function
+- Got ready for CRAN release.
+- Added output value to the documentation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/pkgdown.css b/docs/pkgdown.css
new file mode 100644
index 0000000..80ea5b8
--- /dev/null
+++ b/docs/pkgdown.css
@@ -0,0 +1,384 @@
+/* Sticky footer */
+
+/**
+ * Basic idea: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
+ * Details: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css
+ *
+ * .Site -> body > .container
+ * .Site-content -> body > .container .row
+ * .footer -> footer
+ *
+ * Key idea seems to be to ensure that .container and __all its parents__
+ * have height set to 100%
+ *
+ */
+
+html, body {
+ height: 100%;
+}
+
+body {
+ position: relative;
+}
+
+body > .container {
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+}
+
+body > .container .row {
+ flex: 1 0 auto;
+}
+
+footer {
+ margin-top: 45px;
+ padding: 35px 0 36px;
+ border-top: 1px solid #e5e5e5;
+ color: #666;
+ display: flex;
+ flex-shrink: 0;
+}
+footer p {
+ margin-bottom: 0;
+}
+footer div {
+ flex: 1;
+}
+footer .pkgdown {
+ text-align: right;
+}
+footer p {
+ margin-bottom: 0;
+}
+
+img.icon {
+ float: right;
+}
+
+/* Ensure in-page images don't run outside their container */
+.contents img {
+ max-width: 100%;
+ height: auto;
+}
+
+/* Fix bug in bootstrap (only seen in firefox) */
+summary {
+ display: list-item;
+}
+
+/* Typographic tweaking ---------------------------------*/
+
+.contents .page-header {
+ margin-top: calc(-60px + 1em);
+}
+
+dd {
+ margin-left: 3em;
+}
+
+/* Section anchors ---------------------------------*/
+
+a.anchor {
+ display: none;
+ margin-left: 5px;
+ width: 20px;
+ height: 20px;
+
+ background-image: url(./link.svg);
+ background-repeat: no-repeat;
+ background-size: 20px 20px;
+ background-position: center center;
+}
+
+h1:hover .anchor,
+h2:hover .anchor,
+h3:hover .anchor,
+h4:hover .anchor,
+h5:hover .anchor,
+h6:hover .anchor {
+ display: inline-block;
+}
+
+/* Fixes for fixed navbar --------------------------*/
+
+.contents h1, .contents h2, .contents h3, .contents h4 {
+ padding-top: 60px;
+ margin-top: -40px;
+}
+
+/* Navbar submenu --------------------------*/
+
+.dropdown-submenu {
+ position: relative;
+}
+
+.dropdown-submenu>.dropdown-menu {
+ top: 0;
+ left: 100%;
+ margin-top: -6px;
+ margin-left: -1px;
+ border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover>.dropdown-menu {
+ display: block;
+}
+
+.dropdown-submenu>a:after {
+ display: block;
+ content: " ";
+ float: right;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 5px 0 5px 5px;
+ border-left-color: #cccccc;
+ margin-top: 5px;
+ margin-right: -10px;
+}
+
+.dropdown-submenu:hover>a:after {
+ border-left-color: #ffffff;
+}
+
+.dropdown-submenu.pull-left {
+ float: none;
+}
+
+.dropdown-submenu.pull-left>.dropdown-menu {
+ left: -100%;
+ margin-left: 10px;
+ border-radius: 6px 0 6px 6px;
+}
+
+/* Sidebar --------------------------*/
+
+#pkgdown-sidebar {
+ margin-top: 30px;
+ position: -webkit-sticky;
+ position: sticky;
+ top: 70px;
+}
+
+#pkgdown-sidebar h2 {
+ font-size: 1.5em;
+ margin-top: 1em;
+}
+
+#pkgdown-sidebar h2:first-child {
+ margin-top: 0;
+}
+
+#pkgdown-sidebar .list-unstyled li {
+ margin-bottom: 0.5em;
+}
+
+/* bootstrap-toc tweaks ------------------------------------------------------*/
+
+/* All levels of nav */
+
+nav[data-toggle='toc'] .nav > li > a {
+ padding: 4px 20px 4px 6px;
+ font-size: 1.5rem;
+ font-weight: 400;
+ color: inherit;
+}
+
+nav[data-toggle='toc'] .nav > li > a:hover,
+nav[data-toggle='toc'] .nav > li > a:focus {
+ padding-left: 5px;
+ color: inherit;
+ border-left: 1px solid #878787;
+}
+
+nav[data-toggle='toc'] .nav > .active > a,
+nav[data-toggle='toc'] .nav > .active:hover > a,
+nav[data-toggle='toc'] .nav > .active:focus > a {
+ padding-left: 5px;
+ font-size: 1.5rem;
+ font-weight: 400;
+ color: inherit;
+ border-left: 2px solid #878787;
+}
+
+/* Nav: second level (shown on .active) */
+
+nav[data-toggle='toc'] .nav .nav {
+ display: none; /* Hide by default, but at >768px, show it */
+ padding-bottom: 10px;
+}
+
+nav[data-toggle='toc'] .nav .nav > li > a {
+ padding-left: 16px;
+ font-size: 1.35rem;
+}
+
+nav[data-toggle='toc'] .nav .nav > li > a:hover,
+nav[data-toggle='toc'] .nav .nav > li > a:focus {
+ padding-left: 15px;
+}
+
+nav[data-toggle='toc'] .nav .nav > .active > a,
+nav[data-toggle='toc'] .nav .nav > .active:hover > a,
+nav[data-toggle='toc'] .nav .nav > .active:focus > a {
+ padding-left: 15px;
+ font-weight: 500;
+ font-size: 1.35rem;
+}
+
+/* orcid ------------------------------------------------------------------- */
+
+.orcid {
+ font-size: 16px;
+ color: #A6CE39;
+ /* margins are required by official ORCID trademark and display guidelines */
+ margin-left:4px;
+ margin-right:4px;
+ vertical-align: middle;
+}
+
+/* Reference index & topics ----------------------------------------------- */
+
+.ref-index th {font-weight: normal;}
+
+.ref-index td {vertical-align: top; min-width: 100px}
+.ref-index .icon {width: 40px;}
+.ref-index .alias {width: 40%;}
+.ref-index-icons .alias {width: calc(40% - 40px);}
+.ref-index .title {width: 60%;}
+
+.ref-arguments th {text-align: right; padding-right: 10px;}
+.ref-arguments th, .ref-arguments td {vertical-align: top; min-width: 100px}
+.ref-arguments .name {width: 20%;}
+.ref-arguments .desc {width: 80%;}
+
+/* Nice scrolling for wide elements --------------------------------------- */
+
+table {
+ display: block;
+ overflow: auto;
+}
+
+/* Syntax highlighting ---------------------------------------------------- */
+
+pre, code, pre code {
+ background-color: #f8f8f8;
+ color: #333;
+}
+pre, pre code {
+ white-space: pre-wrap;
+ word-break: break-all;
+ overflow-wrap: break-word;
+}
+
+pre {
+ border: 1px solid #eee;
+}
+
+pre .img, pre .r-plt {
+ margin: 5px 0;
+}
+
+pre .img img, pre .r-plt img {
+ background-color: #fff;
+}
+
+code a, pre a {
+ color: #375f84;
+}
+
+a.sourceLine:hover {
+ text-decoration: none;
+}
+
+.fl {color: #1514b5;}
+.fu {color: #000000;} /* function */
+.ch,.st {color: #036a07;} /* string */
+.kw {color: #264D66;} /* keyword */
+.co {color: #888888;} /* comment */
+
+.error {font-weight: bolder;}
+.warning {font-weight: bolder;}
+
+/* Clipboard --------------------------*/
+
+.hasCopyButton {
+ position: relative;
+}
+
+.btn-copy-ex {
+ position: absolute;
+ right: 0;
+ top: 0;
+ visibility: hidden;
+}
+
+.hasCopyButton:hover button.btn-copy-ex {
+ visibility: visible;
+}
+
+/* headroom.js ------------------------ */
+
+.headroom {
+ will-change: transform;
+ transition: transform 200ms linear;
+}
+.headroom--pinned {
+ transform: translateY(0%);
+}
+.headroom--unpinned {
+ transform: translateY(-100%);
+}
+
+/* mark.js ----------------------------*/
+
+mark {
+ background-color: rgba(255, 255, 51, 0.5);
+ border-bottom: 2px solid rgba(255, 153, 51, 0.3);
+ padding: 1px;
+}
+
+/* vertical spacing after htmlwidgets */
+.html-widget {
+ margin-bottom: 10px;
+}
+
+/* fontawesome ------------------------ */
+
+.fab {
+ font-family: "Font Awesome 5 Brands" !important;
+}
+
+/* don't display links in code chunks when printing */
+/* source: https://stackoverflow.com/a/10781533 */
+@media print {
+ code a:link:after, code a:visited:after {
+ content: "";
+ }
+}
+
+/* Section anchors ---------------------------------
+ Added in pandoc 2.11: https://github.com/jgm/pandoc-templates/commit/9904bf71
+*/
+
+div.csl-bib-body { }
+div.csl-entry {
+ clear: both;
+}
+.hanging-indent div.csl-entry {
+ margin-left:2em;
+ text-indent:-2em;
+}
+div.csl-left-margin {
+ min-width:2em;
+ float:left;
+}
+div.csl-right-inline {
+ margin-left:2em;
+ padding-left:1em;
+}
+div.csl-indent {
+ margin-left: 2em;
+}
diff --git a/docs/pkgdown.js b/docs/pkgdown.js
new file mode 100644
index 0000000..6f0eee4
--- /dev/null
+++ b/docs/pkgdown.js
@@ -0,0 +1,108 @@
+/* http://gregfranko.com/blog/jquery-best-practices/ */
+(function($) {
+ $(function() {
+
+ $('.navbar-fixed-top').headroom();
+
+ $('body').css('padding-top', $('.navbar').height() + 10);
+ $(window).resize(function(){
+ $('body').css('padding-top', $('.navbar').height() + 10);
+ });
+
+ $('[data-toggle="tooltip"]').tooltip();
+
+ var cur_path = paths(location.pathname);
+ var links = $("#navbar ul li a");
+ var max_length = -1;
+ var pos = -1;
+ for (var i = 0; i < links.length; i++) {
+ if (links[i].getAttribute("href") === "#")
+ continue;
+ // Ignore external links
+ if (links[i].host !== location.host)
+ continue;
+
+ var nav_path = paths(links[i].pathname);
+
+ var length = prefix_length(nav_path, cur_path);
+ if (length > max_length) {
+ max_length = length;
+ pos = i;
+ }
+ }
+
+ // Add class to parent
+
+
+
+
+
+
+
+
+
+
+
+
+
+NA
+These the things needed when updating the gov.uk css to make it work.
+- add to
.govuk-back-linkfor backlink
+
border: none;
+background: white;
+color: #0b0c0c;- error summary change +
.govuk-error-summary__list {
+ color: #d4351c;
+ font-weight: 700;
+ text-decoration: underline;
+ text-underline-offset: 0.1em- add +
.govuk-link {
+ border:none
+}Move fonts css to the font css *Change url links
+For accordion need to fix the norem by:
+
.js-enabled .govuk-accordion-nav__chevron {
+ width: 20px;
+ height: 20px;
+ border: 1px solid;
+
+.js-enabled .govuk-accordion-nav__chevron:after{
+ bottom: 5px;
+ left: 6px;
+ width: 6px;
+ height: 6px;
+ border-top: 2px solid;
+ border-right: 2px solid
+}
+
+.js-enabled .govuk-accordion__section-toggle {
+ pointer-events: none;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
++Apply Gov styled components and formats in shiny
+
+
+
+
+
+Overview +
+This package provides some custom widgets to style your app like gov.uk. There are a variety of widgets available, including select, radio, checkboxes as well as styling for headers and footers.
+To view details of gov.uk components please visit https://design-system.service.gov.uk/. Most components from https://design-system.service.gov.uk/components/ are available to use through this package.
+Installation :
+
+install.packages("shinyGovstyle")This is also available on conda
+conda install r-shinygovstyleIf you want to make use of the development then
+
+remotes::install_github("moj-analytical-services/shinyGovstyle")To use error and word count elements you will need to load useShinyjs from shinyjs in the UI:
+
+ shinyjs::useShinyjs()
+
+Components available : +
+-
+
- Gov style layout +
- Banner +
- Radio button +
- Checkbox +
- Button +
- Select +
- Date +
- File input +
- Text input +
- Text area input +
- Warning +
- Insert text +
- Details +
- Panel +
- Notification Banner +
- Accordion +
- Table +
- Tabs +
- Summary List +
- Cookie Banner +
- Tags +
- Error +
- Example Version +
+
+
+Gov style layout +
+Create a gov style look to the page with a header, footer, font and layout:
+ui <- fluidPage(
+ #font(),
+ shinyGovstyle::header("Justice", "Prototype", logo="shinyGovstyle/images/moj_logo.png"),
+ gov_layout(size = "full",
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br()
+ ),
+ footer(TRUE)
+)
+
+server <- function(input, output, session) {}Note: You can only use gov.uk font on service.gov.uk (see https://design-system.service.gov.uk/styles/typography/)
+
+
+
+Banner +
+Add a banner to the header to state in beta or alpha :
+ui <- fluidPage(
+ shinyGovstyle::header("Justice", "Prototype", logo="shinyGovstyle/images/moj_logo.png"),
+ banner("banner", "beta", 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'),
+ gov_layout(size = "full",
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br(),
+ tags$br()
+ ),
+ footer(TRUE)
+)
+
+server <- function(input, output, session) {}
+
+
+Radio button +
+Create a gov style radio button :
+radio_button_Input(inputId = "name_changed", label = "Have you changed your name?",
+ choices = c("Yes", "No"), inline = TRUE,
+ hint_label = "This includes changing your last name or spelling your name differently.")
+
+
+Checkbox +
+Turn checkboxes into gov style ones :
+checkbox_Input(
+ inputId = "checkID",
+ cb_labels = c("Waste from animal carcasses", "Waste from mines or quarries", "Farm or agricultural waste"),
+ checkboxIds = c("op1", "op2", "op3"),
+ label = "Which types of waste do you transport?",
+ hint_label = "Select all that apply.")Note that you currently access the values separately through the inputIds you supply or all values through the main inputID.
+
+
+
+Button +
+Gov style button with different styles :
shinyGovstyle::button_Input(inputId = "btn1", label = "default"),
+shinyGovstyle::button_Input(inputId = "btn1", label = "start", type = "start"),
+shinyGovstyle::button_Input(inputId = "btn1", label = "secondary", type = "secondary"),
+shinyGovstyle::button_Input(inputId = "btn1", label = "warning", type = "warning")
+
+
+Select +
+Gov style drop down select :
+shinyGovstyle::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"))
+
+
+Date +
+Gov style date input :
+date_Input(
+ inputId = "date1",
+ label = "What is your date of birth?",
+ hint_label = "For example, 31 3 1980")Note that you currently access the individual values by adding an affix of _day, _month and _year or the full date in dd/mm/yy by using the inputID.
+
+
+
+File input +
+Gov style file input component :
+file_Input(inputId = "file1", label = "Upload a file")
+
+
+Text input +
+Gov style text input component :
+text_Input(inputId = "txt1", label = "Event name")
+
+
+
+Text area input +
+Gov style text area input component :
+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.")You can also add a word count to the options, which requires an additional argument in the server :
+ui <- 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)
+)
+
+# Define server logic required to draw a histogram
+server <- function(input, output, session) {
+ observeEvent(input$text_area,
+ word_count(inputId = "text_area", input = input$text_area, word_limit = 300)
+ )
+}
+
+
+Warning +
+Gov style warning component :
+warning_text(inputId = "warn", text = "You can be fined up to £5,000 if you do not register.")
+
+
+Insert text +
+Gov style insert text component :
+insert_text(inputId = "insertId",
+ text = "It can take up to 8 weeks to register a lasting power of attorney
+ if there are no mistakes in the application.")
+
+
+Details +
+Gov style details component :
+ details(
+ inputId = "detID",
+ label = "Help with nationality",
+ help_text = "We need to know your nationality so we can work out which elections you’re
+ entitled to vote in. If you cannot provide your nationality, you’ll have to
+ send copies of identity documents through the post.")
+
+
+
+Panel +
+Gov style panel component :
+panel_output(
+ inputId = "panId",
+ main_text = "Application complete",
+ sub_text = "Your reference number <br> <strong>HDJ2123F</strong>")
+
+
+Accordion +
+Gov style accordion component :
+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."
+ ))
+
+
+Table +
+Gov style table component :
+Months <- c("January", "February", "March")
+Bikes <- c("£85", "£75", "£165")
+Cars <- c("£95", "£55", "£125")
+example_data <- data.frame(Months, Bikes, Cars)
+
+shinyGovstyle::govTable(
+ "tab1", example_data, "Test", "l", num_col = c(2,3),
+ width_overwrite = c("one-half", "one-quarter", "one-quarter"))
+
+
+Tabs +
+Gov style tabs component :
+ # 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("tabsID", data, "tabs")),
+ shinyGovstyle::footer(full = TRUE)
+ )
+
+ server <- function(input, output, session) {}
+ shinyApp(ui = ui, server = server)
+
+
+Summary List +
+Gov style summary list :
+ # 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> sarah.phillips@example.com")
+
+ 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 = TRUE)),
+ shinyGovstyle::footer(full = TRUE)
+ )
+
+ server <- function(input, output, session) {}
+ shinyApp(ui = ui, server = server)
+
+
+
+Cookie Banner +
+Gov style cookie banner :
+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
+ #updateTabsetPanel to have a cookie page for instance
+ })
+
+}
+shinyApp(ui = ui, server = server)
+
+
+Error +
+Add errors to components when not filled in correctly. Most components have an option to add :
+ui <- fluidPage(
+ shinyjs::useShinyjs(),
+ shinyGovstyle::header("Justice", "", logo="shinyGovstyle/images/moj_logo.png"),
+ gov_layout(size = "full",
+ text_area_Input(
+ "text_area",
+ "Can you provide more detail?",
+ "Do not include personal or financial information, like your National Insurance number or credit card details.",
+ word_limit = 300, error = TRUE, error_message = "Error"),
+
+ button_Input("btn1", "Toggle error")
+ ),
+ footer(TRUE)
+)
+
+server <- function(input, output, session) {
+ err <<- FALSE
+ observeEvent(input$btn1,{
+ if (err) {
+ err <<- FALSE
+ error_off("text_area")
+ }
+ else {
+ err <<- TRUE
+ error_on("text_area", "You have an error")
+ }
+ }
+ )
+}
+
+
+Example Version +
+You can run an example dashboard. This is very rough and will be improved.
+run_example()
+
+
+
+
+
+
+
+
+
+
+
+ Changelog
+ Source:NEWS.md
+
+
+ shinyGovstyle 0.0.82022-02-22
+- Update the css to v4.0.0 and made fixes associated with that. +
- One of the major changes in the css is a change in look for the accordion. +
- Added new functions
gov_main_layout,gov_row,gov_boxandgov_textto give better control over the layouts.
+ - Added tabs as a component using the
govTabcommand
+ - Added summary list as a component using the
gov_summarycommand
+ - Added error summary component (
error_summary) and error summary update (error_summary_update)
+
+
+ shinyGovstyle 0.0.72021-11-04
+- Improved the header so that you can adjust the logo size to suit +
- Fix some errors that appeared in the footer +
- Fix the word count function so that you only need to enter word count limit on the
text_areafunction. You can change the limit onword_countif needed.
+ - Change the
run_exampleto a better versions that show more ways you can you the package.
+ - Change the
backlink_Inputto a button so that you can use server to move between panels etc.
+ - Added tags through the
tag_Inputfunction plus added to theuse_example.
+ - Added cookie banner through the
cookieBannerfunction.
+ - Added accordion through the
accordionfunction.
+ - Added tables through the
govTablefunction.
+
+
+ shinyGovstyle 0.0.62021-10-25
+- Fix minor bugs from the issues list including data default and radio default +
- Added units test +
- Added an example function +
- Added a
NEWS.mdfile to track changes to the package.
+ - Added a notification banner function +
- Got ready for CRAN release. +
- Added output value to the documentation +
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/backlink_Input.html b/docs/reference/backlink_Input.html
new file mode 100644
index 0000000..4ad2d95
--- /dev/null
+++ b/docs/reference/backlink_Input.html
@@ -0,0 +1,134 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function inserts a accordion
+
+
+
+
+ accordion(inputId, titles, descriptions)
+
+ Arguments
+- inputId +
Input id for the accordion
+
+
+- titles +
Add the titles for the accordion
+
+
+- descriptions +
Add the main text for the accordion
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/banner.html b/docs/reference/banner.html
new file mode 100644
index 0000000..a3022c1
--- /dev/null
+++ b/docs/reference/banner.html
@@ -0,0 +1,124 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function adds a back link to the page
+
+
+
+
+ backlink_Input(inputId)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/button_Input.html b/docs/reference/button_Input.html
new file mode 100644
index 0000000..f053e19
--- /dev/null
+++ b/docs/reference/button_Input.html
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create a detail component that you can click for further +details.
+
+
+
+
+ banner(inputId, type, label)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- type +
Main type of label e.g. alpha or beta. Can be any word.
+
+
+- label +
test to display.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/checkbox_Input.html b/docs/reference/checkbox_Input.html
new file mode 100644
index 0000000..380ccc6
--- /dev/null
+++ b/docs/reference/checkbox_Input.html
@@ -0,0 +1,183 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create a gov style button
+
+
+
+
+ button_Input(inputId, label, type = "default")
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- label +
Display label for the control, or
NULLfor no label.
+
+
+- type +
The type of button. Options are default, start, secondary and +warning. Defaults to default.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/cookieBanner.html b/docs/reference/cookieBanner.html
new file mode 100644
index 0000000..7adafdf
--- /dev/null
+++ b/docs/reference/cookieBanner.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function inserts a checkbox group
+
+
+
+
+ checkbox_Input(
+ inputId,
+ cb_labels,
+ checkboxIds,
+ label,
+ hint_label = NULL,
+ small = FALSE,
+ error = FALSE,
+ error_message = NULL
+)
+
+ Arguments
+- inputId +
Input id for the group of checkboxes
+
+
+- cb_labels +
Add the names of the options that will appear
+
+
+- checkboxIds +
Add the values for each checkbox
+
+
+- label +
Insert the text for the checkbox group.
+
+
+- hint_label +
Insert optional hint/secondary text. Defaults to NULL
+
+
+- small +
change the sizing to a small version of the checkbox. Defaults +to
FALSE
+
+
+- error +
Whenever you want to include error handle on the component.
+
+
+- error_message +
If you want a default error message.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/date_Input.html b/docs/reference/date_Input.html
new file mode 100644
index 0000000..a06b4ec
--- /dev/null
+++ b/docs/reference/date_Input.html
@@ -0,0 +1,178 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+ cookieBanner(service_name)
+
+ Arguments
+- service_name +
Name for this service to add to banner
+
+
+
+
+ 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 you
+ #updateTabsetPanel to have a cookie page for instance
+ })
+
+}
+shinyApp(ui = ui, server = server)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/details.html b/docs/reference/details.html
new file mode 100644
index 0000000..a989045
--- /dev/null
+++ b/docs/reference/details.html
@@ -0,0 +1,127 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create a date input that follows GDS component
+
+
+
+
+ date_Input(
+ inputId,
+ label,
+ hint_label = NULL,
+ error = FALSE,
+ error_message = NULL,
+ day = NULL,
+ month = NULL,
+ year = NULL
+)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- label +
Display label for the control, or
NULLfor no label.
+
+
+- hint_label +
Display hint label for the control, or
NULLfor no +hint label.
+
+
+- error +
Whenever to include error components.Defaults to
FALSE.
+
+
+- error_message +
Error handling message? Defaults to
NULL
+
+
+- day +
Select a default day on start up. Defaults to
NULL
+
+
+- month +
Select a default month on start up. Defaults to
NULL
+
+
+- year +
Select a default year on start up. Defaults to
NULL
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/error_off.html b/docs/reference/error_off.html
new file mode 100644
index 0000000..ead8377
--- /dev/null
+++ b/docs/reference/error_off.html
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create a detail component that you can click for further +details.
+
+
+
+
+ details(inputId, label, help_text)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- label +
Main label text
+
+
+- help_text +
Additional help information in the component.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/error_on.html b/docs/reference/error_on.html
new file mode 100644
index 0000000..a52ad99
--- /dev/null
+++ b/docs/reference/error_on.html
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function turns off the the error o the component, once issues have +been sorted.
+
+
+
+
+ error_off(inputId)
+
+ Arguments
+- inputId +
The inputId to turn error handling iff for on for.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/error_summary.html b/docs/reference/error_summary.html
new file mode 100644
index 0000000..af5a3ca
--- /dev/null
+++ b/docs/reference/error_summary.html
@@ -0,0 +1,143 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function turns on the the error o the component. Can be used to +validate inputs.
+
+
+
+
+ error_on(inputId, error_message = NULL)
+
+ Arguments
+- inputId +
The input id that you to to turn the error on for.
+
+
+- error_message +
if you want to add an additional error message. +Defaults to NULL, showing the original designed error message
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/error_summary_update.html b/docs/reference/error_summary_update.html
new file mode 100644
index 0000000..9afb62c
--- /dev/null
+++ b/docs/reference/error_summary_update.html
@@ -0,0 +1,138 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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/
+
+
+
+
+ error_summary(inputId, error_title, error_list)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- error_title +
The title for the error summary.
+
+
+- error_list +
A list of text values to be displayed in the error body.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/figures/accordion.png b/docs/reference/figures/accordion.png
new file mode 100644
index 0000000..8686635
Binary files /dev/null and b/docs/reference/figures/accordion.png differ
diff --git a/docs/reference/figures/banner.png b/docs/reference/figures/banner.png
new file mode 100644
index 0000000..a9886d3
Binary files /dev/null and b/docs/reference/figures/banner.png differ
diff --git a/docs/reference/figures/buttons.png b/docs/reference/figures/buttons.png
new file mode 100644
index 0000000..3edd942
Binary files /dev/null and b/docs/reference/figures/buttons.png differ
diff --git a/docs/reference/figures/checkbox.png b/docs/reference/figures/checkbox.png
new file mode 100644
index 0000000..1680a30
Binary files /dev/null and b/docs/reference/figures/checkbox.png differ
diff --git a/docs/reference/figures/cookie.png b/docs/reference/figures/cookie.png
new file mode 100644
index 0000000..ebe6ff5
Binary files /dev/null and b/docs/reference/figures/cookie.png differ
diff --git a/docs/reference/figures/date.png b/docs/reference/figures/date.png
new file mode 100644
index 0000000..ffd634b
Binary files /dev/null and b/docs/reference/figures/date.png differ
diff --git a/docs/reference/figures/details.png b/docs/reference/figures/details.png
new file mode 100644
index 0000000..d3f587a
Binary files /dev/null and b/docs/reference/figures/details.png differ
diff --git a/docs/reference/figures/error.png b/docs/reference/figures/error.png
new file mode 100644
index 0000000..e76a055
Binary files /dev/null and b/docs/reference/figures/error.png differ
diff --git a/docs/reference/figures/example.png b/docs/reference/figures/example.png
new file mode 100644
index 0000000..41feb87
Binary files /dev/null and b/docs/reference/figures/example.png differ
diff --git a/docs/reference/figures/file.png b/docs/reference/figures/file.png
new file mode 100644
index 0000000..f1aaab5
Binary files /dev/null and b/docs/reference/figures/file.png differ
diff --git a/docs/reference/figures/insert.png b/docs/reference/figures/insert.png
new file mode 100644
index 0000000..5c122e8
Binary files /dev/null and b/docs/reference/figures/insert.png differ
diff --git a/docs/reference/figures/logo.png b/docs/reference/figures/logo.png
new file mode 100644
index 0000000..d87cda6
Binary files /dev/null and b/docs/reference/figures/logo.png differ
diff --git a/docs/reference/figures/noti_banner.png b/docs/reference/figures/noti_banner.png
new file mode 100644
index 0000000..e0e5611
Binary files /dev/null and b/docs/reference/figures/noti_banner.png differ
diff --git a/docs/reference/figures/page_layout.png b/docs/reference/figures/page_layout.png
new file mode 100644
index 0000000..6326019
Binary files /dev/null and b/docs/reference/figures/page_layout.png differ
diff --git a/docs/reference/figures/panel.png b/docs/reference/figures/panel.png
new file mode 100644
index 0000000..15db806
Binary files /dev/null and b/docs/reference/figures/panel.png differ
diff --git a/docs/reference/figures/radio_button_Input.png b/docs/reference/figures/radio_button_Input.png
new file mode 100644
index 0000000..6289195
Binary files /dev/null and b/docs/reference/figures/radio_button_Input.png differ
diff --git a/docs/reference/figures/select.png b/docs/reference/figures/select.png
new file mode 100644
index 0000000..3c213c7
Binary files /dev/null and b/docs/reference/figures/select.png differ
diff --git a/docs/reference/figures/summary.png b/docs/reference/figures/summary.png
new file mode 100644
index 0000000..5b55cb6
Binary files /dev/null and b/docs/reference/figures/summary.png differ
diff --git a/docs/reference/figures/table.png b/docs/reference/figures/table.png
new file mode 100644
index 0000000..409eaaa
Binary files /dev/null and b/docs/reference/figures/table.png differ
diff --git a/docs/reference/figures/tabs.png b/docs/reference/figures/tabs.png
new file mode 100644
index 0000000..c1841d1
Binary files /dev/null and b/docs/reference/figures/tabs.png differ
diff --git a/docs/reference/figures/tags.png b/docs/reference/figures/tags.png
new file mode 100644
index 0000000..f17cbf4
Binary files /dev/null and b/docs/reference/figures/tags.png differ
diff --git a/docs/reference/figures/text.png b/docs/reference/figures/text.png
new file mode 100644
index 0000000..d1e13d4
Binary files /dev/null and b/docs/reference/figures/text.png differ
diff --git a/docs/reference/figures/text_area.png b/docs/reference/figures/text_area.png
new file mode 100644
index 0000000..099ff69
Binary files /dev/null and b/docs/reference/figures/text_area.png differ
diff --git a/docs/reference/figures/warning.png b/docs/reference/figures/warning.png
new file mode 100644
index 0000000..680d7d3
Binary files /dev/null and b/docs/reference/figures/warning.png differ
diff --git a/docs/reference/figures/word_count.png b/docs/reference/figures/word_count.png
new file mode 100644
index 0000000..911ac93
Binary files /dev/null and b/docs/reference/figures/word_count.png differ
diff --git a/docs/reference/file_Input.html b/docs/reference/file_Input.html
new file mode 100644
index 0000000..5de3f4f
--- /dev/null
+++ b/docs/reference/file_Input.html
@@ -0,0 +1,190 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function changes the text that displays in the error summary box. +Requires shinyjs::useShinyjs() to work.
+
+
+
+
+ error_summary_update(inputId, error_list)
+
+ Arguments
+- inputId +
The inputid of the error summary you want to update
+
+
+- error_list +
An updated list of text values to be displayed in the +error body.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/font.html b/docs/reference/font.html
new file mode 100644
index 0000000..8ee6f49
--- /dev/null
+++ b/docs/reference/font.html
@@ -0,0 +1,111 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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
+
+
+
+
+ file_Input(
+ inputId,
+ label,
+ multiple = FALSE,
+ accept = NULL,
+ width = NULL,
+ buttonLabel = "Choose file",
+ placeholder = "No file chosen",
+ error = FALSE,
+ error_message = NULL
+)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- label +
Display label for the control, or
NULLfor no label.
+
+
+- multiple +
Whether the user should be allowed to select and upload +multiple files at once. Does not work on older browsers, including Internet +Explorer 9 and earlier.
+
+
+- accept +
A character vector of MIME types; gives the browser a hint of +what kind of files the server is expecting.
+
+
+- width +
The width of the input, e.g.
'400px', or'100%'
+
+
+- buttonLabel +
The label used on the button. Can be text or an HTML tag +object.
+
+
+- placeholder +
The text to show before a file has been uploaded.
+
+
+- error +
Whenever to icnlud error handling Defaults to FALSE.
+
+
+- error_message +
Message to display on error. Defaults to NULL
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/footer.html b/docs/reference/footer.html
new file mode 100644
index 0000000..8f7d710
--- /dev/null
+++ b/docs/reference/footer.html
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function adds rge nta fonts to the app. See +https://design-system.service.gov.uk/styles/typography/ for when they +are allowed.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/govTable.html b/docs/reference/govTable.html
new file mode 100644
index 0000000..4446377
--- /dev/null
+++ b/docs/reference/govTable.html
@@ -0,0 +1,159 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create a gov style footer for your page
+
+
+
+
+ footer(full = FALSE)
+
+ Arguments
+- full +
Whenever you want to have blank footer or official gov version. +Defaults to
FALSE
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/govTabs.html b/docs/reference/govTabs.html
new file mode 100644
index 0000000..3b897f7
--- /dev/null
+++ b/docs/reference/govTabs.html
@@ -0,0 +1,134 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function inserts a gov styled table. Format is with header looking +rows and columns
+
+
+
+
+ govTable(
+ inputId,
+ df,
+ caption,
+ caption_size = "l",
+ num_col = NULL,
+ width_overwrite = NULL
+)
+
+ Arguments
+- inputId +
Input id for the table
+
+
+- df +
expects a dataframe to create a table
+
+
+- caption +
adds a caption to the table as a header
+
+
+- caption_size +
adjust the size of caption. Options are s, m, l, xl, +with l as the default
+
+
+- num_col +
adds numeric class format to these columns.
+
+
+- width_overwrite +
change width. Need to include width for every column. +Options are three-quarters, two-thirds, one-half, one-third, one-quarter. +Default is
NULL.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/gov_layout.html b/docs/reference/gov_layout.html
new file mode 100644
index 0000000..6849a4c
--- /dev/null
+++ b/docs/reference/gov_layout.html
@@ -0,0 +1,132 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function creates a tabs based table. It requires a single dataframe +with a grouping variable
+
+
+
+
+ govTabs(inputId, df, group_col)
+
+ Arguments
+- inputId +
The id to access the tag
+
+
+- df +
A single dataframe with all data. See example for structure.
+
+
+- group_col +
The column name with the groups to be used as tabs
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/gov_summary.html b/docs/reference/gov_summary.html
new file mode 100644
index 0000000..81523ec
--- /dev/null
+++ b/docs/reference/gov_summary.html
@@ -0,0 +1,144 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+ gov_layout(..., inputID = "main", size = "full")
+
+ Arguments
+- ... +
include the components of the UI that you want within the +main page.
+
+
+- inputID +
ID of the main div. Defaults to "main"
+
+
+- size +
Layout of the page. Optional are full, one-half, two-thirds, +one-third and one-quarter. Defaults to "full"
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/header.html b/docs/reference/header.html
new file mode 100644
index 0000000..fc0effb
--- /dev/null
+++ b/docs/reference/header.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function creates a tabs based table. It requires a single dataframe +with a grouping variable
+
+
+
+
+ gov_summary(inputId, headers, info, action = FALSE, border = TRUE)
+
+ Arguments
+- inputId +
The id to access the summary list
+
+
+- headers +
input for the row headers value
+
+
+- info +
summary information values for the table
+
+
+- action +
whenever a change link is needed. sets input to the value of +the headers using lowercase and with underscore to replace gaps. Default +set to
FALSE
+
+
+- border +
set if the table should have borders. Default set +to
TRUE
+
+
+
+
+ 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> sarah.phillips@example.com")
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/heading_text.html b/docs/reference/heading_text.html
new file mode 100644
index 0000000..5a4fe79
--- /dev/null
+++ b/docs/reference/heading_text.html
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create a header banner. For use at top of the screen
+
+
+
+
+ header(
+ main_text,
+ secondary_text,
+ logo = NULL,
+ main_link = "#",
+ secondary_link = "#",
+ logo_width = 36,
+ logo_height = 32
+)
+
+ Arguments
+- main_text +
Main text that goes in the header
+
+
+- secondary_text +
Secondary header to supplement the main text
+
+
+- logo +
Add a link to a logo which will apply in the header. Use crown to +use the crown svg version on gov uk.
+
+
+- main_link +
Add a link for clicking on main text
+
+
+- secondary_link +
Add a link for clicking on secondary header.
+
+
+- logo_width +
Change the logo size width css to improve fit
+
+
+- logo_height +
Change the logo size height css to improve fit
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/index.html b/docs/reference/index.html
new file mode 100644
index 0000000..86408da
--- /dev/null
+++ b/docs/reference/index.html
@@ -0,0 +1,217 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create a heading text
+
+
+
+
+ heading_text(text_input, size = "xl")
+
+ Arguments
+- text_input +
Text to display
+
+
+- size +
Text size using xl, l, m, s. Defaults to xl.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/input_field.html b/docs/reference/input_field.html
new file mode 100644
index 0000000..9c8c9ff
--- /dev/null
+++ b/docs/reference/input_field.html
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Reference
+
+ All functions+ + |
+ |
|---|---|
| + + | +Accordion Function |
+
| + + | +Back Link Function |
+
| + + | +Banner Function |
+
| + + | +Button Function |
+
| + + | +Checkbox Function |
+
| + + | +Cookie Banner Function |
+
| + + | +Date Input Function |
+
| + + | +Details Function |
+
| + + | +Error off Function |
+
| + + | +Error on Function |
+
| + + | +Error Summary Function |
+
| + + | +Error Summary Update Function |
+
| + + | +File Input Function |
+
| + + | +Font Function |
+
| + + | +Footer Function |
+
| + + | +Table Function |
+
| + + | +Tabs Function |
+
| + + | +Page Layout Function |
+
| + + | +Tabs Function |
+
| + + | +Header Function |
+
| + + | +Heading Text Function |
+
| + + | +Input Field Function |
+
| + + | +Insert Text Function |
+
| + + | +Label with Hint Function |
+
| + + | +Page Layout Functions |
+
| + + | +Notification Banner Function |
+
| + + | +Panel output |
+
| + + | +Radio Button Function |
+
| + + | +Example Function |
+
| + + | +Select Function |
+
| + + | +Tag Function |
+
| + + | +Text Area Input Function |
+
| + + | +Text Input Function |
+
| + + | +Warning Text Function |
+
| + + | +Word Count Function |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/insert_text.html b/docs/reference/insert_text.html
new file mode 100644
index 0000000..4d0a08e
--- /dev/null
+++ b/docs/reference/insert_text.html
@@ -0,0 +1,124 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function inserts number of text inputs. Useful for addresses.
+
+
+
+
+ input_field(
+ legend,
+ labels,
+ inputIds,
+ widths = NULL,
+ types = "text",
+ error = FALSE,
+ error_message = NULL
+)
+
+ Arguments
+- legend +
Legend that goes above the fieldset
+
+
+- labels +
A list of labels for the text inputs
+
+
+- inputIds +
A list input slots that will be used to access the value.
+
+
+- widths +
control the size of the box based on number of characters +required. Options are 30, 20, 10, 5, 4, 3, 2. NULL will not limit the size
+
+
+- types +
text box types. Will default to text.
+
+
+- error +
Whenever to icnlud error handling Defaults to FALSE.
+
+
+- error_message +
Message to display on error. Defaults to NULL
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/label_hint.html b/docs/reference/label_hint.html
new file mode 100644
index 0000000..132a74f
--- /dev/null
+++ b/docs/reference/label_hint.html
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function loads the insert text component to display additional +information in a special format.
+
+
+
+
+ insert_text(inputId, text)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- text +
Text that you want to display on the insert
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/layouts.html b/docs/reference/layouts.html
new file mode 100644
index 0000000..125faa5
--- /dev/null
+++ b/docs/reference/layouts.html
@@ -0,0 +1,172 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function inserts a label and optional hint
+
+
+
+
+ label_hint(inputId, label, hint_input = NULL)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- label +
Display label for the control, or
NULLfor no label.
+
+
+- hint_input +
Display hint label for the control, or
NULLfor +no hint label.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/noti_banner.html b/docs/reference/noti_banner.html
new file mode 100644
index 0000000..7fa8d28
--- /dev/null
+++ b/docs/reference/noti_banner.html
@@ -0,0 +1,133 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+ gov_main_layout(..., inputID = "main")
+
+gov_row(...)
+
+gov_box(..., size = "full")
+
+gov_text(...)
+
+ Arguments
+- ... +
include the components of the UI that you want within the +main page. These components are made to flow through each other. See +example
+
+
+- inputID +
ID of the main div. Defaults to "main"
+
+
+- size +
size of the box in the row. Optional are full, one-half, +two-thirds, one-third and one-quarter. Defaults to "full"
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/panel_output.html b/docs/reference/panel_output.html
new file mode 100644
index 0000000..648a497
--- /dev/null
+++ b/docs/reference/panel_output.html
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create a notification banner
+
+
+
+
+ noti_banner(
+ inputId,
+ title_txt = "Important",
+ body_txt = NULL,
+ type = "standard"
+)
+
+ Arguments
+- inputId +
The input id for the banner
+
+
+- title_txt +
The wording that appears in the title
+
+
+- body_txt +
The wording that appears in the banner body
+
+
+- type +
The type of banner. Options are standard and success. +Standard is default
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/radio_button_Input.html b/docs/reference/radio_button_Input.html
new file mode 100644
index 0000000..6ebfba8
--- /dev/null
+++ b/docs/reference/radio_button_Input.html
@@ -0,0 +1,208 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function inserts a panel. Normally used for confirmation screens
+
+
+
+
+ panel_output(inputId, main_text, sub_text)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- main_text +
Add the header for the panel
+
+
+- sub_text +
Add the main body of text for the panel
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/run_example.html b/docs/reference/run_example.html
new file mode 100644
index 0000000..a1ad1a4
--- /dev/null
+++ b/docs/reference/run_example.html
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create radio buttons
+
+
+
+
+ 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
+- inputId +
The
inputslot that will be used to access the value.
+
+
+- label +
Input label.
+
+
+- choices +
List of values to select from (if elements of the list are +named then that name rather than the value is displayed to the user)
+
+
+- selected +
The initially selected value.
+
+
+- inline +
If you want the radio inline or not, Default is FALSE
+
+
+- small +
If you want the smaller versions of radio buttons, Default +is FALSE
+
+
+- choiceNames, choiceValues +
Same as in +
checkboxGroupInput. List of names and values, +respectively, that are displayed to the user in the app and correspond to +the each choice (for this reason they must have the same length). If either +of these arguments is provided, then the other must be provided and choices +must not be provided. The advantage of using both of these over a named list +for choices is that choiceNames allows any type of UI object to be passed +through (tag objects, icons, HTML code, ...), instead of just simple text.
+
+
+- hint_label +
Additional hint text you may want to display below the +label. Defaults to NULL
+
+
+- error +
Whenever you want to include error handle on the component.
+
+
+- error_message +
If you want a default error message.
+
+
+- custom_class +
If you want to add additional classes to the radio +buttons
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/select_Input.html b/docs/reference/select_Input.html
new file mode 100644
index 0000000..17cfc7a
--- /dev/null
+++ b/docs/reference/select_Input.html
@@ -0,0 +1,134 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function runs a shiny example using different parts of the package
+
+
+
+
+ run_example()
+
+
+ Value
+ + +a shiny app with examples in
+
+
+
+ Examples
+if (interactive()) {
+run_example()
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/tag_Input.html b/docs/reference/tag_Input.html
new file mode 100644
index 0000000..af131d1
--- /dev/null
+++ b/docs/reference/tag_Input.html
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function inserts a select box
+
+
+
+
+ select_Input(inputId, label, select_text, select_value)
+
+ Arguments
+- inputId +
Input id for the component
+
+
+- label +
Insert the text for the label.
+
+
+- select_text +
Add the text that will apply in the drop down as a list
+
+
+- select_value +
Add the value that will be used for each selection.
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/text_Input.html b/docs/reference/text_Input.html
new file mode 100644
index 0000000..1fe971a
--- /dev/null
+++ b/docs/reference/text_Input.html
@@ -0,0 +1,187 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function creates a tag
+
+
+
+
+ tag_Input(inputId, text, colour = "navy")
+
+ Arguments
+- inputId +
The id to access the tag
+
+
+- text +
The text in the tag
+
+
+- colour +
The colour of the tag. Default is navy. Other options are +grey, green, turquoise, blue, purple, pink, red, orange and yellow
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/text_area_Input.html b/docs/reference/text_area_Input.html
new file mode 100644
index 0000000..69f1d5c
--- /dev/null
+++ b/docs/reference/text_area_Input.html
@@ -0,0 +1,141 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create a text area input
+
+
+
+
+ text_Input(
+ inputId,
+ label,
+ hint_label = NULL,
+ type = "text",
+ width = NULL,
+ error = FALSE,
+ error_message = NULL,
+ prefix = NULL,
+ suffix = NULL
+)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- label +
Display label for the control, or
NULLfor no label.
+
+
+- hint_label +
Display hint label for the control, or
NULLfor +no hint label.
+
+
+- type +
Type of text input to accept. Defaults to text.
+
+
+- width +
control the size of the box based on number of characters +required. Options are 30, 20, 10, 5, 4, 3, 2. NULL will not limit the size
+
+
+- error +
Whenever to include error handling Defaults to FALSE.
+
+
+- error_message +
Message to display on error. Defaults to NULL
+
+
+- prefix +
Add a prefix to the box. Defaults to NULL
+
+
+- suffix +
Add a suffix to the box. Defaults to NULL
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/warning_text.html b/docs/reference/warning_text.html
new file mode 100644
index 0000000..41d7db6
--- /dev/null
+++ b/docs/reference/warning_text.html
@@ -0,0 +1,120 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create a text area input
+
+
+
+
+ text_area_Input(
+ inputId,
+ label,
+ hint_label = NULL,
+ row_no = 5,
+ error = FALSE,
+ error_message = NULL,
+ word_limit = NULL
+)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- label +
Display label for the control, or
NULLfor no label.
+
+
+- hint_label +
Display hint label for the control, or
NULLfor no +hint label.
+
+
+- row_no +
Size of the text entry box. Defaults to 5.
+
+
+- error +
Whenever to icnlud error handling Defaults to
FALSE
+
+
+- error_message +
Message to display on error. Defaults to
NULL
+
+
+- word_limit +
Add a word limit to the display. Defaults to
NULL.
+
+
+
+
+ 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.")
+#> <div class="govuk-form-group govuk-character-count" id="taIddiv">
+#> <label class="govuk-label">Can you provide more detail?</label>
+#> <div class="govuk-hint">Do not include personal or financial information, like your
+#> National Insurance number or credit card details.</div>
+#> <textarea id="taId" class="govuk-textarea" rows="5"></textarea>
+#> </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/reference/word_count.html b/docs/reference/word_count.html
new file mode 100644
index 0000000..032d5a4
--- /dev/null
+++ b/docs/reference/word_count.html
@@ -0,0 +1,137 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create warning text
+
+
+
+
+ warning_text(inputId, text)
+
+ Arguments
+- inputId +
The input slot that will be used to access the value.
+
+
+- text +
Text that goes in the main
+
+
+
+
+ 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)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
new file mode 100644
index 0000000..006e623
--- /dev/null
+++ b/docs/sitemap.xml
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This function create tracks the word count and should be used with the +text area function
+
+
+
+
+ word_count(inputId, input, word_limit = NULL)
+
+ Arguments
+- inputId +
The input slot of the text area that you want to affect
+
+
+- input +
The text input that is associated with the box.
+
+
+- word_limit +
Change the word limit if needed. Default will keep as +what was used in text area component
+
+
+
+
+ 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)
+}
+