Notice: replaced background icons with foreground icons (eBay#950)

Author: ianmcburnie

src/components/ebay-notice/README.md

@@ -48,6 +48,12 @@ Name | Type | Stateful | Required | Description
 --- | --- | --- | --- | ---
 `a11y-heading-tag` | String | No | Yes | used to specify the heading tag according to the notice's placement (default: `"h2"`)
 
+### Additional attributes when type="window"
+
+Name | Type | Stateful | Required | Description
+--- | --- | --- | --- | ---
+`fill-window` | Boolean | No | No | used to specify whether the notice should fill the full height of it's window/container (default: `false`)
+
 ### ebay-notice Events
 
 Event | Description

src/components/ebay-notice/browser.json

@@ -3,9 +3,11 @@
         {
             "if-not-flag": "ebayui-no-skin",
             "dependencies": [
-                "@ebay/skin/notice"
+                "@ebay/skin/notice",
+                "@ebay/skin/icon/foreground"
             ]
         },
+        "../ebay-icon",
         "require: marko-widgets",
         "require: ./index.js"
     ]

src/components/ebay-notice/examples/11-window-notice/template.marko

@@ -8,12 +8,11 @@
 <div class="demo1-container">
     <ebay-notice
         type="window"
-        a11y-heading-text="information">
-        <ebay-notice-title>Congrats</ebay-notice-title>
+        a11y-heading-text="Success!">
+        <ebay-notice-title>Your first order has been placed!</ebay-notice-title>
         <ebay-notice-content>
-            <p><strong>Congrats!</strong> You just listed <a href="#">"Spam and Eggs From the Cow's Perspective</a> (paperback)."</p>
-            <p>You can check <a href="#">your listing</a> or <a href="#">sell another item</a></p>
+            <p>You'll get a confirmation email soon. The rest of your items are now ready to checkout.</p>
         </ebay-notice-content>
-        <ebay-button priority="none" size="large">Action Button</ebay-button>
+        <ebay-button priority="none" size="large">Continue</ebay-button>
     </ebay-notice>
 </div>

src/components/ebay-notice/examples/12-window-notice-fill/template.marko

@@ -9,12 +9,11 @@
 </style>
 
 <div class="demo2-container">
-    <ebay-notice type="window" fill>
-        <ebay-notice-title>Congrats</ebay-notice-title>
+    <ebay-notice type="window" a11y-heading-text="Success!" fill-window>
+        <ebay-notice-title>Your first order has been placed!</ebay-notice-title>
         <ebay-notice-content>
-            <p><strong>Congrats!</strong> You just listed <a href="#">"Spam and Eggs From the Cow's Perspective</a> (paperback)."</p>
-            <p>You can check <a href="#">your listing</a> or <a href="#">sell another item</a></p>
+            <p>You'll get a confirmation email soon. The rest of your items are now ready to checkout.</p>
         </ebay-notice-content>
-        <ebay-button priority="none" size="large">Action Button</ebay-button>
+        <ebay-button priority="none" size="large">Continue</ebay-button>
     </ebay-notice>
 </div>

src/components/ebay-notice/template.marko

@@ -1,6 +1,6 @@
 <script marko-init>
     var processHtmlAttributes = require("../../common/html-attributes");
-    var ignoredAttributes = ["class",  "style",  "type",  "fill", "status",  "hidden",  "a11yHeadingText",  "a11yHeadingTag",  "a11yCloseText",  "dismissible",  "content", "title"];
+    var ignoredAttributes = ["class",  "style",  "type",  "fillWindow", "status",  "hidden",  "a11yHeadingText",  "a11yHeadingTag",  "a11yCloseText",  "dismissible",  "content", "title"];
     var itemIgnoredAttributes = ["class", "style"];
 </script>
 <var type=(data.type || "page")/>
@@ -27,24 +27,31 @@
         class=[
             "${type}-notice",
             !isLightGuidance && !isWindow ? "${type}-notice--${status}" : "",
-            data.fill ? "${type}-notice--fill" : "",
+            data.fillWindow ? "${type}-notice--fill" : "",
             data.class
         ]>
         <if(!isLightGuidance)>
             <${isPage ? data.a11yHeadingTag || "h2" : "span"}
                 class="${type}-notice__status"
                 w-id="status">
                 <if(isWindow && title && title.renderBody)>
-                    <span class="${type}-notice__icon" aria-label=data.a11yHeadingText role="img"/>
+                    <ebay-icon class="window-notice__icon" type="inline" name="confirmation-filled" aria-label=data.a11yHeadingText/>
                     <span class=["${type}-notice__title", title.class]
                         style=title.style
                         ${processHtmlAttributes(title, itemIgnoredAttributes)}
                         w-body=title.renderBody/>
                 </if>
                 <else>
-                    <span aria-label=data.a11yHeadingText role="img"/>
+                    <if(status==="confirmation" || status==="celebration")>
+                        <ebay-icon type="inline" name="confirmation-filled" aria-label=data.a11yHeadingText/>
+                    </if>
+                    <if(status==="attention")>
+                        <ebay-icon type="inline" name="attention-filled" aria-label=data.a11yHeadingText/>
+                    </if>
+                    <if(status==="information")>
+                        <ebay-icon type="inline" name="information-filled" aria-label=data.a11yHeadingText/>
+                    </if>
                 </else>
-
             </>
         </if>
        <if(content && content.renderBody)>

src/components/ebay-notice/test/test.server.js

@@ -168,7 +168,7 @@ describe('notice', () => {
         });
 
         it('renders fill window', async() => {
-            const input = assign({}, mock.Window_Notice, { fill: true });
+            const input = assign({}, mock.Window_Notice, { fillWindow: true });
             const { getByText } = await render(template, input);
             const container = getByText(input.content.renderBody.text).parentElement;
             expect(container).has.class('window-notice');