fix: use new tag to hide storybook foundations stories (#3474)

Storybook foundations pages now display as a single page instead of in
folders with their example stories appearing.
These now use the newer !dev tag to hide them. The old custom
"foundation" tag was previously used to hide them, but this tag is no
longer used.

Also fixes some linter errors encountered during commit; a couple
unused variables and incorrect typeof comparisons.

Author: jawinn

.changeset/plenty-trees-act.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/preview": patch
+---
+
+Updates the tags used by the stories in the "Foundations" documentation, so hidden stories remain hidden on the sidebar.

.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js

@@ -14,7 +14,7 @@ export default {
 			handles: ["click .spectrum-ActionButton:not([disabled])"],
 		},
 	},
-	tags: ['foundation'],
+	tags: ['!dev'],
 };
 
 const ActionButton = (args, context) => html`

.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js

@@ -15,14 +15,10 @@ export default {
 			handles: ['click input[type="checkbox"]'],
 		},
 	},
-	tags: ['foundation'],
+	tags: ['!dev'],
 };
 
-const Checkbox = ({
-	customStyles = {},
-	isChecked = false,
-	...args
-} = {}, context = {}) => html`
+const Checkbox = (args = {}, context = {}) => html`
 	<div style="padding: 1rem 0;">
 		${Template({ ...args, iconName: undefined }, context)}
 	</div>

.storybook/foundations/corner-rounding/corner-rounding.stories.js

@@ -10,10 +10,10 @@ export default {
 	args: {
 		rootClass: "spectrum-Foundations-Example-CornerRounding",
 	},
-	tags: ["foundation"],
+	tags: ["!dev"],
 };
 
-const CornerRadiusGroup = ({ customStyles = {}, ...args }, context) => html`
+const CornerRadiusGroup = (args = {}, context = {}) => html`
 	<div>
 		<table class="spectrum-Foundations-Example-CornerRounding-table">
 			<thead>

.storybook/foundations/down-state/button-down-state.stories.js

@@ -13,7 +13,7 @@ export default {
 			handles: ["click .spectrum-Button"],
 		},
 	},
-	tags: ["foundation"],
+	tags: ["!dev"],
 };
 
 export const ButtonDownState = Template.bind({});

.storybook/foundations/down-state/checkbox-down-state.stories.js

@@ -13,7 +13,7 @@ export default {
 			handles: ["click input[type=\"checkbox\"]"],
 		},
 	},
-	tags: ["foundation"],
+	tags: ["!dev"],
 };
 
 export const CheckboxDownState = Template.bind({});

.storybook/foundations/drop-shadow/drop-shadow.stories.js

@@ -7,7 +7,7 @@ export default {
 	description:
 		"Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content.",
 	component: "Drop shadow",
-	tags: ["foundation"],
+	tags: ["!dev"],
 };
 
 const DropShadowSwatch = ({
@@ -19,9 +19,9 @@ const DropShadowSwatch = ({
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--${variant}-drop-shadow`]:
-					typeof variant !== undefined && !!isDropShadow,
+					typeof variant !== "undefined" && !!isDropShadow,
 				[`${rootClass}--${variant}-box-shadow`]:
-					typeof variant !== undefined && !isDropShadow,
+					typeof variant !== "undefined" && !isDropShadow,
 			})}
 		></div>
 `;