fix(InlineNotification): address QA updates (#1937)

- match subTitle text to title text - add tests and snapshots
chanzuckerberg · May 14, 2024 · d96ab79 · d96ab79
1 parent 3aa5c94
commit d96ab79
Show file tree

Hide file tree

Showing 4 changed files with 209 additions and 9 deletions.
diff --git a/src/components/InlineNotification/InlineNotification-v2.module.css b/src/components/InlineNotification/InlineNotification-v2.module.css
@@ -48,7 +48,3 @@
 .inline-notification__body {
   flex-grow: 2;
 }
-
-.inline-notification__sub-title {
-  color: var(--eds-theme-color-text-utility-default-secondary)
-}
diff --git a/src/components/InlineNotification/InlineNotification-v2.test.ts b/src/components/InlineNotification/InlineNotification-v2.test.ts
@@ -0,0 +1,7 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import type { StoryFile } from '@storybook/testing-react';
+import * as stories from './InlineNotification-v2.stories';
+
+describe('<InlineNotification /> (v2)', () => {
+  generateSnapshots(stories as StoryFile);
+});
diff --git a/src/components/InlineNotification/InlineNotification-v2.tsx b/src/components/InlineNotification/InlineNotification-v2.tsx
@@ -65,11 +65,7 @@ export const InlineNotification = ({
           {title}
         </Text>
         {subTitle && (
-          <Text
-            as="div"
-            className={styles[`inline-notification__sub-title`]}
-            preset="body-xs"
-          >
+          <Text as="div" preset="body-xs">
             {subTitle}
           </Text>
         )}

diff --git a/src/components/InlineNotification/__snapshots__/InlineNotification-v2.test.ts.snap b/src/components/InlineNotification/__snapshots__/InlineNotification-v2.test.ts.snap
@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<InlineNotification /> (v2) Critical story renders snapshot 1`] = `
+<div
+  class="inline-notification inline-notification--status-critical"
+>
+  <svg
+    aria-hidden="true"
+    class="icon inline-notification__icon"
+    fill="currentColor"
+    height="1rem"
+    style="--icon-size: 1rem;"
+    viewBox="0 0 24 24"
+    width="1rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
+    />
+  </svg>
+  <div
+    class="inline-notication__body"
+  >
+    <div
+      class="text text--title-xs inline-notification__title"
+    >
+      Inline notifications lorem ipsum text
+    </div>
+    <div
+      class="text text--body-xs"
+    >
+      Additional text which provides additional detail
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<InlineNotification /> (v2) Default story renders snapshot 1`] = `
+<div
+  class="inline-notification inline-notification--status-informational"
+>
+  <svg
+    aria-hidden="true"
+    class="icon inline-notification__icon"
+    fill="currentColor"
+    height="1rem"
+    style="--icon-size: 1rem;"
+    viewBox="0 0 24 24"
+    width="1rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
+    />
+  </svg>
+  <div
+    class="inline-notication__body"
+  >
+    <div
+      class="text text--title-xs inline-notification__title"
+    >
+      Inline notifications lorem ipsum text
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<InlineNotification /> (v2) Favorable story renders snapshot 1`] = `
+<div
+  class="inline-notification inline-notification--status-favorable"
+>
+  <svg
+    aria-hidden="true"
+    class="icon inline-notification__icon"
+    fill="currentColor"
+    height="1rem"
+    style="--icon-size: 1rem;"
+    viewBox="0 0 24 24"
+    width="1rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
+    />
+  </svg>
+  <div
+    class="inline-notication__body"
+  >
+    <div
+      class="text text--title-xs inline-notification__title"
+    >
+      Inline notifications lorem ipsum text
+    </div>
+    <div
+      class="text text--body-xs"
+    >
+      Additional text which provides additional detail
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<InlineNotification /> (v2) LongText story renders snapshot 1`] = `
+<div
+  class="inline-notification inline-notification--status-informational"
+>
+  <svg
+    aria-hidden="true"
+    class="icon inline-notification__icon"
+    fill="currentColor"
+    height="1rem"
+    style="--icon-size: 1rem;"
+    viewBox="0 0 24 24"
+    width="1rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
+    />
+  </svg>
+  <div
+    class="inline-notication__body"
+  >
+    <div
+      class="text text--title-xs inline-notification__title"
+    >
+      Long text inline notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<InlineNotification /> (v2) Warning story renders snapshot 1`] = `
+<div
+  class="inline-notification inline-notification--status-warning"
+>
+  <svg
+    aria-hidden="true"
+    class="icon inline-notification__icon"
+    fill="currentColor"
+    height="1rem"
+    style="--icon-size: 1rem;"
+    viewBox="0 0 24 24"
+    width="1rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.72503 20C2.5417 20 2.37503 19.9542 2.22503 19.8625C2.07503 19.7708 1.95837 19.65 1.87503 19.5C1.7917 19.35 1.74587 19.1875 1.73753 19.0125C1.7292 18.8375 1.77503 18.6667 1.87503 18.5L11.125 2.5C11.225 2.33333 11.3542 2.20833 11.5125 2.125C11.6709 2.04167 11.8334 2 12 2C12.1667 2 12.3292 2.04167 12.4875 2.125C12.6459 2.20833 12.775 2.33333 12.875 2.5L22.125 18.5C22.225 18.6667 22.2709 18.8375 22.2625 19.0125C22.2542 19.1875 22.2084 19.35 22.125 19.5C22.0417 19.65 21.925 19.7708 21.775 19.8625C21.625 19.9542 21.4584 20 21.275 20H2.72503ZM12 17C12.2834 17 12.5209 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5209 15.0958 12.2834 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0959 15.4792 11 15.7167 11 16C11 16.2833 11.0959 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 14C12.2834 14 12.5209 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V10C13 9.71667 12.9042 9.47917 12.7125 9.2875C12.5209 9.09583 12.2834 9 12 9C11.7167 9 11.4792 9.09583 11.2875 9.2875C11.0959 9.47917 11 9.71667 11 10V13C11 13.2833 11.0959 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14Z"
+    />
+  </svg>
+  <div
+    class="inline-notication__body"
+  >
+    <div
+      class="text text--title-xs inline-notification__title"
+    >
+      Inline notifications lorem ipsum text
+    </div>
+    <div
+      class="text text--body-xs"
+    >
+      Additional text which provides additional detail
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<InlineNotification /> (v2) WithSubTitle story renders snapshot 1`] = `
+<div
+  class="inline-notification inline-notification--status-informational"
+>
+  <svg
+    aria-hidden="true"
+    class="icon inline-notification__icon"
+    fill="currentColor"
+    height="1rem"
+    style="--icon-size: 1rem;"
+    viewBox="0 0 24 24"
+    width="1rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
+    />
+  </svg>
+  <div
+    class="inline-notication__body"
+  >
+    <div
+      class="text text--title-xs inline-notification__title"
+    >
+      Inline notifications lorem ipsum text
+    </div>
+    <div
+      class="text text--body-xs"
+    >
+      Additional text which provides additional detail
+    </div>
+  </div>
+</div>
+`;