-
-
Banner heading
-
Banner description
-
-
- Close
-
+const bannerChildren = `
+
${IconAlert}
+
+ Stacks is currently frozen in read-only mode. Contact the team to restore access.
+
+
+
`;
describe("banner", () => {
runVisualTests({
baseClass: "s-banner",
- variants: ["info", "success", "warning", "danger"],
+ variants: [
+ "info",
+ "success",
+ "warning",
+ "danger",
+ "activity",
+ "featured",
+ ],
modifiers: {
primary: ["important"],
},
@@ -30,7 +31,7 @@ describe("banner", () => {
ariaHidden: "false",
},
children: {
- default: bannerChild,
+ default: bannerChildren,
},
});
});
diff --git a/packages/stacks-classic/lib/components/notice/notice.a11y.test.ts b/packages/stacks-classic/lib/components/notice/notice.a11y.test.ts
index a5543bebcc..dbcca65fd0 100644
--- a/packages/stacks-classic/lib/components/notice/notice.a11y.test.ts
+++ b/packages/stacks-classic/lib/components/notice/notice.a11y.test.ts
@@ -1,17 +1,24 @@
-// TODO SPARK reinstate accessibility tests once component styles are updated
-// import { runA11yTests } from "../../test/a11y-test-utils";
-// import "../../index";
+import { runA11yTests } from "../../test/a11y-test-utils";
+import { IconHelp } from "@stackoverflow/stacks-icons/icons";
+import "../../index";
-// describe("notice", () => {
-// runA11yTests({
-// baseClass: "s-notice",
-// variants: ["info", "success", "warning", "danger"],
-// modifiers: {
-// primary: ["important"],
-// },
-// children: {
-// default: `Test notice
some code Link`,
-// },
-// tag: "aside",
-// });
-// });
+describe("notice", () => {
+ runA11yTests({
+ baseClass: "s-notice",
+ variants: [
+ "info",
+ "success",
+ "warning",
+ "danger",
+ "activity",
+ "featured",
+ ],
+ modifiers: {
+ primary: ["important"],
+ },
+ children: {
+ default: `
${IconHelp}Test notice
some code Link`,
+ },
+ tag: "aside",
+ });
+});
diff --git a/packages/stacks-classic/lib/components/notice/notice.less b/packages/stacks-classic/lib/components/notice/notice.less
index d7b49e5c93..d82285d5a3 100644
--- a/packages/stacks-classic/lib/components/notice/notice.less
+++ b/packages/stacks-classic/lib/components/notice/notice.less
@@ -27,8 +27,9 @@
/**
* Generate styles for a notice-based component
*
- * Usage example:
+ * Usage examples:
* .construct-notice-component(s-banner);
+ * .construct-notice-component(s-notice);
*
* @baseClass - The base class name for the notice component
*/
@@ -110,7 +111,6 @@
&__warning {
&:not(.@{baseClass}__important) {
.generate-variant-variables(yellow);
-
}
&.@{baseClass}__important {
@@ -164,16 +164,26 @@
background-color: var(--_no-fc);
color: var(--_no-bg);
}
+ color: var(--_no-fc);
}
- :has(>button&--dismiss) {
+ &--actions {
+ display: flex;
+ margin-left: auto;
+ align-self: flex-start;
padding-left: var(--su24);
- //Add spacing between multiple notice actions
+ color: var(--_no-fc);
gap: calc(var(--su24) - var(--su2)); //22px
+
//Fix css issue caused by svelte-sonner-toast in the NoticeAction svelte component
overflow-wrap: initial !important;
}
+ //Fix notice action color for __important variant
+ &--actions > .s-link:not(&--dismiss) {
+ color: var(--_no-fc);
+ }
+
// STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
background: var(--_no-bg);
color: var(--_no-fc);
@@ -195,10 +205,6 @@
margin-right: var(--su12);
align-self: stretch;
- //Position the svg icon
- display: flex;
- align-items: top;
-
//Negative margin to make up for s-notice's padding
margin-top: calc(var(--_no-pd) * -1);
margin-bottom: calc(var(--_no-pd) * -1);
diff --git a/packages/stacks-classic/lib/components/notice/notice.visual.test.ts b/packages/stacks-classic/lib/components/notice/notice.visual.test.ts
index b9be4e651c..04a886aadd 100644
--- a/packages/stacks-classic/lib/components/notice/notice.visual.test.ts
+++ b/packages/stacks-classic/lib/components/notice/notice.visual.test.ts
@@ -1,26 +1,70 @@
-import { runVisualTests } from "../../test/visual-test-utils";
+import { runVisualTests, replaceHtml } from "../../test/visual-test-utils";
import { html } from "@open-wc/testing";
+import {
+ IconHelp,
+ IconInfo,
+ IconCheck,
+ IconAlert,
+ IconStar,
+ IconAlertFill,
+ IconNotification,
+} from "@stackoverflow/stacks-icons/icons";
import "../../index";
+const variantIconMap: Record
= {
+ info: IconInfo,
+ success: IconCheck,
+ warning: IconAlert,
+ danger: IconAlertFill,
+ activity: IconNotification,
+ featured: IconStar,
+};
+
+const variants: string[] = [
+ "info",
+ "success",
+ "warning",
+ "danger",
+ "activity",
+ "featured",
+];
+
describe("notice", () => {
runVisualTests({
baseClass: "s-notice",
- variants: ["info", "success", "warning", "danger"],
+ variants: variants,
modifiers: {
primary: ["important"],
},
attributes: {
- ariaHidden: "false",
+ role: "presentation",
},
children: {
- default: `Test notice some code Link`,
- longText: `Test notice some code Link with very long text that should surely wrap around to the next line so we can test the visual changes of multi-line notices in our pages.`,
+ default: `ICON_PLACEHOLDERTest notice message with some code and Link`,
+ longtext: `ICON_PLACEHOLDERTest notice message with some code and Link which is also really long and will surely spill over into the next line thus allowing us to test the component when it contains long text.`,
+ },
+ tag: "div",
+ template: ({ component, testid }) => {
+ //Determine variant from testid
+ const variant = variants.find((v) => testid.includes(v));
+
+ //Determine icon and swap
+ const icon = variant ? variantIconMap[variant] : IconHelp;
+ const updatedComponent = replaceHtml(
+ component,
+ "ICON_PLACEHOLDER",
+ icon
+ );
+
+ return html`
+
+ ${updatedComponent}
+
+ `;
},
- tag: "aside",
- template: ({ component, testid }) => html`
-
- ${component}
-
- `,
});
});
diff --git a/packages/stacks-classic/lib/components/toast/toast.a11y.test.ts b/packages/stacks-classic/lib/components/toast/toast.a11y.test.ts
index 7ce8f20b8f..a0c860b04d 100644
--- a/packages/stacks-classic/lib/components/toast/toast.a11y.test.ts
+++ b/packages/stacks-classic/lib/components/toast/toast.a11y.test.ts
@@ -1,30 +1,46 @@
-// TODO SPARK reinstate accessibility tests once component styles are updated
-// import { runA11yTests } from "../../test/a11y-test-utils";
-// import { html } from "@open-wc/testing";
-// import "../../index";
+import { runA11yTests } from "../../test/a11y-test-utils";
+import { html } from "@open-wc/testing";
+import { IconInfo, IconCross } from "@stackoverflow/stacks-icons/icons";
+import "../../index";
-// describe("toast > notice", () => {
-// // This is a test of notice component wrapped in a toast component
-// runA11yTests({
-// baseClass: "s-notice", // s-toast is a wrapper around s-notice
-// variants: ["info", "success", "warning", "danger"],
-// modifiers: {
-// primary: ["important"],
-// },
-// children: {
-// toast: `Test toast`,
-// },
-// tag: "aside",
-// template: ({ component, testid }) => html`
-//
-// ${component}
-//
-// `,
-// });
-// });
+describe("toast > notice", () => {
+ runA11yTests({
+ baseClass: "s-notice", // s-toast is a div wrapped around s-notice
+ variants: [
+ "info",
+ "success",
+ "warning",
+ "danger",
+ "activity",
+ "featured",
+ ],
+ modifiers: {
+ primary: ["important"],
+ },
+ attributes: {
+ role: "alert",
+ ariaHidden: "false",
+ },
+ children: {
+ toast: `
+ ${IconInfo}
+ Toast notice message with an undo button
+
+
+
+
`,
+ },
+ tag: "div",
+ template: ({ component, testid }) => html`
+
+ ${component}
+
+ `,
+ });
+});
diff --git a/packages/stacks-classic/lib/components/toast/toast.less b/packages/stacks-classic/lib/components/toast/toast.less
index aa160c6b89..94829b025b 100644
--- a/packages/stacks-classic/lib/components/toast/toast.less
+++ b/packages/stacks-classic/lib/components/toast/toast.less
@@ -17,6 +17,9 @@
padding-bottom: var(--su8);
padding-top: var(--su8);
pointer-events: all;
+ display: flex;
+ align-items: center;
+ min-width: var(--su448);
}
display: flex;
diff --git a/packages/stacks-classic/lib/components/toast/toast.visual.test.ts b/packages/stacks-classic/lib/components/toast/toast.visual.test.ts
index c31db8ec78..3b5bee136e 100644
--- a/packages/stacks-classic/lib/components/toast/toast.visual.test.ts
+++ b/packages/stacks-classic/lib/components/toast/toast.visual.test.ts
@@ -1,30 +1,79 @@
-import { runVisualTests } from "../../test/visual-test-utils";
+import { runVisualTests, replaceHtml } from "../../test/visual-test-utils";
import { html } from "@open-wc/testing";
+import {
+ IconHelp,
+ IconInfo,
+ IconCheck,
+ IconAlert,
+ IconStar,
+ IconAlertFill,
+ IconNotification,
+ IconCross,
+} from "@stackoverflow/stacks-icons/icons";
import "../../index";
+const variants: string[] = [
+ "info",
+ "success",
+ "warning",
+ "danger",
+ "activity",
+ "featured",
+];
+
+const variantIconMap: Record = {
+ info: IconInfo,
+ success: IconCheck,
+ warning: IconAlert,
+ danger: IconAlertFill,
+ activity: IconNotification,
+ featured: IconStar,
+};
+
+// s-toast is an wrapped around s-notice.
describe("toast > notice", () => {
- // This is a test of notice component wrapped in a toast component
runVisualTests({
- baseClass: "s-notice", // s-toast is a wrapper around s-notice
- variants: ["info", "success", "warning", "danger"],
+ baseClass: "toast s-notice", // We need the `toast ` prefix so the notice test images don't get overwritten
+ variants: variants,
modifiers: {
primary: ["important"],
},
+ attributes: {
+ role: "alertdialog",
+ ariaHidden: "false",
+ },
children: {
- toast: `Test toast`,
+ default: `
+ ICON_PLACEHOLDER
+ Toast notice message with an undo button
+
+
+
+
`,
},
tag: "aside",
- template: ({ component, testid }) => html`
-
+ template: ({ component, testid }) => {
+ //Determine variant from testid
+ const variant = variants.find((v) => testid.includes(v));
+
+ //Determine icon and swap
+ const icon = variant ? variantIconMap[variant] : IconHelp;
+ const updatedComponent = replaceHtml(
+ component,
+ "ICON_PLACEHOLDER",
+ icon
+ );
+
+ return html`
- ${component}
+ ${updatedComponent}
-
- {% highlight html %}
-
…
-
…
- {% endhighlight %}
-
- {% bannerExample "danger" %}
- {% bannerExample "danger", "true", "mt8" %}
-
+ {% header "h3", "Danger" %}
+
+{% highlight html %}
+
…
+
…
+{% endhighlight %}
+
+ {% bannerExample "danger" %}
+ {% bannerExample "danger", "true", "mt8" %}
+
+
+
+ {% header "h3", "Featured" %}
+
+{% highlight html %}
+
…
+
…
+{% endhighlight %}
+
+ {% bannerExample "featured" %}
+ {% bannerExample "featured", "true", "mt8" %}
+
+
+ {% header "h3", "Activity" %}
+
+{% highlight html %}
+
…
+
…
+{% endhighlight %}
+
+ {% bannerExample "activity" %}
+ {% bannerExample "activity", "true", "mt8" %}
+
+
{% header "h2", "JavaScript Example" %}
diff --git a/packages/stacks-docs/product/components/notices.html b/packages/stacks-docs/product/components/notices.html
index fa46754ed0..729ca523db 100644
--- a/packages/stacks-docs/product/components/notices.html
+++ b/packages/stacks-docs/product/components/notices.html
@@ -19,10 +19,10 @@
data-controller="s-toast"
data-s-toast-target="toast"
data-s-toast-return-element=".js-toast-open[data-target='#launch-toast-base']">
-
+
{% icon "Info" %}
Toast notice message with an undo button
-
+
@@ -437,7 +437,7 @@