@primer/view-components 0.36.6-rc.f22d48ee → 0.37.0-rc.0bf6cc7a

package/app/components/primer/beta/details_toggle_element.d.ts

@@ -0,0 +1,39 @@
+/**
+ * A companion Catalyst element for the Details view component. This element
+ * ensures the <details> and <summary> elements markup is properly accessible by
+ * updating the aria-label and aria-expanded attributes on click.
+ *
+ * aria-label values default to "Expand" and "Collapse". To override those
+ * values, use the `data-aria-label-open` and `data-aria-label-closed`
+ * attributes on the summary target.
+ *
+ * @example
+ * ```html
+ * <details-toggle>
+ *   <details open=true data-target="details-toggle.detailsTarget">
+ *     <summary
+ *       aria-expanded="true"
+ *       aria-label="Collapse me"
+ *       data-target="details-toggle.summaryTarget"
+ *       data-action="click:details-toggle#toggle"
+ *       data-aria-label-closed="Expand me"
+ *       data-aria-label-open="Collapse me"
+ *     >
+ *       Click me
+ *     </summary>
+ *     <div>Contents</div>
+ *   </details>
+ * </details-toggle>
+ * ```
+ */
+declare class DetailsToggleElement extends HTMLElement {
+    detailsTarget: HTMLDetailsElement;
+    summaryTarget: HTMLElement;
+    toggle(): void;
+}
+declare global {
+    interface Window {
+        DetailsToggleElement: typeof DetailsToggleElement;
+    }
+}
+export {};

package/app/components/primer/beta/details_toggle_element.js

@@ -0,0 +1,60 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller, target } from '@github/catalyst';
+/**
+ * A companion Catalyst element for the Details view component. This element
+ * ensures the <details> and <summary> elements markup is properly accessible by
+ * updating the aria-label and aria-expanded attributes on click.
+ *
+ * aria-label values default to "Expand" and "Collapse". To override those
+ * values, use the `data-aria-label-open` and `data-aria-label-closed`
+ * attributes on the summary target.
+ *
+ * @example
+ * ```html
+ * <details-toggle>
+ *   <details open=true data-target="details-toggle.detailsTarget">
+ *     <summary
+ *       aria-expanded="true"
+ *       aria-label="Collapse me"
+ *       data-target="details-toggle.summaryTarget"
+ *       data-action="click:details-toggle#toggle"
+ *       data-aria-label-closed="Expand me"
+ *       data-aria-label-open="Collapse me"
+ *     >
+ *       Click me
+ *     </summary>
+ *     <div>Contents</div>
+ *   </details>
+ * </details-toggle>
+ * ```
+ */
+let DetailsToggleElement = class DetailsToggleElement extends HTMLElement {
+    toggle() {
+        const detailsIsOpen = this.detailsTarget.hasAttribute('open');
+        if (detailsIsOpen) {
+            const ariaLabelClosed = this.summaryTarget.getAttribute('data-aria-label-closed') || 'Expand';
+            this.summaryTarget.setAttribute('aria-label', ariaLabelClosed);
+            this.summaryTarget.setAttribute('aria-expanded', 'false');
+        }
+        else {
+            const ariaLabelOpen = this.summaryTarget.getAttribute('data-aria-label-open') || 'Collapse';
+            this.summaryTarget.setAttribute('aria-label', ariaLabelOpen);
+            this.summaryTarget.setAttribute('aria-expanded', 'true');
+        }
+    }
+};
+__decorate([
+    target
+], DetailsToggleElement.prototype, "detailsTarget", void 0);
+__decorate([
+    target
+], DetailsToggleElement.prototype, "summaryTarget", void 0);
+DetailsToggleElement = __decorate([
+    controller
+], DetailsToggleElement);
+window.DetailsToggleElement = DetailsToggleElement;

package/app/components/primer/primer.d.ts

@@ -25,3 +25,4 @@ import '../../lib/primer/forms/primer_text_field';
 import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
+import './beta/details_toggle_element';

package/app/components/primer/primer.js

@@ -25,3 +25,4 @@ import '../../lib/primer/forms/primer_text_field';
 import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
+import './beta/details_toggle_element';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.36.6-rc.f22d48ee",
+  "version": "0.37.0-rc.0bf6cc7a",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/info_arch.json

@@ -3843,7 +3843,18 @@
         "name": "button",
         "description": "Required trigger for the dropdown. Has the same arguments as {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}},\nbut it is locked as a `summary` tag.",
         "parameters": [
-
+          {
+            "name": "aria_label_open",
+            "type": "String",
+            "default": "N/A",
+            "description": "Defaults to \"Close\". Value to announce when menu is open."
+          },
+          {
+            "name": "aria_label_closed",
+            "type": "String",
+            "default": "N/A",
+            "description": "Defaults to \"Open\". Value to announce when menu is closed."
+          }
         ]
       },
       {
@@ -13358,9 +13369,26 @@
     "slots": [
       {
         "name": "summary",
-        "description": null,
+        "description": "Use the Summary slot as the target for toggling the Details content open/closed.",
         "parameters": [
-
+          {
+            "name": "button",
+            "type": "Boolean",
+            "default": "N/A",
+            "description": "Whether or not to render the summary element as a button."
+          },
+          {
+            "name": "aria_label_open",
+            "type": "String",
+            "default": "N/A",
+            "description": "Defaults to \"Collapse\". Value to announce when details element is open."
+          },
+          {
+            "name": "aria_label_closed",
+            "type": "String",
+            "default": "N/A",
+            "description": "Defaults to \"Expand\". Value to announce when details element is closed."
+          }
         ]
       },
       {
@@ -13401,6 +13429,26 @@
         ],
         "return_types": [
 
+        ]
+      },
+      {
+        "name": "open",
+        "description": "Returns the value of attribute open.",
+        "parameters": [
+
+        ],
+        "return_types": [
+
+        ]
+      },
+      {
+        "name": "open?",
+        "description": "Returns the value of attribute open.",
+        "parameters": [
+
+        ],
+        "return_types": [
+
         ]
       }
     ],
@@ -13456,6 +13504,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/details/open",
+        "name": "open",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

package/static/previews.json

@@ -3118,6 +3118,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/details/open",
+        "name": "open",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },