chore(deps): integrate stacks icons v7-beta and rename v6 legacy

package.json

@@ -1,6 +1,8 @@
 {
     "private": true,
-    "workspaces": ["packages/*"],
+    "workspaces": [
+        "packages/*"
+    ],
     "name": "stacks",
     "repository": {
         "type": "git",
@@ -9,7 +11,7 @@
     "license": "MIT",
     "scripts": {
         "build": "npm run build -workspaces -if-present",
-        "prepublishOnly": "npm run build -workspaces -if-present", 
+        "prepublishOnly": "npm run build -workspaces -if-present",
         "version": "changeset version && npm install --package-lock-only",
         "release": "npm run build && changeset publish",
         "format": "npm run format -workspaces -if-present",
@@ -28,8 +30,8 @@
         "@rollup/plugin-commonjs": "^26.0.1",
         "@rollup/plugin-replace": "^6.0.2",
         "@stackoverflow/prettier-config": "^1.0.0",
-        "@stackoverflow/stacks": "^2.8.4",
-        "@stackoverflow/stacks-icons": "^6.6.1",
+        "@stackoverflow/stacks-icons": "^7.0.0-beta.1",
+        "@stackoverflow/stacks-icons-legacy": "npm:@stackoverflow/stacks-icons@^6.6.1",
         "@storybook/addon-docs": "^9.1.5",
         "@storybook/addon-links": "^9.1.3",
         "@storybook/addon-svelte-csf": "^5.0.8",
@@ -117,4 +119,4 @@
         "@web/dev-server-core": "0.7.1",
         "playwright": "1.55.1"
     }
-}
+}

packages/stacks-classic/lib/components/badge/badge.a11y.test.ts

@@ -1,5 +1,5 @@
 import { runA11yTests } from "../../test/a11y-test-utils";
-import { IconEyeSm } from "@stackoverflow/stacks-icons/icons";
+import { IconEyeSm } from "@stackoverflow/stacks-icons-legacy/icons";
 import "../../index";
 
 const variants = {

packages/stacks-classic/lib/components/badge/badge.visual.test.ts

@@ -1,5 +1,5 @@
 import { runVisualTests } from "../../test/visual-test-utils";
-import { IconEyeSm } from "@stackoverflow/stacks-icons/icons";
+import { IconEyeSm } from "@stackoverflow/stacks-icons-legacy/icons";
 import "../../index";
 import { html } from "@open-wc/testing";
 

packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
+import { SpotEmptyXL } from "@stackoverflow/stacks-icons-legacy";
 import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 

packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
+import { SpotEmptyXL } from "@stackoverflow/stacks-icons-legacy";
 import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 

packages/stacks-classic/lib/components/modal/modal.a11y.test.ts

@@ -1,6 +1,6 @@
 import { html } from "@open-wc/testing";
 import { runA11yTests } from "../../test/a11y-test-utils";
-import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
+import { IconClearSm } from "@stackoverflow/stacks-icons-legacy/icons";
 import "../../index";
 
 describe("modal", () => {

packages/stacks-classic/lib/components/modal/modal.visual.test.ts

@@ -1,6 +1,6 @@
 import { html } from "@open-wc/testing";
 import { runVisualTests } from "../../test/visual-test-utils";
-import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
+import { IconClearSm } from "@stackoverflow/stacks-icons-legacy/icons";
 import "../../index";
 
 describe("modal", () => {

packages/stacks-classic/lib/components/post-summary/post-summary.test.setup.ts

@@ -8,7 +8,7 @@ import {
     IconPencilSm,
     IconTackSm,
     IconTrashSm,
-} from "@stackoverflow/stacks-icons/icons";
+} from "@stackoverflow/stacks-icons-legacy/icons";
 import type { TestVariationArgs } from "../../test/test-utils";
 import "../../index";
 

packages/stacks-classic/lib/components/progress-bar/progress-bar.a11y.test.ts

@@ -2,7 +2,7 @@ import { html } from "@open-wc/testing";
 import {
     IconAchievementsSm,
     IconCheckmarkSm,
-} from "@stackoverflow/stacks-icons/icons";
+} from "@stackoverflow/stacks-icons-legacy/icons";
 import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 

packages/stacks-classic/lib/components/progress-bar/progress-bar.visual.test.ts

@@ -2,7 +2,7 @@ import { html } from "@open-wc/testing";
 import {
     IconAchievementsSm,
     IconCheckmarkSm,
-} from "@stackoverflow/stacks-icons/icons";
+} from "@stackoverflow/stacks-icons-legacy/icons";
 import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 

packages/stacks-classic/lib/components/tag/tag.a11y.test.ts

@@ -1,4 +1,4 @@
-import { IconClearSm } from "@stackoverflow/stacks-icons";
+import { IconClearSm } from "@stackoverflow/stacks-icons-legacy";
 import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 

packages/stacks-classic/lib/components/tag/tag.visual.test.ts

@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
+import { IconClearSm } from "@stackoverflow/stacks-icons-legacy/icons";
 import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 

packages/stacks-classic/lib/components/topbar/topbar.visual.test.ts

@@ -9,7 +9,7 @@ import {
     IconReviewQueue,
     IconSearch,
     IconStackExchange,
-} from "@stackoverflow/stacks-icons/icons";
+} from "@stackoverflow/stacks-icons-legacy/icons";
 import { html } from "@open-wc/testing";
 
 const base64Image =

packages/stacks-docs/package.json

@@ -9,12 +9,13 @@
         "build": "webpack --mode=production && eleventy"
     },
     "dependencies": {
-        "@stackoverflow/stacks": "3.0.0-beta.0",
         "@hotwired/stimulus": "^3.2.2",
+        "@stackoverflow/stacks": "*",
+        "@stackoverflow/stacks-editor": "^1.0.0-beta.3",
+        "@stackoverflow/stacks-icons": "^7.0.0-beta.1",
+        "@stackoverflow/stacks-icons-legacy": "npm:@stackoverflow/stacks-icons@^6.6.1",
         "jquery": "^3.7.1",
         "list.js": "^2.3.1",
-        "docsearch.js": "^2.6.3",
-        "@stackoverflow/stacks-editor": "^0.15.2",
-        "@stackoverflow/stacks-icons": "*"
+        "docsearch.js": "^2.6.3"
     }
-}
+}

packages/stacks-docs/plugins/banner-example.js

@@ -1,4 +1,4 @@
-const { Icons } = require("@stackoverflow/stacks-icons");
+const { Icons } = require("@stackoverflow/stacks-icons-legacy");
 
 module.exports = {
     configFunction(eleventyConfig) {

packages/stacks-docs/plugins/header.js

@@ -1,5 +1,5 @@
 
-const { Icons } = require("@stackoverflow/stacks-icons");
+const { Icons } = require("@stackoverflow/stacks-icons-legacy");
 
 module.exports = {
   configFunction(eleventyConfig) {

packages/stacks-docs/plugins/icons.js

@@ -1,6 +1,10 @@
-const { Icons, Spots } = require("@stackoverflow/stacks-icons");
+const { Icons: LegacyIcons, Spots: LegacySpots } = require("@stackoverflow/stacks-icons-legacy");
+const { Icons: BetaIcons, Spots: BetaSpots } = require("@stackoverflow/stacks-icons");
 const fs = require("fs/promises");
 
+const Icons = { ...LegacyIcons, ...BetaIcons };
+const Spots = { ...LegacySpots, ...BetaSpots };
+
 function modifySvg(content, type, name, classes, dimension) {
   var defaultClasses = `svg-${type} ${type}${name}`;
 

packages/stacks-docs/plugins/tip.js

@@ -1,4 +1,4 @@
-const { Spots } = require("@stackoverflow/stacks-icons");
+const { Spots } = require("@stackoverflow/stacks-icons-legacy");
 
 module.exports = {
     configFunction(eleventyConfig) {

packages/stacks-docs/product/foundation/icons.html

@@ -2,7 +2,7 @@
 layout: page
 title: Icons
 razor: https://razor.stackoverflow.design/components/icon
-figma: https://svelte.stackoverflow.design/figma/icons
+figma: https://www.figma.com/design/Z5yoO4WH58QDHvmxwMWhr0
 description: Stacks provides a complete icon set, managed separately in the <a href="https://github.com/StackExchange/Stacks-Icons">Stacks-Icons</a> repository. There you’ll find deeper documentation on the various uses as well as the icons’ source in our design tool Figma.
 tags: foundation
 ---
@@ -11,79 +11,57 @@
     {% header "h2", "Usage" %}
     <p class="stacks-copy">Stacks icons are designed to be directly injected into the markup as an <code class="stacks-code">svg</code> element. This allows us to color them on the fly using any of our atomic classes. We have different helpers in different environments.</p>
 
-    {% header "h3", "Production" %}
-    <p class="stacks-copy">If you’re in Stack Overflow’s production environment, we have a helper that can be called with <code class="stacks-code">@Svg.</code> and the icon name, eg. <code class="stacks-code">@Svg.Alert</code>. By default, any icon will inherit the text color of the parent element. Optionally, you can pass the class <code class="stacks-code">native</code> to the icon to render any native colors that are included eg. <code class="stacks-code">@Svg.Ballon.With("native")</code>. This same syntax allows you to pass additional arbitrary classes like atomic helpers, or <code class="stacks-code">js-</code> prefixed classes.</p>
-    <div class="stacks-preview">
-{% highlight java %}
-@Svg.Wave
-@Svg.Wave.With("native")
-@Svg.Wave.With("fc-black-350 float-right js-dropdown-target")
-{% endhighlight %}
-        <div class="stacks-preview--example">
-            <div class="d-flex g24 fw-wrap ff-mono">
-                <div class="flex--item">
-                    <div class="fc-medium mb12">Default</div>
-                    {% icon "Wave" %}
-                </div>
-                <div class="flex--item">
-                    <div class="fc-medium mb12">With native colors</div>
-                    {% icon "Wave", "native" %}
-                </div>
-                <div class="flex--item ml-auto">
-                    <div class="fc-medium mb12">With arbitrary classes</div>
-                    {% icon "Wave", "fc-black-350 float-right js-dropdown-target" %}
-                </div>
-            </div>
-        </div>
-    </div>
-
-    {% header "h3", "Prototypes" %}
-    <p class="stacks-copy">Our icon set also includes a JavaScript library for use in prototypes outside our production environment. This JavaScript is loaded in our Stacks playground in <a href="https://codepen.io/pen?template=wvmRgdp">Codepen</a>. When using <code>data-icon</code> attributes, you need to prefix the icon names with <code>Icon</code> (e.g. <code>IconWave</code>). If you’re building a prototype in your own environment, you’ll need to include Stacks as a dependency as well as the <a href="https://github.com/StackExchange/Stacks-Icons#using-the-front-end-helper-for-prototyping">icons library</a>.</p>
-    <div class="stacks-preview">
+    {% header "h3", "Svelte" %}
+    <p class="stacks-copy">If you are working in a Svelte project, you can use the <code class="stacks-code">Icon</code> component to render an icon.
+        This component will render the icon as an <code class="stacks-code">svg</code> element with the appropriate classes and attributes (<a href="https://svelte.stackoverflow.design/?path=/docs/components-icon--docs">docs</a>).
+    </p>
 {% highlight html %}
-<svg data-icon="IconWave"></svg>
-<svg data-icon="IconWave" class="native"></svg>
-<svg data-icon="IconWave" class="fc-black-350 float-right js-dropdown-target"></svg>
+<script lang="ts">
+    import { IconServiceCCPA } from "@stackoverflow/stacks-icons/icons";
+</script>
+
+<Icon src="IconServiceCCPA" />
+<Icon src="IconServiceCCPA" class="native" />
+<Icon src="IconServiceCCPA" class="fc-black-350 float-right" />
 {% endhighlight %}
-        <div class="stacks-preview--example">
-            <div class="d-flex g24 fw-wrap ff-mono">
-                <div class="flex--item">
-                    <div class="fc-medium mb12">Default</div>
-                    {% icon "Wave" %}
-                </div>
-                <div class="flex--item">
-                    <div class="fc-medium mb12">With native colors</div>
-                    {% icon "Wave", "native" %}
-                </div>
-                <div class="flex--item ml-auto">
-                    <div class="fc-medium mb12">With arbitrary classes</div>
-                    {% icon "Wave", "fc-black-350 float-right js-dropdown-target" %}
-                </div>
-            </div>
+<div class="stacks-preview--example">
+    <div class="d-flex g24 fw-wrap ff-mono">
+        <div class="flex--item">
+            <div class="fc-medium mb12">Default</div>
+            {% icon "ServiceCCPA" %}
+        </div>
+        <div class="flex--item">
+            <div class="fc-medium mb12">With native colors</div>
+            {% icon "ServiceCCPA", "native" %}
+        </div>
+        <div class="flex--item ml-auto">
+            <div class="fc-medium mb12">With arbitrary classes</div>
+            {% icon "ServiceCCPA", "fc-black-350 float-right" %}
         </div>
     </div>
+</div>
 
-    {% header "h3", "Documentation" %}
-    <p class="stacks-copy">For use within our documentation, we’ve also included a Liquid helper.</p>
+{% header "h3", "Dotnet" %}
+    <p class="stacks-copy">If you’re working in a dotnet project, we have a helper that can be called with <code class="stacks-code">@Svg.</code> and the icon name, eg. <code class="stacks-code">@Svg.Answer</code>. By default, any icon will inherit the text color of the parent element. Optionally, you can pass the class <code class="stacks-code">native</code> to the icon to render any native colors that are included eg. <code class="stacks-code">@Svg.ServiceCCPA.With("native")</code>. This same syntax allows you to pass additional arbitrary classes like atomic helpers, or <code class="stacks-code">js-</code> prefixed classes.</p>
     <div class="stacks-preview">
 {% highlight java %}
-{% icon "Wave" %}
-{% icon "Wave", "native" %}
-{% icon "Wave", "fc-black-350 float-right js-dropdown-target" %}
+@Svg.ServiceCCPA
+@Svg.ServiceCCPA.With("native")
+@Svg.ServiceCCPA.With("fc-black-350 float-right js-dropdown-target")
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="d-flex g24 fw-wrap ff-mono">
                 <div class="flex--item">
                     <div class="fc-medium mb12">Default</div>
-                    {% icon "Wave" %}
+                    {% icon "ServiceCCPA" %}
                 </div>
                 <div class="flex--item">
                     <div class="fc-medium mb12">With native colors</div>
-                    {% icon "Wave", "native" %}
+                    {% icon "ServiceCCPA", "native" %}
                 </div>
                 <div class="flex--item ml-auto">
                     <div class="fc-medium mb12">With arbitrary classes</div>
-                    {% icon "Wave", "fc-black-350 float-right js-dropdown-target" %}
+                    {% icon "ServiceCCPA", "fc-black-350 float-right js-dropdown-target" %}
                 </div>
             </div>
         </div>
@@ -114,7 +92,7 @@
                         {% icon iconName, "native js-svg" %}
                     </div>
                     <div class="d-flex ai-center jc-space-between p8">
-                        <code class="flex--item fs-caption py8 ff-mono ow-break-word js-name">@Svg.{{ iconName }}</code>
+                        <code class="flex--item fs-caption py8 ff-mono ow-break-word js-name">{{ iconName }}</code>
                         <a class="d-flex flex__center s-btn s-btn__muted fc-black-400 p2" href="#{{ iconName | downcase }}">
                             {% icon "Link" %}
                             <span class="v-visible-sr">{{ iconName }} icon</span>

packages/stacks-docs/product/foundation/spots.html

@@ -1,54 +1,12 @@
 ---
 layout: page
-title: Spot illustrations
+title: Spot illustrations (WIP)
 razor: https://razor.stackoverflow.design/components/spot
-figma: https://svelte.stackoverflow.design/figma/icons
+figma: https://www.figma.com/design/Z5yoO4WH58QDHvmxwMWhr0
 description: Spot illustrations are the slightly grown up version of icons with a little more detail. They’re most often used in empty states and new product announcements. They’re built externally on the <a href="https://github.com/StackExchange/Stacks-Icons">Icons</a> repository.
 tags: foundation
 ---
 
-<section class="stacks-section">
-    {% header "h2", "Using the spots helpers" %}
-    <p class="stacks-copy">Just like icons, spot illustrations are delivered as a Razor helper in Stack Overflow’s production environment, a custom liquid tag in our documentation’s Eleventy site generator, and a JavaScript helper for use in prototypes.</p>
-    <p class="stacks-copy">Helpers should be used for all spot illustrations in lieu of SVG sprite sheets or static raster image assets. This ensures a single source of truth for all spot illustrations.</p>
-
-    {% header "h3", "Basic" %}
-    <div class="stacks-preview">
-{% highlight html %}
-<!-- Razor -->
-@Svg.Spot.Wave
-
-<!-- Liquid -->
-{% spot "Wave" %}
-
-<!-- JavaScript Helper -->
-<svg data-spot="SpotWave"></svg>
-{% endhighlight %}
-        <div class="stacks-preview--example">
-            {% spot "Wave" %}
-        </div>
-    </div>
-
-    {% header "h3", "Arbitrary classes" %}
-    <p class="stacks-copy">Spot illustrations can be colored on the fly with support for arbitrary classes.</p>
-
-    <div class="stacks-preview">
-{% highlight html %}
-<!-- Razor -->
-@Svg.Spot.Wave.With("fc-orange-400 float-right js-dropdown-target")
-
-<!-- Liquid -->
-{% spot "Wave", "fc-orange-400 float-right js-dropdown-target" %}
-
-<!-- JavaScript Helper -->
-<svg data-spot="SpotWave" class="fc-orange-400 float-right js-dropdown-target"></svg>
-{% endhighlight %}
-        <div class="stacks-preview--example overflow-hidden">
-            {% spot "Wave", "fc-orange-400 float-right js-dropdown-target" %}
-        </div>
-    </div>
-</section>
-
 <section class="stacks-section mb32" id="js-sortable-list">
     {% header "h2", "Spot illustrations" %}
     <div class="ps-sticky z-nav t64 bb bc-black-225 bg-white py16 mtn8 mb16 d-flex jc-space-between">
@@ -60,10 +18,10 @@
             <div class="flex--item">
                 <div id="{{ spotName | downcase }}" class="d-flex fd-column p0 s-card h100 stacks-icon-container">
                     <div class="d-flex fl-grow1 flex__center stacks-icon-preview">
-                        {% spot spotName %}
+                        {% spot spotName, "native" %}
                     </div>
                     <div class="d-flex ai-center jc-space-between p8">
-                        <code class="flex--item fs-caption py8 ff-mono ow-break-word js-name">@Svg.Spot.{{ spotName }}</code>
+                        <code class="flex--item fs-caption py8 ff-mono ow-break-word js-name">{{ spotName }}</code>
                         <a class="d-flex flex__center s-btn s-btn__muted fc-black-400 p2" href="#{{ spotName | downcase }}">
                             {% icon "Link" %}
                             <span class="v-visible-sr">{{ spotName }} spot</span>

packages/stacks-svelte/package.json

@@ -32,7 +32,8 @@
     },
     "dependencies": {
         "@floating-ui/core": "^1.7.3",
-        "@stackoverflow/stacks-icons": "^6.6.1",
+        "@stackoverflow/stacks-icons": "^7.0.0-beta.1",
+        "@stackoverflow/stacks-icons-legacy": "npm:@stackoverflow/stacks-icons@^6.6.1",
         "svelte-floating-ui": "^1.6.2",
         "svelte-sonner": "^1.0.5"
     },