Merge pull request #260 from posit-dev/kitchensink

Add kitchen sink examples to components detail pages

Author: karangattu

_quarto.yml

@@ -138,6 +138,7 @@ website:
             - components/inputs/action-link/index.qmd
             - components/inputs/checkbox/index.qmd
             - components/inputs/checkbox-group/index.qmd
+            - components/inputs/dark-mode/index.qmd
             - components/inputs/date-range-selector/index.qmd
             - components/inputs/date-selector/index.qmd
             - components/inputs/file/index.qmd

components/_partials/components-detail-kitchen-sink.ejs

@@ -0,0 +1,23 @@
+::: {.kitchensink}
+
+<% for (const item of items) { %>
+
+## Variation Showcase
+
+A live kitchen sink of all possible parameters for the <%= item.title %> in [Shiny Core](<%= item.core %>){target="_blank"} and [Shiny Express](<%= item.express%>){target="_blank"}.
+
+![](<%= item.image %>){.border .my-4 style="border-radius: .5em;"}
+
+::::{.grid}
+:::{.g-col-sm-6 .g-col-12}
+<p class="m-0">[<i class="bi bi-lightning-fill me-2"></i> Live Core App](<%= item.core %>){.btn .btn-primary .w-100 .m-1 target="_blank"}</p>
+:::
+
+:::{.g-col-sm-6 .g-col-12}
+<p class="m-0">[<i class="bi bi-lightning-fill me-2"></i> Live Express App](<%= item.express %>){.btn .btn-primary .w-100 .m-1 target="_blank"}</p>
+:::
+::::
+
+<% } %>
+
+:::

components/_partials/components-detail-relevant-functions.ejs

@@ -1,6 +1,6 @@
 <!-- relevant functions -->
 
-## Relevant Functions {.mt-5}
+## Relevant Functions 
 
 ```{=html}
 <ul>

components/_partials/components.css

@@ -19,16 +19,22 @@ The article pages (/components/_____/index.qmd) get styling from here.
 
 /* Add rule and spacing between sections */
 
-section.level2:not(:first-child) h2 {
+/* remove extra space below tab content section */
+.tab-content {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+section.level2:not(:first-child) h2, section.level2.kitchensink h2, section.level3:not(:first-child) h2 {
   border-top: 1px solid var(--bs-primary);
-  padding-top: 5rem !important;
-  margin-top: 5rem !important;
+  padding-top: 4rem !important;
+  margin-top: 4rem !important;
 }
 
-section.level2:not(:first-child) > :last-child {
+section.level2:not(:first-child) > :last-child, section.level3:not(:first-child) > :last-child {
   margin-bottom: 0;
 }
-
+ 
 /*Make code in Relavent Functions wrap*/
 
 #relevant-functions ul li code {

components/inputs/action-button/app-kitchensink-core.py

@@ -0,0 +1,59 @@
+from shiny import App, reactive, render, ui
+
+# Create the UI
+app_ui = ui.page_fluid(
+    # Add Font Awesome CSS in the head
+    ui.tags.head(
+        ui.tags.link(
+            rel="stylesheet",
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css",
+        )
+    ),
+    # Main layout
+    ui.layout_column_wrap(
+        ui.card(
+            ui.card_header("Action Button Examples"),
+            # Basic button with width parameter
+            ui.input_action_button(id="btn1", label="Basic Button", width="200px"),
+            ui.output_text("click_count_btn1"),
+            ui.br(),  # Add spacing
+            # Button with icon and disabled state
+            ui.input_action_button(
+                id="btn2",
+                label="Disabled Button with Icon",
+                icon=ui.tags.i(class_="fa-solid fa-shield-halved"),
+                disabled=True,
+            ),
+            ui.output_text("click_count_btn2"),
+            ui.br(),  # Add spacing
+            # Button with custom class and style attributes
+            ui.input_action_button(
+                id="btn3",
+                label="Styled Button",
+                class_="btn-success",
+                style="margin-top: 20px;",
+            ),
+            ui.output_text("click_count_btn3"),
+        ),
+        width="100%",
+    ),
+)
+
+
+# Define the server
+def server(input, output, session):
+    @render.text
+    def click_count_btn1():
+        return f"Button 1 clicks: {input.btn1() or 0}"
+
+    @render.text
+    def click_count_btn2():
+        return f"Button 2 clicks: {input.btn2() or 0}"
+
+    @render.text
+    def click_count_btn3():
+        return f"Button 3 clicks: {input.btn3() or 0}"
+
+
+# Create and return the app
+app = App(app_ui, server)

components/inputs/action-button/app-kitchensink-express.py

@@ -0,0 +1,51 @@
+from shiny import reactive
+from shiny.express import input, ui, render
+
+ui.page_opts(full_width=True)
+
+# Add Font Awesome CSS for icons
+ui.head_content(
+    ui.HTML(
+        '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">'
+    )
+)
+
+# Create a layout with some spacing
+with ui.layout_column_wrap(width="100%"):
+    with ui.card():
+        ui.card_header("Action Button Examples")
+
+        # Basic button with width parameter
+        ui.input_action_button(id="btn1", label="Basic Button", width="200px")
+
+        @render.text
+        def click_count_btn1():
+            return f"Button 1 clicks: {input.btn1() or 0}"
+
+        ui.br()  # Add some spacing
+
+        # Button with icon and disabled state
+        ui.input_action_button(
+            id="btn2",
+            label="Disabled Button with Icon",
+            icon=ui.tags.i(class_="fa-solid fa-shield-halved"),
+            disabled=True,
+        )
+
+        @render.text
+        def click_count_btn2():
+            return f"Button 2 clicks: {input.btn2() or 0}"
+
+        ui.br()  # Add some spacing
+
+        # Button with custom class and style attributes
+        ui.input_action_button(
+            id="btn3",
+            label="Styled Button",
+            class_="btn-success",
+            style="margin-top: 20px;",
+        )
+
+        @render.text
+        def click_count_btn3():
+            return f"Button 3 clicks: {input.btn3() or 0}"

components/inputs/action-button/index.qmd

@@ -28,6 +28,13 @@ listing:
   - title: reactive.event
     href: https://shiny.posit.co/py/api/reactive.event.html
     signature: reactive.event(*args, ignore_none=True, ignore_init=False)
+- id: kitchen-sink
+  template: ../../_partials/components-detail-kitchen-sink.ejs
+  contents:
+  - title: Action Button
+    core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPoDETAMJSoFJmTZwmAVQCS+tKgD6OpgF4mOrFADmcK40ADY6qgAU+kwxTMYiqqpMAGKkwiIA7nAsjLYmAMr5vBBWNkw2UKrRsb5kASwYFZHVsTUcGHX+DSFcANZRJa1DMVIhnrpgLGTYIdk2cGQTeC3DsWxSNONgbGRkqCyIAPSHhKoQAFYNhCHEWqqhUFIYJDCHUOdQAB6HPQBGLIcaGkALRQLI5eCHABsGAA7BgAEwnFgAqAhEIYGBcZ4opYrVoAShWBOWgxixgAslAuEwQlBsLdFmSfO06QytGRXCQwjAIK4MnQ0ANVizno9msyRb5COLXE0NFEwCJZBxSEwAEIcshqgCin1gqFmLAmJPxq2M6qgLA4hCYvy1aoyHGsTCdqhdqEesAWGjNw18XFQHNcMjkpFc9t2pAiHFUW1+ZAgAEYlrSoL84GMJpbrbbNVGDPhXbHrFsEQAGcuoT4m0ki1q+RlBzkUT5kRXXG29Lm3cgRxMpsCmyWrXy-OgREnk0SJViewhcfx+oYWh0lJ0um1qqBqJiqDgsdOzJJTCxwZcN9qB4Oh1V8yPaiDC+vDWPxxMIvEjl90jNZsAACIHkecBJPmj7Fi6DgkIWdYvkMW4QJ4tT1BgHARNcVosK4Ww0FAwI5D0SR4QRnCZqowJsGiihVEOcHwbE+6Hr8x6eAAKnQWhKBesTDgxjYcs2ritu2EydoQ3YkFofYJhAn50TxMRjhOU5xDOJ7zouilqeBjrOmwTCEFoUyMIZdIokwO4ntMsyWbsdAcJG2TaQGEBCbe4YPtG2mtG+EyyQAzF+DGtL+mZbPkNmgRqa7BSFMSYSiOH+YmBFaIQhDZMa+A+bEUwzHAWwwI8-hcMC2qoIgTAVtWADccUvnx8ECXswYiR2PQST20mcoFtbLk1wxuqWExJpWACkDVMMORIGHNxgAXANBcLY1i2CwGiKHQ+jqDQrCbQq15kBITYchIG0oneBKICsAACKjqHQHRwG2Ky7WZXbdTJA6Tjd36SAsWh0CUNDZmuTBJh9EkHEwIBHRgslJpOTCCEw5YAL4TPod0PRoz2vcy73iZJva9R+v3LlIZBAyDYMFtVUO9DDcNuRyCPkwSKN0GjmNgNjzL3ZQj340yrRE51JM9f2EABRT-1UzTTCg2AuklAFjPM-DgXI6jGNY3NRimOYlhWQD1PA6UtguM46BeKI6ARC47gcOdB10LNYDowAukAA
+    express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJM6cKITIcAbnAA6Eeo1aduGOAA9Uoli179BwrqgCuZPE2MdzoiABM4defMtYoAczgB9YqjIsAFDTGADbBngDuHLZkbAC8ACp0xnAAlE4QAMRMAIK2tkwAYqTC2eFwLIxwTADCAMq1TDSCvCQQLM4cGGxitp6tFOT+8kwjFp0AEvEAsgAyQxCji0wA5AA8wVwA1iJwwbGyYCxk2MHl3XBkB0xsojT7YGxkZKgsiAD0b4S2EABWLBiEYLEYy2GjBKCiAGMN5QH5QdRvDYAIxYbya5AAtFAyhV4G8AGwYADsGAATJ8dDDQhgYFwAToDgA+ZbDUZpCDs+RZaqiKAUJhQJjg7DA4SRGKsSqsVDiLhueTithjDDC0V9YjBYwwCAROhofyRaJxA4ARgADGaAKQHFKIVkjRXKwgQ2z+W32pYuZ10XrdKD2OhDMDZCQcUhMABCpjI4YAoupYKhTu0wJyFksRlkI1AWBxCEwkdHw47DRKZXr4BRHOmMy4jKZPOJJKRPIWnqR-FF7kiyBATQdzOCkbt7tnc-mo+2IAOmKXjWBSRbUOobekMyMAAI2AMYCjqS41pb2GhMQF5zbq4zkVu9k1uu2H9c7MjGOgLGgHScxhYm08bQibK8TAgPWZAYD2fZukwzRmgAvgca7ri4SKBikmY5HkkrwNKsoQPK06PqMWZFgsjp5uGUB2EwtgcCwUBIqc+RHHyciESMdYQCYZCNqGLZtt+8xPosXYHBBpIDh6T5DiOBwACK0fRjGRiRs4cBKACSrQSWxSzkRAsQuGQ7j-Bw-iAjmLCePcNBQBiFQbPkNl2Zwuy2BibBQMEMi2DaeCSeuNF0QxcC2AkSRwH5Olpk+W6UDue4Hk+x5-uel7XmJ97+Rmogvm+jSfippIpQBQEgZxpjgb2pJQTB8FgIhtadChUFMFkuRMVKLAyoQcoNUsxFTqpEqEMYRxKOZOgClRRwnFUfJkHQHBtuUWXKqBPHNjq-EdqtwmhaJvYAMzaUJozSXsBy1McSlfqQJ2nX+FlWQdEB2cYhCEOUKaRQ9rDXXA9wwBCbhcBiMaoIgTCLsuADc90ZtF66xXYDi7hoiUBXAJ5ngBaXcRBh2ZTpiw5a+74FYNh3FYBkNlVxlUQITaG1QhEBgLBAC6QA
+    image: thumbnail.png
 ---
 
 :::{#example}
@@ -51,3 +58,4 @@ The value of an input component is accessible as a reactive value within the `se
   1. Use `input.<action_button_id()>` (e.g., `input.action_button()`) to access the value of the action button. The server value of an action button is an integer representing the number of clicks.
 
 See also: [Action Link](../action-link/index.qmd)
+

components/inputs/action-button/thumbnail.png

@@ -0,0 +1,38 @@
+from shiny import App, reactive, render, ui
+
+# Define the UI
+app_ui = ui.page_fillable(
+    # Add Font Awesome CSS in the head section
+    ui.tags.head(
+        ui.tags.link(
+            rel="stylesheet",
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css",
+        )
+    ),
+
+    # First card
+    ui.card(
+        ui.card_header("Action Link Demo"),
+        # Create an action link with an icon
+        ui.input_action_link(
+            id="demo_link",
+            label="Click Me!",
+            icon=ui.tags.i(class_="fa-solid fa-shield-halved"),
+        ),
+        ui.output_text("link_clicks"),
+        full_screen=True,
+        height="300px",
+        id="card1",
+    ),
+)
+
+
+# Define the server
+def server(input, output, session):
+    @render.text
+    def link_clicks():
+        count = input.demo_link() or 0
+        return f"The link has been clicked {count} times"
+
+# Create and return the app
+app = App(app_ui, server)

components/inputs/action-link/app-kitchensink-core.py

@@ -0,0 +1,30 @@
+from shiny import reactive
+from shiny.express import input, render, ui
+
+# Add Font Awesome CSS in the head section
+ui.head_content(
+    ui.HTML(
+        '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">'
+    )
+)
+
+# Set page title
+ui.page_opts(fillable=True)
+
+
+# Create a card to hold the action link
+with ui.card(full_screen=True, height="300px", id="card1"):
+    ui.card_header("Action Link Demo")
+
+    # Create an action link with an icon
+    ui.input_action_link(
+        id="demo_link",
+        label="Click Me!",
+        icon=ui.tags.i(class_="fa-solid fa-shield-halved"),
+    )
+
+    # Display the click count
+    @render.text
+    def link_clicks():
+        count = input.demo_link() or 0
+        return f"The link has been clicked {count} times"