Give examples of the use of text, ordered / unordered lists, and links

[cjrace]

Would be helpful to have more examples of how to add text, headers, links within text, and lists of bullet points in a way that takes advantage of the GDS CSS styling. I know there's already the font() function in the app. We found a lot of analysts missed this and weren't doing it correctly in their dashboards.

This could either be just extra examples in the README / test app, or as a gov_text(), gov_list(), gov_link() set of functions for more explicit use.

I have specific examples I can share on this to have a look at from our accessibility audit.

[fingertipsy]

Could you maybe share some examples here until this is picked up in the documentation? It would be so helpful! I have been struggling to figure out how to include correctly styled links and lists within an accordion

[cjrace]

Certainly @fingertipsy! Sorry I'd missed this, there were a few different places issues around this were picked up. Though here's an example of how currently I've formatted text in R Shiny by having a custom CSS stylesheet (not necessarily the best way, this is just how we've worked it for now!).

1. Create or edit a CSS file in your project folder - e.g. www/dfe_shiny_gov_style.css

Within that include something like this (add or remove sections and edit settings as you need)

/* Fonts ------------------------------------------------------------------- */
/* main body text */
body {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 19px;
  margin-bottom: 20px;
}

p {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 19px;
  margin-bottom: 20px;
}

.h1,
h1 {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.0416666667;
  margin-top: 0;
  margin-bottom: 30px;
}

.h2,
h2 {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.0416666667;
  margin-top: 20px;
  margin-bottom: 20px;
}

.h3,
h3 {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.0416666667;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* header text */
.govuk-header__link--service-name {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 30px;
}

/* feedback banner */
.govuk-phase-banner__content {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 16px;
  color: #000000;
}

/* Bullet point formatting ------------------------------------------------- */
li {
  margin-bottom: 5px;
  display: list-item;
  text-align: -webkit-match-parent;
  unicode-bidi: isolate;
}

ul {
  padding-left: 20px;
  list-style-type: disc;
}

/* Link text styling ------------------------------------------------------- */
a {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .1578em;
  word-break: break-word;
  background-color: transparent;
}

a:visited {
  color: #4C2C92;
}

a:focus {
  outline: 3px solid rgba(0, 0, 0, 0);
  color: #0b0c0c;
  background-color: #fd0 !important;
  box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
  text-decoration: underline;
}

a:hover {
  outline: 3px solid rgba(0, 0, 0, 0);
  color: #0b0c0c;
  background-color: #fd0 !important;
  box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
  text-decoration: underline;
}

2. Reference that CSS file in your ui.R script (it will automatically assume it's in the www/ folder):

    ## Custom CSS -------------------------------------------------------------
    tags$head(
      tags$link(
        rel = "stylesheet",
        type = "text/css",
        href = "dfe_shiny_gov_style.css"
      )
    )

3. Then use the inbuilt html tag functions in R Shiny, so for example, your code might look like this further down in your ui.R script:

h1("My heading"),
p("Some text."),
ul(li("Bullet point 1"), li("Bullet point 2")),
h2("My second heading")
p("Some text that links to the ", a(href="www.myurl.com", "really cool website"), "that I like to visit.")

if you want to find out the class or current CSS on an existing website (e.g. to copy their styling) use right click > inspect and have a look at the styles and raw HTML e.g.