@primer/view-components 0.35.0-rc.05e7928c → 0.35.0-rc.121ad8cd

package/app/lib/primer/forms/primer_text_field.js

@@ -0,0 +1,119 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+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;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _PrimerTextFieldElement_abortController;
+import '@github/auto-check-element';
+import { controller, target } from '@github/catalyst';
+let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _PrimerTextFieldElement_abortController.set(this, void 0);
+    }
+    connectedCallback() {
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
+        const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
+        this.addEventListener('auto-check-success', async (event) => {
+            const message = await event.detail.response.text();
+            if (message && message.length > 0) {
+                this.setSuccess(message);
+            }
+            else {
+                this.clearError();
+            }
+        }, { signal });
+        this.addEventListener('auto-check-error', async (event) => {
+            const errorMessage = await event.detail.response.text();
+            this.setError(errorMessage);
+        }, { signal });
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
+    }
+    clearContents() {
+        this.inputElement.value = '';
+        this.inputElement.focus();
+        this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }));
+    }
+    clearError() {
+        this.inputElement.removeAttribute('invalid');
+        this.validationElement.hidden = true;
+        this.validationMessageElement.replaceChildren();
+    }
+    setValidationMessage(message) {
+        const template = document.createElement('template');
+        // eslint-disable-next-line github/no-inner-html
+        template.innerHTML = message;
+        const fragment = document.importNode(template.content, true);
+        this.validationMessageElement.replaceChildren(fragment);
+    }
+    toggleValidationStyling(isError) {
+        if (isError) {
+            this.validationElement.classList.remove('FormControl-inlineValidation--success');
+        }
+        else {
+            this.validationElement.classList.add('FormControl-inlineValidation--success');
+        }
+        this.validationSuccessIcon.hidden = isError;
+        this.validationErrorIcon.hidden = !isError;
+        this.inputElement.setAttribute('invalid', isError ? 'true' : 'false');
+    }
+    setSuccess(message) {
+        this.toggleValidationStyling(false);
+        this.setValidationMessage(message);
+        this.validationElement.hidden = false;
+    }
+    setError(message) {
+        this.toggleValidationStyling(true);
+        this.setValidationMessage(message);
+        this.validationElement.hidden = false;
+    }
+    showLeadingSpinner() {
+        this.leadingSpinner?.removeAttribute('hidden');
+        this.leadingVisual?.setAttribute('hidden', '');
+    }
+    hideLeadingSpinner() {
+        this.leadingSpinner?.setAttribute('hidden', '');
+        this.leadingVisual?.removeAttribute('hidden');
+    }
+};
+_PrimerTextFieldElement_abortController = new WeakMap();
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "inputElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationSuccessIcon", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationErrorIcon", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "leadingVisual", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
+PrimerTextFieldElement = __decorate([
+    controller
+], PrimerTextFieldElement);
+export { PrimerTextFieldElement };

package/app/lib/primer/forms/toggle_switch_input.js

@@ -0,0 +1,34 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+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';
+let ToggleSwitchInputElement = class ToggleSwitchInputElement extends HTMLElement {
+    connectedCallback() {
+        this.addEventListener('toggleSwitchError', (event) => {
+            this.validationMessageElement.textContent = event.detail;
+            this.validationElement.removeAttribute('hidden');
+        });
+        this.addEventListener('toggleSwitchSuccess', () => {
+            this.validationMessageElement.textContent = '';
+            this.validationElement.setAttribute('hidden', 'hidden');
+        });
+        this.addEventListener('toggleSwitchLoading', () => {
+            this.validationMessageElement.textContent = '';
+            this.validationElement.setAttribute('hidden', 'hidden');
+        });
+    }
+};
+__decorate([
+    target
+], ToggleSwitchInputElement.prototype, "validationElement", void 0);
+__decorate([
+    target
+], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
+ToggleSwitchInputElement = __decorate([
+    controller
+], ToggleSwitchInputElement);
+export { ToggleSwitchInputElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.35.0-rc.05e7928c",
+  "version": "0.35.0-rc.121ad8cd",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -26,15 +26,15 @@
     "app/components/primer/**/*.css",
     "app/components/primer/**/*.css.json",
     "app/components/primer/**/*.d.ts",
-    "lib/primer/forms/**/*.js",
-    "lib/primer/forms/**/*.d.ts"
+    "app/lib/primer/forms/**/*.js",
+    "app/lib/primer/forms/**/*.d.ts"
   ],
   "scripts": {
     "clean": "git clean -fdX -- app/",
     "prepare": "script/build-assets",
     "lint": "npm run lint:stylelint && npm run lint:eslint",
-    "lint:stylelint": "stylelint 'app/components/**/*.pcss'",
-    "lint:stylelint:fix": "stylelint 'app/components/**/*.pcss' --fix",
+    "lint:stylelint": "stylelint --rd -q 'app/components/**/*.pcss'",
+    "lint:stylelint:fix": "npm run lint:stylelint --  --fix",
     "lint:eslint": "eslint 'app/components/**/*.ts'",
     "lint:eslint:fix": "eslint 'app/components/**/*.ts' --fix",
     "changeset:version": "changeset version && script/version",
@@ -64,9 +64,9 @@
     "@github/markdownlint-github": "^0.6.0",
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.35.1",
-    "@primer/css": "21.3.6",
+    "@primer/css": "21.5.0",
     "@primer/primitives": "^9.0.2",
-    "@primer/stylelint-config": "^12.7.2",
+    "@primer/stylelint-config": "^13.1.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
@@ -89,8 +89,7 @@
     "prettier": "^3.3.2",
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
-    "stylelint": "^16.1.0",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint-actions-formatters": "^16.3.1",
     "tslib": "^2.4.0",
     "typescript": "^5.2.2",
     "vite": "^5.4.3",

package/static/arguments.json

@@ -974,6 +974,12 @@
         "default": "`false`",
         "description": "If true will hide the heading title, while still making it available to Screen Readers."
       },
+      {
+        "name": "disable_scroll",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "When true, disables scrolling the page when the dialog is open."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -1345,34 +1351,6 @@
       }
     ]
   },
-  {
-    "component": "ImageCrop",
-    "status": "alpha",
-    "a11y_reviewed": false,
-    "short_name": "ImageCrop",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image_crop.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image_crop/default/",
-    "parameters": [
-      {
-        "name": "src",
-        "type": "String",
-        "default": "N/A",
-        "description": "The path of the image to crop."
-      },
-      {
-        "name": "rounded",
-        "type": "Boolean",
-        "default": "`true`",
-        "description": "If the crop mask should be a circle. Defaults to true."
-      },
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
   {
     "component": "Layout",
     "status": "alpha",
@@ -2510,6 +2488,92 @@
       }
     ]
   },
+  {
+    "component": "Stack",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "Stack",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack/default/",
+    "parameters": [
+      {
+        "name": "tag",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "Customize the element type of the rendered container."
+      },
+      {
+        "name": "gap",
+        "type": "Symbol",
+        "default": "`GapArg::DEFAULT`",
+        "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
+      },
+      {
+        "name": "direction",
+        "type": "Symbol",
+        "default": "`:vertical`",
+        "description": "Specify the direction for the stack container. One of `nil`, `:horizontal`, or `:vertical`."
+      },
+      {
+        "name": "align",
+        "type": "Symbol",
+        "default": "`:stretch`",
+        "description": "Specify the alignment between items in the cross-axis of the direction. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
+      },
+      {
+        "name": "wrap",
+        "type": "Symbol",
+        "default": "`:nowrap`",
+        "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
+      },
+      {
+        "name": "justify",
+        "type": "Symbol",
+        "default": "`:start`",
+        "description": "Specify how items will be distributed in the stacking direction. One of `nil`, `:center`, `:end`, `:space_between`, `:space_evenly`, or `:start`."
+      },
+      {
+        "name": "padding",
+        "type": "Symbol",
+        "default": "`:none`",
+        "description": "Specify the padding of the stack container. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "StackItem",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "StackItem",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack_item.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack_item/default/",
+    "parameters": [
+      {
+        "name": "tag",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "Customize the element type of the rendered container."
+      },
+      {
+        "name": "grow",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Allow item to keep size or expand to fill the available space."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "SubmitButton",
     "status": "alpha",

package/static/audited_at.json

@@ -30,7 +30,6 @@
   "Primer::Alpha::HellipButton": "",
   "Primer::Alpha::HiddenTextExpander": "",
   "Primer::Alpha::Image": "",
-  "Primer::Alpha::ImageCrop": "",
   "Primer::Alpha::Layout": "",
   "Primer::Alpha::Layout::Main": "",
   "Primer::Alpha::Layout::Sidebar": "",
@@ -54,6 +53,8 @@
   "Primer::Alpha::Select": "",
   "Primer::Alpha::SelectPanel": "",
   "Primer::Alpha::SelectPanel::ItemList": "2023-07-10",
+  "Primer::Alpha::Stack": "",
+  "Primer::Alpha::StackItem": "",
   "Primer::Alpha::SubmitButton": "",
   "Primer::Alpha::TabContainer": "",
   "Primer::Alpha::TabNav": "",

package/static/classes.json

@@ -501,6 +501,12 @@
   "SelectPanel-loadingPanel": [
     "Primer::Alpha::SelectPanel"
   ],
+  "Stack": [
+    "Primer::Alpha::Stack"
+  ],
+  "StackItem": [
+    "Primer::Alpha::StackItem"
+  ],
   "State": [
     "Primer::Beta::State"
   ],

package/static/constants.json

@@ -356,8 +356,6 @@
   },
   "Primer::Alpha::Image": {
   },
-  "Primer::Alpha::ImageCrop": {
-  },
   "Primer::Alpha::Layout": {
     "FIRST_IN_SOURCE_DEFAULT": "sidebar",
     "FIRST_IN_SOURCE_OPTIONS": [
@@ -621,6 +619,30 @@
   },
   "Primer::Alpha::SelectPanel::ItemList": {
   },
+  "Primer::Alpha::Stack": {
+    "ARG_CLASSES": [
+      "Primer::Alpha::Stack::JustifyArg",
+      "Primer::Alpha::Stack::DirectionArg",
+      "Primer::Alpha::Stack::AlignArg",
+      "Primer::Alpha::Stack::WrapArg",
+      "Primer::Alpha::Stack::PaddingArg",
+      "Primer::Alpha::Stack::GapArg"
+    ],
+    "AlignArg": "Primer::Alpha::Stack::AlignArg",
+    "DEFAULT_TAG": "div",
+    "DirectionArg": "Primer::Alpha::Stack::DirectionArg",
+    "GapArg": "Primer::Alpha::Stack::GapArg",
+    "JustifyArg": "Primer::Alpha::Stack::JustifyArg",
+    "PaddingArg": "Primer::Alpha::Stack::PaddingArg",
+    "WrapArg": "Primer::Alpha::Stack::WrapArg"
+  },
+  "Primer::Alpha::StackItem": {
+    "ARG_CLASSES": [
+      "Primer::Alpha::StackItem::GrowArg"
+    ],
+    "DEFAULT_TAG": "div",
+    "GrowArg": "Primer::Alpha::StackItem::GrowArg"
+  },
   "Primer::Alpha::SubmitButton": {
   },
   "Primer::Alpha::TabContainer": {