feat(alertbanner): migrate to spectrum two

Migrates the component to spectrum two.
- Theme files are removed, and their custom properties integrated into
  the main index.css.
- Renames misspelled mod custom property (noted in docs)
- Simplifies background color styles by changing a single custom
  property per variant, as done on other components.

Author: jawinn

components/alertbanner/index.css

@@ -9,8 +9,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import "./themes/express.css";
-
 .spectrum-AlertBanner {
   --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
   --spectrum-alert-banner-size: var(--spectrum-alert-banner-width);
@@ -28,8 +26,7 @@ governing permissions and limitations under the License.
   --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
 
   /* colors */
-  --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default);
-  --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default);
+  --spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default));
   --spectrum-alert-banner-font-color: var(--spectrum-white);
 
   /* settings for nested Divider */
@@ -48,29 +45,29 @@ governing permissions and limitations under the License.
   --mod-closebutton-align-self: flex-start;
 }
 
+.spectrum-AlertBanner--info {
+  --spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default));
+}
+
+.spectrum-AlertBanner--negative {
+  --spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default));
+}
+
 .spectrum-AlertBanner {
   display: none;
   justify-content: space-between;
   inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
   min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
   font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
   color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
-  background-color: var(--mod-alert-banner-netural-background, var(--spectrum-alert-banner-netural-background));
+  background-color: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background));
   border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
 
   &.is-open {
     display: flex;
   }
 }
 
-.spectrum-AlertBanner--info {
-  background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
-}
-
-.spectrum-AlertBanner--negative {
-  background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
-}
-
 .spectrum-AlertBanner-body {
   inline-size: 100%;
   display: flex;

components/alertbanner/metadata/alertbanner.yml

@@ -1,5 +1,17 @@
 name: Alert banner
 description: Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.
+SpectrumSiteSlug: https://spectrum.adobe.com/page/alert-banner/
+sections:
+  - name: Custom Properties API
+    description: |
+      This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/alertbanner/metadata/mods.md">here</a>.
+  - name: Migration Guide
+    description: |
+      ### Version 2.0.0
+      #### Spectrum 2 release
+      Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed. A few other notable changes and additions:
+        - The mod custom property `--mod-alert-banner-netural-background` was misspelled and has been renamed to `--mod-alert-banner-neutral-background`. The
+          mod `--mod-alert-banner-background` was also added, which will take precendence over the variant background mods.
 examples:
   - id: alertbanner
     name: Neutral
@@ -12,7 +24,6 @@ examples:
           </div>
         </div>
         <div class="spectrum-AlertBanner-end">
-          <div class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--vertical spectrum-Divider--staticWhite"></div>
           <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="close">
             <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-Cross200" />
@@ -32,7 +43,6 @@ examples:
           </button>
         </div>
         <div class="spectrum-AlertBanner-end">
-          <div class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--vertical spectrum-Divider--staticWhite"></div>
           <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="close">
             <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-Cross200" />
@@ -52,7 +62,6 @@ examples:
           </button>
         </div>
         <div class="spectrum-AlertBanner-end">
-          <div class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--vertical spectrum-Divider--staticWhite"></div>
           <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="close">
             <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-Cross200" />
@@ -77,7 +86,6 @@ examples:
           </button>
         </div>
         <div class="spectrum-AlertBanner-end">
-          <div class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--vertical spectrum-Divider--staticWhite"></div>
           <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="close" >
             <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-Cross200" />
@@ -102,7 +110,6 @@ examples:
           </button>
         </div>
         <div class="spectrum-AlertBanner-end">
-          <div class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--vertical spectrum-Divider--staticWhite"></div>
           <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="close">
             <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-Cross200" />

components/alertbanner/metadata/mods.md

@@ -1,5 +1,6 @@
 | Modifiable custom properties                   |
 | ---------------------------------------------- |
+| `--mod-alert-banner-background`                |
 | `--mod-alert-banner-bottom-text`               |
 | `--mod-alert-banner-close-button-spacing`      |
 | `--mod-alert-banner-edge-to-button`            |
@@ -11,7 +12,7 @@
 | `--mod-alert-banner-informative-background`    |
 | `--mod-alert-banner-min-height`                |
 | `--mod-alert-banner-negative-background`       |
-| `--mod-alert-banner-netural-background`        |
+| `--mod-alert-banner-neutral-background`        |
 | `--mod-alert-banner-size`                      |
 | `--mod-alert-banner-start-edge`                |
 | `--mod-alert-banner-text-to-button-horizontal` |

components/alertbanner/stories/alertbanner.stories.js

@@ -1,14 +1,17 @@
 import { html } from "lit";
+import { when } from "lit/directives/when.js";
 import { Template } from "./template";
 
 export default {
 	title: "Components/Alert banner",
 	description:
 		"The Alert banner show pressing and high-signal messages, such as system alerts. They’re meant to be noticed and prompt users to take action.",
 	component: "AlertBanner",
+	subtitle: "Testing",
 	argTypes: {
 		isOpen: {
 			name: "Open",
+			description: "Determines whether the banner is visible or hidden.",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
@@ -18,39 +21,42 @@ export default {
 		},
 		text: {
 			name: "Text",
+			description: "Text of the message displayed within the alert banner.",
 			type: { name: "string", required: true },
 			table: {
 				type: { summary: "string" },
 				disable: false,
-				category: "Component",
+				category: "Content",
 			},
 			control: { type: "text" },
 		},
 		variant: {
-			name: "Background color variants",
+			name: "Semantic variants",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string" },
 				category: "Component",
+				defaultValue: { summary: "neutral" },
 			},
 			options: ["neutral", "info", "negative"],
 			control: "radio",
 		},
-		hasActionButton: {
-			name: "Display action button",
-			type: { name: "boolean" },
+		actionButtonText: {
+			name: "Action button text",
+			description: "Label text for the optional action button. When empty, the action button does not display.",
+			type: { name: "string" },
 			table: {
-				type: { summary: "boolean" },
-				category: "State",
+				type: { summary: "string" },
+				category: "Content",
 			},
-			control: "boolean",
+			control: "text",
 		},
 	},
 	args: {
 		rootClass: "spectrum-AlertBanner",
 		isOpen: true,
 		variant: "neutral",
-		hasActionButton: true,
+		actionButtonText: "Action",
 		text: "Your trial has expired",
 	},
 	parameters: {
@@ -63,33 +69,25 @@ export default {
 	},
 };
 
-const AlertBannerGroup = ({
-	...args
-}) => {
+const AlertBannerGroup = (args) => {
 	return html`
 		<div style="display: flex; flex-direction: column; gap: 1rem">
-			${Template({
-				...args,
-			})}
-			${window.isChromatic() ?
-			Template({
-				...args,
-				hasActionButton: true,
-				variant: "info",
-				text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purcahsed the software."
-			}): null }
-			${window.isChromatic() ?
-					Template({
-						...args,
-				hasActionButton: true,
-				variant: "negative",
-				text: "Connection interupted. Check your network to continue."
-			})
-			: null }
+			${Template(args)}
+			${when(window.isChromatic(), () => html`
+				${Template({
+					...args,
+					variant: "info",
+					text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purcahsed the software."
+				})}
+				${Template({
+					...args,
+					variant: "negative",
+					text: "Connection interupted. Check your network to continue."
+				})}
+			`)}
 		</div>
 	`;
 };
 
 export const Default = AlertBannerGroup.bind({});
-Default.args = {
-};
+Default.args = {};

components/alertbanner/stories/template.js

@@ -4,7 +4,6 @@ import { when } from "lit/directives/when.js";
 
 import { Template as Button } from "@spectrum-css/button/stories/template.js";
 import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
-import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 
 import "../index.css";
@@ -14,19 +13,10 @@ export const Template = ({
 	isOpen = true,
 	text,
 	variant,
-	hasActionButton,
+	actionButtonText = "Action",
 	customClasses = [],
 	...globals
 }) => {
-	const { express } = globals;
-
-	try {
-		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
-		else import(/* webpackPrefetch: true */ "../themes/express.css");
-	}
-	catch (e) {
-		console.warn(e);
-	}
 	const iconName =
 		variant === "negative" ? "Alert" : variant === "info" ? "Info" : "";
 
@@ -35,36 +25,31 @@ export const Template = ({
 			class=${classMap({
 				[rootClass]: true,
 				"is-open": isOpen,
-				[`${rootClass}--${variant}`]: typeof variant !== "undefined",
+				[`${rootClass}--${variant}`]: typeof variant !== "undefined" && variant !== "neutral",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 		>
 			<div class="${rootClass}-body">
 				<div class="${rootClass}-content">
-					${iconName
-						? Icon({
-								...globals,
-								iconName,
-								customClasses: [`${rootClass}-icon`],
+					${when(iconName, () =>
+						Icon({
+							...globals,
+							iconName,
+							customClasses: [`${rootClass}-icon`],
 						})
-						: ""}
+					)}
 					<p class="${rootClass}-text">${text}</p>
 				</div>
-				${when(hasActionButton, () =>
-				Button({
-					size: "m",
-					variant: "staticWhite",
-					treatment: "outline",
-					label: "Action",
-				}))}
+				${when(actionButtonText, () =>
+					Button({
+						size: "m",
+						variant: "staticWhite",
+						treatment: "outline",
+						label: actionButtonText,
+					})
+				)}
 			</div>
 			<div class="${rootClass}-end">
-				${Divider({
-					vertical: true,
-					size: "s",
-					tag: "div",
-					...globals,
-				})}
 				${CloseButton({
 					...globals,
 					size: "m",