shiny accordion (v1.0)

Author: davidruvolo51

shiny-accordion/app.R

@@ -2,10 +2,10 @@
 #' FILE: app.R
 #' AUTHOR: David Ruvolo
 #' CREATED: 2021-11-11
-#' MODIFIED: 2021-11-11
+#' MODIFIED: 2021-11-13
 #' PURPOSE: example Shiny app for accordion components
-#' STATUS: in.progress
-#' PACKAGES: shiny
+#' STATUS: working
+#' PACKAGES: shiny; rheroicons
 #' COMMENTS: NA
 #'////////////////////////////////////////////////////////////////////////////
 
@@ -20,14 +20,14 @@ ui <- tagList(
             name = "viewport",
             content = "width=device-width, initial-scale=1"
         ),
-        tags$link(rel = "stylesheet", href = "css/app.css"),
-        tags$link(rel = "stylesheet", href = "css/accordion.css"),
+        tags$link(rel = "stylesheet", href = "app.css"),
+        tags$link(rel = "stylesheet", href = "accordion.css"),
         tags$title("Accordion Component | shinyAppTutorials")
     ),
     tags$main(
         tags$header(
             tags$h1(
-                title = "title",
+                class = "title",
                 "Shiny Accordion"
             ),
             tags$h2(
@@ -40,14 +40,29 @@ ui <- tagList(
             `aria-labelledby` = "section-example-title",
             tags$h2(
                 id = "section-example-title",
-                "Example Usage"
+                "About"
             ),
             tags$p(
                 "The accordion component is useful for creating interfaces",
                 "where certain elements on a page can be collapsed.",
                 "For example, FAQ pages or visually hidding secondary",
-                "information. In this example, I created a simple FAQ page that",
-                "demonstrates the functionality of the accordion component."
+                "information.",
+                "It is recommended to use the", tags$code("details"), "element",
+                "for better browser support and functionality, but it is",
+                "possible to create a custom component for specific cases",
+                "that meets web standards. Please visit the",
+                tags$a(
+                    # nolint start
+                    href = "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details",
+                    # nolint end,
+                    "details element docs"
+                ),
+                "for more information."
+            ),
+            tags$p(
+                "In this example, I created a simple FAQ page that",
+                "demonstrates the functionality of the accordion component.",
+                "Click a question to see the accordion component in action."
             )
         ),
         tags$section(
@@ -75,8 +90,7 @@ ui <- tagList(
                             href = "https://shiny.rstudio.com/",
                             "shiny.rstudio.com"
                         )
-                    ),
-                    tags$cite("Rstudio.org")
+                    )
                 )
             ),
             accordion(
@@ -99,13 +113,13 @@ ui <- tagList(
                                 href = "https://rmarkdown.rstudio.com/",
                                 "rmarkdown.rstudio.com"
                             )
-                        ),
-                        tags$cite("Rstudio.org")
+                        )
                     )
                 )
             )
         )
-    )
+    ),
+    tags$script(src = "accordion.js")
 )
 
 

shiny-accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shiny-accordion",
-  "version": "0.9.0",
+  "version": "1.0.0",
   "description": "A component for collapsing HTML elements",
   "author": "@dcruvolo",
   "status": "active",

shiny-accordion/www/accordion.css

@@ -15,13 +15,20 @@
     padding: 16px 12px;
 	border: 2px solid var(--accordion-border);
     border-radius: var(--border-radius);
+    -webkit-box-shadow: var(--box-shadow);
     box-shadow: var(--box-shadow);
 }
 
 /* accordion heading styles (includes button) */
 .accordion .accordion__heading {
+    display: -webkit-flex;
+    display: -ms-flex;
     display: flex;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
     justify-content: flex-start;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
     margin: 0;
     padding: 0;
@@ -32,8 +39,14 @@
 
 /* reset button styles */
 .accordion  .accordion__toggle {
+    display: -webkit-flex;
+    display: -ms-flex;
     display: flex;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
     justify-content: flex-start;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
     width: 100%;
     border: none;
@@ -63,7 +76,7 @@
     width: var(--icon-size);
     height: var(--icon-size);
     transform: rotate(0);
-    transform-origin: center;
+    transform-origin: center center; 
     transition: transform 0.3s ease-in-out;
 }
 
@@ -78,6 +91,7 @@
     margin: 0;
     padding: 0;
     margin-left: var(--left-offest);
+    margin-right: var(--left-offest);
 }
 
 /* focus event */

shiny-accordion/www/app.css

@@ -0,0 +1,72 @@
+html, body {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 14pt;
+    padding: 0;
+    margin: 0;
+    background-color: #f6f6f6;
+}
+
+h1, h2, h3 {
+    margin: 0;
+    margin-bottom: 8px;
+    line-height: 1.4;
+    color: #252525
+}
+
+p, li {
+    color: #3f454b;
+}
+
+p {
+    line-height: 1.5;
+}
+
+main {
+    width: 90%;
+    padding: 2em 0;
+    margin: 0 auto;
+}
+
+header, section {
+    padding: 0.5em 0;
+    box-sizing: content-box;
+}
+
+header {
+    border-bottom: 2px solid #c4c4c4;
+}
+
+header .title {
+    font-size: 13pt;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 4px;
+}
+
+header .subtitle {
+    font-weight: 300;
+    font-size: 24pt;
+}
+
+section h2 {
+    margin-top: 6px;
+}
+
+#section-faq h2 {
+    text-align: center;
+}
+
+#section-faq .accordion {
+    width: 100%;
+    margin: 24px auto;
+}
+
+@media screen and (min-width: 972px) {
+    main {
+        max-width: 1024px;
+    }
+    
+    #section-faq .accordion {
+        max-width: 724px;
+    }
+}