Merge release/2.0.4 into main branch (#964)

* add feature variant to Alert / Callout, un-publish announcement variant (#963)

Author: github-actions[bot]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "dependencies": {
     "react-bootstrap": "^2.5.0",
     "react-currency-input-field": "^3.6.10",

spec/__snapshots__/Storyshots.test.js.snap

@@ -1091,18 +1091,18 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components/Alert Announcement 1`] = `
+exports[`Storyshots Components/Alert Error 1`] = `
 <div
-  className="Alert Alert-announcement"
+  className="Alert Alert-error"
   style={null}
 >
   <div
     className="Alert__icon"
   >
     <svg
       aria-hidden="true"
-      className="svg-inline--fa fa-bullhorn "
-      data-icon="bullhorn"
+      className="svg-inline--fa fa-exclamation-triangle "
+      data-icon="exclamation-triangle"
       data-prefix="fas"
       focusable="false"
       role="img"
@@ -1123,7 +1123,7 @@ exports[`Storyshots Components/Alert Announcement 1`] = `
           transform="translate(0, 0)  scale(1.125, 1.125)  rotate(0 0 0)"
         >
           <path
-            d="M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z"
+            d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
             fill="currentColor"
             style={Object {}}
             transform="translate(-288 -256)"
@@ -1138,29 +1138,30 @@ exports[`Storyshots Components/Alert Announcement 1`] = `
     <div
       className="Alert__title"
     >
-      Announcement title
+      Error title
     </div>
     <div
       className="Alert__message"
+      tabIndex={-1}
     >
-      Announcement message
+      Error message
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots Components/Alert Error 1`] = `
+exports[`Storyshots Components/Alert Feature 1`] = `
 <div
-  className="Alert Alert-error"
+  className="Alert Alert-feature"
   style={null}
 >
   <div
     className="Alert__icon"
   >
     <svg
       aria-hidden="true"
-      className="svg-inline--fa fa-exclamation-triangle "
-      data-icon="exclamation-triangle"
+      className="svg-inline--fa fa-bullhorn "
+      data-icon="bullhorn"
       data-prefix="fas"
       focusable="false"
       role="img"
@@ -1181,7 +1182,7 @@ exports[`Storyshots Components/Alert Error 1`] = `
           transform="translate(0, 0)  scale(1.125, 1.125)  rotate(0 0 0)"
         >
           <path
-            d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+            d="M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z"
             fill="currentColor"
             style={Object {}}
             transform="translate(-288 -256)"
@@ -1196,13 +1197,12 @@ exports[`Storyshots Components/Alert Error 1`] = `
     <div
       className="Alert__title"
     >
-      Error title
+      New feature alert!
     </div>
     <div
       className="Alert__message"
-      tabIndex={-1}
     >
-      Error message
+      Some context around new feature if needed.
     </div>
   </div>
 </div>
@@ -1720,16 +1720,16 @@ Array [
     </div>
   </div>,
   <div
-    className="Alert Alert-announcement"
+    className="Alert Alert-error"
     style={null}
   >
     <div
       className="Alert__icon"
     >
       <svg
         aria-hidden="true"
-        className="svg-inline--fa fa-bullhorn "
-        data-icon="bullhorn"
+        className="svg-inline--fa fa-exclamation-triangle "
+        data-icon="exclamation-triangle"
         data-prefix="fas"
         focusable="false"
         role="img"
@@ -1750,7 +1750,7 @@ Array [
             transform="translate(0, 0)  scale(1.125, 1.125)  rotate(0 0 0)"
           >
             <path
-              d="M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z"
+              d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
               fill="currentColor"
               style={Object {}}
               transform="translate(-288 -256)"
@@ -1765,19 +1765,20 @@ Array [
       <div
         className="Alert__title"
       >
-        Announcement title
+        Error title
       </div>
       <div
         className="Alert__message"
+        tabIndex={-1}
       >
-        Announcement message
+        Error message
       </div>
     </div>
     <div
       className="Alert__action"
     >
       <a
-        className="Alert-announcement primary-action"
+        className="Alert-error primary-action"
         href="https://www.userinterviews.com/"
         rel="noopener noreferrer"
       >
@@ -1788,7 +1789,7 @@ Array [
       className="Alert__close"
     >
       <button
-        aria-label="close announcement"
+        aria-label="close error"
         className="close"
         onClick={[Function]}
         type="button"
@@ -1814,7 +1815,7 @@ Array [
     </div>
   </div>,
   <div
-    className="Alert Alert-error"
+    className="Alert Alert-warning"
     style={null}
   >
     <div
@@ -1859,20 +1860,19 @@ Array [
       <div
         className="Alert__title"
       >
-        Error title
+        Warning title
       </div>
       <div
         className="Alert__message"
-        tabIndex={-1}
       >
-        Error message
+        Warning message
       </div>
     </div>
     <div
       className="Alert__action"
     >
       <a
-        className="Alert-error primary-action"
+        className="Alert-warning primary-action"
         href="https://www.userinterviews.com/"
         rel="noopener noreferrer"
       >
@@ -1883,7 +1883,7 @@ Array [
       className="Alert__close"
     >
       <button
-        aria-label="close error"
+        aria-label="close warning"
         className="close"
         onClick={[Function]}
         type="button"
@@ -1909,16 +1909,16 @@ Array [
     </div>
   </div>,
   <div
-    className="Alert Alert-warning"
+    className="Alert Alert-feature"
     style={null}
   >
     <div
       className="Alert__icon"
     >
       <svg
         aria-hidden="true"
-        className="svg-inline--fa fa-exclamation-triangle "
-        data-icon="exclamation-triangle"
+        className="svg-inline--fa fa-bullhorn "
+        data-icon="bullhorn"
         data-prefix="fas"
         focusable="false"
         role="img"
@@ -1939,7 +1939,7 @@ Array [
             transform="translate(0, 0)  scale(1.125, 1.125)  rotate(0 0 0)"
           >
             <path
-              d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+              d="M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z"
               fill="currentColor"
               style={Object {}}
               transform="translate(-288 -256)"
@@ -1954,19 +1954,19 @@ Array [
       <div
         className="Alert__title"
       >
-        Warning title
+        New feature alert!
       </div>
       <div
         className="Alert__message"
       >
-        Warning message
+        Some context around new feature if needed
       </div>
     </div>
     <div
       className="Alert__action"
     >
       <a
-        className="Alert-warning primary-action"
+        className="Alert-feature primary-action"
         href="https://www.userinterviews.com/"
         rel="noopener noreferrer"
       >
@@ -1977,7 +1977,7 @@ Array [
       className="Alert__close"
     >
       <button
-        aria-label="close warning"
+        aria-label="close feature"
         className="close"
         onClick={[Function]}
         type="button"

src/Alert/Alert.jsx

@@ -18,6 +18,7 @@ export const MessageTypes = {
   SUCCESS: 'success',
   INFO: 'info',
   ANNOUNCEMENT: 'announcement',
+  FEATURE: 'feature',
   WARNING: 'warning',
   ERROR: 'error',
 };
@@ -40,6 +41,8 @@ const getAlertIcon = (type) => {
       );
     case MessageTypes.ANNOUNCEMENT:
       return (<FontAwesomeIcon icon={faBullhorn} transform="grow-2" />);
+    case MessageTypes.FEATURE:
+      return (<FontAwesomeIcon icon={faBullhorn} transform="grow-2" />);
     case MessageTypes.WARNING:
       return (<FontAwesomeIcon icon={faExclamationTriangle} transform="grow-2" />);
     case MessageTypes.ERROR:

src/Alert/Alert.mdx

@@ -14,14 +14,6 @@ import * as ComponentStories from './Alert.stories';
 
 <Canvas of={ComponentStories.Success} />
 
-### When to use 
-- Reason 1
-- Reason 2
-
-### When to not use
-- Reason 1
-- Reason 2
-
 ## Props
 
 <ArgTypes of={Alert} />
@@ -41,6 +33,13 @@ page and are not affected by an event.
 
 <Canvas of={ComponentStories.Info} />
 
+### Feature
+
+- Use when showcasing a new feature to a user.
+- NOTE: use this variant instead of the Announcement variant (this will be deprecated soon)
+
+<Canvas of={ComponentStories.Feature} />
+
 ### Error
 
 - Used when something did not go as planned, and action is needed to proceed.

src/Alert/Alert.scss

@@ -145,6 +145,20 @@
   }
 }
 
+.Alert-feature {
+  background-color: $ux-teal-100;
+  color: $ux-teal-800;
+  border: 2px solid $ux-teal-600;
+
+  .close {
+    @include close-action($ux-teal-600, $ux-teal-800)
+  }
+
+  .primary-action {
+    @include primary-action($ux-teal-600, $ux-teal-700, $ux-white)
+  }
+}
+
 .Alert-warning {
   background-color: $ux-yellow-100;
   color: $ux-yellow-900;

src/Alert/Alert.stories.jsx

@@ -42,13 +42,13 @@ export const Info = () => (
   />
 );
 
-export const Announcement = () => (
+export const Feature = () => (
   <Alert
     id="3"
-    message={text('Message', 'Announcement message')}
+    message={text('Message', 'Some context around new feature if needed.')}
     removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'Announcement title')}
-    type={MessageTypes.ANNOUNCEMENT}
+    title={text('Title', 'New feature alert!')}
+    type={MessageTypes.FEATURE}
   />
 );
 
@@ -128,15 +128,6 @@ export const WithCallToAction = () => (
       type={MessageTypes.INFO}
       onDismiss={onDismiss}
     />
-    <Alert
-      action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
-      id="10"
-      message="Announcement message"
-      removeBorderLeft={boolean('removeBorderLeft', false)}
-      title="Announcement title"
-      type={MessageTypes.ANNOUNCEMENT}
-      onDismiss={onDismiss}
-    />
     <Alert
       action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
       id="11"
@@ -155,6 +146,15 @@ export const WithCallToAction = () => (
       type={MessageTypes.WARNING}
       onDismiss={onDismiss}
     />
+    <Alert
+      action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
+      id="13"
+      message="Some context around new feature if needed"
+      removeBorderLeft={boolean('removeBorderLeft', false)}
+      title="New feature alert!"
+      type={MessageTypes.FEATURE}
+      onDismiss={onDismiss}
+    />
 
     <p>Custom CTA via <code>message</code> prop</p>
     <Alert