Merge branch 'develop' into STACKS-657/example-row-detail-positioning

StackExchange · Nov 27, 2024 · 57789bc · 57789bc
2 parents ba66ab7 + df6e47b
commit 57789bc
Show file tree

Hide file tree

Showing 9,965 changed files with 2,826 additions and 2,825 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,7 +1,5 @@
 {
     "recommendations": [
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode",
         "stylelint.vscode-stylelint"
     ]
-}
+}
diff --git a/docs/_includes/example-row-detail.html → docs/_includes/annotation.html b/docs/_includes/example-row-detail.html → docs/_includes/annotation.html
diff --git a/docs/product/foundation/accessibility.html b/docs/product/foundation/accessibility.html
@@ -106,7 +106,7 @@
                     role="presentation">
                     {% icon "Pencil" %} Button
                 </button>
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: group.description,
                     classes: "mx-auto",
                     connectorHeight: 16
@@ -133,7 +133,7 @@
                     {% icon "Pencil" %}
                     Button
                 </button>
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: group.description,
                     classes: "mx-auto",
                     connectorHeight: 16
@@ -158,7 +158,7 @@
                     <input class="s-toggle-switch {{group.classes | default: ""}}" type="checkbox" role="presentation">
                 {% endif %}
 
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: group.description,
                     classes: "mx-auto",
                     connectorHeight: 16
@@ -197,7 +197,7 @@
                     </div>
                 {% endif %}
 
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: group.description,
                     classes: "mx-auto",
                     connectorHeight: 16
@@ -232,7 +232,7 @@
                     </div>
                 {% endif %}
 
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: group.description,
                     classes: "mx-auto",
                     connectorHeight: 16
@@ -284,7 +284,7 @@
                     </div>
                 {% endif %}
 
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: group.description,
                     classes: "mx-auto",
                     connectorHeight: 16
@@ -306,7 +306,7 @@
                     </button>
                 {% endif %}
 
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: group.description,
                     classes: "mx-auto",
                     connectorHeight: 16

diff --git a/docs/product/foundation/color-fundamentals.html b/docs/product/foundation/color-fundamentals.html
@@ -128,7 +128,7 @@
     <section class="stacks-section">
         {% header "h3", "Backgrounds" %}
         <div class="d-flex fd-column bg-black-100 bar-lg p32">
-            {% render 'example-row-detail.html',
+            {% render 'annotation.html',
                 text: "Default background color",
                 style: "margin-left: calc((1.5/11) * 100%)",
                 classes: "sm:d-none",
@@ -139,7 +139,7 @@
                 colorSets: colors[0].sets,
                 labeledStops: "050,100,150,200" | split: ","
             %}
-            {% render 'example-row-detail.html',
+            {% render 'annotation.html',
                 text: "Background layers",
                 style: "width: calc((4/11) * 100%)",
                 classes: "sm:d-none",
@@ -160,13 +160,13 @@
                 labeledStops: "200,225,300" | split: ","
             %}
             <div class="d-flex w100">
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: "Decorative borders",
                     style: "margin-left: calc((3/11) * 100%); width: calc((2/11) * 100%)",
                     classes: "sm:d-none",
                     range: true
                 %}
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: "Input borders",
                     classes: "sm:d-none",
                     style: "margin-left: calc((1/11) * 100%); min-width: calc((1/11) * 100%)"
@@ -187,13 +187,13 @@
                 labeledStops: "400,500,600" | split: ","
             %}
             <div class="d-flex w100">
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: "Text",
                     style: "margin-left: calc((8/11) * 100%); width: calc((2/11) * 100%)",
                     classes: "sm:d-none",
                     range: true
                 %}
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: "Heading",
                     style: "min-width: calc((1/11) * 100%)",
                     classes: "sm:d-none fl-shrink1"
@@ -210,12 +210,12 @@
         <div class="d-flex fd-column bg-black-100 bar-lg p32">
             {% render 'color-row.html', color: "black", colorSets: colors[0].sets, labeledStops: "350,400,500" | split: "," %}
             <div class="d-flex w100">
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: "Illustrations",
                     style: "margin-left: calc((7/11) * 100%); min-width: calc((1/11) * 100%)",
                     classes: "sm:d-none",
                 %}
-                {% render 'example-row-detail.html',
+                {% render 'annotation.html',
                     text: "Icons",
                     style: "width: calc((2/11) * 100%)",
                     classes: "sm:d-none",
@@ -331,7 +331,7 @@
                                 <div class="{{color.classes}} bar-pill ta-center px8 py2">Robotics</div>
                             {% endfor %}
                         </div>
-                        {% render 'example-row-detail.html',
+                        {% render 'annotation.html',
                             text: group.name,
                             range: true
                         %}
@@ -342,7 +342,7 @@
                 {% for group in colors[0].emphasis %}
                     <div class="ta-center">
                         <div class="fs-title {{group.textClasses}}">Text</div>
-                        {% render 'example-row-detail.html',
+                        {% render 'annotation.html',
                             text: group.name,
                             classes: "mx-auto",
                             style: "margin-left: 50%;"
@@ -362,7 +362,7 @@
             {% for group in colors[0].interaction %}
                 <div class="ta-center w100">
                     <button class="s-btn s-btn__filled {{group.classes}}" {{group.attr}} role="presentation">Button</button>
-                    {% render 'example-row-detail.html',
+                    {% render 'annotation.html',
                         text: group.name,
                         classes: "mx-auto",
                         style: "margin-left: 50%;"

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,28 @@
+import prettier from "eslint-config-prettier";
+import js from "@eslint/js";
+import ts from "typescript-eslint";
+import nounsanitized from "eslint-plugin-no-unsanitized";
+
+export default ts.config(
+    js.configs.recommended,
+    nounsanitized.configs.recommended,
+    ...ts.configs.recommended,
+    prettier,
+    {
+        rules: {
+            "no-console": "error",
+            "no-alert": "error",
+            "no-process-env": "error",
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                {
+                    destructuredArrayIgnorePattern: "^_",
+                },
+            ],
+            "@typescript-eslint/no-unused-expressions": "off",
+        },
+    },
+    {
+        ignores: ["node_modules", "dist", "**/*.js"],
+    }
+);
diff --git a/lib/components/expandable/expandable.ts b/lib/components/expandable/expandable.ts
@@ -28,7 +28,7 @@ function globalChangeListener(e: UIEvent) {
             let customEvent;
             try {
                 customEvent = new Event(RADIO_OFF_EVENT);
-            } catch (ex) {
+            } catch {
                 // Internet Explorer
                 customEvent = document.createEvent("Event");
                 customEvent.initEvent(RADIO_OFF_EVENT, true, true);

diff --git a/lib/components/select/select.a11y.test.ts b/lib/components/select/select.a11y.test.ts
@@ -61,7 +61,6 @@ describe("select", () => {
                 default: child(state.attr),
             },
             template: ({ component, testid }) =>
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                 template({ component, testid, className: state.class }),
             options: {
                 includeNullModifier: false,

diff --git a/lib/components/select/select.visual.test.ts b/lib/components/select/select.visual.test.ts
@@ -62,7 +62,6 @@ describe("select", () => {
                 selected: child(state.attr),
             },
             template: ({ component, testid }) =>
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                 template({ component, testid, className: state.class }),
             options: {
                 includeNullModifier: false,

diff --git a/lib/components/uploader/uploader.ts b/lib/components/uploader/uploader.ts
@@ -137,7 +137,7 @@ export class UploaderController extends Stacks.StacksController {
 
         if (file.type.match("image/*") && file.data) {
             thumbElement = document.createElement("img");
-            // eslint-disable-next-line @typescript-eslint/no-base-to-string
+
             thumbElement.src = file.data.toString();
             thumbElement.alt = file.name;
         } else {

diff --git a/lib/stacks.ts b/lib/stacks.ts
@@ -29,7 +29,7 @@ export class StacksApplication extends Stimulus.Application {
         schema?: Stimulus.Schema
     ): StacksApplication {
         const application = new StacksApplication(element, schema);
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+
         application.start();
         return application;
     }
@@ -64,9 +64,9 @@ export class StacksController extends Stimulus.Controller {
                 cancelable: true,
                 detail: detail,
             });
-        } catch (ex) {
+        } catch {
             // Internet Explorer
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
             event = document.createEvent("CustomEvent");
             event.initCustomEvent(namespacedName, true, true, detail);
         }

diff --git a/lib/test/test-utils.ts b/lib/test/test-utils.ts
@@ -119,7 +119,7 @@ type Themes = ["light" | "dark" | "highcontrast" | ""];
 
 const attrObjToString = (attrs: Record<string, string>): string => {
     const attrString = Object.keys(attrs).map((key) => {
-        return `${key}="${attrs[key]}"` || "";
+        return `${key}="${attrs[key]}"`;
     });
     return attrString.join(" ") || "";
 };