docs(appframe,appframesidenav): refactor items with fallbacks

- refactors any hardcoded svgs with the icon component
- uses the defaultSideNavItems as a fallback for the items prop
- passes the items prop to the template so users can pass in their own
nav items

Author: marissahuysentruyt

components/appframe/stories/appframe.stories.js

@@ -43,6 +43,7 @@ export default {
 			options: ["default", "rounded"],
 			control: "select",
 		},
+		items: { table: { disable: true } },
 	},
 	args: {
 		rootClass: "spectrum-AppFrame",

components/appframe/stories/template.js

@@ -25,13 +25,15 @@ export const Template = ({
 	hasMinimizedSideNav = false,
 	contentLayout = "default",
 	id,
+	items = [],
 	customClasses = [],
 	customStyles = {},
 }) => {
 	const [, updateArgs] = useArgs();
 
 	const sideNavigationMarkup = AppFrameSideNav({
 		isMinimized: hasMinimizedSideNav,
+		items,
 		customClasses: ["spectrum-AppFrame-side-nav"],
 	});
 
@@ -59,7 +61,7 @@ export const Template = ({
 							<h1 class="spectrum-Heading spectrum-Heading--sizeM spectrum-AppFrame-section-heading">Welcome to Example App, Frodo</h1>
 							<div class="spectrum-AppFrame-section-grid">
 								<div class="spectrum-AppFrame-section-grid-item--wide" style=${styleMap(emphasizedContainerStyles)}></div>
-								${Array.from({length: 3}, () => 
+								${Array.from({length: 3}, () =>
 									html`<div style=${styleMap(emphasizedContainerStyles)}></div>`
 								)}
 							</div>
@@ -75,7 +77,7 @@ export const Template = ({
 							})}
 							<div class="spectrum-AppFrame-section-grid">
 								<div class="spectrum-AppFrame-section-grid-item--wide" style=${styleMap(emphasizedContainerStyles)}></div>
-								${Array.from({length: 3}, () => 
+								${Array.from({length: 3}, () =>
 									html`<div style=${styleMap(emphasizedContainerStyles)}></div>`
 								)}
 							</div>
@@ -88,7 +90,7 @@ export const Template = ({
 								customClasses: ["spectrum-AppFrame-section-heading"],
 							})}
 							<ul class="spectrum-AppFrame-section-grid">
-								${Array.from({length: 20}, () => 
+								${Array.from({length: 20}, () =>
 									html`<li style=${styleMap(emphasizedContainerStyles)}></li>`
 								)}
 							</ul>
@@ -130,7 +132,7 @@ export const Template = ({
 
 /**
  * Example content within the header, for prototyping.
- * 
+ *
  * To-do: this should go away when Header becomes its own full-fledged component.
  */
 var headerExampleMarkup = (hasMinimizedSideNav, updateArgs) => html`
@@ -147,8 +149,7 @@ var headerExampleMarkup = (hasMinimizedSideNav, updateArgs) => html`
 		})}
 	>
 		${ActionButton({
-			/* To-do: Uses S2 icon name "MenuHamburger" instead of "ShowMenu". */
-			iconName: hasMinimizedSideNav ? "ShowMenu" : "ChevronDoubleLeft",
+			iconName: hasMinimizedSideNav ? "MenuHamburger" : "ChevronDoubleLeft",
 			isQuiet: true,
 			hideLabel: true,
 			onclick: () => {
@@ -165,5 +166,5 @@ var headerExampleMarkup = (hasMinimizedSideNav, updateArgs) => html`
 			fontSize: "var(--spectrum-font-size-200)",
 			fontWeight: "700",
 		})}>Example App</span>
-	</div>
-`;
+	</header>
+`;

components/appframesidenav/stories/template.js

@@ -1,5 +1,6 @@
 import { Template as Button } from "@spectrum-css/button/stories/template.js";
-import { html, svg } from "lit";
+import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
+import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -12,7 +13,7 @@ export const Template = ({
 	showTopButton = true,
 	topButtonText = "Create",
 	topButtonWorkflowIconName = "Add",
-	items = defaultSideNavItems,
+	items = [],
 	isMinimized = false,
 	id,
 	customClasses = [],
@@ -38,7 +39,7 @@ export const Template = ({
 		>
 			${when(showTopButton && topButtonText, () => topButtonMarkup)}
 			<ul class="spectrum-AppFrameSideNav-list">
-				${items.map(navItem =>
+				${(items.length > 0 ? items : defaultSideNavItems).map(navItem =>
 					html`<li class=${classMap({
 						[`${rootClass}-list-item`]: true,
 						[`${rootClass}-list-item--current`]: navItem.isCurrent,
@@ -50,7 +51,10 @@ export const Template = ({
 							@click=${demoCurrentItemOnClick}
 						>
 							<span class="spectrum-AppFrameSideNav-list-item-icon">
-								${svg`<svg aria-hidden="true" role="img" class="spectrum-Icon" viewBox="0 0 20 20">${tempSpectrum2Icons[navItem.workflowIconName]}</svg>`}
+								${Icon({
+									iconName: navItem.workflowIconName,
+									setName: "workflow",
+								})}
 							</span>
 							<span class="spectrum-AppFrameSideNav-list-item-label">${navItem.label}</span>
 						</a>
@@ -74,7 +78,7 @@ const demoCurrentItemOnClick = (e) => {
 }
 
 /**
- * Data for the side navigation items.
+ * Fallback data for the side navigation items.
  * Array of objects with `label` and `workflowIconName`.
  * Optionally:
  * - `isCurrent` marks the current page.
@@ -116,19 +120,3 @@ export const defaultSideNavItems = [
 		isEndSectionStart: true,
 	},
 ];
-
-/**
- * This temporarily contains the SVG markup for the S2 icon names used in this prototype.
- * 
- * To-do: Replace testing SVGs with Icon() component template using navItem.workflowIconName once S2 icons are in use on this branch.
- */
-const tempSpectrum2Icons = {
-	Home: svg`<path d="m17.13086,5.73438L11.38086,1.26172c-.8125-.63086-1.94922-.63184-2.76172.00098L2.86914,5.73438h-.00098c-.54395.42285-.86816,1.08691-.86816,1.77637v8.23926c0,1.24023,1.00977,2.25,2.25,2.25h11.5c1.24023,0,2.25-1.00977,2.25-2.25V7.51074c0-.68945-.32422-1.35352-.86914-1.77637Zm-5.63086,10.76562h-3v-4.75c0-.41309.33691-.75.75-.75h1.5c.41309,0,.75.33691.75.75v4.75Zm5-.75c0,.41309-.33691.75-.75.75h-2.75v-4.75c0-1.24023-1.00977-2.25-2.25-2.25h-1.5c-1.24023,0-2.25,1.00977-2.25,2.25v4.75h-2.75c-.41309,0-.75-.33691-.75-.75V7.51074c0-.22949.1084-.45117.28906-.59277l5.75-4.4707c.27246-.21191.65137-.20898.92188-.00098l5.74902,4.47168c.18164.1416.29004.36328.29004.59277v8.23926Z" fill="var(--iconFill, currentColor)"></path>`,
-	Folder: svg`<path d="m16.75,5h-5.96387c-.21777,0-.42383-.09473-.56689-.25879l-1.70361-1.96484c-.42773-.49316-1.04736-.77637-1.7002-.77637h-3.56543c-1.24072,0-2.25,1.00977-2.25,2.25v10.5c0,1.24023,1.00928,2.25,2.25,2.25h13.5c1.24072,0,2.25-1.00977,2.25-2.25v-7.5c0-1.24023-1.00928-2.25-2.25-2.25ZM3.25,3.5h3.56543c.21777,0,.42383.09473.56689.25879l1.07617,1.24121H2.5v-.75c0-.41309.33643-.75.75-.75Zm14.25,11.25c0,.41309-.33643.75-.75.75H3.25c-.41357,0-.75-.33691-.75-.75V6.5h14.25c.41357,0,.75.33691.75.75v7.5Z" fill="var(--iconFill, currentColor)"></path>`,
-	Brand: svg`<path d="M10.7881 19.7812C10.7041 19.7812 10.6201 19.7793 10.5352 19.7773C6.11329 19.5264 2.71681 15.875 2.78224 11.4658V4.03125C2.78224 2.79102 3.79201 1.78125 5.03224 1.78125H16.5313C17.7715 1.78125 18.7813 2.79102 18.7813 4.03125L18.7783 12.0215C18.7119 14.1611 17.8194 16.1445 16.2627 17.6084C14.7666 19.0146 12.8311 19.7812 10.7881 19.7812ZM5.03224 3.28125C4.61915 3.28125 4.28224 3.61816 4.28224 4.03125V11.4766C4.22853 15.0908 7.00392 18.0742 10.6016 18.2783C12.3086 18.3301 13.9697 17.7051 15.2344 16.5156C16.499 15.3262 17.2256 13.7148 17.2783 11.9785L17.2813 11.7812V4.03125C17.2813 3.61816 16.9444 3.28125 16.5313 3.28125H5.03224Z" fill="var(--iconFill, currentColor)"/><path d="M15.0312 12.7812H9.53125C9.2666 12.7812 9.02148 12.6416 8.88672 12.4141C8.75098 12.1865 8.7461 11.9043 8.87305 11.6719L11.624 6.63281C11.7559 6.3916 12.0078 6.24219 12.2822 6.24219C12.5566 6.24219 12.8096 6.39258 12.9404 6.63281L15.6894 11.6719C15.8164 11.9043 15.8115 12.1865 15.6758 12.4141C15.541 12.6416 15.2959 12.7812 15.0312 12.7812ZM10.7949 11.2812H13.7676L12.2822 8.55762L10.7949 11.2812Z" fill="var(--iconFill, currentColor)"/><path d="M6.53025 12.7812C6.40916 12.7812 6.28611 12.7519 6.17185 12.6894C5.80857 12.4912 5.67478 12.0351 5.87302 11.6719L7.85447 8.04295C8.05174 7.67967 8.50779 7.5449 8.87205 7.74412C9.23533 7.94236 9.36912 8.39842 9.17088 8.7617L7.18943 12.3906C7.05369 12.6396 6.79588 12.7812 6.53025 12.7812Z" fill="var(--iconFill, currentColor)"/>`,
-	Discover: svg`<path d="m10,18.75c-4.8252,0-8.75-3.9248-8.75-8.75S5.1748,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.9248,8.75-8.75,8.75Zm0-16c-3.99805,0-7.25,3.25195-7.25,7.25s3.25195,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25195-7.25-7.25-7.25Z" fill="var(--iconFill, currentColor)"></path><path d="m14.29199,13.50098l-2.12109-5.30371c-.00098-.00244-.00317-.00391-.00415-.00635-.02417-.05835-.06274-.10852-.10339-.15723-.0116-.01392-.01794-.03247-.03064-.04517-.01978-.0199-.04797-.03064-.07056-.04785-.04272-.03235-.08386-.06677-.13306-.08716-.0022-.00098-.00354-.00293-.00586-.00391l-5.30273-2.12109c-.23242-.09375-.49707-.03906-.6748.1377-.17676.17676-.23047.44238-.1377.6748l2.12109,5.30371c.00073.00195.00305.00269.00391.00476.04138.10095.11487.18323.20398.25134.02258.01721.04333.03052.06787.04443.02527.01453.04407.03601.0719.04712l5.30273,2.12109c.0752.03027.1543.04492.23242.04492.16211,0,.32227-.06348.44238-.18262.17676-.17676.23047-.44238.1377-.6748Zm-5.4021-2.36938v-.00024l2.22034-2.22046,1.47961,3.70044-3.69995-1.47974Z" fill="var(--iconFill, currentColor)"></path>`,
-	Calendar: svg`<path d="m15.75,3h-2v-1c0-.41406-.33594-.75-.75-.75s-.75.33594-.75.75v1h-4.5v-1c0-.41406-.33594-.75-.75-.75s-.75.33594-.75.75v1h-2c-1.24072,0-2.25,1.00977-2.25,2.25v10.5c0,1.24023,1.00928,2.25,2.25,2.25h11.5c1.24072,0,2.25-1.00977,2.25-2.25V5.25c0-1.24023-1.00928-2.25-2.25-2.25Zm-11.5,1.5h2v.5c0,.41406.33594.75.75.75s.75-.33594.75-.75v-.5h4.5v.5c0,.41406.33594.75.75.75s.75-.33594.75-.75v-.5h2c.41357,0,.75.33691.75.75v1.75H3.5v-1.75c0-.41309.33643-.75.75-.75Zm11.5,12H4.25c-.41357,0-.75-.33691-.75-.75v-7.25h13v7.25c0,.41309-.33643.75-.75.75Z" fill="var(--iconFill, currentColor)"></path><rect x="5" y="10" width="2" height="2" rx="1" ry="1" fill="var(--iconFill, currentColor)"></rect><rect x="9" y="10" width="2" height="2" rx="1" ry="1" fill="var(--iconFill, currentColor)"></rect><rect x="13" y="10" width="2" height="2" rx="1" ry="1" fill="var(--iconFill, currentColor)"></rect><rect x="5" y="13" width="2" height="2" rx="1" ry="1" fill="var(--iconFill, currentColor)"></rect><rect x="9" y="13" width="2" height="2" rx="1" ry="1" fill="var(--iconFill, currentColor)"></rect><rect x="13" y="13" width="2" height="2" rx="1" ry="1" fill="var(--iconFill, currentColor)"></rect>`,
-	Plugin: svg`<path d="m16.75,4h-.75v-.75098c0-.96484-.78516-1.75-1.75-1.75h-1.5c-.96484,0-1.75.78516-1.75,1.75v.75098h-2v-.75098c0-.96484-.78516-1.75-1.75-1.75h-1.5c-.96484,0-1.75.78516-1.75,1.75v.75098h-.75c-1.24072,0-2.25,1.00977-2.25,2.25v8.5c0,1.24023,1.00928,2.25,2.25,2.25h13.5c1.24072,0,2.25-1.00977,2.25-2.25V6.25c0-1.24023-1.00928-2.25-2.25-2.25Zm-4.25-.75098c0-.1377.1123-.25.25-.25h1.5c.1377,0,.25.1123.25.25v.75098h-2v-.75098Zm-7,0c0-.1377.1123-.25.25-.25h1.5c.1377,0,.25.1123.25.25v.75098h-2v-.75098Zm12,11.50098c0,.41309-.33643.75-.75.75H3.25c-.41357,0-.75-.33691-.75-.75V6.25c0-.41309.33643-.75.75-.75h13.5c.41357,0,.75.33691.75.75v8.5Z" fill="var(--iconFill, currentColor)"></path>`,
-	Lightbulb: svg`<path d="m10,2.24121c-.41406,0-.75-.33594-.75-.75v-.7002c0-.41406.33594-.75.75-.75s.75.33594.75.75v.7002c0,.41406-.33594.75-.75.75Z" fill="var(--iconFill, currentColor)"></path><path d="m18.4541,10.02148h-.7002c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h.7002c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z" fill="var(--iconFill, currentColor)"></path><path d="m2.23242,10.02148h-.7002c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h.7002c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z" fill="var(--iconFill, currentColor)"></path><path d="m4.51074,4.53906c-.19238,0-.38379-.07324-.53027-.21973l-.49512-.49512c-.29297-.29297-.29297-.76758,0-1.06055s.76758-.29297,1.06055,0l.49512.49512c.29297.29297.29297.76758,0,1.06055-.14648.14648-.33789.21973-.53027.21973Z" fill="var(--iconFill, currentColor)"></path><path d="m15.47559,4.53906c-.19238,0-.38379-.07324-.53027-.21973-.29297-.29297-.29297-.76758,0-1.06055l.49512-.49512c.29297-.29297.76758-.29297,1.06055,0s.29297.76758,0,1.06055l-.49512.49512c-.14648.14648-.33789.21973-.53027.21973Z" fill="var(--iconFill, currentColor)"></path><path d="m16,9.5c0-3.30859-2.69141-6-6-6s-6,2.69141-6,6c0,2.2157,1.21021,4.1499,3.00122,5.18896,0,.00232-.00122.00415-.00122.00635v1.80469c0,1.6543,1.3457,3,3,3s3-1.3457,3-3v-1.81177c1.79041-1.03931,3-2.97314,3-5.18823Zm-4.5,7c0,.82715-.67285,1.5-1.5,1.5s-1.5-.67285-1.5-1.5v-1.19751c.48047.12439.9812.19751,1.5.19751s1.01953-.07312,1.5-.19751v1.19751Zm-1.5-2.5c-2.48145,0-4.5-2.01855-4.5-4.5s2.01855-4.5,4.5-4.5,4.5,2.01855,4.5,4.5-2.01855,4.5-4.5,4.5Z" fill="var(--iconFill, currentColor)"></path>`,
-	Settings: svg`<path d="m10.00391,12.58887c-.88818,0-1.75293-.45996-2.22803-1.2832h0c-.70801-1.22754-.28613-2.80078.93994-3.50879.59326-.34375,1.28516-.43359,1.94922-.25684.6626.17773,1.21631.60352,1.55908,1.19727.34326.59375.43408,1.28613.25684,1.94824-.17773.66309-.60254,1.2168-1.19678,1.55957-.40332.2334-.84473.34375-1.28027.34375Zm-.9292-2.0332c.29443.50879.94824.68359,1.45947.39062.24707-.14258.42383-.37305.49756-.64844s.03613-.56348-.10645-.81055c-.14307-.24707-.37305-.42383-.64893-.49805-.2749-.07324-.56299-.03516-.81055.10645-.51025.29492-.68555.94922-.39111,1.45996h0Z" fill="var(--iconFill, currentColor)"></path><path d="m10.47363,19.02148h-.94678c-1.03223,0-1.90771-.80566-1.99316-1.83496l-.11328-1.35645c-.40967-.18164-.79736-.40527-1.16064-.6709l-1.23242.58105c-.93359.43848-2.06934.08496-2.58496-.81055l-.47314-.81836c-.52393-.90918-.26953-2.04492.5918-2.64355l1.11914-.77637c-.04834-.44727-.04834-.89551-.00098-1.34082l-1.11865-.77637c-.86133-.59961-1.11572-1.73535-.59131-2.64355l.47314-.81934c.5166-.89355,1.65088-1.25,2.58496-.80957l1.22949.58008c.18359-.13477.37061-.25684.56396-.36816.19043-.11035.39111-.21191.59961-.30371l.11279-1.35547c.08643-1.02832.96143-1.83301,1.99316-1.83301h.94678c1.03223,0,1.90771.80566,1.99316,1.83398l.11328,1.35645c.40869.18164.79688.40527,1.16016.6709l1.23291-.58105c.93213-.44141,2.06836-.08594,2.58496.81055l.47314.81934c.51562.89258.25586,2.05371-.5918,2.64258l-1.11914.77734c.04785.44727.04834.89551.00098,1.34082l1.11816.77539c.86182.59961,1.11621,1.73535.5918,2.64355l-.47266.82031c-.5166.89355-1.65039,1.25098-2.58545.80859l-1.22998-.5791c-.18311.13379-.36914.25586-.56201.36719,0,.00098-.00049.00098-.00098.00098-.19189.11133-.39062.21094-.6001.30273l-.11279,1.35547c-.08643,1.02832-.96191,1.83398-1.99316,1.83398Zm-4.11377-5.48828c.17529,0,.34863.06152.4873.17969.45557.38965.97119.6875,1.53174.88574.27832.09766.47314.35059.49805.64453l.15186,1.81934c.021.25781.24023.45898.49805.45898h.94678c.25781,0,.47656-.20117.49805-.45898l.15137-1.81836c.02441-.29297.21875-.54492.49609-.64453.29834-.10547.56299-.22656.80957-.36816h0c.25-.14551.48779-.31445.72656-.51855.2251-.18945.54053-.23242.80566-.10742l1.65088.77734c.23633.1123.51904.02148.64697-.20117l.47266-.82031c.13135-.22754.06787-.51172-.14795-.66113l-1.49854-1.04004c-.24268-.16797-.36426-.46289-.31006-.75293.1084-.58496.1084-1.18066-.00098-1.77051-.05371-.29004.06738-.58496.30957-.75293l1.5-1.04199c.21533-.14941.2793-.43359.14844-.66016l-.47363-.82031c-.12988-.22461-.4126-.31348-.646-.20215l-1.65234.77832c-.2666.125-.58154.08301-.80664-.1084-.45752-.38965-.97314-.68848-1.53223-.88574-.27832-.09766-.47314-.35059-.49805-.64453l-.15186-1.81934c-.021-.25684-.23975-.45801-.49805-.45801h-.94678c-.25781,0-.47656.20117-.49805.45801l-.15137,1.81934c-.02441.29395-.21973.54688-.49805.64453-.28906.10254-.56104.22656-.80859.36914-.25.14453-.48682.3125-.72412.5166-.22461.19043-.54053.23242-.80762.1084l-1.65088-.77832c-.23291-.11035-.5166-.02148-.64648.20215l-.47314.81934c-.13086.22754-.06738.51172.14844.66113l1.49902,1.04102c.24219.16797.36377.46289.30957.75391-.10889.58301-.1084,1.17871.00098,1.76953.05371.29004-.06738.58496-.30957.75293l-1.5,1.04102c-.21533.14941-.2793.43457-.14795.66211l.47314.81836c.12891.22363.41211.3125.646.20215l1.65234-.77832c.10205-.04785.21143-.07129.31982-.07129Zm6.44482,1.34668h.00977-.00977Z" fill="var(--iconFill, currentColor)"></path>`,
-};