Accordions update

R/accordion.R

@@ -54,6 +54,7 @@ accordion <- function(inputId, titles, descriptions){
           class = "govuk-accordion__show-all",
           `aria-expanded` = "false",
           shiny::tags$span(
+            id="show-all-chevron",
             class=paste(
               "govuk-accordion-nav__chevron",
               "govuk-accordion-nav__chevron--down"),

R/run_example.R

@@ -134,7 +134,7 @@ run_example <- function(){
 
         #####################Create third panel################################
         shiny::tabPanel(
-          "Tables and tabs",
+          "Tables, tabs and accordions",
           value = "panel3",
           gov_layout(
             size = "two-thirds",
@@ -148,6 +148,20 @@ run_example <- function(){
               width_overwrite = c("one-half", "one-quarter", "one-quarter")),
             heading_text("govTabs", size = "s"),
             shinyGovstyle::govTabs("tabsID", data, "tabs"),
+            heading_text("accordions", size = "s"),
+            shinyGovstyle::  accordion(
+                    "acc1",
+                    c("Writing well for the web",
+                      "Writing well for specialists",
+                      "Know your audience",
+                      "How people read"
+                     ),
+                    c("This is the content for Writing well for the web.",
+                      "This is the content for Writing well for specialists.",
+                      "This is the content for Know your audience.",
+                      "This is the content for How people read."
+                     )),
+
             heading_text("button_Input", size = "s"),
             button_Input("btn4", "Go to next page"),
           )

css_changes.md

@@ -26,22 +26,13 @@ color: #0b0c0c;
 * 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
-}
+* 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;
 }