From fd41a30880680a8c02f2f12772f2e237b827e2d9 Mon Sep 17 00:00:00 2001
From: Luiza Mendes <31076607+luizamendes@users.noreply.github.com>
Date: Mon, 16 Aug 2021 05:53:18 -0300
Subject: [PATCH] feat: adding hideCloseButton prop to cv-inline-notification
 (#1233)

Co-authored-by: Luiza <luizaleitemendes@ibm.com>
Co-authored-by: Lee Chase <leechase@live.com>
---
 .../cv-inline-notification.test.js.snap       | 60 +++++++++++++++++++
 .../__tests__/cv-inline-notification.test.js  | 11 +++-
 .../cv-inline-notification.vue                |  2 +
 .../stories/cv-inline-notification-story.js   |  6 ++
 4 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/packages/core/__tests__/__snapshots__/cv-inline-notification.test.js.snap b/packages/core/__tests__/__snapshots__/cv-inline-notification.test.js.snap
index 972b362ee..20a6ad9d1 100644
--- a/packages/core/__tests__/__snapshots__/cv-inline-notification.test.js.snap
+++ b/packages/core/__tests__/__snapshots__/cv-inline-notification.test.js.snap
@@ -1,5 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CvInlineNotification should not render close button when hideCloseButton is true 1`] = `
+<div data-notification="" role="alert" class="cv-inline-notification bx--inline-notification bx--inline-notification--error">
+  <div class="bx--inline-notification__details">
+    <anonymous-stub class="bx--inline-notification__icon"></anonymous-stub>
+    <div class="bx--inline-notification__text-wrapper">
+      <p class="bx--inline-notification__title"></p>
+      <p class="bx--inline-notification__subtitle"></p>
+    </div>
+  </div> <button type="button" class="bx--inline-notification__action-button bx--btn bx--btn--sm bx--btn--ghost">
+    test action label
+  </button>
+  <!---->
+</div>
+`;
+
+exports[`CvInlineNotification should not render close button when hideCloseButton is true 2`] = `
+<div data-notification="" aria-live="polite" class="cv-inline-notification bx--inline-notification bx--inline-notification--info">
+  <div class="bx--inline-notification__details">
+    <anonymous-stub class="bx--inline-notification__icon"></anonymous-stub>
+    <div class="bx--inline-notification__text-wrapper">
+      <p class="bx--inline-notification__title"></p>
+      <p class="bx--inline-notification__subtitle"></p>
+    </div>
+  </div> <button type="button" class="bx--inline-notification__action-button bx--btn bx--btn--sm bx--btn--ghost">
+    test action label
+  </button>
+  <!---->
+</div>
+`;
+
+exports[`CvInlineNotification should not render close button when hideCloseButton is true 3`] = `
+<div data-notification="" role="alert" class="cv-inline-notification bx--inline-notification bx--inline-notification--warning">
+  <div class="bx--inline-notification__details">
+    <anonymous-stub class="bx--inline-notification__icon"></anonymous-stub>
+    <div class="bx--inline-notification__text-wrapper">
+      <p class="bx--inline-notification__title"></p>
+      <p class="bx--inline-notification__subtitle"></p>
+    </div>
+  </div> <button type="button" class="bx--inline-notification__action-button bx--btn bx--btn--sm bx--btn--ghost">
+    test action label
+  </button>
+  <!---->
+</div>
+`;
+
+exports[`CvInlineNotification should not render close button when hideCloseButton is true 4`] = `
+<div data-notification="" aria-live="polite" class="cv-inline-notification bx--inline-notification bx--inline-notification--success">
+  <div class="bx--inline-notification__details">
+    <anonymous-stub class="bx--inline-notification__icon"></anonymous-stub>
+    <div class="bx--inline-notification__text-wrapper">
+      <p class="bx--inline-notification__title"></p>
+      <p class="bx--inline-notification__subtitle"></p>
+    </div>
+  </div> <button type="button" class="bx--inline-notification__action-button bx--btn bx--btn--sm bx--btn--ghost">
+    test action label
+  </button>
+  <!---->
+</div>
+`;
+
 exports[`CvInlineNotification should render correctly 1`] = `
 <div data-notification="" role="alert" class="cv-inline-notification bx--inline-notification bx--inline-notification--error">
   <div class="bx--inline-notification__details">
diff --git a/packages/core/__tests__/cv-inline-notification.test.js b/packages/core/__tests__/cv-inline-notification.test.js
index 899210c33..4917907d9 100644
--- a/packages/core/__tests__/cv-inline-notification.test.js
+++ b/packages/core/__tests__/cv-inline-notification.test.js
@@ -13,7 +13,7 @@ describe('CvInlineNotification', () => {
   // ***************
   // PROP CHECKS
   // ***************
-  testComponent.propsAreType(CvInlineNotification, ['lowContrast'], Boolean);
+  testComponent.propsAreType(CvInlineNotification, ['lowContrast', 'hideCloseButton'], Boolean);
   testComponent.propsAreType(CvInlineNotification, ['actionLabel', 'closeAriaLabel', 'kind'], String);
   testComponent.propsHaveDefault(CvInlineNotification, ['closeAriaLabel', 'kind', 'actionLabel']);
 
@@ -56,6 +56,15 @@ describe('CvInlineNotification', () => {
     }
   });
 
+  it('should not render close button when hideCloseButton is true', async () => {
+    const propsData = { lowContrast: false, kind: '', actionLabel: 'test action label', hideCloseButton: true };
+    for (const kind of kinds) {
+      propsData.kind = kind;
+      const wrapper = await shallow(CvInlineNotification, { propsData });
+      expect(wrapper.html()).toMatchSnapshot();
+    }
+  });
+
   // ***************
   // FUNCTIONAL TESTS
   // ***************
diff --git a/packages/core/src/components/cv-inline-notification/cv-inline-notification.vue b/packages/core/src/components/cv-inline-notification/cv-inline-notification.vue
index 441df0eab..633a3618e 100644
--- a/packages/core/src/components/cv-inline-notification/cv-inline-notification.vue
+++ b/packages/core/src/components/cv-inline-notification/cv-inline-notification.vue
@@ -34,6 +34,7 @@
       {{ actionLabel }}
     </button>
     <button
+      v-if="!hideCloseButton"
       type="button"
       :aria-label="closeAriaLabel"
       data-notification-btn
@@ -66,6 +67,7 @@ export default {
       validator: val => ['error', 'info', 'warning', 'success'].includes(val),
     },
     lowContrast: Boolean,
+    hideCloseButton: Boolean,
   },
   computed: {
     icon() {
diff --git a/storybook/stories/cv-inline-notification-story.js b/storybook/stories/cv-inline-notification-story.js
index d9447abe0..e91427b9c 100644
--- a/storybook/stories/cv-inline-notification-story.js
+++ b/storybook/stories/cv-inline-notification-story.js
@@ -51,6 +51,12 @@ const preKnobs = {
     config: ['Low contrast', false],
     prop: 'low-contrast',
   },
+  hideCloseButton: {
+    group: 'attr',
+    type: boolean,
+    config: ['Hide close button', false],
+    prop: 'hide-close-button',
+  },
 };
 
 const variants = [