Merge pull request #56 from studio24/feature/update-note-component

feat: Add bg image to notes component, update styles and advice

assets-src/styles/sass/30-base/_icons.scss

@@ -1,5 +1,8 @@
 /*------------------------------------*\
     #Icons
+
+    1. Make SVG using currentColor pick up correct Windows High Contrast Mode color
+    See: https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/
 \*------------------------------------*/
 
 /**
@@ -8,6 +11,10 @@ Icons are sized relative to font size, thanks to the em unit.
 .icon {
 	block-size: 0.75em;
 	inline-size: 0.75em;
+
+    svg {
+        forced-color-adjust: auto; /* 1 */
+    }
 }
 
 

assets-src/styles/sass/50-core-components/_notes.scss

@@ -1,46 +1,58 @@
 /*------------------------------------*\
     #Notes
-
-    1. The `stack` mixin applies flexbox in the column direction,
-    so we need to prevent things like buttons and links
-    from stretching horizontally
 \*------------------------------------*/
 
 .note {
-	@include stack;
-	align-items: flex-start; /* 1 */
-	border-width: rem(5);
+    background-position: rem(24) rem(24);
+    background-repeat: no-repeat;
+    background-size: rem(32);
+    border: solid 1px;
+    border-inline-start-width: 4px;
+    padding: rem(24);
+    padding-inline-start: rem(72);
 
 	> * {
 		max-inline-size: rem($text-measure);
+
+        &:first-child {
+            margin-block-start: 0;
+        }
+
+        &:last-child,
+        li:last-child {
+            margin-block-end: 0;
+        }
 	}
 }
 
 
 .note--error {
-	border-color: $error-border-color;
+    background-color: $error-bg-color;
+    background-image: url(../svg/note-bg-error.svg);
+    border-color: $error-border-color;
+    color: $error-color;
 }
 
 
 .note--info {
-	border-color: $info-border-color;
+    background-color: $info-bg-color;
+    background-image: url(../svg/note-bg-info.svg);
+    border-color: $info-border-color;
+    color: $info-color;
 }
 
 
 .note--success {
-	border-color: $success-border-color;
+    background-color: $success-bg-color;
+    background-image: url(../svg/note-bg-success.svg);
+    border-color: $success-border-color;
+    color: $success-color;
 }
 
 
 .note--warning {
-	border-color: $warning-border-color;
-}
-
-
-.note__heading {
-    margin-block-start: 0;
-}
-
-.note > *:last-child {
-    margin-block-end: 0;
+    background-color: $warning-bg-color;
+    background-image: url(../svg/note-bg-warning.svg);
+    border-color: $warning-border-color;
+    color: $warning-color;
 }

web/amplify/core-components/notes.html

@@ -124,6 +124,8 @@ <h2 class="note__heading">Error note heading</h2>
 					</div>
 					<div class="component component--text">
 						<h2>Considerations</h2>
+						<p>Because the icons are background images, they may not display well in Windows High Contrast Mode. So make sure that the heading text clearly indicates the nature of the note: is it giving a warning? Has there been an error? Or is it confirming something?</p>
+						<h3>ARIA live regions</h3>
 						<p>Note the use of <code>role="status"</code> and <code>role="alert"</code>. Both create an ARIA live region.</p>
 						<p>If the content of the note is advisory information not important enough to justify an alert, use <code>role="status"</code>. When added to an element, the browser will send out an accessible status event to assistive technologies, which can then notify the user about it.</p>
 						<p>For error messages, use <code>role="alert"</code>. The alert role should read out content that has changed, or bring the user's attention to it immediately, so it should not be used for static content or used regularly. Alerts, by definition, are disruptive. Lots of alerts at once or unnecessary alerts will create a bad user experience.</p>

web/dist/styles/core.css

@@ -2215,50 +2215,56 @@ main,
 
 /*------------------------------------*\
     #Notes
-
-    1. The `stack` mixin applies flexbox in the column direction,
-    so we need to prevent things like buttons and links
-    from stretching horizontally
 \*------------------------------------*/
 .note {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start; /* 1 */
-  border-width: 0.3125rem;
-}
-.note > * + * {
-  -webkit-margin-before: 1em;
-          margin-block-start: 1em;
+  background-position: 1.5rem 1.5rem;
+  background-repeat: no-repeat;
+  background-size: 2rem;
+  border: solid 1px;
+  border-inline-start-width: 4px;
+  padding: 1.5rem;
+  -webkit-padding-start: 4.5rem;
+          padding-inline-start: 4.5rem;
 }
 .note > * {
   max-inline-size: 41.25rem;
 }
+.note > *:first-child {
+  -webkit-margin-before: 0;
+          margin-block-start: 0;
+}
+.note > *:last-child,
+.note > * li:last-child {
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
+}
 
 .note--error {
+  background-color: #fef1f1;
+  background-image: url(../svg/note-bg-error.svg);
   border-color: #f85156;
+  color: #a4141b;
 }
 
 .note--info {
+  background-color: #e9f6ff;
+  background-image: url(../svg/note-bg-info.svg);
   border-color: #1b90f4;
+  color: #063a69;
 }
 
 .note--success {
+  background-color: #d6fedc;
+  background-image: url(../svg/note-bg-success.svg);
   border-color: #2dc158;
+  color: #115f28;
 }
 
 .note--warning {
+  background-color: #fef3da;
+  background-image: url(../svg/note-bg-warning.svg);
   border-color: #c3a62c;
-}
-
-.note__heading {
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
-}
-
-.note > *:last-child {
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
+  color: #605111;
 }
 
 /*------------------------------------*\