playbook_ui_docs 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137 → 14.10.0.pre.alpha.play1465attempt25272

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f63f011df5ca015b631841759087b3250e27cc87c544f286e344df9c4e7ab3a3
-  data.tar.gz: 10dffc163dc8b721c7a18bff0a1958696974f4847f368fa185905bc944db9fc5
+  metadata.gz: 2b7fecce4978cd084fbb5b38e490ff59e2bb2cae9e4ad3c31df947795a7c77fe
+  data.tar.gz: 291b7a3dc26c0e6d21f7a34b7fe0c419c8e5cc6a4bf225373b504e60a9a8841e
 SHA512:
-  metadata.gz: 6bd96f9b9a7082b727d649e0bac9a665602d877580e5f3c0b616a8787e4cdda1cf31297d8979183ae54c3bb456c111cd8f921246842820ebac1de3d289194d81
-  data.tar.gz: 9e529cd3b3778b16fa6ca230c34a4dd88735223372b1b036465f3db9220b5df8cae6c63b906393222a56858096aa538eda9aafc383d80fab6a9dee83db1e726b
+  metadata.gz: eba273c321e515386c948aae00fbde3b17c31fa5f038cfd2627d1c234efb26d4dda9ed5dc0b67d29c06e11497da24eda490d15f060f1419d5c09d3304117002c
+  data.tar.gz: 70eab09d4b00d5479800fb7709d1273e6744e0d5ab3f8d327a86fed2b381b1585f3cc7e00e90337dc3de32b11f7205e3417a78e81230d6bc23df09aa07ace9dd

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -49,11 +49,9 @@
       label: "Graduated Students",
     }
   ]
-
-  subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
 <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb

@@ -0,0 +1,43 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        accessor: "newEnrollments",
+        label: "New Enrollments",
+      },
+      {
+        accessor: "scheduledMeetings",
+        label: "Scheduled Meetings",
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        accessor: "attendanceRate",
+        label: "Attendance Rate",
+      },
+      {
+        accessor: "completedClasses",
+        label: "Completed Classes",
+      },
+      {
+        accessor: "classCompletionRate",
+        label: "Class Completion Rate",
+      },
+      {
+        accessor: "graduatedStudents",
+        label: "Graduated Students",
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_headers", table_data: @table_data, column_definitions: column_definitions }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx

@@ -0,0 +1,60 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnHeaders = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          accessor: "newEnrollments",
+          label: "New Enrollments",
+        },
+        {
+          accessor: "scheduledMeetings",
+          label: "Scheduled Meetings",
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          accessor: "attendanceRate",
+          label: "Attendance Rate",
+        },
+        {
+          accessor: "completedClasses",
+          label: "Completed Classes",
+        },
+        {
+          accessor: "classCompletionRate",
+          label: "Class Completion Rate",
+        },
+        {
+          accessor: "graduatedStudents",
+          label: "Graduated Students",
+        },
+      ],
+    },
+  ];
+  
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnHeaders

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md

@@ -0,0 +1 @@
+Use a nested `columns` array in your columnDefinitions to create multiple header rows. Any column with `columns` is treated as a grouped header, and its child columns are displayed beneath it.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb

@@ -0,0 +1,58 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { AdvancedTable } from "playbook-ui";
+import MOCK_DATA from "./advanced_table_mock_data.json";
+
+const AdvancedTableColumnHeadersMultiple = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </>
+  );
+};
+
+export default AdvancedTableColumnHeadersMultiple;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md

@@ -0,0 +1 @@
+Multiple levels of column headers can also be rendered as seen here.

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -1,10 +1,13 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
-  - advanced_table_beta_subrow_headers: SubRow Headers
+  # - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells
+  - advanced_table_column_headers: Multi-Header Columns
+  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -21,3 +24,5 @@ examples:
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
+  - advanced_table_column_headers: Multi-Header Columns
+  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -12,3 +12,5 @@ export { default as AdvancedTableResponsive } from './_advanced_table_responsive
 export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
+export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -88,3 +88,21 @@
     Body
   <% end %>
 <% end %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success_subtle" }) do %>
+    <%= pb_rails("body", props: { text: "Success Subtle" }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error_subtle" }) do %>
+    <%= pb_rails("body", props: { text: "Error Subtle"}) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -231,6 +231,46 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="success_subtle"
+                >
+                    <Body
+                        text="Success Subtle"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="error_subtle"
+                >
+                    <Body
+                        text="Error Subtle"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
         </>
     )
 }

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb

@@ -10,3 +10,11 @@
   link: "https://google.com",
   new_window: true
 }) %>
+<br/>
+<%= pb_rails("circle_icon_button", props: {
+  icon: "info",
+  variant: "secondary",
+  aria: { label: "Link to Playbook in new window" },
+  link: "https://playbook.powerapp.cloud/",
+  target: "child"
+}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx

@@ -21,6 +21,15 @@ const CircleIconButtonLink = (props) => (
         {...props}
     />
 
+    <br/>
+
+    <CircleIconButton
+        aria={{ label: "Link to Playbook in new window" }}
+        icon="info"
+        link="https://playbook.powerapp.cloud/"
+        target="child"
+        variant="secondary"
+    />
   </div>
 )
 

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md

@@ -0,0 +1 @@
+The `link` prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the `newWindow` prop (boolean), which will open the link in a new window, or by calling the `target` prop, which accepts `_self`, `_blank`, `_parent`, `_top`, `child`, or any string, allowing you to specify any link target.

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary" }) do %>
+  <%= pb_rails("flex", props: { padding: "xs" }) do %>
+    <%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
+    <%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
+  <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
+
+const children = (
+  <Flex padding="xs">
+    <Icon color="primary"
+        icon="arrow-down"
+    />
+    <Detail
+        color="link"
+        size="sm"
+        text="Children"
+    />
+  </Flex>
+)
+
+const SectionSeparatorColor = (props) => {
+  return (
+    <div>
+      <SectionSeparator text="Default Separator"
+          {...props}
+      />
+      <SectionSeparator color="primary"
+          text="Primary Separator"
+          {...props}
+      />
+      <SectionSeparator
+          color="primary"
+          lineStyle="dashed"
+          text="Primary Dashed Separator"
+          {...props}
+      />
+       <SectionSeparator color="primary"
+           {...props}
+       >
+        {children}
+      </SectionSeparator>
+    </div>
+  )
+}
+
+export default SectionSeparatorColor

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md

@@ -0,0 +1,3 @@
+Pass "primary" to the `color` prop to change any section separator color.
+
+**NOTE:** Passing `children` overrides any content provided via the `text` prop. The `color` prop does not affect the `text` prop's color, and the color of `children` is determined by the children's individual props. For greater control over text color customization, consider using a separator with `children`.

data/app/pb_kits/playbook/pb_section_separator/docs/example.yml

@@ -6,6 +6,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   react:
   - section_separator_line: Line Separator
@@ -13,6 +14,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   swift:
   - section_separator_line_swift: Line Separator

data/app/pb_kits/playbook/pb_section_separator/docs/index.js

@@ -3,3 +3,4 @@ export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
 export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
 export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'
+export { default as SectionSeparatorColor } from './_section_separator_color.jsx'

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md

@@ -0,0 +1,3 @@
+The Skeleton Loading kit can be used an intermediate loading state to give users a visual indication that content is loading. 
+
+**Please Note**: this kit is not meant to be integrated interally within other Playbook kits as a loading prop; rather, it can be used to create a composite of the section/kit/page with loading intermediataries, as demonstrated in the the "example component" doc examples.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("flex", props: { justify: "evenly" }) do %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "xl", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "lg", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "md", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "xs", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "none", height: "50px", width: "100px"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md

@@ -0,0 +1 @@
+The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("card", props: { border_none: true }) do %>
+    <%= pb_rails("skeleton_loading") %>
+<% end %>
+
+<%= pb_rails("card", props: { background: "light", border_none: true }) do %>
+    <%= pb_rails("skeleton_loading", props: { color: "white" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("skeleton_loading") %>
+<%= pb_rails("skeleton_loading") %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb

@@ -0,0 +1,119 @@
+<%= pb_rails("button", props: { id: "toggle-filter-button", margin_bottom: "md", text: "Show Filter", variant: "secondary" }) %>
+
+<div id="skeleton-loading-filter-content">
+  <%= pb_rails("card", props: { margin_bottom: "lg" }) do %>
+    <%= pb_rails("flex", props: { align_items: "center", justify: "between", orientation: "row" }) do %>
+      <%= pb_rails("flex", props: { align_items: "center", justify: "start", orientation: "row" }) do %>
+        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "40px", margin_right: "sm", width: "40px" }) %>
+        <%= pb_rails("skeleton_loading", props: { height: "16px", margin_right: "md", width: "80px" }) %>
+      <% end %>
+      <%= pb_rails("flex", props: { align_items: "center", justify: "end", orientation: "row" }) do %>
+        <%= pb_rails("skeleton_loading", props: { height: "18px", width: "120px" }) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("skeleton_loading", props: { height: "127px", width: "100%" }) %>
+</div>
+
+<div id="filter-content" style="display: none;">
+  <%= pb_rails("filter", props: {
+    margin_bottom: "xl",
+    min_width: "360px",
+    id: "2",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    results: 546,
+    template: "single"
+  }) do %>
+    <% example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
+    ] %>
+
+    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+      <%= form.text_field :example_text_field, props: { label: true } %>
+      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+      <%= form.actions do |action| %>
+        <%= action.submit props: {
+          text: "Apply",
+          data: {
+            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+        },}%>
+        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("filter", props: {
+    min_width: "360px",
+    id: "1",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+  }) do %>
+    <% example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
+    ] %>
+    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+      <%= form.text_field :example_text_field, props: { label: true } %>
+      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+      <%= form.actions do |action| %>
+        <%= action.submit props: {
+          text: "Apply",
+          data: {
+            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+        },}%>
+        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    const toggleButton = document.getElementById('toggle-filter-button')
+    const skeletonFilterContentDiv = document.getElementById('skeleton-loading-filter-content')
+    const filterContentDiv = document.getElementById('filter-content')
+    const secondFilterContentDiv = document.getElementById('second-filter-content')
+
+    let isLoading = true
+
+    toggleButton.addEventListener('click', function() {
+      isLoading = !isLoading
+
+      if (isLoading) {
+        skeletonFilterContentDiv.style.display = 'block'
+        filterContentDiv.style.display = 'none'
+        toggleButton.textContent = 'Show Filter'
+      } else {
+        skeletonFilterContentDiv.style.display = 'none'
+        filterContentDiv.style.display = 'block'
+        toggleButton.textContent = 'Show Skeleton Loading'
+      }
+    })
+  })
+</script>