docs(icon): minor icon documentation updates

- add figma design link to icon in storybook
- refactor: use Container in icon tests template
- small formatting adjustments to icon docs, including added subheadings

Author: jawinn

components/icon/stories/icon.mdx

@@ -20,21 +20,26 @@ The SVG icons used in Spectrum CSS are a part of two different icon sets, "workf
 
 ### Workflow icons
 
-The workflow icon set contains several hundred icons to choose from.
-These icons can be seen in use within Button, Action button, Menu, and many other components.
+The workflow icon set contains several hundred icons to choose from. For a full list of all icons within this set, see **[workflow icons](/story/components-icon--workflow)**.
+These icons can be seen in use within button, action button, menu, and many other components.
 Here is an example with just a few of these icons:
 
 <Canvas of={IconStories.WorkflowDefault} />
 
-These icons use "t-shirt" sizes, e.g. small or medium, that are the same width and height for each icon in the set. Note that the
-extra-extra-large size is currently *not* part of the design specifications and may be deprecated in the near future:
+#### T-shirt sizing
+
+Workflow icons use "t-shirt" sizes, e.g. small or medium, that are the same width and height for each icon in the set. Note that the
+extra-extra-large size is currently _not_ part of the design specifications and may be deprecated in the near future:
 
 <Canvas of={IconStories.WorkflowSizing} />
 
 ### UI icons
 
 UI icons are atomic pieces (e.g., arrows, crosses, etc.) that are used as part of some components. The chevron within
-the [Combobox component](?path=/docs/components-combobox--docs) is one example.
+the [Combobox component](/docs/components-combobox--docs) is one example. For a full list of all icons within this
+set, see **[ui icons](/story/components-icon--ui)**.
+
+#### Numbered sizing
 
 Unlike workflow icons, each UI icon comes in specific numbered sizes. They do not use "t-shirt" sizing.
 They have unique classes applied that set their size in CSS. For example:
@@ -50,6 +55,8 @@ An example of some UI icons in their available sizes:
 
 <Canvas of={IconStories.UIDefault} />
 
+#### Directional icons
+
 Directional UI icons such as Chevron and Arrow have classes for each direction. They rotate the same base icon with a CSS `transform: rotate`. For example, the `Arrow100.svg` icon is used
 with:
 

components/icon/stories/icon.stories.js

@@ -81,6 +81,10 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/9qeVZSJ9t0kv6r7njzgHx7/S2-%2F-Styles-visualizer-(WIP)?node-id=295-24257&t=ZC7fyaQ0VQYQ5VYM-1",
+		},
 	},
 	tags: ["!autodocs"],
 };

components/icon/stories/icon.test.js

@@ -1,4 +1,4 @@
-import { Variants } from "@spectrum-css/preview/decorators";
+import { Container, Variants } from "@spectrum-css/preview/decorators";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { html } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
@@ -12,20 +12,14 @@ import { uiIconsWithDirections, uniqueUiIconBaseNames, workflowSizes } from "./u
  * - All UI icons, organized within a grid by sizing number and name
  */
 export const TestTemplate = (args, context) => html`
-	<div style=${styleMap({
-		"display": "flex",
-		"gap": "12px",
-	})}>
-		<div>
-			${Typography({
-				customClasses: ["chromatic-ignore"],
-				semantics: "detail",
-				size: "l",
-				content: ["Workflow icons"],
-				customStyles: {
-					"--mod-detail-font-color": "var(--spectrum-seafoam-900)",
-				}
-			})}
+	${Container({
+		heading: "Workflow icon examples",
+		withBorder: false,
+		direction: "row",
+		wrapperStyles: {
+			columnGap: "12px",
+		},
+		content: html`
 			<div
 				style=${styleMap({
 				"display": "grid",
@@ -75,17 +69,17 @@ export const TestTemplate = (args, context) => html`
 					}, context))}
 				`)}
 			</div>
-		</div>
-		<div>
-			${Typography({
-				customClasses: ["chromatic-ignore"],
-				semantics: "detail",
-				size: "l",
-				content: ["UI icons"],
-				customStyles: {
-					"--mod-detail-font-color": "var(--spectrum-seafoam-900)",
-				},
-			})}
+		`,
+	}, context)}
+
+	${Container({
+		heading: "UI icon set",
+		withBorder: false,
+		direction: "row",
+		wrapperStyles: {
+			columnGap: "12px",
+		},
+		content: html`
 			<div
 				style=${styleMap({
 				"display": "grid",
@@ -125,8 +119,8 @@ export const TestTemplate = (args, context) => html`
 					return print;
 				}, [])}
 			</div>
-		</div>
-	</div>
+		`,
+	}, context)}
 `;
 
 export const IconGroup = Variants({